diff --git a/index.html b/index.html index 22eae71..57b5e78 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,14 +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)); - // Initialize plot - if (!config.plotType) { - updatePlot(plotId); + // Set plotFilters for this plot if filters are provided in config + if (config.filters) { + plotFilters[plotId] = config.filters; + } else { + plotFilters[plotId] = []; } + + // Initialize plot + updatePlot(plotId); } + function clonePlot(plotId) { // Gather the configuration of the plot with id plotId const plotType = document.getElementById(`plot-type-${plotId}`).value; @@ -1052,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') { @@ -1074,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 @@ -1086,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) { @@ -1602,6 +1621,55 @@
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 === '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 or missing value + 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}`); @@ -1645,12 +1713,17 @@
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) { + plotDataSet = applyFiltersToData(plotDataSet, plotFilters[plotId]); + } + + currentPlotData = plotDataSet; - 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; @@ -2089,9 +2162,6 @@
Plot ${plotCounte } - - - function clearSelections() { selectedPoints = []; updateTable(); @@ -2337,7 +2407,6 @@
Plot ${plotCounte showNotification('Session exported successfully.'); } - // Updated importSession function function importSession(jsonData, userData = null) { try { // Show loading modal @@ -2350,6 +2419,7 @@
Plot ${plotCounte plotsContainer.innerHTML = ''; plotCounter = 0; selectedPoints = []; + plotFilters = {}; // Restore species, reference, and amplicon selections document.getElementById('species-select').value = sessionData.selectedSpecies; @@ -2380,7 +2450,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') { @@ -2401,18 +2471,18 @@
Plot ${plotCounte const ySlider = document.getElementById(`y-range-slider-${plotConfig.plotId}`); const hueSlider = document.getElementById(`hue-range-slider-${plotConfig.plotId}`); - if (xSlider.noUiSlider && plotConfig.controls.xRange) { - xSlider.noUiSlider.set(plotConfig.controls.xRange); + if (xSlider && xSlider.noUiSlider && plotConfig.controls.xRange) { + xSlider.noUiSlider.set([plotConfig.controls.xRange.min, plotConfig.controls.xRange.max]); } - if (ySlider.noUiSlider && plotConfig.controls.yRange) { - ySlider.noUiSlider.set(plotConfig.controls.yRange); + if (ySlider && ySlider.noUiSlider && plotConfig.controls.yRange) { + ySlider.noUiSlider.set([plotConfig.controls.yRange.min, plotConfig.controls.yRange.max]); } if (hueSlider && hueSlider.noUiSlider && plotConfig.controls.hueRange) { - hueSlider.noUiSlider.set(plotConfig.controls.hueRange); + hueSlider.noUiSlider.set([plotConfig.controls.hueRange.min, plotConfig.controls.hueRange.max]); } } 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; } @@ -2428,10 +2498,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); @@ -2465,14 +2533,17 @@
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'; } } + + function integrateUserData(userDataArray) { userDataArray.forEach(row => { // Assign a unique ID with a 'user_' prefix @@ -2493,7 +2564,6 @@
Plot ${plotCounte } - // Function to export the session data to the URL function collectSessionData() { const sessionData = { metadata: { @@ -2517,6 +2587,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 @@ -2528,19 +2599,22 @@
Plot ${plotCounte plotConfig.controls.yLogScale = document.getElementById(`y-log-scale-${plotId}`).checked; plotConfig.controls.palette = document.getElementById(`palette-${plotId}`).value; - // Save range slider values + // 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.noUiSlider) { - plotConfig.controls.xRange = xSlider.noUiSlider.get(); + if (xSlider && xSlider.noUiSlider) { + const [xMin, xMax] = xSlider.noUiSlider.get().map(Number); + plotConfig.controls.xRange = { min: xMin, max: xMax }; } - if (ySlider.noUiSlider) { - plotConfig.controls.yRange = ySlider.noUiSlider.get(); + if (ySlider && ySlider.noUiSlider) { + const [yMin, yMax] = ySlider.noUiSlider.get().map(Number); + plotConfig.controls.yRange = { min: yMin, max: yMax }; } if (hueSlider && hueSlider.noUiSlider) { - plotConfig.controls.hueRange = hueSlider.noUiSlider.get(); + const [hueMin, hueMax] = hueSlider.noUiSlider.get().map(Number); + plotConfig.controls.hueRange = { min: hueMin, max: hueMax }; } } else if (plotType === 'histogram' || plotType === 'boxplot') { plotConfig.controls.numColumns = Array.from( @@ -2558,6 +2632,9 @@
Plot ${plotCounte ) ).map(checkbox => checkbox.value); + // Collect filters + plotConfig.filters = plotFilters[plotId] ? plotFilters[plotId] : []; + sessionData.plots.push(plotConfig); } @@ -2578,6 +2655,8 @@
Plot ${plotCounte return sessionData; } + + function exportSessionToURL() { const sessionData = collectSessionData(); @@ -2599,92 +2678,558 @@
Plot ${plotCounte exportSessionUrlModal.style.display = 'flex'; } + // Initialize plotFilters globally + let plotFilters = {}; + let filterGroupCounter = 0; // Global counter for unique filter indexes - // 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), + // Function to open the Filter modal + let currentFilterPlotId = null; + + function openFilterModal(plotId) { + currentFilterPlotId = plotId; + const modal = document.getElementById('filter-modal'); + modal.style.display = 'flex'; + populateFilterGroups(plotId); + + // Allow closing modal by clicking outside of it + window.onclick = function (event) { + if (event.target == modal) { + modal.style.display = "none"; + } }; - // Collect data for each plot - for (let i = 1; i <= plotCounter; i++) { - const plotId = `plot-${i}`; - const plotType = document.getElementById(`plot-type-${plotId}`).value; - const plotConfig = { - plotId: plotId, - plotType: plotType, - controls: {}, - title: document.getElementById(`title-${plotId}`).value, - notes: document.getElementById(`notes-${plotId}`).value, + // 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'); + if (filterModalClose) { + filterModalClose.addEventListener('click', () => { + document.getElementById('filter-modal').style.display = 'none'; + }); + } + + // Add Filter Group + const addFilterGroupBtn = document.getElementById('add-filter-group'); + if (addFilterGroupBtn) { + addFilterGroupBtn.addEventListener('click', () => { + addFilterGroup(); + }); + } + + // Apply Filters + const applyFiltersBtn = document.getElementById('apply-filters'); + if (applyFiltersBtn) { + applyFiltersBtn.addEventListener('click', () => { + applyFilters(); + document.getElementById('filter-modal').style.display = 'none'; + }); + } + }); + + // Function to populate existing filter groups (if any) + function populateFilterGroups(plotId) { + const filterGroupsContainer = document.getElementById('filter-groups-container'); + filterGroupsContainer.innerHTML = ''; // Clear existing + + const filters = plotFilters[plotId]; + if (filters && filters.length > 0) { + filters.forEach(filterGroup => { + addFilterGroup(filterGroup); + }); + } else { + addFilterGroup(); + } + } + + // Function to determine if a column is numerical + function isNumerical(column) { + const numericCount = data.filter(row => !isNaN(parseFloat(row[column])) && isFinite(row[column])).length; + return (numericCount / data.length) >= 0.9; // 90% or more values are numeric + } + + function addFilterGroup(existingGroup = null) { + 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'; + groupDiv.style.padding = '10px'; + groupDiv.style.marginBottom = '10px'; + groupDiv.style.borderRadius = '5px'; + groupDiv.style.position = 'relative'; + + const logicSelect = document.createElement('select'); + logicSelect.className = 'form-control form-control-sm logic-select'; + logicSelect.style.width = '150px'; + + if (isFirstGroup) { + logicSelect.innerHTML = ` + + + `; + logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : ''; + } else { + logicSelect.innerHTML = ` + + + + `; + logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : 'AND'; + } + + // Condition Div + const conditionDiv = document.createElement('div'); + conditionDiv.className = 'condition-div'; + + 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 => { + columnSelect.innerHTML += ``; + }); + if (existingGroup && existingGroup.column) { + columnSelect.value = existingGroup.column; + } + + 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'; + + conditionDiv.appendChild(columnSelect); + conditionDiv.appendChild(operatorSelect); + conditionDiv.appendChild(valueInput); + + const removeButton = document.createElement('button'); + removeButton.className = 'btn btn-danger btn-sm remove-filter-group'; + removeButton.style.position = 'absolute'; + removeButton.style.top = '10px'; + removeButton.style.right = '10px'; + removeButton.innerHTML = ''; + removeButton.addEventListener('click', () => { + filterGroupsContainer.removeChild(groupDiv); + }); + + groupDiv.appendChild(logicSelect); + groupDiv.appendChild(conditionDiv); + groupDiv.appendChild(removeButton); + + filterGroupsContainer.appendChild(groupDiv); + + // 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)); + return { + min: Math.min(...values), + max: Math.max(...values) }; + } - // Collect control values based on plot type - if (plotType === 'scatter') { - plotConfig.controls.xAxis = document.getElementById(`x-axis-${plotId}`).value; - plotConfig.controls.yAxis = document.getElementById(`y-axis-${plotId}`).value; - plotConfig.controls.hue = document.getElementById(`hue-${plotId}`).value; - plotConfig.controls.xLogScale = document.getElementById(`x-log-scale-${plotId}`).checked; - plotConfig.controls.yLogScale = document.getElementById(`y-log-scale-${plotId}`).checked; - plotConfig.controls.palette = document.getElementById(`palette-${plotId}`).value; + function createRangeFilter(container, column, existingValues = null) { + container.innerHTML = ''; // Clear existing content + + const { min, max } = getMinMax(column); + + // 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'; + + const minInput = document.createElement('input'); + minInput.type = 'number'; + 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'; + + const maxInput = document.createElement('input'); + maxInput.type = 'number'; + maxInput.className = 'form-control'; + maxInput.placeholder = max; + + 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, { + start: existingValues ? [existingValues.min, existingValues.max] : [min, max], + connect: true, + range: { + 'min': min, + 'max': max + }, + tooltips: [false, false], + format: { + to: function (value) { + return Number(value).toFixed(2); + }, + from: function (value) { + return Number(value); + } + } + }); - // Save range slider values - const xSlider = document.getElementById(`x-range-slider-${plotId}`); - const ySlider = document.getElementById(`y-range-slider-${plotId}`); - const hueSlider = document.getElementById(`hue-range-slider-${plotId}`); + // Set initial values if existing + if (existingValues) { + minInput.value = existingValues.min; + maxInput.value = existingValues.max; + } else { + minInput.value = min; + maxInput.value = max; + } - if (xSlider.noUiSlider) { - plotConfig.controls.xRange = xSlider.noUiSlider.get(); + // Synchronize slider with inputs + sliderDiv.noUiSlider.on('update', (values, handle) => { + if (handle === 0) { + minInput.value = values[0]; + } else { + maxInput.value = values[1]; } - if (ySlider.noUiSlider) { - plotConfig.controls.yRange = ySlider.noUiSlider.get(); + }); + + // Update slider when inputs change + minInput.addEventListener('change', () => { + let val = parseFloat(minInput.value); + if (isNaN(val)) val = min; + val = Math.max(val, min); + val = Math.min(val, parseFloat(maxInput.value) || max); // Ensure min <= max + sliderDiv.noUiSlider.set([val, null]); + }); + + maxInput.addEventListener('change', () => { + let val = parseFloat(maxInput.value); + if (isNaN(val)) val = max; + val = Math.min(val, max); + val = Math.max(val, parseFloat(minInput.value) || min); // Ensure max >= min + sliderDiv.noUiSlider.set([null, val]); + }); + } + + function createCategoricalFilter(container, column, selectedCategories = []) { + container.innerHTML = ''; // Clear existing content + + // Create input for autocomplete + const autocompleteInput = document.createElement('input'); + autocompleteInput.type = 'text'; + autocompleteInput.className = 'form-control form-control-sm autocomplete-input'; + autocompleteInput.placeholder = 'Type to search...'; + + // Create container for selected tags + const tagsContainer = document.createElement('div'); + tagsContainer.className = 'tags-container'; + tagsContainer.style.marginTop = '5px'; + tagsContainer.style.display = 'flex'; + tagsContainer.style.flexWrap = 'wrap'; + + container.appendChild(autocompleteInput); + container.appendChild(tagsContainer); + + // Extract unique categories from data + const categories = Array.from(new Set(data.map(row => row[column]))).sort(); + + // Initialize autocomplete (using a simple datalist for demonstration) + const datalist = document.createElement('datalist'); + datalist.id = `datalist-${currentFilterPlotId}-filter-${filterIndex}`; + container.appendChild(datalist); + autocompleteInput.setAttribute('list', datalist.id); + + // Function to update datalist options + function updateDatalistOptions() { + const availableCategories = categories.filter(cat => !selectedCategories.includes(cat)); + + datalist.innerHTML = ''; + availableCategories.forEach(cat => { + const option = document.createElement('option'); + option.value = cat; + datalist.appendChild(option); + }); + } + + // Function to add a tag + function addTag(value) { + 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 = '5px'; + tag.style.margin = '2px'; + tag.style.backgroundColor = '#007bff'; + tag.style.color = '#fff'; + tag.style.borderRadius = '3px'; + tag.dataset.value = value; + + tag.textContent = value; + + const removeBtn = document.createElement('span'); + removeBtn.textContent = ' ×'; + removeBtn.style.cursor = 'pointer'; + removeBtn.style.marginLeft = '5px'; + removeBtn.addEventListener('click', () => { + tagsContainer.removeChild(tag); + const index = selectedCategories.indexOf(value); + if (index > -1) { + selectedCategories.splice(index, 1); + } + updateDatalistOptions(); + }); + + tag.appendChild(removeBtn); + tagsContainer.appendChild(tag); + selectedCategories.push(value); + updateDatalistOptions(); + } + + 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', () => { + const value = autocompleteInput.value.trim(); + if (value && categories.includes(value) && !selectedCategories.includes(value)) { + addTag(value); + autocompleteInput.value = ''; } - if (hueSlider && hueSlider.noUiSlider) { - plotConfig.controls.hueRange = hueSlider.noUiSlider.get(); + }); + + // Handle Enter key + autocompleteInput.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + const value = autocompleteInput.value.trim(); + if (value && categories.includes(value) && !selectedCategories.includes(value)) { + addTag(value); + autocompleteInput.value = ''; + } } - } else if (plotType === 'histogram' || plotType === 'boxplot') { - plotConfig.controls.numColumns = Array.from( - document.querySelectorAll( - `#checkbox-group-${plotId} input[name="num-columns-${plotId}"]:checked` - ) - ).map(checkbox => checkbox.value); - plotConfig.controls.groupBy = document.getElementById(`group-by-${plotId}`).value; + }); + + // Initialize datalist options + updateDatalistOptions(); + } + + + // Event listener for column selection + // Event listener for column selection + columnSelect.addEventListener('change', () => { + const selectedColumn = columnSelect.value; + valueInput.innerHTML = ''; // Clear existing content + + if (!selectedColumn) { + operatorSelect.style.display = 'none'; // Hide operator select if no column is selected + return; } - // Collect selected assay types - plotConfig.controls.selectedAssayTypes = Array.from( - document.querySelectorAll( - `#assay-type-checkboxes-${plotId} input[name="assay-type-${plotId}"]:checked` - ) - ).map(checkbox => checkbox.value); + if (isNumerical(selectedColumn)) { + // Hide operator select for numerical columns + operatorSelect.style.display = 'none'; - sessionData.plots.push(plotConfig); + // Get existing filter values if any + let existingValues = null; + if (existingGroup && existingGroup.value && typeof existingGroup.value === 'object') { + existingValues = existingGroup.value; + } + createRangeFilter(valueInput, selectedColumn, existingValues); + } else { + // 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)) { + existingValues = existingGroup.value; + } + + // 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); + } + }); + + // Trigger change event if existingGroup has a column + if (existingGroup && existingGroup.column) { + columnSelect.dispatchEvent(new Event('change')); } + } - // Include user data if present - const userDataPoints = data.filter(row => row._isUserData); - if (userDataPoints.length > 0) { - sessionData.userData = userDataPoints.map(row => { - const newRow = {}; - for (let key in row) { - if (!key.startsWith('_')) { - newRow[key] = row[key]; - } + function applyFilters() { + const filterGroups = []; + const filterGroupDivs = document.querySelectorAll('#filter-groups-container .filter-group'); + filterGroupDivs.forEach((groupDiv, index) => { + 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; + let value = null; + + if (!column) return; // Skip incomplete filters + + // Determine if the column is numerical + const isNumericalColumn = isNumerical(column); + + if (isNumericalColumn) { + // Get slider values + const slider = groupDiv.querySelector('.range-slider'); + if (slider && slider.noUiSlider) { + const [min, max] = slider.noUiSlider.get().map(Number); + value = { min, max }; } - return newRow; - }); + } else { + // Get selected categories + let selectedCategories = groupDiv.selectedCategories; + if (selectedCategories && selectedCategories.length > 0) { + value = selectedCategories.slice(); // make a copy + } else { + value = []; + } + } + + if (value !== null && value !== undefined && (operator || isNumericalColumn)) { + filterGroups.push({ logic, column, operator, value }); + } + }); + + if (currentFilterPlotId) { + setPlotFilters(currentFilterPlotId, filterGroups); + updatePlot(currentFilterPlotId); } + } - return sessionData; + // Function to set filters for a plot + function setPlotFilters(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 + function addFilterButtonsToPlots() { + for (let i = 1; i <= plotCounter; i++) { + const plotId = `plot-${i}`; + const plotHeader = document.querySelector(`#container-${plotId} .card-header`); + if (plotHeader && !document.getElementById(`filter-plot-${plotId}`)) { + 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); + }); + } + } + } + + // Call addFilterButtonsToPlots after plots are initialized + document.addEventListener('DOMContentLoaded', () => { + addFilterButtonsToPlots(); + }); + + + @@ -2749,6 +3294,23 @@

+ + + + + + +
diff --git a/snipe-explore.js b/snipe-explore.js index cbd1eec..71881b9 100644 --- a/snipe-explore.js +++ b/snipe-explore.js @@ -405,4 +405,4 @@ function showModal(title, message) { modal.style.display = 'none'; } }; -} \ No newline at end of file +} diff --git a/styles.css b/styles.css index a12a928..0185745 100644 --- a/styles.css +++ b/styles.css @@ -1077,4 +1077,262 @@ tr:nth-child(even) { .floating-search-button:hover .search-input { width: 200px; opacity: 1; -} \ No newline at end of file +} + +/* Updated CSS for Filter Modal */ + +#filter-modal { + display: none; + /* Hidden by default */ + position: fixed; + z-index: 1002; + left: 0; + top: 0; + width: 100%; + height: 100%; + backdrop-filter: blur(5px); + background-color: rgba(0, 0, 0, 0.5); + align-items: center; + justify-content: center; + overflow: auto; +} + +#filter-modal .modal-content { + background: #fff; + padding: 20px; + border-radius: 10px; + width: 80%; + max-width: 700px; + position: relative; +} + +#filter-modal .close-button { + position: absolute; + top: 15px; + right: 20px; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} + +.filter-group { + border: 1px solid #ccc; + padding: 15px; + border-radius: 8px; + margin-bottom: 10px; + background-color: #f9f9f9; +} + +.filter-group .form-row { + display: flex; + align-items: center; + gap: 10px; +} + +.filter-group .form-control { + flex: 1; +} + +.remove-filter-group { + background-color: #e74c3c; + color: #fff; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; +} + +.remove-filter-group:hover { + background-color: #c0392b; +} + +#add-filter-group { + background-color: #3498db; + color: #fff; + border: none; + padding: 8px 12px; + border-radius: 4px; + cursor: pointer; + margin-bottom: 15px; +} + +#add-filter-group:hover { + background-color: #2980b9; +} + +#apply-filters, #reset-filters { + background-color: #2ecc71; + color: #fff; + border: none; + padding: 10px 15px; + border-radius: 4px; + cursor: pointer; + margin-right: 10px; +} + +#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; +} + + + +.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; +} + + +/* Styles specific to the filter modal slider */ +.filter-group .slider-wrapper .filter-modal-slider { + flex-grow: 1; + margin-right: 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%; +} + + +.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; +}