auto search bar, improve sidebar toggling

Author: BryonLewis

client/src/MapStore.ts

@@ -144,8 +144,6 @@ export default class MapStore {
     return foundMapLayerSearchable;
   });
 
-  public static mapLayerSearchableEnabled = ref(false);
-
   // ToolTips
   public static toolTipMenuOpen = ref(false);
 
@@ -222,9 +220,6 @@ export default class MapStore {
     };
   };
 
-  // Charts
-  public static chartsOpen = ref(false);
-
   // SideBar Cards
   public static activeSideBarCard: Ref<undefined | SideBarCard> = ref(undefined);
 

client/src/components/Charts/Charts.vue

@@ -38,7 +38,6 @@ export default defineComponent({
     );
     const enabledMapPanels: Ref<number[]> = ref([]);
     const enabledChartPanels: Ref<Record<number, number[]>> = ref({});
-    const chartVisible = computed(() => MapStore.chartsOpen.value);
     const addingEditingChart = ref(false);
     const editingChart: Ref<CustomChart | null> = ref(null);
     const editingChartIndex = ref(-1);
@@ -119,7 +118,6 @@ export default defineComponent({
       }
     };
     return {
-      chartVisible,
       proMode: MapStore.proMode,
       configuredChartsByMap,
       addingEditingChart,

client/src/components/VectorFeatureSearch/Editor/VectorFeatureSearchEditor.vue

@@ -28,6 +28,7 @@ export default defineComponent({
         sortable: false,
         hoverHighlight: false,
         geospatialFilterEnabled: false,
+        autoOpenSideBar: true,
         zoomButton: false,
         selectionButton: false,
         zoomType: 'level',
@@ -261,6 +262,7 @@ export default defineComponent({
               <strong>Display</strong>
             </v-expansion-panel-title>
             <v-expansion-panel-text>
+              <v-switch v-model="localData.display.autoOpenSideBar" label="Auto Open Sidebar" />
               <v-expansion-panels>
                 <v-expansion-panel>
                   <v-expansion-panel-title>

client/src/map/mapVectorLayers.ts

@@ -9,6 +9,7 @@ import { calculateColors } from './mapColors';
 import { updateProps } from './mapProperties';
 import { getLayerDefaultFilter, updateFilters } from './mapFilters';
 import { subLayerMapping, updateHeatmap } from './mapHeatmap';
+import { getVectorLayerDisplayConfig } from '../utils';
 
 const addedLayers: Ref<VectorMapLayer[]> = ref([]);
 const defaultAnnotationColor = 'black';
@@ -293,6 +294,13 @@ const toggleVectorMapLayers = (map: maplibregl.Map) => {
     if (MapStore.visibleMapLayers.value.has(`${layer.type}_${layer.id}`)) {
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       updateVectorLayer(layer);
+      if (layer?.default_style.searchableVectorFeatureData) {
+        if (layer.default_style.searchableVectorFeatureData.display.autoOpenSideBar) {
+          if (MapStore.activeSideBarCard.value !== 'searchableVectors') {
+            MapStore.toggleContext('searchableVectors');
+          }
+        }
+      }
     }
   });
 };

client/src/types.ts

@@ -862,6 +862,7 @@ export interface SearchableVectorData {
   mainTextSearchFields?: { title: string, value: string }[];
   configurableFilters: string[]; // Keys for searchable vector features
   display: {
+    autoOpenSideBar: boolean;
     geospatialFilterEnabled: boolean; // Filter results based on map display as well
     sortable: boolean; // Ability to sort items by something other than the name of the titleKey field.
     titleKey: string; // key of property to display

client/src/views/HomePage.vue

@@ -76,15 +76,13 @@ export default defineComponent({
 
     const toggleVectorFeatureSearch = () => {
       if (MapStore.mapLayerVectorSearchable.value.length) {
-        MapStore.mapLayerSearchableEnabled.value = !MapStore.mapLayerSearchableEnabled.value;
         MapStore.toggleContext('searchableVectors');
       }
     };
 
     const chartView = computed(() => MapStore.activeSideBarCard.value === 'charts');
     const toggleChartView = () => {
       MapStore.toggleContext('charts');
-      MapStore.chartsOpen.value = MapStore.sideBarCardSettings.value.charts.enabled;
     };
 
     const osmBaseMapType = computed(() => {
@@ -102,6 +100,16 @@ export default defineComponent({
       return '20px';
     });
 
+    const SideBarHasData = computed(() => {
+      if (MapStore.activeSideBarCard.value === 'searchableVectors') {
+        return !!MapStore.mapLayerVectorSearchable.value.length;
+      }
+      if (MapStore.activeSideBarCard.value === 'charts') {
+        return true;
+      }
+      return false;
+    });
+
     return {
       oauthClient,
       loginText,
@@ -129,11 +137,11 @@ export default defineComponent({
       mapLayerVectorSearch: MapStore.mapLayerVectorSearchable,
       hasVectorFeatureSearch,
       toggleVectorFeatureSearch,
-      mapLayerVectorSearchEnabled: MapStore.mapLayerSearchableEnabled,
       sideBarWidth: MapStore.currentSideBarWidth,
       sideBarOpen: MapStore.sideBarOpen,
       activeSideBar: MapStore.activeSideBarCard,
       rightSideBarPadding,
+      SideBarHasData,
     };
   },
 });
@@ -232,7 +240,7 @@ export default defineComponent({
           v-bind="props"
           class="mx-2"
           size="30"
-          :color="mapLayerVectorSearchEnabled ? 'primary' : ''"
+          :color="activeSideBar === 'searchableVectors' ? 'primary' : ''"
           @click="toggleVectorFeatureSearch()"
         >
           mdi-map-search-outline
@@ -302,10 +310,10 @@ export default defineComponent({
       </v-col>
     </v-row>
     <selected-feature-list />
-    <v-navigation-drawer :model-value="sideBarOpen" location="right" :width="sideBarWidth" permanent>
+    <v-navigation-drawer v-if="SideBarHasData" :model-value="sideBarOpen" location="right" :width="sideBarWidth" permanent>
       <indicator-filterable-list v-if="activeSideBar === 'indicators'" :indicators="indicators" />
       <charts v-if="activeSideBar === 'charts'" />
-      <VectorFeatureSearch v-if="activeSideBar === 'searchableVectors'" />
+      <VectorFeatureSearch v-if="mapLayerVectorSearch.length && activeSideBar === 'searchableVectors'" />
     </v-navigation-drawer>
     <MapLegend class="static-map-legend" :style="`right: ${rightSideBarPadding};transition: all 0.2s ease`" />
   </v-container>