From 9a716701feaa718f65b385f6a7c6bbe07dbe85d1 Mon Sep 17 00:00:00 2001
From: "Carlos E. Ugarte" <cugarteblair@gmail.com>
Date: Tue, 14 Jan 2025 10:13:48 -0500
Subject: [PATCH] WIP Improve the legend integration with multiple series #202

---
 web-client/src/components/SrAppBar.vue        |   2 +-
 .../src/components/SrAtl03ColorLegend.vue     | 167 +++++++++++-------
 web-client/src/components/SrColorPalette.vue  |  56 +-----
 web-client/src/components/SrScatterPlot.vue   |  98 ++++++----
 web-client/src/db/SlideRuleDb.ts              |   4 +-
 web-client/src/types/SrTypes.ts               |  18 +-
 web-client/src/utils/colorUtils.ts            |  53 +++++-
 web-client/src/utils/plotUtils.ts             |   4 +-
 8 files changed, 243 insertions(+), 159 deletions(-)

diff --git a/web-client/src/components/SrAppBar.vue b/web-client/src/components/SrAppBar.vue
index abeb54b7..2d7e681b 100644
--- a/web-client/src/components/SrAppBar.vue
+++ b/web-client/src/components/SrAppBar.vue
@@ -103,7 +103,7 @@ const mobileMenu = ref<InstanceType<typeof Menu> | null>(null);
 
 const mobileMenuItems = [
     {
-        label: 'Map',
+        label: 'Request',
         icon: 'pi pi-sliders-h',
         command: handleRequestButtonClick
     },
diff --git a/web-client/src/components/SrAtl03ColorLegend.vue b/web-client/src/components/SrAtl03ColorLegend.vue
index ca512e30..d4343290 100644
--- a/web-client/src/components/SrAtl03ColorLegend.vue
+++ b/web-client/src/components/SrAtl03ColorLegend.vue
@@ -1,65 +1,114 @@
 <template>
-  <div class="legend">
-    <div 
-      v-for="option in atl03CnfOptions" 
-        :key="option.value" 
-        class="legend-item"
-      >
-      <div 
-        class="color-box" 
-        :style="{ backgroundColor: getColorForAtl03CnfValue(option.value) }"
-      ></div>
-      <div class="label">
-        {{ formatLabel(option.label) }} ({{ option.value }})
+    <div class="legend">
+      <!-- Existing ATL03 CNF color items -->
+        <Fieldset
+            class="sr-legend-box"
+            legend="ATL03 Colors"
+            :toggleable="false"
+            :collapsed="false" 
+        >
+            <div v-for="option in atl03CnfOptions" :key="option.value" class="legend-item">
+                <div class="color-box" :style="{ backgroundColor: getColorForAtl03CnfValue(option.value) }"></div>
+                <div class="label">{{ formatLabel(option.label) }} ({{ option.value }})</div>
+            </div>
+        </Fieldset>
+      <!-- New Manage Colors button -->
+      <div class="sr-restore-defaults">
+        <Button label="Manage Atl03 Colors" @click="showDialog = true" size="small" />
       </div>
+  
+      <!-- Dialog that contains SrAtl03CnfColors when visible -->
+      <Dialog
+        v-model:visible="showDialog"
+        :modal="true"
+        :draggable="false"
+        :resizable="false"
+        header="Manage ATL03 Colors"
+        @hide="onDialogHide"
+      >
+        <SrAtl03CnfColors
+          @selectionChanged="atl03CnfColorChanged"
+          @defaultsChanged="atl03CnfColorChanged"
+        />
+      </Dialog>
     </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, computed } from 'vue';
-import { useAtl03ColorMapStore } from '@/stores/atl03ColorMapStore';
-
-const store = useAtl03ColorMapStore();
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, onMounted, computed } from 'vue';
+  import Button from 'primevue/button';
+  import Dialog from 'primevue/dialog';
+  import SrAtl03CnfColors from './SrAtl03CnfColors.vue';
+  import { useAtl03ColorMapStore } from '@/stores/atl03ColorMapStore';
+  import Fieldset from 'primevue/fieldset';
 
