From 5f677128141f3f7042af353dcaaeb67a1fb6df27 Mon Sep 17 00:00:00 2001 From: Mohamed Abuelanin Date: Sat, 2 Nov 2024 14:40:23 -0700 Subject: [PATCH 1/8] initial filters implemented --- index.html | 342 ++++++++++++++++++++++++++++++++++++----------- snipe-explore.js | 2 +- styles.css | 97 +++++++++++++- 3 files changed, 360 insertions(+), 81 deletions(-) diff --git a/index.html b/index.html index 22eae71..eb7d1b8 100644 --- a/index.html +++ b/index.html @@ -1020,6 +1020,20 @@
Plot ${plotCounte document.getElementById(`close-plot-${plotId}`).addEventListener('click', () => closePlot(plotId)); document.getElementById(`clone-plot-${plotId}`).addEventListener('click', () => clonePlot(plotId)); + const plotHeader = document.querySelector(`#container-${plotId} .card-header`); + const filterButton = document.createElement('button'); + filterButton.id = `filter-plot-${plotId}`; + filterButton.className = 'btn btn-light btn-sm mr-1'; + filterButton.title = 'Filter'; + filterButton.innerHTML = ''; + plotHeader.appendChild(filterButton); + + // Event listener for Filter button + filterButton.addEventListener('click', () => { + openFilterModal(plotId); + }); + + // Initialize plot if (!config.plotType) { updatePlot(plotId); @@ -1645,12 +1659,42 @@
Plot ${plotCounte const assayTypeCheckboxes = document.querySelectorAll(`#assay-type-checkboxes-${plotId} input[name="assay-type-${plotId}"]:checked`); const selectedAssayTypes = Array.from(assayTypeCheckboxes).map(checkbox => checkbox.value); - currentPlotData = selectedAssayTypes.length > 0 ? data.filter(row => { - const assayType = row["Assay type"] || 'Unknown'; - return selectedAssayTypes.includes(assayType); - }) : data; + let plotDataSet = selectedAssayTypes.length > 0 ? data.filter(row => selectedAssayTypes.includes(row["Assay type"])) : data; + + // Apply filters if any + if (plotFilters[plotId] && plotFilters[plotId].length > 0) { + plotFilters[plotId].forEach(filter => { + const { logic, column, operator, value } = filter; + switch (operator) { + case 'equals': + plotDataSet = logic === 'AND' ? plotDataSet.filter(row => row[column] == value) + : plotDataSet.filter(row => row[column] != value); + break; + case 'not_equals': + plotDataSet = logic === 'AND' ? plotDataSet.filter(row => row[column] != value) + : plotDataSet.filter(row => row[column] == value); + break; + case 'greater_than': + plotDataSet = plotDataSet.filter(row => parseFloat(row[column]) > parseFloat(value)); + break; + case 'less_than': + plotDataSet = plotDataSet.filter(row => parseFloat(row[column]) < parseFloat(value)); + break; + case 'in': + const inValues = value.split(',').map(v => v.trim()); + plotDataSet = plotDataSet.filter(row => inValues.includes(row[column])); + break; + case 'not_in': + const notInValues = value.split(',').map(v => v.trim()); + plotDataSet = plotDataSet.filter(row => !notInValues.includes(row[column])); + break; + default: + break; + } + }); + } - currentPlotData = selectedAssayTypes.length > 0 ? data.filter(row => selectedAssayTypes.includes(row["Assay type"])) : data; + currentPlotData = plotDataSet; if (plotType === 'scatter') { const xAxis = document.getElementById(`x-axis-${plotId}`).value; @@ -2338,6 +2382,7 @@
Plot ${plotCounte } // Updated importSession function + // Update importSession function to restore filters function importSession(jsonData, userData = null) { try { // Show loading modal @@ -2350,6 +2395,7 @@
Plot ${plotCounte plotsContainer.innerHTML = ''; plotCounter = 0; selectedPoints = []; + plotFilters = {}; // Restore species, reference, and amplicon selections document.getElementById('species-select').value = sessionData.selectedSpecies; @@ -2380,7 +2426,7 @@
Plot ${plotCounte // Restore plot type document.getElementById(`plot-type-${plotConfig.plotId}`).value = plotConfig.plotType; - renderDynamicControls(plotConfig.plotId); + renderDynamicControls(plotConfig.plotId, plotConfig); // Restore controls if (plotConfig.plotType === 'scatter') { @@ -2420,6 +2466,11 @@
Plot ${plotCounte document.getElementById(`group-by-${plotConfig.plotId}`).value = plotConfig.controls.groupBy; } + // Collect filters + if (plotConfig.filters && plotConfig.filters.length > 0) { + plotFilters[plotConfig.plotId] = plotConfig.filters; + } + // Restore selected assay types const assayTypeCheckboxes = document.querySelectorAll( `#assay-type-checkboxes-${plotConfig.plotId} input[name="assay-type-${plotConfig.plotId}"]` @@ -2465,9 +2516,10 @@
Plot ${plotCounte // Hide loading modal document.getElementById('loading-modal').style.display = 'none'; }, false); - } catch (error) { - alert('Failed to import session: ' + error.message); - // Hide loading modal in case of error + } + catch (error) { + console.error('Error importing session:', error); + alert('Error importing session. Please check the console for more details.'); document.getElementById('loading-modal').style.display = 'none'; } } @@ -2517,6 +2569,7 @@
Plot ${plotCounte controls: {}, title: document.getElementById(`title-${plotId}`).value, notes: document.getElementById(`notes-${plotId}`).value, + filters: plotFilters[plotId] ? plotFilters[plotId] : [] }; // Collect control values based on plot type @@ -2600,89 +2653,203 @@
Plot ${plotCounte } - // Helper function to collect session data - function collectSessionData() { - const sessionData = { - metadata: { - exportDate: new Date().toISOString(), - dataFilePath: dataFilePath, - }, - selectedSpecies: document.getElementById('species-select').value, - selectedReference: document.getElementById('reference-select').value, - selectedAmplicon: document.getElementById('amplicon-select').value, - plots: [], - selectedPoints: selectedPoints.map(p => p._uniqueId), + + // Add the following JavaScript code at the end of your existing diff --git a/styles.css b/styles.css index 08bc187..dab2beb 100644 --- a/styles.css +++ b/styles.css @@ -1173,3 +1173,139 @@ tr:nth-child(even) { #apply-filters:hover, #reset-filters:hover { background-color: #27ae60; } + + +/* Styles for Loading Modal */ +#loading-modal { + display: none; /* Hidden by default */ + position: fixed; + z-index: 1000; /* Ensure it's on top */ + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.5); /* Semi-transparent background */ +} + +#loading-modal .modal-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px; + border-radius: 8px; + text-align: center; +} + +.spinner { + border: 8px solid #f3f3f3; /* Light grey */ + border-top: 8px solid #3498db; /* Blue */ + border-radius: 50%; + width: 60px; + height: 60px; + animation: spin 2s linear infinite; + margin: 0 auto 10px auto; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Styles for Filter Modal */ +#filter-modal .modal-content { + max-height: 80vh; + overflow-y: auto; + width: 500px; /* Adjust width as needed */ + padding: 20px; + position: relative; + background-color: #fff; + border-radius: 8px; +} + +/* Filter Group Layout */ +.filter-group { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + position: relative; +} + +/* Logic Selector Styling */ +.logic-div { + text-align: center; + width: 100%; +} + +.logic-select { + width: 150px; + margin-bottom: 10px; +} + +/* Condition Div Styling */ +.condition-div { + width: 100%; + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; +} + +/* Remove Button Styling */ +.filter-group .remove-filter-group { + background: none; + border: none; + color: #e74c3c; + cursor: pointer; + font-size: 16px; + position: absolute; + top: 10px; + right: 10px; +} + +/* Action Buttons Styling */ +.button { + margin-top: 10px; + margin-right: 10px; +} + +/* Range Slider Styling */ +.range-slider { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + margin-top: 10px; +} + +.slider-inputs { + display: flex; + align-items: center; + gap: 10px; + width: 100%; +} + +.slider-inputs input[type="number"] { + width: 80px; + padding: 5px; + font-size: 0.9rem; + border: 1px solid #ccc; + border-radius: 4px; +} + +.tags-container .tag { + font-size: 0.9em; +} + +/* Adjust slider width */ +.range-slider { + margin-bottom: 10px; +} + +/* Optional: Adjust the width of the range inputs */ +.range-min, .range-max { + width: 80px; +} \ No newline at end of file From 9439690ae594492de68aaba0fad8408f552e9462 Mon Sep 17 00:00:00 2001 From: Mohamed Abuelanin Date: Sun, 3 Nov 2024 08:14:05 -0800 Subject: [PATCH 3/8] dev checkpoint fixed import --- index.html | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index c612317..8a90e36 100644 --- a/index.html +++ b/index.html @@ -2447,9 +2447,9 @@
Plot ${plotCounte initializeHueSlider(plotConfig.plotId); // Restore slider positions - const xSlider = document.getElementById(`slider-${plotConfig.plotId}-filter-0-range`); // Adjust filter index as needed - const ySlider = document.getElementById(`slider-${plotConfig.plotId}-filter-1-range`); // Adjust filter index as needed - const hueSlider = document.getElementById(`slider-${plotConfig.plotId}-filter-2-range`); // Adjust filter index as needed + const xSlider = document.getElementById(`x-range-slider-${plotConfig.plotId}`); + const ySlider = document.getElementById(`y-range-slider-${plotConfig.plotId}`); + const hueSlider = document.getElementById(`hue-range-slider-${plotConfig.plotId}`); if (xSlider && xSlider.noUiSlider && plotConfig.controls.xRange) { xSlider.noUiSlider.set([plotConfig.controls.xRange.min, plotConfig.controls.xRange.max]); @@ -2462,7 +2462,7 @@
Plot ${plotCounte } } else if (plotConfig.plotType === 'histogram' || plotConfig.plotType === 'boxplot') { plotConfig.controls.numColumns.forEach(col => { - const checkbox = document.getElementById(`num-column-${col}-${plotConfig.plotId}`); + const checkbox = document.querySelector(`#checkbox-group-${plotConfig.plotId} input[value="${col}"]`); if (checkbox) { checkbox.checked = true; } @@ -2470,13 +2470,6 @@
Plot ${plotCounte document.getElementById(`group-by-${plotConfig.plotId}`).value = plotConfig.controls.groupBy; } - // Collect filters - if (plotConfig.filters && plotConfig.filters.length > 0) { - plotConfig.filters.forEach(filterGroup => { - addFilterGroup(filterGroup); - }); - } - // Restore selected assay types const assayTypeCheckboxes = document.querySelectorAll( `#assay-type-checkboxes-${plotConfig.plotId} input[name="assay-type-${plotConfig.plotId}"]` @@ -2485,10 +2478,8 @@
Plot ${plotCounte checkbox.checked = plotConfig.controls.selectedAssayTypes.includes(checkbox.value); }); - // Restore title and notes - document.getElementById(`title-${plotConfig.plotId}`).value = plotConfig.title; - document.getElementById(`plot-title-display-${plotConfig.plotId}`).textContent = plotConfig.title || `Plot ${plotConfig.plotId.split('-')[1]}`; - document.getElementById(`notes-${plotConfig.plotId}`).value = plotConfig.notes; + // Set plot filters from session data + plotFilters[plotConfig.plotId] = plotConfig.filters || []; // Update the plot updatePlot(plotConfig.plotId); From ebfd5a5a080ba31368b647aee4fe5e36562cc8c9 Mon Sep 17 00:00:00 2001 From: Mohamed Abuelanin Date: Sun, 3 Nov 2024 11:37:16 -0800 Subject: [PATCH 4/8] more stable filters, but missing categories --- index.html | 322 +++++++++++++++++++++++++++++------------------------ 1 file changed, 179 insertions(+), 143 deletions(-) diff --git a/index.html b/index.html index 8a90e36..03d8f7c 100644 --- a/index.html +++ b/index.html @@ -895,87 +895,91 @@

Selected Data Points

} - // Updated addNewPlot function function addNewPlot(config = {}) { plotCounter++; const plotId = `plot-${plotCounter}`; let plotHTML = ` -
- -
- -
- -
- - - -
- -
- - - + +
+ +
+ +
+ +
+ + + +
+ +
+ + + +
+
+
+ +
Plot ${plotCounter}
+ +
+ + + + + + + + +
-
- -
Plot ${plotCounter}
- -
- - - - - - - -
-
- -
- -
- -
-
- -
- - -
-
- -
-
- - -
-
- - + +
+ +
+ +
+
+ +
+ + +
+
+ +
+
+ + +
+
+ + +
+
-
-
- `; + `; plotsContainer.insertAdjacentHTML('beforeend', plotHTML); const plotTypeSelect = document.getElementById(`plot-type-${plotId}`); @@ -988,18 +992,21 @@
Plot ${plotCounte } // Attach event listeners - plotTypeSelect.addEventListener('change', () => renderDynamicControls(plotId, config)); + plotTypeSelect.addEventListener('change', () => renderDynamicControls(plotId, {})); titleInput.addEventListener('input', () => { plotTitleDisplay.textContent = titleInput.value || `Plot ${plotCounter}`; }); - // Set title if provided + // Set title and notes if provided if (config.title) { titleInput.value = config.title; plotTitleDisplay.textContent = config.title; } + if (config.notes) { + document.getElementById(`notes-${plotId}`).value = config.notes; + } - // Render dynamic controls with or without config + // Render dynamic controls with config renderDynamicControls(plotId, config); // Attach event listener to the dropdown items @@ -1019,28 +1026,21 @@
Plot ${plotCounte document.getElementById(`maximize-plot-${plotId}`).addEventListener('click', () => maximizePlot(plotId)); document.getElementById(`close-plot-${plotId}`).addEventListener('click', () => closePlot(plotId)); document.getElementById(`clone-plot-${plotId}`).addEventListener('click', () => clonePlot(plotId)); + document.getElementById(`filter-plot-${plotId}`).addEventListener('click', () => openFilterModal(plotId)); - const plotHeader = document.querySelector(`#container-${plotId} .card-header`); - const filterButton = document.createElement('button'); - filterButton.id = `filter-plot-${plotId}`; - filterButton.className = 'btn btn-light btn-sm mr-1'; - filterButton.title = 'Filter'; - filterButton.innerHTML = ''; - plotHeader.appendChild(filterButton); - - // Event listener for Filter button - filterButton.addEventListener('click', () => { - openFilterModal(plotId); - }); - + // Set plotFilters for this plot if filters are provided in config + if (config.filters) { + plotFilters[plotId] = config.filters; + } else { + plotFilters[plotId] = []; + } // Initialize plot - if (!config.plotType) { - updatePlot(plotId); - } + updatePlot(plotId); } + function clonePlot(plotId) { // Gather the configuration of the plot with id plotId const plotType = document.getElementById(`plot-type-${plotId}`).value; @@ -1066,18 +1066,18 @@
Plot ${plotCounte // Sliders: x-range and y-range const xSlider = document.getElementById(`x-range-slider-${plotId}`); if (xSlider && xSlider.noUiSlider) { - config.xRange = xSlider.noUiSlider.get(); + config.xRange = xSlider.noUiSlider.get().map(Number); } const ySlider = document.getElementById(`y-range-slider-${plotId}`); if (ySlider && ySlider.noUiSlider) { - config.yRange = ySlider.noUiSlider.get(); + config.yRange = ySlider.noUiSlider.get().map(Number); } // Hue slider const hueSlider = document.getElementById(`hue-range-slider-${plotId}`); if (hueSlider && hueSlider.noUiSlider) { - config.hueRange = hueSlider.noUiSlider.get(); + config.hueRange = hueSlider.noUiSlider.get().map(Number); } } else if (plotType === 'histogram' || plotType === 'boxplot') { @@ -1088,6 +1088,10 @@
Plot ${plotCounte config.assayTypes = Array.from(assayTypeCheckboxes).map(checkbox => ({ value: checkbox.value, checked: checkbox.checked })); } + // Get the filters from the original plot + const filters = plotFilters[plotId] || []; + config.filters = JSON.parse(JSON.stringify(filters)); // Deep copy to avoid reference issues + addNewPlot(config); // Scroll to the new plot @@ -1100,6 +1104,7 @@
Plot ${plotCounte + function savePlotAsPNG(plotId) { const plotDiv = document.getElementById(plotId); Plotly.toImage(plotDiv, { format: 'png', width: 1200, height: 800 }).then(function (dataUrl) { @@ -1616,6 +1621,59 @@
Plot ${plotCounte } } + function applyFiltersToData(dataSet, filters) { + let filteredData = dataSet; + + filters.forEach((filter, index) => { + const { logic, column, operator, value } = filter; + + const isNumericalFilter = typeof value === 'object' && value.min !== undefined && value.max !== undefined; + let filterFunction; + + if (isNumericalFilter) { + // Numerical filter + filterFunction = (row) => { + const rowValue = parseFloat(row[column]); + return rowValue >= value.min && rowValue <= value.max; + }; + } else { + // Categorical filter + if (operator === 'equals') { + filterFunction = (row) => row[column] == value; + } else if (operator === 'not_equals') { + filterFunction = (row) => row[column] != value; + } else if (operator === 'in' && Array.isArray(value)) { + filterFunction = (row) => value.includes(row[column]); + } else if (operator === 'not_in' && Array.isArray(value)) { + filterFunction = (row) => !value.includes(row[column]); + } else { + // Unknown operator + filterFunction = () => true; + } + } + + if (index === 0) { + // Apply NOT logic if specified in the first filter + if (logic === 'NOT') { + filteredData = filteredData.filter(row => !filterFunction(row)); + } else { + filteredData = filteredData.filter(filterFunction); + } + } else { + if (logic === 'AND') { + filteredData = filteredData.filter(filterFunction); + } else if (logic === 'OR') { + const newData = dataSet.filter(filterFunction); + filteredData = [...new Set([...filteredData, ...newData])]; + } else if (logic === 'NOT') { + filteredData = filteredData.filter(row => !filterFunction(row)); + } + } + }); + + return filteredData; + } + function searchAndSelectPoints(plotId) { const searchInput = document.getElementById(`search-input-${plotId}`); @@ -1663,45 +1721,11 @@
Plot ${plotCounte // Apply filters if any if (plotFilters[plotId] && plotFilters[plotId].length > 0) { - plotFilters[plotId].forEach(filter => { - const { logic, column, operator, value } = filter; - - if (typeof value === 'object' && value.min !== undefined && value.max !== undefined) { - // Numerical filter - plotDataSet = plotDataSet.filter(row => { - const rowValue = parseFloat(row[column]); - return rowValue >= value.min && rowValue <= value.max; - }); - } else if (typeof value === 'string' || Array.isArray(value)) { - // Categorical filter - switch (operator) { - case 'equals': - plotDataSet = logic === 'AND' - ? plotDataSet.filter(row => row[column] == value) - : plotDataSet.filter(row => row[column] != value); - break; - case 'not_equals': - plotDataSet = logic === 'AND' - ? plotDataSet.filter(row => row[column] != value) - : plotDataSet.filter(row => row[column] == value); - break; - case 'in': - if (Array.isArray(value)) { - plotDataSet = plotDataSet.filter(row => value.includes(row[column])); - } - break; - case 'not_in': - if (Array.isArray(value)) { - plotDataSet = plotDataSet.filter(row => !value.includes(row[column])); - } - break; - default: - break; - } - } - }); + plotDataSet = applyFiltersToData(plotDataSet, plotFilters[plotId]); } + currentPlotData = plotDataSet; + currentPlotData = plotDataSet; @@ -2579,10 +2603,10 @@
Plot ${plotCounte plotConfig.controls.yLogScale = document.getElementById(`y-log-scale-${plotId}`).checked; plotConfig.controls.palette = document.getElementById(`palette-${plotId}`).value; - // Save range slider values - const xSlider = document.getElementById(`slider-${plotId}-filter-0-range`); // Adjust filter index as needed - const ySlider = document.getElementById(`slider-${plotId}-filter-1-range`); // Adjust filter index as needed - const hueSlider = document.getElementById(`slider-${plotId}-filter-2-range`); // Adjust filter index as needed + // Save range slider values (using correct IDs) + const xSlider = document.getElementById(`x-range-slider-${plotId}`); + const ySlider = document.getElementById(`y-range-slider-${plotId}`); + const hueSlider = document.getElementById(`hue-range-slider-${plotId}`); if (xSlider && xSlider.noUiSlider) { const [xMin, xMax] = xSlider.noUiSlider.get().map(Number); @@ -2729,6 +2753,7 @@
Plot ${plotCounte function addFilterGroup(existingGroup = null) { const filterGroupsContainer = document.getElementById('filter-groups-container'); + const isFirstGroup = filterGroupsContainer.children.length === 0; const groupDiv = document.createElement('div'); groupDiv.className = 'filter-group'; @@ -2740,13 +2765,23 @@
Plot ${plotCounte const logicSelect = document.createElement('select'); logicSelect.className = 'form-control form-control-sm logic-select'; - logicSelect.innerHTML = ` - - - - `; - if (existingGroup && existingGroup.logic) { - logicSelect.value = existingGroup.logic; + logicSelect.style.width = '80px'; + + if (isFirstGroup) { + logicSelect.innerHTML = ` + + + `; + logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : 'AND'; + } else { + logicSelect.innerHTML = ` + + + + `; + if (existingGroup && existingGroup.logic) { + logicSelect.value = existingGroup.logic; + } } const conditionDiv = document.createElement('div'); @@ -2821,8 +2856,9 @@
Plot ${plotCounte // Create slider div const sliderDiv = document.createElement('div'); sliderDiv.className = 'range-slider'; - sliderDiv.id = `slider-${currentPlotId}-filter-${filterIndex}-range`; // Consistent ID + sliderDiv.id = `slider-${currentFilterPlotId}-filter-${filterIndex}-range`; // Consistent ID sliderDiv.style.marginBottom = '10px'; // Add some spacing + sliderDiv.style.width = '100%'; // Make the slider fill the width // Create min input const minInput = document.createElement('input'); From 65c426ed7c406f67f79059e60d0d6c7134a96fe6 Mon Sep 17 00:00:00 2001 From: Mohamed Abuelanin Date: Sun, 3 Nov 2024 15:33:04 -0800 Subject: [PATCH 5/8] fully stable filters, keep testing --- index.html | 67 ++++++++++++++++++++---------------------------------- 1 file changed, 25 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 03d8f7c..66e1f32 100644 --- a/index.html +++ b/index.html @@ -1638,16 +1638,12 @@
Plot ${plotCounte }; } else { // Categorical filter - if (operator === 'equals') { - filterFunction = (row) => row[column] == value; - } else if (operator === 'not_equals') { - filterFunction = (row) => row[column] != value; - } else if (operator === 'in' && Array.isArray(value)) { + if (operator === 'in' && Array.isArray(value)) { filterFunction = (row) => value.includes(row[column]); } else if (operator === 'not_in' && Array.isArray(value)) { filterFunction = (row) => !value.includes(row[column]); } else { - // Unknown operator + // Unknown operator or missing value filterFunction = () => true; } } @@ -2769,21 +2765,20 @@
Plot ${plotCounte if (isFirstGroup) { logicSelect.innerHTML = ` - + `; - logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : 'AND'; + logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : ''; } else { logicSelect.innerHTML = ` `; - if (existingGroup && existingGroup.logic) { - logicSelect.value = existingGroup.logic; - } + logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : 'AND'; } + // Condition Div const conditionDiv = document.createElement('div'); conditionDiv.className = 'condition-div'; @@ -2800,15 +2795,6 @@
Plot ${plotCounte const operatorSelect = document.createElement('select'); operatorSelect.className = 'form-control form-control-sm operator-select'; - operatorSelect.innerHTML = ` - - - - - `; - if (existingGroup && existingGroup.operator) { - operatorSelect.value = existingGroup.operator; - } const valueInput = document.createElement('div'); // Container for dynamic inputs valueInput.className = 'value-input-container'; @@ -3058,7 +3044,7 @@
Plot ${plotCounte valueInput.innerHTML = ''; // Clear existing content if (!selectedColumn) { - operatorSelect.style.display = 'block'; // Show operator select if no column is selected + operatorSelect.style.display = 'none'; // Hide operator select if no column is selected return; } @@ -3076,6 +3062,17 @@
Plot ${plotCounte // Show operator select for non-numerical columns operatorSelect.style.display = 'block'; + // Set operator options for categorical columns + operatorSelect.innerHTML = ` + + + `; + if (existingGroup && existingGroup.operator) { + operatorSelect.value = existingGroup.operator; + } else { + operatorSelect.value = 'in'; // Default to 'In' if no existing operator + } + // Get existing filter values if any let existingValues = []; if (existingGroup && existingGroup.value && Array.isArray(existingGroup.value)) { @@ -3088,11 +3085,6 @@
Plot ${plotCounte // Trigger change event if existingGroup has a column if (existingGroup && existingGroup.column) { columnSelect.dispatchEvent(new Event('change')); - - // Optionally, set operator value if applicable - if (!isNumerical(existingGroup.column) && existingGroup.operator) { - operatorSelect.value = existingGroup.operator; - } } } @@ -3100,7 +3092,8 @@
Plot ${plotCounte const filterGroups = []; const filterGroupDivs = document.querySelectorAll('#filter-groups-container .filter-group'); filterGroupDivs.forEach((groupDiv, index) => { - const logic = groupDiv.querySelector('.logic-select').value; + const logicSelect = groupDiv.querySelector('.logic-select'); + const logic = logicSelect ? logicSelect.value : ''; const column = groupDiv.querySelector('.column-select').value; const operatorSelect = groupDiv.querySelector('.operator-select'); const operator = operatorSelect && operatorSelect.style.display !== 'none' ? operatorSelect.value : null; @@ -3119,21 +3112,10 @@
Plot ${plotCounte value = { min, max }; } } else { - // Get operator and selected categories - if (!operator) return; // Operator is required for non-numerical columns - - if (operator === 'in' || operator === 'not_in') { - // Get selected categories - const hiddenInput = groupDiv.querySelector('.selected-categories'); - if (hiddenInput && hiddenInput.value) { - value = JSON.parse(hiddenInput.value); - } - } else { - // For other operators, get the single value - const valueInput = groupDiv.querySelector('.value-input-container input.autocomplete-input'); - if (valueInput) { - value = valueInput.value.trim(); - } + // Get selected categories + const hiddenInput = groupDiv.querySelector('.selected-categories'); + if (hiddenInput && hiddenInput.value) { + value = JSON.parse(hiddenInput.value); } } @@ -3148,6 +3130,7 @@
Plot ${plotCounte } } + // Function to set filters for a plot function setPlotFilters(plotId, filters) { plotFilters[plotId] = filters; From f354aac43dc14021796040228e6a055ae1d82cef Mon Sep 17 00:00:00 2001 From: Mohamed Abuelanin Date: Sun, 3 Nov 2024 18:18:26 -0800 Subject: [PATCH 6/8] better UI for sliders --- index.html | 103 +++++++++++++++++++++++++++++++++++++++++------------ styles.css | 39 +++++++++++--------- 2 files changed, 102 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 66e1f32..5893007 100644 --- a/index.html +++ b/index.html @@ -2697,8 +2697,14 @@
Plot ${plotCounte modal.style.display = "none"; } }; + + // Trigger a window resize event after a short delay to ensure modal is rendered + setTimeout(() => { + window.dispatchEvent(new Event('resize')); + }, 300); } + // Close Filter modal document.addEventListener('DOMContentLoaded', () => { const filterModalClose = document.getElementById('filter-modal-close'); @@ -2761,7 +2767,7 @@
Plot ${plotCounte const logicSelect = document.createElement('select'); logicSelect.className = 'form-control form-control-sm logic-select'; - logicSelect.style.width = '80px'; + logicSelect.style.width = '150px'; if (isFirstGroup) { logicSelect.innerHTML = ` @@ -2784,6 +2790,7 @@
Plot ${plotCounte const columnSelect = document.createElement('select'); columnSelect.className = 'form-control form-control-sm column-select'; + columnSelect.style.marginRight = '10px'; columnSelect.innerHTML = ``; const columns = Object.keys(data[0]).filter(col => !col.startsWith('_')); columns.forEach(col => { @@ -2795,6 +2802,7 @@
Plot ${plotCounte const operatorSelect = document.createElement('select'); operatorSelect.className = 'form-control form-control-sm operator-select'; + operatorSelect.style.marginRight = '10px'; const valueInput = document.createElement('div'); // Container for dynamic inputs valueInput.className = 'value-input-container'; @@ -2833,39 +2841,86 @@
Plot ${plotCounte }; } - // Function to create range slider and text inputs function createRangeFilter(container, column, existingValues = null) { container.innerHTML = ''; // Clear existing content const { min, max } = getMinMax(column); - // Create slider div - const sliderDiv = document.createElement('div'); - sliderDiv.className = 'range-slider'; - sliderDiv.id = `slider-${currentFilterPlotId}-filter-${filterIndex}-range`; // Consistent ID - sliderDiv.style.marginBottom = '10px'; // Add some spacing - sliderDiv.style.width = '100%'; // Make the slider fill the width + // Create Bootstrap grid structure + const outerDiv = document.createElement('div'); + outerDiv.className = 'container-fluid'; + + const rowDiv = document.createElement('div'); + rowDiv.className = 'row mt-3 p-3 border rounded'; + rowDiv.style.backgroundColor = '#f9f9f9'; + + // Label Column + const labelCol = document.createElement('div'); + labelCol.className = 'col-12 d-flex justify-content-center align-items-center mb-2'; + const label = document.createElement('label'); + label.className = 'mb-0'; + label.textContent = `${column} Range:`; + labelCol.appendChild(label); + + // Min Input Column with "Min" label inside input + const minInputCol = document.createElement('div'); + minInputCol.className = 'col-5'; + + const minInputGroup = document.createElement('div'); + minInputGroup.className = 'input-group input-group-sm'; + + const minInputLabel = document.createElement('span'); + minInputLabel.className = 'input-group-text'; + minInputLabel.textContent = 'Min'; + minInputLabel.style.fontSize = '0.8rem'; - // Create min input const minInput = document.createElement('input'); minInput.type = 'number'; - minInput.className = 'form-control form-control-sm range-min'; - minInput.style.width = '80px'; - minInput.style.marginRight = '10px'; - minInput.placeholder = `Min (${min})`; + minInput.className = 'form-control'; + minInput.placeholder = min; + + minInputGroup.appendChild(minInputLabel); + minInputGroup.appendChild(minInput); + minInputCol.appendChild(minInputGroup); + + // Max Input Column with "Max" label inside input + const maxInputCol = document.createElement('div'); + maxInputCol.className = 'col-5'; + + const maxInputGroup = document.createElement('div'); + maxInputGroup.className = 'input-group input-group-sm'; + + const maxInputLabel = document.createElement('span'); + maxInputLabel.className = 'input-group-text'; + maxInputLabel.textContent = 'Max'; + maxInputLabel.style.fontSize = '0.8rem'; - // Create max input const maxInput = document.createElement('input'); maxInput.type = 'number'; - maxInput.className = 'form-control form-control-sm range-max'; - maxInput.style.width = '80px'; - maxInput.style.marginRight = '10px'; - maxInput.placeholder = `Max (${max})`; + maxInput.className = 'form-control'; + maxInput.placeholder = max; - // Append elements to container - container.appendChild(minInput); - container.appendChild(sliderDiv); - container.appendChild(maxInput); + maxInputGroup.appendChild(maxInputLabel); + maxInputGroup.appendChild(maxInput); + maxInputCol.appendChild(maxInputGroup); + + // Slider Column + const sliderCol = document.createElement('div'); + sliderCol.className = 'col-12 my-2'; + const sliderDiv = document.createElement('div'); + sliderDiv.className = 'range-slider filter-modal-slider'; + sliderDiv.id = `slider-${currentFilterPlotId}-filter-${filterIndex}-range`; + sliderCol.appendChild(sliderDiv); + + // Assemble the layout + rowDiv.appendChild(labelCol); + rowDiv.appendChild(sliderCol); + rowDiv.appendChild(minInputCol); + rowDiv.appendChild(maxInputCol); + + // Append row to container + outerDiv.appendChild(rowDiv); + container.appendChild(outerDiv); // Initialize noUiSlider noUiSlider.create(sliderDiv, { @@ -2875,7 +2930,7 @@
Plot ${plotCounte 'min': min, 'max': max }, - tooltips: [true, true], + tooltips: [false, false], format: { to: function (value) { return Number(value).toFixed(2); @@ -2922,6 +2977,8 @@
Plot ${plotCounte }); } + + // Function to create autocomplete for categorical columns function createCategoricalFilter(container, column, existingValues = []) { container.innerHTML = ''; // Clear existing content diff --git a/styles.css b/styles.css index dab2beb..7166db1 100644 --- a/styles.css +++ b/styles.css @@ -1272,14 +1272,7 @@ tr:nth-child(even) { margin-right: 10px; } -/* Range Slider Styling */ -.range-slider { - display: flex; - align-items: center; - gap: 10px; - width: 100%; - margin-top: 10px; -} + .slider-inputs { display: flex; @@ -1296,16 +1289,28 @@ tr:nth-child(even) { border-radius: 4px; } -.tags-container .tag { - font-size: 0.9em; + +/* Styles specific to the filter modal slider */ +.filter-group .slider-wrapper .filter-modal-slider { + flex-grow: 1; + margin-right: 10px; } -/* Adjust slider width */ -.range-slider { - margin-bottom: 10px; +.filter-group .slider-wrapper .filter-modal-slider .noUi-target { + width: 100%; +} + +.filter-group .slider-wrapper .filter-modal-slider .noUi-horizontal { + height: 10px; /* Adjust as needed */ +} + + + +#filter-modal .range-slider { + width: 100%; +} + +#filter-modal .slider-wrapper { + width: 100%; } -/* Optional: Adjust the width of the range inputs */ -.range-min, .range-max { - width: 80px; -} \ No newline at end of file From 41a68877eb4ba7531dc6b5c25f8abfbc6dcf797c Mon Sep 17 00:00:00 2001 From: Mohamed Abuelanin Date: Sun, 3 Nov 2024 21:26:01 -0800 Subject: [PATCH 7/8] better UI again --- index.html | 93 +++++++++++++++++++++++++----------------------------- 1 file changed, 43 insertions(+), 50 deletions(-) diff --git a/index.html b/index.html index 5893007..946cfca 100644 --- a/index.html +++ b/index.html @@ -2678,9 +2678,9 @@
Plot ${plotCounte exportSessionUrlModal.style.display = 'flex'; } - // Initialize plotFilters globally let plotFilters = {}; + let filterGroupCounter = 0; // Global counter for unique filter indexes // Function to open the Filter modal let currentFilterPlotId = null; @@ -2757,6 +2757,9 @@
Plot ${plotCounte const filterGroupsContainer = document.getElementById('filter-groups-container'); const isFirstGroup = filterGroupsContainer.children.length === 0; + filterGroupCounter++; // Increment the counter + const filterIndex = filterGroupCounter; // Assign a unique filterIndex + const groupDiv = document.createElement('div'); groupDiv.className = 'filter-group'; groupDiv.style.border = '1px solid #ccc'; @@ -2771,16 +2774,16 @@
Plot ${plotCounte if (isFirstGroup) { logicSelect.innerHTML = ` - - - `; + + + `; logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : ''; } else { logicSelect.innerHTML = ` - - - - `; + + + + `; logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : 'AND'; } @@ -2827,11 +2830,6 @@
Plot ${plotCounte filterGroupsContainer.appendChild(groupDiv); - // Determine the filter index within the plot - const currentPlotId = currentFilterPlotId; // Assuming currentFilterPlotId is globally set - const plotFilterGroups = plotFilters[currentPlotId] || []; - const filterIndex = plotFilterGroups.length; - // Function to get min and max of a numerical column function getMinMax(column) { const values = data.map(row => parseFloat(row[column])).filter(val => !isNaN(val)); @@ -2977,10 +2975,7 @@
Plot ${plotCounte }); } - - - // Function to create autocomplete for categorical columns - function createCategoricalFilter(container, column, existingValues = []) { + function createCategoricalFilter(container, column, selectedCategories) { container.innerHTML = ''; // Clear existing content // Create input for autocomplete @@ -3004,14 +2999,13 @@
Plot ${plotCounte // Initialize autocomplete (using a simple datalist for demonstration) const datalist = document.createElement('datalist'); - datalist.id = `datalist-${currentPlotId}-filter-${filterIndex}`; + datalist.id = `datalist-${currentFilterPlotId}-filter-${filterIndex}`; container.appendChild(datalist); autocompleteInput.setAttribute('list', datalist.id); // Function to update datalist options function updateDatalistOptions() { - const selectedValues = Array.from(tagsContainer.children).map(tag => tag.dataset.value); - const availableCategories = categories.filter(cat => !selectedValues.includes(cat)); + const availableCategories = categories.filter(cat => !selectedCategories.includes(cat)); datalist.innerHTML = ''; availableCategories.forEach(cat => { @@ -3023,15 +3017,16 @@
Plot ${plotCounte // Function to add a tag function addTag(value) { - if (existingValues.includes(value)) return; // Avoid duplicates + if (selectedCategories.includes(value)) return; // Avoid duplicates const tag = document.createElement('span'); tag.className = 'tag'; tag.style.display = 'inline-flex'; tag.style.alignItems = 'center'; - tag.style.padding = '2px 5px'; + tag.style.padding = '5px'; tag.style.margin = '2px'; - tag.style.backgroundColor = '#e0e0e0'; + tag.style.backgroundColor = '#007bff'; + tag.style.color = '#fff'; tag.style.borderRadius = '3px'; tag.dataset.value = value; @@ -3043,23 +3038,26 @@
Plot ${plotCounte removeBtn.style.marginLeft = '5px'; removeBtn.addEventListener('click', () => { tagsContainer.removeChild(tag); - existingValues.splice(existingValues.indexOf(value), 1); + const index = selectedCategories.indexOf(value); + if (index > -1) { + selectedCategories.splice(index, 1); + } updateDatalistOptions(); }); tag.appendChild(removeBtn); tagsContainer.appendChild(tag); - existingValues.push(value); + selectedCategories.push(value); updateDatalistOptions(); } // Add existing tags - existingValues.forEach(val => addTag(val)); + selectedCategories.forEach(val => addTag(val)); // Handle selection from autocomplete autocompleteInput.addEventListener('change', () => { const value = autocompleteInput.value.trim(); - if (value && categories.includes(value) && !existingValues.includes(value)) { + if (value && categories.includes(value) && !selectedCategories.includes(value)) { addTag(value); autocompleteInput.value = ''; } @@ -3070,27 +3068,13 @@
Plot ${plotCounte if (e.key === 'Enter') { e.preventDefault(); const value = autocompleteInput.value.trim(); - if (value && categories.includes(value) && !existingValues.includes(value)) { + if (value && categories.includes(value) && !selectedCategories.includes(value)) { addTag(value); autocompleteInput.value = ''; } } }); - // Store selected values in a hidden input for form submission - const hiddenInput = document.createElement('input'); - hiddenInput.type = 'hidden'; - hiddenInput.className = 'selected-categories'; - container.appendChild(hiddenInput); - - // Update hidden input whenever tags change - const observer = new MutationObserver(() => { - const selected = Array.from(tagsContainer.children).map(tag => tag.dataset.value); - hiddenInput.value = JSON.stringify(selected); - }); - - observer.observe(tagsContainer, { childList: true, attributes: true, subtree: true }); - // Initialize datalist options updateDatalistOptions(); } @@ -3121,9 +3105,9 @@
Plot ${plotCounte // Set operator options for categorical columns operatorSelect.innerHTML = ` - - - `; + + + `; if (existingGroup && existingGroup.operator) { operatorSelect.value = existingGroup.operator; } else { @@ -3135,7 +3119,14 @@
Plot ${plotCounte if (existingGroup && existingGroup.value && Array.isArray(existingGroup.value)) { existingValues = existingGroup.value; } - createCategoricalFilter(valueInput, selectedColumn, existingValues); + + // Create a container for storing selected values + let selectedCategories = existingValues.slice(); // make a copy + + // Assign selectedCategories to groupDiv for later access + groupDiv.selectedCategories = selectedCategories; + + createCategoricalFilter(valueInput, selectedColumn, selectedCategories); } }); @@ -3170,9 +3161,11 @@
Plot ${plotCounte } } else { // Get selected categories - const hiddenInput = groupDiv.querySelector('.selected-categories'); - if (hiddenInput && hiddenInput.value) { - value = JSON.parse(hiddenInput.value); + let selectedCategories = groupDiv.selectedCategories; + if (selectedCategories && selectedCategories.length > 0) { + value = selectedCategories.slice(); // make a copy + } else { + value = []; } } @@ -3187,7 +3180,6 @@
Plot ${plotCounte } } - // Function to set filters for a plot function setPlotFilters(plotId, filters) { plotFilters[plotId] = filters; @@ -3221,6 +3213,7 @@
Plot ${plotCounte + From 8d75a9e0b574d2f37a16634fe31aae84f1e080d3 Mon Sep 17 00:00:00 2001 From: Mohamed Abuelanin Date: Mon, 4 Nov 2024 08:49:10 -0800 Subject: [PATCH 8/8] categorical column filters UI bug still persist but ok --- index.html | 39 ++++++++++++++++++++++++++++----------- styles.css | 22 ++++++++++++++++++++++ 2 files changed, 50 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 946cfca..57b5e78 100644 --- a/index.html +++ b/index.html @@ -2774,16 +2774,16 @@
Plot ${plotCounte if (isFirstGroup) { logicSelect.innerHTML = ` - - - `; + + + `; logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : ''; } else { logicSelect.innerHTML = ` - - - - `; + + + + `; logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : 'AND'; } @@ -2975,7 +2975,7 @@
Plot ${plotCounte }); } - function createCategoricalFilter(container, column, selectedCategories) { + function createCategoricalFilter(container, column, selectedCategories = []) { container.innerHTML = ''; // Clear existing content // Create input for autocomplete @@ -3051,8 +3051,13 @@
Plot ${plotCounte updateDatalistOptions(); } - // Add existing tags - selectedCategories.forEach(val => addTag(val)); + if (Array.isArray(selectedCategories) && selectedCategories.length > 0) { + selectedCategories.forEach(val => { + if (categories.includes(val)) { // Ensure the value is valid + addTag(val); + } + }); + } // Handle selection from autocomplete autocompleteInput.addEventListener('change', () => { @@ -3079,6 +3084,8 @@
Plot ${plotCounte updateDatalistOptions(); } + + // Event listener for column selection // Event listener for column selection columnSelect.addEventListener('change', () => { const selectedColumn = columnSelect.value; @@ -3182,7 +3189,17 @@
Plot ${plotCounte // Function to set filters for a plot function setPlotFilters(plotId, filters) { - plotFilters[plotId] = filters; + plotFilters[plotId] = filters.map(filter => { + // Determine if the filter's column is numerical + const numerical = isNumerical(filter.column); + + // If the column is categorical, ensure 'value' is an array + if (!numerical) { + filter.value = Array.isArray(filter.value) ? filter.value : []; + } + + return filter; + }); } // Ensure that the Filter button is added to each plot diff --git a/styles.css b/styles.css index 7166db1..0185745 100644 --- a/styles.css +++ b/styles.css @@ -1314,3 +1314,25 @@ tr:nth-child(even) { width: 100%; } + +.tags-container { + display: flex; + flex-wrap: wrap; + margin-top: 5px; +} + +.tag { + display: inline-flex; + align-items: center; + padding: 5px; + margin: 2px; + background-color: #007bff; + color: #fff; + border-radius: 3px; + font-size: 0.9em; +} + +.tag span { + cursor: pointer; + margin-left: 5px; +}