Skip to content

Commit

Permalink
Add export button to the analysis page next to the record selector. #195
Browse files Browse the repository at this point in the history
  • Loading branch information
@cugarteblair
cugarteblair committed Dec 18, 2024
1 parent 76815b5 commit f99fff0
Show file tree
Hide file tree
Showing 10 changed files with 122 additions and 92 deletions.
14 changes: 8 additions & 6 deletions web-client/src/components/SrAnalysisMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
import { onActivated } from "vue";
import { onDeactivated } from "vue";
import SrLegendControl from './SrLegendControl.vue';
import { dumpMapLayers, initDeck, zoomMapForReqIdUsingView } from '@/utils/SrMapUtils';
import { initDeck, zoomMapForReqIdUsingView } from '@/utils/SrMapUtils';
import { useSrParquetCfgStore } from "@/stores/srParquetCfgStore";
import { useAtlChartFilterStore } from "@/stores/atlChartFilterStore";
import { useChartStore } from "@/stores/chartStore";
Expand All @@ -23,7 +23,7 @@
import { toLonLat } from 'ol/proj';
import { format } from 'ol/coordinate';
import { updateMapView } from "@/utils/SrMapUtils";
const template = 'Lat:{y}\u00B0, Long:{x}\u00B0';
const stringifyFunc = (coordinate: Coordinate) => {
const projName = computedProjName.value;
Expand All @@ -36,6 +36,7 @@
};
const mapContainer = ref<HTMLElement | null>(null);
const mapRef = ref<{ map: OLMap }>();
const legendRef = ref<any>();
const mapStore = useMapStore();
const chartStore = useChartStore();
const requestsStore = useRequestsStore();
Expand Down Expand Up @@ -112,12 +113,13 @@
const handleLegendControlCreated = (legendControl: any) => {
//console.log(legendControl);
const map = mapRef.value?.map;
if(map){
legendRef.value = legendControl;
const analysisMap = mapRef.value?.map;
if(analysisMap){
console.log("adding legendControl");
map.addControl(legendControl);
analysisMap.addControl(legendControl);
} else {
console.error("Error:map is null");
console.warn("analysisMap is null will be set in onMounted");
}
};
Expand Down
72 changes: 38 additions & 34 deletions web-client/src/components/SrAnalyzeOptSidebar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script setup lang="ts">
import { onMounted,ref,watch,computed, Ref } from 'vue';
import SrAnalysisMap from './SrAnalysisMap.vue';
import SrMenuInput, { type SrMenuItem } from './SrMenuInput.vue';
import SrRecReqDisplay from './SrRecIdReqDisplay.vue';
import SrListbox from './SrListbox.vue';
import SrSliderInput from './SrSliderInput.vue';
import SrAnalysisMap from '@/components/SrAnalysisMap.vue';
import SrMenuInput, { type SrMenuItem } from '@/components/SrMenuInput.vue';
import SrRecReqDisplay from '@/components/SrRecIdReqDisplay.vue';
import SrListbox from '@/components/SrListbox.vue';
import SrSliderInput from '@/components/SrSliderInput.vue';
import router from '@/router/index.js';
import { db } from '@/db/SlideRuleDb';
import { duckDbReadAndUpdateElevationData,duckDbReadAndUpdateSelectedLayer } from '@/utils/SrDuckDbUtils';
Expand All @@ -22,15 +22,16 @@ import { getColorMapOptions } from '@/utils/colorUtils';
import { useElevationColorMapStore } from '@/stores/elevationColorMapStore';
import { useToast } from 'primevue/usetoast';
import { useSrToastStore } from "@/stores/srToastStore";
import SrEditDesc from './SrEditDesc.vue';
import SrScatterPlotOptions from "./SrScatterPlotOptions.vue";
import MultiSelect from 'primevue/multiselect';
import SrEditDesc from '@/components/SrEditDesc.vue';
import SrScatterPlotOptions from "@/components/SrScatterPlotOptions.vue";
import { useChartStore } from '@/stores/chartStore';
import { refreshScatterPlot,updateChartStore } from '@/utils/plotUtils';
import { updateWhereClause } from '@/utils/SrMapUtils';
import { db as indexedDb } from "@/db/SlideRuleDb";
import SrCustomTooltip from './SrCustomTooltip.vue';
import SrCustomTooltip from '@/components/SrCustomTooltip.vue';
import Button from 'primevue/button';
import SrToggleButton from '@/components/SrToggleButton.vue';
import { type AtlxxReqParams } from '@/sliderule/icesat2';
const requestsStore = useRequestsStore();
const atlChartFilterStore = useAtlChartFilterStore();
Expand Down Expand Up @@ -79,7 +80,10 @@ const isMounted = ref(false);
const computedReqIdStr = computed(() => {
return selectedReqId.value.value;
});
import { type AtlxxReqParams } from '@/sliderule/icesat2';
const computedFunc = computed(() => {
return chartStore.getFunc(computedReqIdStr.value);
});
const addPhotonCloud = ref(false);
async function updatePlot(){
console.log('updatePlot');
Expand Down Expand Up @@ -539,9 +543,20 @@ const exportButtonClick = async () => {
:tooltipText=tooltipTextStr
/>
<SrCustomTooltip ref="tooltipRef"/>
</div>
</div>
<div class="sr-map-descr">
<div class="sr-analysis-opt-sidebar-map" ID="AnalysisMapDiv">
<div v-if="loading">Loading...{{ chartStore.getFunc(computedReqIdStr) }}</div>
<SrAnalysisMap v-else :reqId="Number(selectedReqId.value)"/>
</div>
<div class="sr-req-description">
<SrEditDesc :reqId="Number(selectedReqId.value)"/>
<Button
icon="pi pi-file-export"
@mouseover="tooltipRef.showTooltip($event, 'Export the current request')"
class="sr-export-button"
label="Export"
@mouseover="tooltipRef.showTooltip($event, 'Export')"
@mouseleave="tooltipRef.hideTooltip()"
@click="exportButtonClick"
rounded
Expand All @@ -551,32 +566,13 @@ const exportButtonClick = async () => {
variant="text"
>
</Button>
<MultiSelect
v-if=hasOverlayedReqs
v-model="selectedOverlayedReqIds"
size="small"
:options="overlayedReqIdOptions"
optionValue="value"
optionLabel="label"
placeholder="Overlay"
display="chip"
/>
</div>
</div>
<div class="sr-map-descr">
<div class="sr-analysis-opt-sidebar-map" ID="AnalysisMapDiv">
<div v-if="loading">Loading...{{ chartStore.getFunc(computedReqIdStr) }}</div>
<SrAnalysisMap v-else :reqId="Number(selectedReqId.value)"/>
</div>
<div class="sr-req-description">
<SrEditDesc :reqId="Number(selectedReqId.value)"/>
</div>
</div>
<div class="sr-pnts-colormap">
<div class="sr-analysis-max-pnts">
<SrSliderInput
v-model="useSrParquetCfgStore().maxNumPntsToDisplay"
label="Max Num Pnts"
label="Max Num Elevation Pnts"
:min="10000"
:max="5000000"
:defaultValue="100000"
Expand Down Expand Up @@ -777,16 +773,24 @@ const exportButtonClick = async () => {
.sr-req-description {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0.75rem;
border: 0.5rem solid;
font-size: smaller;
border: 1px solid;
padding: 0.25rem;
color:transparent
color:transparent;
}
.sr-export-button {
margin: 1.25rem;
}
.sr-photon-cloud {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
}
.sr-pnts-colormap {
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion web-client/src/components/SrLabelInfoIconButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
<style scoped>
.sr-label-info-icon-button-label {
margin-right: 0rem;
margin-right: 0.25rem;
white-space: nowrap;
font-size: small;
background-color: transparent;
Expand Down
76 changes: 41 additions & 35 deletions web-client/src/components/SrMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,16 +94,22 @@
//console.log("SrMap disableDragBox");
// Check if the DragBox interaction is added to the map.
if (mapRef.value?.map.getInteractions().getArray().includes(dragBox)) {
// If it is, remove it.
mapRef.value?.map.removeInteraction(dragBox);
// If it is, remove it.
mapRef.value?.map.removeInteraction(dragBox);
} else {
console.warn("SrMap disableDragBox DragBox not found");
}
}
function enableDragBox() {
//console.log("SrMap enableDragBox");
disableDragBox(); // reset then add
disableDrawPolygon();
mapRef.value?.map.addInteraction(dragBox);
if(mapRef.value?.map.addInteraction(dragBox)){
//console.log("SrMap enableDragBox dragBox added");
} else {
console.error("SrMap enableDragBox dragBox not added");
}
}
var boxStyle = new Style({
Expand Down Expand Up @@ -207,8 +213,8 @@
//console.log("disableDrawPolygon");
// Check if the Draw interaction is added to the map.
if (mapRef.value?.map.getInteractions().getArray().includes(drawPolygon)) {
// If it is, remove it.
mapRef.value?.map.removeInteraction(drawPolygon);
// If it is, remove it.
mapRef.value?.map.removeInteraction(drawPolygon);
}
}
Expand Down Expand Up @@ -636,36 +642,36 @@

<template>
<div class="sr-main-map">
<Map.OlMap ref="mapRef" @error="handleEvent"
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style="height: calc(100vh - 5rem); border-radius: 1rem; overflow: hidden;"
:controls="controls"
>
<MapControls.OlLayerswitcherControl
:selection="true"
:displayInLayerSwitcher="() => true"
:show_progress="true"
:mouseover="false"
:reordering="true"
:trash="false"
:extent="true"
/>

<MapControls.OlZoomControl />

<MapControls.OlMousepositionControl
:projection="computedProjName"
:coordinateFormat="stringifyFunc as any"
></MapControls.OlMousepositionControl>
<MapControls.OlAttributionControl :collapsible="true" :collapsed="true" />

<MapControls.OlScalelineControl />
<SrDrawControl ref="srDrawControlRef" @draw-control-created="handleDrawControlCreated" @picked-changed="handlePickedChanged" />
<SrLegendControl @legend-control-created="handleLegendControlCreated" />
<SrViewControl @view-control-created="handleViewControlCreated" @update-view="handleUpdateSrView"/>
<SrBaseLayerControl @baselayer-control-created="handleBaseLayerControlCreated" @update-baselayer="handleUpdateBaseLayer" />
</Map.OlMap>
<Map.OlMap ref="mapRef" @error="handleEvent"
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style="height: calc(100vh - 5rem); border-radius: 1rem; overflow: hidden;"
:controls="controls"
>
<MapControls.OlLayerswitcherControl
:selection="true"
:displayInLayerSwitcher="() => true"
:show_progress="true"
:mouseover="false"
:reordering="true"
:trash="false"
:extent="true"
/>

<MapControls.OlZoomControl />
<MapControls.OlMousepositionControl
:projection="computedProjName"
:coordinateFormat="stringifyFunc as any"
></MapControls.OlMousepositionControl>
<MapControls.OlAttributionControl :collapsible="true" :collapsed="true" />

<MapControls.OlScalelineControl />
<SrDrawControl ref="srDrawControlRef" @draw-control-created="handleDrawControlCreated" @picked-changed="handlePickedChanged" />
<SrLegendControl @legend-control-created="handleLegendControlCreated" />
<SrViewControl @view-control-created="handleViewControlCreated" @update-view="handleUpdateSrView"/>
<SrBaseLayerControl @baselayer-control-created="handleBaseLayerControlCreated" @update-baselayer="handleUpdateBaseLayer" />
</Map.OlMap>
<div class="sr-tooltip-style" id="tooltip"></div>
</div>
</template>
Expand Down
7 changes: 4 additions & 3 deletions web-client/src/components/SrRecords.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,8 @@ const tooltipRef = ref();
:value="requestsStore.reqs"
tableStyle=" width:100%;"
table-layout="auto"
size="small"
resizableColumns="true"
scrollable
scrollHeight="flex"
:paginator="true"
Expand Down Expand Up @@ -323,9 +325,8 @@ const tooltipRef = ref();
.sr-records-container {
display: block;
width: fit-content;
overflow-x: auto;
padding: 0.5rem;
margin: 0.5rem;
padding: 1.5rem;
margin: 1.5rem;
}
.sr-analyze {
Expand Down
24 changes: 19 additions & 5 deletions web-client/src/components/SrScatterPlot.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,26 @@
/>
<SrAtl03ColorLegend v-if="((atl03ColorMapStore.getAtl03ColorKey() === 'atl03_cnf') && (chartStore.getFunc(computedReqIdStr) === 'atl03sp'))" />
<SrAtl08ColorLegend v-if="((atl03ColorMapStore.getAtl03ColorKey() === 'atl08_class') && (chartStore.getFunc(computedReqIdStr) === 'atl03sp'))" />
</div>
</div>
<div class="sr-scatter-plot-footer">
<div class="sr-photon-cloud">
<SrToggleButton
v-if="!computedFunc.includes('atl03')"
v-model="atlChartFilterStore.addPhotonCloud"
:getValue="atlChartFilterStore.getAddPhotonCloud"
:setValue="atlChartFilterStore.setAddPhotonCloud"
label="Add Photon Cloud"
tooltipText="Add photon cloud to map"
/>
</div>
</div>
</div>
</template>

<script setup lang="ts">
import { use } from "echarts/core";
import MultiSelect from "primevue/multiselect";
import { type SrMenuItem } from './SrMenuInput.vue';
import { type SrMenuItem } from '@/components/SrMenuInput.vue';
import FloatLabel from "primevue/floatlabel";
import { CanvasRenderer } from "echarts/renderers";
import { ScatterChart } from "echarts/charts";
Expand All @@ -65,17 +77,19 @@ import { useAtlChartFilterStore } from "@/stores/atlChartFilterStore";
import { db as indexedDb } from "@/db/SlideRuleDb";
import { useAtl03ColorMapStore } from "@/stores/atl03ColorMapStore";
import { refreshScatterPlot } from "@/utils/plotUtils";
import SrAtl03ColorLegend from "./SrAtl03ColorLegend.vue";
import SrAtl08ColorLegend from "./SrAtl08ColorLegend.vue";
import SrAtl03ColorLegend from "@/components/SrAtl03ColorLegend.vue";
import SrAtl08ColorLegend from "@/components/SrAtl08ColorLegend.vue";
import { useChartStore } from "@/stores/chartStore";
import { db } from "@/db/SlideRuleDb";
import { createDuckDbClient } from '@/utils//SrDuckDb';
import { useRequestsStore } from '@/stores/requestsStore';
import SrToggleButton from "@/components/SrToggleButton.vue";
const chartStore = useChartStore();
const atlChartFilterStore = useAtlChartFilterStore();
const atl03ColorMapStore = useAtl03ColorMapStore();
const computedReqIdStr = computed(() => atlChartFilterStore.currentReqId.toString());
const computedFunc = computed(() => chartStore.getFunc(computedReqIdStr.value));
const computedElID = computed(() => `srMultiId-${computedReqIdStr.value}`);
const yDataBindingsReactive = reactive<{ [key: string]: WritableComputedRef<string[]> }>({});
Expand Down Expand Up @@ -263,7 +277,7 @@ watch (() => computedSelectedAtl03ColorMap, async (newColorMap, oldColorMap) =>
}
.sr-multiselect {
width: 100%;
width: fit-content;
margin: 0rem;
border: 0rem;
}
Expand Down
3 changes: 2 additions & 1 deletion web-client/src/components/SrToggleButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,8 @@ const designTokenForToggleSwitch = ref({
.sr-toggle-row {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: center;
align-items: center;
padding: 0.125rem;
font-size: small;
}
Expand Down
Loading

0 comments on commit f99fff0

Please sign in to comment.