Skip to content

Commit 47c4173

Browse files
steps39steps39
committed
Map grid plots update when samples selected / removed
1 parent 2499c96 commit 47c4173

6 files changed

Lines changed: 588 additions & 390 deletions

File tree

‎SedimentDataExplorer.html‎

Lines changed: 153 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,39 @@
525525
width: 100%;
526526
}
527527

528+
.collapsible-legend {
529+
cursor: pointer;
530+
}
531+
532+
.collapsible-content {
533+
max-height: 0;
534+
overflow: hidden;
535+
transition: max-height 0.3s ease-out; /* Adjust the duration as needed */
536+
}
537+
538+
.collapsible-content.show-content {
539+
max-height: 750px; /* Use a value larger than your content will ever be */
540+
}
541+
542+
/* Make the app container take up the full viewport height */
543+
.app-container {
544+
display: flex; /* Use flexbox to align children */
545+
height: 100vh; /* Set height to 100% of the viewport height */
546+
}
547+
548+
/* Make the main content area flexible */
549+
.output-area {
550+
flex-grow: 1; /* This will make the main content area take up the remaining space */
551+
display: flex;
552+
flex-direction: column;
553+
}
554+
555+
/* Ensure the sidebar scrolls if its content overflows */
556+
.controls-sidebar {
557+
overflow-y: auto; /* Enable vertical scrolling */
558+
/* Other sidebar styles (width, etc.) go here */
559+
}
560+
528561
</style>
529562
</head>
530563

@@ -540,10 +573,11 @@ <h1>Sediment Data Explorer <small style="font-weight: normal; opacity: 0.8;">v0.
540573
</div>
541574
</header>
542575

543-
<div class="app-container">
544-
<aside id="controls-sidebar" class="controls-sidebar collapsed">
545-
<fieldset>
546-
<legend>Data Sources</legend>
576+
<div class="app-container">
577+
<aside id="controls-sidebar" class="controls-sidebar collapsed">
578+
<fieldset>
579+
<legend class="collapsible-legend">Data Sources</legend>
580+
<div class="collapsible-content">
547581
<div class="input-group">
548582
<label for="fileInput">MMO Templates (Local Files)</label>
549583
<input type="file" id="fileInput" multiple onchange="importData()">
@@ -556,10 +590,12 @@ <h1>Sediment Data Explorer <small style="font-weight: normal; opacity: 0.8;">v0.
556590
<hr>
557591
<button onclick="openCEFASSelection()">Select CEFAS Data</button>
558592
<button onclick="openAdditionalInfoModal()">Additional Information</button>
559-
</fieldset>
593+
</div>
594+
</fieldset>
560595

561-
<fieldset>
562-
<legend>Save / Load State</legend>
596+
<fieldset>
597+
<legend class="collapsible-legend">Save / Load State</legend>
598+
<div class="collapsible-content">
563599
<div class="input-group">
564600
<label for="fileSave">Save Snapshot</label>
565601
<input type="text" id="fileSave" placeholder="Enter file name to save" onchange="saveSnapShot()">
@@ -572,96 +608,113 @@ <h1>Sediment Data Explorer <small style="font-weight: normal; opacity: 0.8;">v0.
572608
<label for="urlLoad">Load Snapshot from URL</label>
573609
<input type="text" id="urlLoad" placeholder="Enter URL to load" onchange="loadSnapShotURL()">
574610
</div>
575-
</fieldset>
611+
</div>
612+
</fieldset>
576613

577-
<fieldset>
578-
<legend>Selection Tools</legend>
614+
<fieldset>
615+
<legend class="collapsible-legend">Selection Tools</legend>
616+
<div class="collapsible-content">
579617
<button onclick="openDatasetSelection(sampleMeasurements)">Select Datasets</button>
580618
<button onclick="openSampleSelection(sampleMeasurements)">Select Samples</button>
581619
<button onclick="openChemicalSelection()">Select Chemicals</button>
582620
<button onclick="clearSelections()" class="secondary">Clear All Selections</button>
583-
</fieldset>
584-
585-
<fieldset>
586-
<legend>Chart Customisation</legend>
587-
<button onclick="openDatasetLabels()">Enter Dataset Labels</button>
588-
<button onclick="openSampleLabels()">Enter Sample Labels</button>
589-
<button onclick="openChartModifiersModal()">Chart Modifiers</button>
590-
<hr>
591-
<div class="input-group">
592-
<label for="primary-sorting-select">Primary Sort:</label>
593-
<select id="primary-sorting-select"></select>
594-
</div>
595-
<div class="input-group">
596-
<label for="secondary-sorting-select">Secondary Sort:</label>
597-
<select id="secondary-sorting-select"></select>
598-
</div>
599-
</fieldset>
621+
</div>
622+
</fieldset>
600623

