Merge pull request #241 from SlideRuleEarth/carlos-dev

Carlos dev
SlideRuleEarth · Jan 13, 2025 · e67a187 · e67a187
2 parents eac2fd4 + 930ac3d
commit e67a187
Show file tree

Hide file tree

Showing 14 changed files with 369 additions and 215 deletions.
diff --git a/web-client/src/components/SrAnalysisMap.vue b/web-client/src/components/SrAnalysisMap.vue
@@ -22,6 +22,8 @@
     import { format } from 'ol/coordinate';
     import { updateMapView,dumpMapLayers } from "@/utils/SrMapUtils";
     import SrRecordSelectorControl from "./SrRecordSelectorControl.vue";
+    import SrCustomTooltip from '@/components/SrCustomTooltip.vue';
+    import SrCheckbox from "@/components/SrCheckbox.vue";
 
     const template = 'Lat:{y}\u00B0, Long:{x}\u00B0';
     const stringifyFunc = (coordinate: Coordinate) => {
@@ -169,12 +171,14 @@
 
 <template>
 <div class="sr-analysis-map-panel">
-    <div class="sr-isLoadingEl" v-if="elevationIsLoading" >
-        <ProgressSpinner v-if="mapStore.isLoading" animationDuration="1.25s" style="width: 1rem; height: 1rem"/>
-        {{computedLoadMsg}}
-    </div>
-    <div class="sr-notLoadingEl" v-else >
-        {{ computedLoadMsg }}
+    <div class="sr-analysis-map-header">
+        <div class="sr-isLoadingEl" v-if="elevationIsLoading" >
+            <ProgressSpinner v-if="mapStore.isLoading" animationDuration="1.25s" style="width: 1rem; height: 1rem"/>
+            {{computedLoadMsg}}
+        </div>
+        <div class="sr-notLoadingEl" v-else >
+            {{ computedLoadMsg }}
+        </div>
     </div>
     <div ref="mapContainer" class="sr-map-container" >
         <Map.OlMap 
@@ -186,34 +190,49 @@
             class="sr-ol-map"
         >
 
-        <MapControls.OlZoomControl  />
-
-        <MapControls.OlMousepositionControl 
-            :projection="computedProjName"
-            :coordinateFormat="stringifyFunc as any"
-        />
-
-        <MapControls.OlScalelineControl />
-        <SrLegendControl @legend-control-created="handleLegendControlCreated" />
-        <SrRecordSelectorControl @record-selector-control-created="handleRecordSelectorControlCreated" @update-record-selector="handleUpdateRecordSelector"/>
-        <Layers.OlVectorLayer title="Drawing Layer" name= 'Drawing Layer' :zIndex=999 >
-        <Sources.OlSourceVector :projection="computedProjName">
+            <MapControls.OlZoomControl  />
+
+            <MapControls.OlMousepositionControl 
+                :projection="computedProjName"
+                :coordinateFormat="stringifyFunc as any"
+            />
+
+            <MapControls.OlScalelineControl />
+            <SrLegendControl @legend-control-created="handleLegendControlCreated" />
+            <SrRecordSelectorControl @record-selector-control-created="handleRecordSelectorControlCreated" @update-record-selector="handleUpdateRecordSelector"/>
+            <Layers.OlVectorLayer title="Drawing Layer" name= 'Drawing Layer' :zIndex=999 >
+            <Sources.OlSourceVector :projection="computedProjName">
+                <Styles.OlStyle>
+                    <Styles.OlStyleStroke color="blue" :width="2"></Styles.OlStyleStroke>
+                    <Styles.OlStyleFill color="rgba(255, 255, 0, 0.4)"></Styles.OlStyleFill>
+                </Styles.OlStyle>
+            </Sources.OlSourceVector>
             <Styles.OlStyle>
-                <Styles.OlStyleStroke color="blue" :width="2"></Styles.OlStyleStroke>
-                <Styles.OlStyleFill color="rgba(255, 255, 0, 0.4)"></Styles.OlStyleFill>
+                <Styles.OlStyleStroke color="red" :width="2"></Styles.OlStyleStroke>
+                <Styles.OlStyleFill color="rgba(255,255,255,0.1)"></Styles.OlStyleFill>
+                <Styles.OlStyleCircle :radius="7">
+                <Styles.OlStyleFill color="red"></Styles.OlStyleFill>
+                </Styles.OlStyleCircle>
             </Styles.OlStyle>
-        </Sources.OlSourceVector>
-        <Styles.OlStyle>
-            <Styles.OlStyleStroke color="red" :width="2"></Styles.OlStyleStroke>
-            <Styles.OlStyleFill color="rgba(255,255,255,0.1)"></Styles.OlStyleFill>
-            <Styles.OlStyleCircle :radius="7">
-            <Styles.OlStyleFill color="red"></Styles.OlStyleFill>
-            </Styles.OlStyleCircle>
-        </Styles.OlStyle>
-        </Layers.OlVectorLayer>
-        <MapControls.OlAttributionControl :collapsible="true" :collapsed="true" />
+            </Layers.OlVectorLayer>
+            <MapControls.OlAttributionControl :collapsible="true" :collapsed="true" />
         </Map.OlMap>
-        <div class="sr-tooltip-style" id="tooltip"></div>
+        <div class="sr-tooltip-style" id="tooltip">
+            <SrCustomTooltip 
+                ref="tooltipRef"
+            />
+        </div>
+    </div>
+    <div>
+        <SrCheckbox 
+            class="sr-show-hide-tooltip"
+            label="Elevation data on hover"
+            labelFontSize="small"
+            tooltipText="Show or hide the elevation when hovering mouse over a track"
+            v-model="mapStore.showTheTooltip"
+            :disabled="useMapStore().isLoading"
+            size="small" 
+        />            
     </div>
 </div>
 
@@ -232,6 +251,29 @@
   margin: 1rem;
   flex:1 1 auto; /* grow, shrink, basis - let it stretch*/
 }