-onMounted(async () => {
-  if (!store.isInitialized) {
-    await store.initializeAtl03ColorMapStore();
+  const emit = defineEmits(['restore-defaults-click', 'atl03CnfColorChanged']);
+  const atl03ColorMapStore = useAtl03ColorMapStore();
+  
+  // Dialog visibility state
+  const showDialog = ref(false);
+  
+  onMounted(async () => {
+    if (!atl03ColorMapStore.isInitialized) {
+      await atl03ColorMapStore.initializeAtl03ColorMapStore();
+    }
+  });
+  
+  const atl03CnfOptions = computed(() => atl03ColorMapStore.atl03CnfOptions);
+  
+  const getColorForAtl03CnfValue = (value: number): string => {
+    return atl03ColorMapStore.getColorForAtl03CnfValue(value);
+  };
+  
+  const formatLabel = (label: string): string => {
+    return label.replace(/^atl03_/, '').replace(/_/g, ' ');
+  };
+    
+  // Emitted when a color changes
+  const atl03CnfColorChanged = (event: { label: string; color: string }) => {
+    emit('atl03CnfColorChanged', event);
+  };
+  
+  function onDialogHide() {
+    // If you need to do something on close of the popup, do it here.
+    // e.g., reload color map, etc.
+  }
+  </script>
+  
+  <style scoped>
+  .legend {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .color-box {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #000;
+  }
+  
+  .label {
+    font-size: 14px;
+  }
+  
+  .sr-restore-defaults {
+    margin-top: 1rem;
   }
-});
-
-const atl03CnfOptions = computed(() => store.atl03CnfOptions);
-
-const getColorForAtl03CnfValue = (value: number): string => {
-  return store.getColorForAtl03CnfValue(value);
-};
-
-// Function to format the label
-const formatLabel = (label: string): string => {
-  return label.replace(/^atl03_/, '').replace(/_/g, ' ');
-};
-</script>
-
-<style scoped>
-.legend {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.color-box {
-  width: 20px;
-  height: 20px;
-  border: 1px solid #000;
-}
 
-.label {
-  font-size: 14px;
-}
-</style>
+  .sr-legend-box {
+    padding: 0.3125rem;
+    border-radius: var(--p-border-radius);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/web-client/src/components/SrColorPalette.vue b/web-client/src/components/SrColorPalette.vue
index a4a604f3..a9b87e94 100644
--- a/web-client/src/components/SrColorPalette.vue
+++ b/web-client/src/components/SrColorPalette.vue
@@ -2,7 +2,7 @@
     <div class="sr-color-palette">
         <Fieldset legend="Color Palette" class="sr-color-palette-content" :toggleable="true" :collapsed="false">
             <h2>Select Your Color Palette</h2>
-            <PickList v-model="colors" dataKey="label">
+            <PickList v-model="srColorTable" dataKey="label">
                 <!-- Custom source header with different background color -->
                 <template #sourceheader>
                     <div class="source-header">Available Colors</div>
@@ -37,7 +37,7 @@
             <SrMenu 
                 label="YAPC Color Map" 
                 v-model="atl03ColorMapStore.selectedAtl03YapcColorMapName"
-                :menuOptions="colorMapNames" 
+                :menuOptions="srColorMapNames" 
                 :getSelectedMenuItem="atl03ColorMapStore.getSelectedAtl03YapcColorMapName"
                 :setSelectedMenuItem="atl03ColorMapStore.setSelectedAtl03YapcColorMapName"
                 tooltipText="YAPC Color Map for atl03 scatter plot"
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue';
+import { onMounted } from 'vue';
 import PickList from 'primevue/picklist';
 import Button from 'primevue/button';
 import { useAtl03ColorMapStore } from '@/stores/atl03ColorMapStore';
@@ -55,63 +55,25 @@ import Fieldset from 'primevue/fieldset';
 import SrAtl03CnfColors from './SrAtl03CnfColors.vue';
 import SrAtl08ClassColors from './SrAtl08ClassColors.vue';
 import SrMenu from './SrMenu.vue';
-import { colorMapNames } from '@/utils/colorUtils';
+import { srColorMapNames,srColorTable } from '@/utils/colorUtils';
 
 const atl03ColorMapStore = useAtl03ColorMapStore();
-// Predefined list of CSS color names
-const cssColorNames = [
-    "AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black",
-    "BlanchedAlmond", "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse",
-    "Chocolate", "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", 
-    "DarkCyan", "DarkGoldenRod", "DarkGray", "DarkGreen", "DarkKhaki", "DarkMagenta", 
-    "DarkOliveGreen", "DarkOrange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", 
-    "DarkSlateBlue", "DarkSlateGray", "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue",
-    "DimGray", "DodgerBlue", "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro",
-    "GhostWhite", "Gold", "GoldenRod", "Gray", "Green", "GreenYellow", "HoneyDew", "HotPink",
-    "IndianRed", "Indigo", "Ivory", "Khaki", "Lavender", "LavenderBlush", "LawnGreen",
-    "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", "LightGoldenRodYellow", "LightGray",
-    "LightGreen", "LightPink", "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray",
-    "LightSteelBlue", "LightYellow", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine",
-    "MediumBlue", "MediumOrchid", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", 
-    "MediumSpringGreen", "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream",
-    "MistyRose", "Moccasin", "NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange",
-    "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", 
-    "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "RebeccaPurple",
-    "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "SeaShell",
-    "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "Snow", "SpringGreen", "SteelBlue",
-    "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke",
-    "Yellow", "YellowGreen"
-];
 
 interface AtColorChangeEvent {
   label: string;
   color?: string; // color can be undefined
 }
 
-const selectedColors = computed({
-    get: () => atl03ColorMapStore.getNamedColorPalette(),
-    set: (value) => atl03ColorMapStore.setNamedColorPalette(value)
-});
-
-
-// Initialize the source and target lists for the PickList
-const colors = ref([
-    cssColorNames.map(color => ({ label: color, value: color })),
-    selectedColors.value.map(color => ({ label: color, value: color }))
-]);
-
 onMounted(() => {
     atl03ColorMapStore.initializeAtl03ColorMapStore();
-    colors.value[1] = atl03ColorMapStore.getNamedColorPalette().map(color => ({ label: color, value: color }));
-    console.log('Mounted SrColorPalette colors:', colors.value);
-
+    srColorTable.value[1] = atl03ColorMapStore.getNamedColorPalette().map(color => ({ label: color, value: color }));
+    console.log('Mounted SrColorPalette colors:', srColorTable.value);
 });
 
 const restoreDefaultColors = async () => {
-    await atl03ColorMapStore.restoreDefaultColors();
-    colors.value[1] = atl03ColorMapStore.getNamedColorPalette().map(color => ({ label: color, value: color }));
-    console.log('SrColorPalette colors:', atl03ColorMapStore.getNamedColorPalette());
-};
+    await restoreDefaultColors();
+    console.log('SrColorPalette colors:', srColorTable.value);
+};  
 
 const atl03CnfColorChanged = async (colorKey:string): Promise<void> =>{
     console.log(`atl03CnfColorChanged:`,colorKey);
diff --git a/web-client/src/components/SrScatterPlot.vue b/web-client/src/components/SrScatterPlot.vue
index 5ce21812..1b73d3af 100644
--- a/web-client/src/components/SrScatterPlot.vue
+++ b/web-client/src/components/SrScatterPlot.vue
@@ -14,8 +14,13 @@
                     zlevel:100
                 }" 
             />
-            <SrAtl03ColorLegend v-if="((atl03ColorMapStore.getAtl03ColorKey() === 'atl03_cnf')   && ((chartStore.getFunc(computedReqIdStr) === 'atl03sp') || (atlChartFilterStore.getSelectedOverlayedReqIds().length>0)))" />
-            <SrAtl08ColorLegend v-if="((atl03ColorMapStore.getAtl03ColorKey() === 'atl08_class') && ((chartStore.getFunc(computedReqIdStr) === 'atl03sp') || (atlChartFilterStore.getSelectedOverlayedReqIds().length>0)))" />
+            <SrAtl03ColorLegend 
+                v-if="((theAtl03ColorMapStore.getAtl03ColorKey() === 'atl03_cnf') && ((chartStore.getFunc(computedReqIdStr) === 'atl03sp') || (atlChartFilterStore.getSelectedOverlayedReqIds().length>0)))" 
+                @restore-defaults-click="restoreAtl03DefaultColorsAndUpdatePlot" 
+            />
+            <SrAtl08ColorLegend 
+                v-if="((theAtl03ColorMapStore.getAtl03ColorKey() === 'atl08_class') && ((chartStore.getFunc(computedReqIdStr) === 'atl03sp') || (atlChartFilterStore.getSelectedOverlayedReqIds().length>0)))" 
+            />
         </div> 
         <div class="sr-scatter-plot-header">
             <div v-if="atlChartFilterStore.isLoading" class="loading-indicator">Loading...</div>
@@ -52,10 +57,12 @@
                                 display="chip"
                                 @update:modelValue="onMainYDataSelectionChange"
                         />
-                        <SrSymbolSize
-                            :reqIdStr="computedReqIdStr"
-                            @update:symbolSize="handleSymbolSizeUpdate"
-                        />
+                        <div>
+                            <SrSymbolSize
+                                :reqIdStr="computedReqIdStr"
+                                @update:symbolSize="handleSymbolSizeUpdate"
+                            />
+                        </div>
                     </Fieldset>
                 </div>
                 <div class="sr-multiselect-col">
@@ -72,10 +79,12 @@
                                         display="chip"
                                         @update:modelValue="(newValue) => onOverlayYDataSelectionChange(overlayedReqId, newValue)"
                                 />
-                                <SrSymbolSize
-                                    :reqIdStr="overlayedReqId.toString()"
-                                    @update:symbolSize="handleSymbolSizeUpdate"
-                                />
+                                <div>
+                                    <SrSymbolSize
+                                        :reqIdStr="overlayedReqId.toString()"
+                                        @update:symbolSize="handleSymbolSizeUpdate"
+                                    />
+                                </div>
                         </Fieldset>
                         </div>
                     </div>
@@ -87,9 +96,7 @@
 
 <script setup lang="ts">
 import { use } from "echarts/core"; 
-import { debounce } from 'lodash-es';
 import MultiSelect from "primevue/multiselect";
-import FloatLabel from "primevue/floatlabel";
 import ToggleButton from "primevue/togglebutton";
 import { CanvasRenderer } from "echarts/renderers";
 import { ScatterChart } from "echarts/charts";
@@ -114,6 +121,7 @@ import Fieldset from "primevue/fieldset";
 import { useReqParamsStore } from "@/stores/reqParamsStore";
 import SrReqDisplay from '@/components/SrReqDisplay.vue';
 import SrSymbolSize from '@/components/SrSymbolSize.vue';
+import { restoreAtl03DefaultColors } from '@/utils/colorUtils';
 
 const props = defineProps({
     startingReqId: {
@@ -125,7 +133,7 @@ const props = defineProps({
 const requestsStore = useRequestsStore();
 const chartStore = useChartStore();
 const atlChartFilterStore = useAtlChartFilterStore();
-const atl03ColorMapStore = useAtl03ColorMapStore();
+const theAtl03ColorMapStore = useAtl03ColorMapStore();
 const reqParamsStore = useReqParamsStore();
 
 const computedReqIdStr = computed(() => atlChartFilterStore.selectedReqIdMenuItem.value.toString());
@@ -133,7 +141,6 @@ const computedFunc = computed(() => chartStore.getFunc(computedReqIdStr.value));
 const computedElID = computed(() => `srMultiId-${computedReqIdStr.value}`);
 const yDataBindingsReactive = reactive<{ [key: string]: WritableComputedRef<string[]> }>({});
 const loadingComponent = ref(true);
-const setSymbolCounter = ref(0);
 
 function getOverlayedReqLegend(overlayedReqId: number): string {
     const label = findReqMenuLabel(overlayedReqId);
@@ -171,9 +178,16 @@ async function onOverlayYDataSelectionChange(thisoverlayedReqId: string | number
     await callPlotUpdateDebounced('from onOverlayYDataSelectionChange');
 }
 
+async function restoreAtl03DefaultColorsAndUpdatePlot() {
+    console.log('restoreAtl03DefaultColorsAndUpdatePlot');
+    restoreAtl03DefaultColors();
+    await callPlotUpdateDebounced('from restoreAtl03DefaultColorsAndUpdatePlot');
+}
+
 onMounted(async () => {
     try {
         //console.log('SrScatterPlot onMounted');
+        theAtl03ColorMapStore.initializeAtl03ColorMapStore();
         atlChartFilterStore.setIsWarning(true);
         atlChartFilterStore.setMessage('Loading...');
         atlChartFilterStore.showPhotonCloud = false;
@@ -184,15 +198,15 @@ onMounted(async () => {
         if (reqId > 0) {
             const func = await indexedDb.getFunc(reqId);
             await initSymbolSize(reqId);
-            atl03ColorMapStore.initializeAtl03ColorMapStore();
+            theAtl03ColorMapStore.initializeAtl03ColorMapStore();
             await prepareDbForReqId(reqId);                                                                      
     
             if (func === 'atl03sp') {
-                atl03ColorMapStore.setAtl03ColorKey('atl03_cnf');
+                theAtl03ColorMapStore.setAtl03ColorKey('atl03_cnf');
             } else if (func.includes('atl06')) {
-                atl03ColorMapStore.setAtl03ColorKey('YAPC');
+                theAtl03ColorMapStore.setAtl03ColorKey('YAPC');
             } else if (func.includes('atl08')) {
-                atl03ColorMapStore.setAtl03ColorKey('atl08_class');
+                theAtl03ColorMapStore.setAtl03ColorKey('atl08_class');
             }
         } else {
             console.warn('reqId is undefined');
@@ -231,13 +245,13 @@ const messageClass = computed(() => {
 });
 
 const computedSelectedAtl03ColorMap = computed(() => {
-  return atl03ColorMapStore.getSelectedAtl03YapcColorMapName();
+  return theAtl03ColorMapStore.getSelectedAtl03YapcColorMapName();
 });
 
 watch (() => computedSelectedAtl03ColorMap, async (newColorMap, oldColorMap) => {    
     //console.log('Atl03ColorMap changed from:', oldColorMap ,' to:', newColorMap);
-    atl03ColorMapStore.updateAtl03YapcColorMapValues();
-    //console.log('Color Map:', atl03ColorMapStore.getAtl03YapcColorMap());
+    theAtl03ColorMapStore.updateAtl03YapcColorMapValues();
+    //console.log('Color Map:', theAtl03ColorMapStore.getAtl03YapcColorMap());
     const reqId = atlChartFilterStore.getReqId();
     if (reqId > 0) {
         await callPlotUpdateDebounced('from watch computedSelectedAtl03ColorMap');
@@ -392,6 +406,7 @@ watch(
     overflow-y: auto;
     overflow-x: auto;
     width: auto;
+    min-width: 10rem;
 }
 
 .sr-show-hide-button {
@@ -414,33 +429,42 @@ watch(
   overflow-x: auto;
   width: auto;
 }
-
 .sr-multiselect-container {
     display: flex;
-    flex-direction: row;
-    justify-content: left;
-    align-items: center;
+    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
+    justify-content: space-between; /* Distribute items with equal spacing */
+    align-items: flex-start; /* Align items at the start */
     width: 100%;
-    margin: 0.25rem;
-    border: 0.25rem;
-    margin-top: 2.0rem;
+    margin: 0.25rem 0;
+    gap: 1rem; /* Consistent spacing between items */
 }
 
 .sr-multiselect-col {
+    flex: 1 1 45%; /* Allow columns to take up 45% of the container width */
+    min-width: 18rem; /* 300px equivalent */
+    max-width: 32rem; /* 500px equivalent */
     display: flex;
     flex-direction: column;
-    justify-content: left;
-    align-items: left;
-    width: 100%;
+    justify-content: flex-start;
+    align-items: stretch; /* Stretch items to match the width */
     margin: 0.25rem;
-    margin-top: 0rem;
-    margin-left: 1rem;
-    border: 0.25rem;
 }
+
+fieldset {
+    word-wrap: break-word; /* Break long words */
+    white-space: normal; /* Allow wrapping */
+}
+
+@media (max-width: 48rem) { /* 768px equivalent */
+    .sr-multiselect-col {
+        flex: 1 1 100%; /* Take up full width on small screens */
+        margin: 0.5rem 0;
+    }
+}
+
 .sr-multiselect {
-    width: fit-content;
-    margin: 0rem;
-    border: 0rem;
+    max-width: 100%; /* Prevent overflowing parent */
+    box-sizing: border-box; /* Include padding in width calculation */
 }
 
 .sr-select-color-key {
diff --git a/web-client/src/db/SlideRuleDb.ts b/web-client/src/db/SlideRuleDb.ts
index 2353b3f2..582e1abc 100644
--- a/web-client/src/db/SlideRuleDb.ts
+++ b/web-client/src/db/SlideRuleDb.ts
@@ -18,7 +18,7 @@ export interface SrRequestRecord {
     status?: string; // status: 'pending', 'processing', 'success', 'error'
     func?: string; // function name
     parameters?: ReqParams; //  parameters
-    svr_parms?: ReqParams; //  parameters used/returned from server
+    svr_parms?: SrSvrParmsUsed; //  parameters used/returned from server
     start_time?: Date; // start time of request
     end_time?: Date; //end time of request
     elapsed_time?: string; //  elapsed time
@@ -687,7 +687,7 @@ export class SlideRuleDexie extends Dexie {
         }
     }
 
-    async getSvrParams(req_id:number): Promise<SrSvrParmsUsed> {
+    async getSvrParams(req_id:number): Promise<SrSvrParmsUsed|NullReqParams> {
         try {
             const request = await this.requests.get(req_id);
             if (!request) {
diff --git a/web-client/src/types/SrTypes.ts b/web-client/src/types/SrTypes.ts
index c0dbecc4..9a058f56 100644
--- a/web-client/src/types/SrTypes.ts
+++ b/web-client/src/types/SrTypes.ts
@@ -1,4 +1,4 @@
-interface Region {
+export interface Region {
     rows: number;
     cols: number;
     cellsize: number;
@@ -9,14 +9,14 @@ interface Region {
     geojson: string;
   }
   
-  interface Raster extends Region {}
+  export interface Raster extends Region {}
   
-  interface Poly {
+  export interface Poly {
     lon: number;
     lat: number;
   }
   
-  interface Output {
+  export interface Output {
     open_on_complete: boolean;
     with_validation: boolean;
     format: string;
@@ -29,7 +29,7 @@ interface Region {
     ancillary: any[];
   }
   
-  interface Parms {
+  export interface Parms {
     region_mask: Region;
     read_timeout: number;
     environment_version: string;
@@ -48,12 +48,12 @@ interface Region {
     points_in_polygon: number;
   }
   
-  interface Rqst {
+  export interface Rqst {
     endpoint: string;
     parms: Parms;
   }
   
-  interface Server {
+  export interface Server {
     rqst: Rqst;
     environment: string;
     version: string;
@@ -63,14 +63,14 @@ interface Region {
     launch: string;
   }
   
-  interface RecordInfo {
+  export interface RecordInfo {
     time: string;
     as_geo: boolean;
     x: string;
     y: string;
   }
   
-  interface SrSvrParmsUsed {
+  export interface SrSvrParmsUsed {
     server: Server;
     recordinfo: RecordInfo;
   }
diff --git a/web-client/src/utils/colorUtils.ts b/web-client/src/utils/colorUtils.ts
index bc09e667..01389dde 100644
--- a/web-client/src/utils/colorUtils.ts
+++ b/web-client/src/utils/colorUtils.ts
@@ -1,5 +1,34 @@
+import { useAtl03ColorMapStore } from '@/stores/atl03ColorMapStore';
+import { computed,ref } from 'vue';
 
-export const colorMapNames = [
+const atl03ColorMapStore = useAtl03ColorMapStore();
+
+// Predefined list of CSS color names
+export const cssColorNames = [
+    "AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black",
+    "BlanchedAlmond", "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse",
+    "Chocolate", "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", 
+    "DarkCyan", "DarkGoldenRod", "DarkGray", "DarkGreen", "DarkKhaki", "DarkMagenta", 
+    "DarkOliveGreen", "DarkOrange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", 
+    "DarkSlateBlue", "DarkSlateGray", "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue",
+    "DimGray", "DodgerBlue", "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro",
+    "GhostWhite", "Gold", "GoldenRod", "Gray", "Green", "GreenYellow", "HoneyDew", "HotPink",
+    "IndianRed", "Indigo", "Ivory", "Khaki", "Lavender", "LavenderBlush", "LawnGreen",
+    "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", "LightGoldenRodYellow", "LightGray",
+    "LightGreen", "LightPink", "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray",
+    "LightSteelBlue", "LightYellow", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine",
+    "MediumBlue", "MediumOrchid", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", 
+    "MediumSpringGreen", "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream",
+    "MistyRose", "Moccasin", "NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange",
+    "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", 
+    "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "RebeccaPurple",
+    "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "SeaShell",
+    "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "Snow", "SpringGreen", "SteelBlue",
+    "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke",
+    "Yellow", "YellowGreen"
+];
+
+export const srColorMapNames = [
     'viridis','jet', 'hsv','hot','cool','spring','summer','autumn','winter','bone',
     'copper','greys','YIGnBu','greens','YIOrRd','bluered','RdBu','picnic',
     'rainbow','portland','blackbody','earth','electric',
@@ -9,11 +38,22 @@ export const colorMapNames = [
     'turbidity', 'velocity-blue', 'velocity-green','cubehelix'
 ];
 
+export const selectedColors = computed({
+    get: () => atl03ColorMapStore.getNamedColorPalette(),
+    set: (value) => atl03ColorMapStore.setNamedColorPalette(value)
+});
+
+// Initialize the source and target lists for the PickList
+export const srColorTable = ref([
+    cssColorNames.map(color => ({ label: color, value: color })),
+    selectedColors.value.map(color => ({ label: color, value: color }))
+]);
+
 export function getColorMapOptions() {
     // Get the list of valid colormap names
 
     // Map the colormap names to an array of { label, value } objects
-    const options = colorMapNames.map(name => {
+    const options = srColorMapNames.map(name => {
         return {
             name: name,
             value: name
@@ -23,6 +63,15 @@ export function getColorMapOptions() {
     return options;
 }
 
+export const restoreAtl03DefaultColors = async () => {
+    try{
+        await atl03ColorMapStore.restoreDefaultAtl03CnfColorMap();
+        console.log('SrColorPalette colors:', atl03ColorMapStore.getNamedColorPalette());
+    } catch (error) {
+        console.error('Error restoring default colors:', error);
+    }
+};
+
 export interface SrRGBColor {
     r: number;
     g: number;
diff --git a/web-client/src/utils/plotUtils.ts b/web-client/src/utils/plotUtils.ts
index 1ff21f2d..7e4176db 100644
--- a/web-client/src/utils/plotUtils.ts
+++ b/web-client/src/utils/plotUtils.ts
@@ -943,7 +943,7 @@ export const findReqMenuLabel = (reqId:number) => {
     return item ? item.label : 'unknown'
 }
 
-export async function initSymbolSize(req_id: number):number{
+export async function initSymbolSize(req_id: number):Promise<number>{
     const reqIdStr = req_id.toString();
     const func = await indexedDb.getFunc(req_id);
     const plotConfig = await indexedDb.getPlotConfig();
@@ -958,8 +958,8 @@ export async function initSymbolSize(req_id: number):number{
     } else {
         console.error('initSymbolSize unknown function:', func);
     }
-    return chartStore.getSymbolSize(reqIdStr);
     console.log('initSymbolSize reqId:', req_id, 'func:', func, 'symbolSize:', chartStore.getSymbolSize(reqIdStr));
+    return chartStore.getSymbolSize(reqIdStr);
 }
 
 export async function updateChartStore(req_id: number) {