601-
<fieldset>
602-
<legend>Chart Configuration</legend>
624+
<fieldset>
625+
<legend class="collapsible-legend">Chart Configuration</legend>
626+
<div class="collapsible-content">
603627
<p><strong>Sheetnames to Include:</strong></p>
604628
<div class="checkbox-group">
629+
<label><input type="checkbox" id="physicaldata" checked> Physical data</label>
605630
<label><input type="checkbox" id="tracemetaldata" checked> Trace metal data</label>
606631
<label><input type="checkbox" id="pahdata" checked> PAH data</label>
607632
<label><input type="checkbox" id="pcbdata" checked> PCB data</label>
608633
<label><input type="checkbox" id="bdedata" checked> BDE data</label>
609634
<label><input type="checkbox" id="organotinsdata" checked> Organotins data</label>
610635
<label><input type="checkbox" id="organochlorinedata" checked> Organochlorine data</label>
611-
<label><input type="checkbox" id="physicaldata" checked> Physical data</label>
612636
</div>
613637
<hr>
614-
<p><strong>Chart Types:</strong></p>
638+
<p><strong>Physical Chart Types:</strong></p>
639+
<div class="checkbox-group">
640+
<label><input type="checkbox" id="splitbyweight" checked> Split by weight</label>
641+
<label><input type="checkbox" id="splitbyarea" checked> Split by area</label>
642+
<label><input type="checkbox" id="totalsolidsandtotalcarbon" checked> Total solids and total carbon</label>
643+
<label><input type="checkbox" id="cumulative" checked> Cumulative</label>
644+
</div>
645+
<button onclick="openParticleSizeModal()">Small particle details</button>
646+
<p><strong>Chemical Chart Types:</strong></p>
615647
<div class="checkbox-group">
616648
<label><input type="checkbox" id="samplegroup" checked> Group by sample</label>
617649
<label><input type="checkbox" id="chemicalgroup" checked> Group by chemical</label>
618-
<label><input type="checkbox" id="positionplace" checked> Plot by position</label>
619-
<label><input type="checkbox" id="pcaanalysis" checked> PCA analysis</label>
620-
</div>
650+
<label><input type="checkbox" id="correlationplots"> Correlation plots</label>
651+
<label><input type="checkbox" id="pcaanalysis"> PCA analysis</label>
652+
<label><input type="checkbox" id="mapgrid"> Map grid</label>
621653
<button onclick="openAdditionalChartsModal()">Additional Charts</button>
622654
<button onclick="openPcaOptionsModal()">PCA Options</button>
623-
<hr>
624-
<p><strong>Relations:</strong></p>
625-
<div class="checkbox-group">
626-
<label><input type="checkbox" id="relationareadensity" checked> Area density</label>
627-
<label><input type="checkbox" id="relationhc" checked> Total hydrocarbons</label>
628-
<label><input type="checkbox" id="relationtotalsolids" checked> Total solids</label>
629-
<label><input type="checkbox" id="relationorganiccarbon" checked> Organic Carbon</label>
630-
</div>
631-
<button onclick="openParticleSizeModal()">Particle Size Details</button>
632-
</fieldset>
633-
634-
</aside>
635-
636-
<main class="output-area">
637-
<button id="sidebar-toggle" onclick="toggleSidebar()">&#9654;</button>
638-
639-
<div class="fixed-header-container">
640-
<div id="sedDredgeData" style="display: none;"></div>
641-
<div id="fileDisplay"></div>
642-
<div id="sample-info-table-container"></div>
643-
<div id="everything-maps" style="display: none; margin-top: 1rem;">
644-
<div id="map" class="map-container-original"></div>
645-
<div id="map-legend" class="map-legend-container" style="display: none;">
646-
<h4>Legend</h4>
655+
<hr>
656+
</div>
657+
<p><strong>Relations:</strong></p>
658+
<div class="checkbox-group">
659+
<label><input type="checkbox" id="relationareadensity"> Area density</label>
660+
<label><input type="checkbox" id="relationhc"> Total hydrocarbons</label>
661+
<label><input type="checkbox" id="relationtotalsolids"> Total solids</label>
662+
<label><input type="checkbox" id="relationorganiccarbon"> Organic Carbon</label>
663+
</div>
664+
</div>
665+
</fieldset>
666+
667+
<fieldset>
668+
<legend class="collapsible-legend">Chart Customisation</legend>
669+
<div class="collapsible-content">
670+
<button onclick="openDatasetLabels()">Enter Dataset Labels</button>
671+
<button onclick="openSampleLabels()">Enter Sample Labels</button>
672+
<button onclick="openChartModifiersModal()">Chart Modifiers</button>
673+
<hr>
674+
<div class="input-group">
675+
<label for="primary-sorting-select">Primary Sort:</label>
676+
<select id="primary-sorting-select"></select>
677+
</div>
678+
<div class="input-group">
679+
<label for="secondary-sorting-select">Secondary Sort:</label>
680+
<select id="secondary-sorting-select"></select>
647681
</div>
648-
<div style="text-align: center; margin: 10px 0; display: flex; justify-content: center; gap: 10px;">
649-
<button onclick="toggleFileDisplay()">Toggle File Display</button>
650-
<button id="toggleTooltipsBtn" onclick="toggleAllTooltips()">Show All Sample Names</button>
651-
<button onclick="openRadarSelectionModal()">Radar Plot Options</button>
652-
<button id="toggleMapLegendBtn" onclick="toggleMapLegend()">Show Legend</button>
653682
</div>
683+
</fieldset>
684+
<button id="toggleMapBtn" onclick="toggleMap()">Hide Map</button>
685+
686+
</aside>
687+
688+
<main class="output-area">
689+
<button id="sidebar-toggle" onclick="toggleSidebar()">&#9654;</button>
690+
691+
<div class="fixed-header-container">
692+
<div id="sedDredgeData" style="display: none;"></div>
693+
<div id="fileDisplay"></div>
694+
<div id="sample-info-table-container"></div>
695+
<div id="everything-maps" style="display: none; margin-top: 1rem;">
696+
<div id="map" class="map-container-original"></div>
697+
<div id="map-legend" class="map-legend-container" style="display: none;">
698+
<h4>Legend</h4>
699+
</div>
700+
<div style="text-align: center; margin: 10px 0; display: flex; justify-content: center; gap: 10px;">
701+
<button onclick="toggleFileDisplay()">Toggle File Display</button>
702+
<button id="toggleTooltipsBtn" onclick="toggleAllTooltips()">Show All Sample Names</button>
703+
<button onclick="openRadarSelectionModal()">Radar Plot Options</button>
704+
<button id="toggleMapLegendBtn" onclick="toggleMapLegend()">Show Legend</button>
705+
</div>
706+
</div>
707+
708+
<div id="chart-tab-buttons" class="tab-buttons"></div>
654709
</div>
655-
656-
<div id="chart-tab-buttons" class="tab-buttons"></div>
657-
</div>
658-
<div class="scrollable-content">
659-
<div id="charts-and-tables-container">
660-
<div id="chartContainer"></div>
661-
<div id="chartsForMapContainer"></div>
710+
<div class="scrollable-content">
711+
<div id="charts-and-tables-container">
712+
<div id="chartContainer"></div>
713+
<div id="chartsForMapContainer"></div>
714+
</div>
662715
</div>
663-
</div>
664716
</main>
717+
</div>
665718