+.sr-analysis-map-header {
+    display: flex;
+    flex-direction: row;
+    justify-content:space-around;
+    align-items:center;
+    width: 100%;
+    height: 2rem;
+    background: rgba(0, 0, 0, 0.25);
+    color: var(--p-primary-color);
+    border-radius: var(--p-border-radius);
+    font-size: 1rem;
+    font-weight: bold;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.sr-show-hide-tooltip {
+    height: 0.5rem;
+    margin: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
 :deep(.sr-map-container) {
   margin-bottom: 0.5rem;
@@ -245,6 +287,21 @@
   height: 100%;
   overflow: hidden;    /* if you still want curved corners to clip the child */
 }
+
+:deep(.sr-select-menu-item) {
+    margin-top:0rem;
+    padding: 0rem; 
+    font-size: small;
+    width: 8rem;
+}
+
+:deep(.sr-select-menu-default) {
+    padding: 0rem; 
+    font-size: small;
+    width: 8rem; 
+    height: 2.25rem; 
+}
+
 :deep(.sr-ol-map) {
     min-width: 15rem; 
     min-height: 15rem; 
@@ -254,6 +311,7 @@
     overflow: hidden; 
     resize:both;
 }
+
 .sr-tooltip-style {
     position: absolute;
     z-index: 10;
@@ -265,6 +323,7 @@
     font-size: 1rem;
     max-width: 20rem;
 }
+
 .sr-analysis-max-pnts {
     display: flex;
     flex-direction: column;
@@ -288,11 +347,13 @@
   border-radius: var(--p-border-radius);
   font-size:smaller;
 }
+
 :deep(.sr-legend-control){
   background: rgba(255, 255, 255, 0.25);
   bottom: 0.5rem;
   right: 2.5rem;
 }
+
 .sr-isLoadingEl {
     display: flex;
     flex-direction: column;

diff --git a/web-client/src/components/SrAnalyzeOptSidebar.vue b/web-client/src/components/SrAnalyzeOptSidebar.vue
@@ -25,7 +25,7 @@ import { useSrToastStore } from "@/stores/srToastStore";
 import SrEditDesc from '@/components/SrEditDesc.vue';
 import SrScatterPlotOptions from "@/components/SrScatterPlotOptions.vue";
 import { useChartStore } from '@/stores/chartStore';
-import { initSymbolSize, updateChartStore } from '@/utils/plotUtils';
+import { updateChartStore } from '@/utils/plotUtils';
 import SrCustomTooltip from '@/components/SrCustomTooltip.vue';
 import Button from 'primevue/button';
 import { clicked } from '@/utils/SrMapUtils'
@@ -442,7 +442,7 @@ const exportButtonClick = async () => {
                         icon="pi pi-file-export"
                         class="sr-export-button"
                         label="Export"
-                        @mouseover="tooltipRef.showTooltip($event, 'Export')"
+                        @mouseover="tooltipRef.showTooltip($event, 'Export the parquet file of this record')"
                         @mouseleave="tooltipRef.hideTooltip()"
                         @click="exportButtonClick"
                         rounded 
@@ -617,18 +617,7 @@ const exportButtonClick = async () => {
 </template>
 <style scoped>
     
-    :deep(.sr-select-menu-item) {
-        padding: 1rem; 
-        font-size: small;
-        width: 8rem;
-    }
 
-    :deep(.sr-select-menu-default) {
-        padding: 0.25rem; 
-        font-size: small;
-        width: 8rem; 
-        height: 2.25rem; 
-    }
 
     :deep(.sr-analysis-opt-sidebar) {
         display: flex;

diff --git a/web-client/src/components/SrCustomTooltip.vue b/web-client/src/components/SrCustomTooltip.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="tooltip" v-if="visible" :style="tooltipStyle">{{ text }}</div>
-  </template>
+</template>
 
   <script setup lang="ts">
   import { ref } from 'vue';

diff --git a/web-client/src/components/SrRecordSelectorControl.vue b/web-client/src/components/SrRecordSelectorControl.vue
@@ -68,7 +68,13 @@ watch(selectedReqIdValue, async (newSelection, oldSelection) => {
 </template>
 
 <style scoped>
-.ol-control.sr-record-selector-control .select-baseLayer select {
+:deep(.sr-menu-input-wrapper) {
+  margin-top: 0.5rem;
+  margin-left: 0rem;
+}
+
+.ol-control .sr-select-menu-item {
+  margin:0rem;
   color: white;
   background-color: black;
   border-radius: var(--p-border-radius);
@@ -79,6 +85,7 @@ watch(selectedReqIdValue, async (newSelection, oldSelection) => {
   flex-direction: row; /* Stack children horizontally */
   align-items: center; /* Centers children vertically */
   justify-content: center; /* Centers children horizontally */
-  margin: 0px;
+  margin: 0rem;
+  padding: 0rem;
 }
 </style>
diff --git a/web-client/src/components/SrRecords.vue b/web-client/src/components/SrRecords.vue
@@ -153,10 +153,11 @@ const confirmDeleteAllReqs = () => {
     }
 };
 
-onMounted(() => {
+onMounted(async () => {
     console.log('SrRecords mounted');
     requestsStore.watchReqTable();
     requestsStore.fetchReqs();
+    atlChartFilterStore.reqIdMenuItems =  await requestsStore.getMenuItems();
 });
 
 onUnmounted(() => {