Include layer name as property (#151)

* Push layer name as field Include layer name as one of the properties for every feature to identify from where the feature is be coming from. Signed-off-by: Vijayan Balasubramanian <[email protected]>
opensearch-project · Dec 31, 2022 · 85768e7 · 85768e7
1 parent a0e63bc
commit 85768e7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/maps_dashboards/public/components/tooltip/tooltipContainer.tsx b/maps_dashboards/public/components/tooltip/tooltipContainer.tsx
@@ -42,7 +42,7 @@ function toTable(featureGroupItem: FeatureGroupItem) {
       table.push(featureToTableRow(feature.properties));
     }
   }
-  return { table, layer: featureGroupItem.layer };
+  return { table, layer: featureGroupItem.layer.name };
 }
 
 function createTableData(featureGroups: FeatureGroupItem[]) {
@@ -64,10 +64,10 @@ export function TooltipContainer({
       return 'All layers';
     }
     if (selectedLayerIndexes.length === 1) {
-      return tables[selectedLayerIndexes[0]].layer.name;
+      return tables[selectedLayerIndexes[0]].layer;
     }
     if (selectedLayerIndexes.length > 1) {
-      return `${tables[selectedLayerIndexes[0]].layer.name}, +${tables.length - 1}`;
+      return `${tables[selectedLayerIndexes[0]].layer}, +${tables.length - 1}`;
     }
     return '';
   }, [selectedLayerIndexes, tables]);

diff --git a/maps_dashboards/public/components/tooltip/tooltipTable.tsx b/maps_dashboards/public/components/tooltip/tooltipTable.tsx
@@ -14,15 +14,14 @@ import {
   EuiText,
 } from '@elastic/eui';
 import React, { useState, Fragment, useCallback, useEffect, useMemo } from 'react';
-import { DocumentLayerSpecification } from '../../model/mapLayerType';
 
 export type RowData = {
   key: string;
   value: string;
 };
 export type PageData = RowData[];
 export type TableData = PageData[];
-type Table = { table: TableData; layer: DocumentLayerSpecification };
+type Table = { table: TableData; layer: string };
 
 export const ALL_LAYERS = -1;
 
@@ -37,12 +36,27 @@ function mergeTables(tables: Table[], selectedIndex: number[]) {
   const merged: TableData = [];
   const allSelected = selectedIndex.includes(ALL_LAYERS);
 
-  for (let i = 0; i < tables.length; i++) {
-    if (allSelected || selectedIndex.includes(i)) {
-      merged.push(...tables[i].table);
+  if (!allSelected) {
+    for (const index of selectedIndex) {
+      merged.push(...tables[index].table);
     }
+    return merged;
+  }
+  const features: PageData[] = [];
+  for (let i = 0; i < tables.length; i++) {
+    tables[i].table.map((feature) => {
+      // Add layer name to every feature as first field
+      features.push(
+        [
+          {
+            key: 'Layer name',
+            value: tables[i].layer,
+          },
+        ].concat(feature.slice(0))
+      );
+    });
+    merged.push(...features);
   }
-
   return merged;
 }
 
@@ -54,7 +68,7 @@ const TooltipTable = ({
 }: Props) => {
   const [selectedLayers, setSelectedLayers] = useState<EuiComboBoxOptionOption<number>[]>([
     {
-      label: tables[0]?.layer.name ?? '',
+      label: tables[0]?.layer ?? '',
       value: 0,
       key: '0',
     },
@@ -110,7 +124,7 @@ const TooltipTable = ({
       layerOptions.push({ label: 'All layers', value: ALL_LAYERS, key: '-1' });
     }
     tables.forEach(({ layer }, i) => {
-      layerOptions.push({ label: layer.name, value: i, key: `${i}` });
+      layerOptions.push({ label: layer, value: i, key: `${i}` });
     });
     return layerOptions;
   }, [tables]);