666719
<!-- Modals -->
667720
<div id="sedDataModal" class="modal">
@@ -842,6 +895,19 @@ <h2>Select Radar Plot for Map Popups</h2>
842895
<script src="sdeTables.js"></script>
843896

844897
<script>
898+
function toggleMap() {
899+
const mapContainer = document.getElementById('everything-maps');
900+
const button = document.getElementById('toggleMapBtn');
901+
902+
if (mapContainer.style.display === 'none') {
903+
mapContainer.style.display = 'block';
904+
button.textContent = 'Hide Map';
905+
} else {
906+
mapContainer.style.display = 'none';
907+
button.textContent = 'Show Map';
908+
}
909+
}
910+
845911
function toggleSidebar() {
846912
const sidebar = document.getElementById('controls-sidebar');
847913
const toggleBtn = document.getElementById('sidebar-toggle');
@@ -1089,6 +1155,22 @@ <h2>Select Radar Plot for Map Popups</h2>
10891155
}
10901156
}
10911157
});
1158+
1159+
document.addEventListener("DOMContentLoaded", function() {
1160+
const legends = document.querySelectorAll(".collapsible-legend");
1161+
1162+
legends.forEach(legend => {
1163+
legend.addEventListener("click", function() {
1164+
// Find the immediate sibling which is the div containing the content
1165+
const content = this.nextElementSibling;
1166+
1167+
// Toggle the 'show-content' class on the content div
1168+
if (content) {
1169+
content.classList.toggle("show-content");
1170+
}
1171+
});
1172+
});
1173+
});
10921174
</script>
10931175
</body>
10941176
</html>

‎SedimentDataExplorer.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,11 @@
105105
disableRadioButtons(sortButtonGroups[sheetName], false);
106106
completeSheet[sheetName] = true;
107107
})*/
108-
subChartNames = ['samplegroup','chemicalgroup','positionplace','pcaanalysis','gorhamtest','totalhc','pahratios','ringfractions','eparatios','simpleratios','congenertest',
109-
'pcanormalise','pcalmw','pcahmw','pcaepa','pcasmallpts','pcaorganiccarbon',
110-
'relationareadensity','relationhc','relationtotalsolids','relationorganiccarbon'];
108+
subChartNames = ['samplegroup','chemicalgroup','correlationplots','pcaanalysis','gorhamtest','totalhc','pahratios',
109+
'ringfractions','eparatios','simpleratios','congenertest', 'pcanormalise','pcalmw','pcahmw',
110+
'pcaepa','pcasmallpts','pcaorganiccarbon','relationareadensity','relationhc',
111+
'relationtotalsolids','relationorganiccarbon','splitbyweight','splitbyarea',
112+
'totalsolidsandtotalcarbon','cumulative','mapgrid'];
111113
// relationNames = ['relationareadensity','relationhc','relationtotalsolids'];
112114
subsToDisplay = {};
113115
for (i = 0; i < subChartNames.length; i++) {

0 commit comments

Comments
 (0)