Use legend label as label for selected layer names in Selection Panel

Fixes #588
jumpinjackie · Dec 19, 2019 · 99c8daa · 99c8daa
1 parent a6ff43e
commit 99c8daa
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/components/selection-panel.tsx b/src/components/selection-panel.tsx
@@ -59,6 +59,7 @@ const DefaultSelectedFeature = (props: ISelectedFeatureProps) => {
 export interface ISelectionPanelProps {
     locale?: string;
     selection: SelectedFeatureSet;
+    onResolveLayerLabel?: (layerId: string, layerName: string) => string | undefined;
     onRequestZoomToFeature: (feat: SelectedFeature) => void;
     onShowSelectedFeature: (layerId: string, selectionKey: string) => void;
     maxHeight?: number;
@@ -248,7 +249,8 @@ export const SelectionPanel = (props: ISelectionPanelProps) => {
                     <div className="bp3-select selection-panel-layer-selector">
                         <HTMLSelect value={selectedLayerIndex} style={LAYER_COMBO_STYLE} onChange={onSelectedLayerChanged}>
                             {selection.SelectedLayer.map((layer: SelectedLayer, index: number) => {
-                                return <option key={`selected-layer-${layer["@id"]}`} value={`${index}`}>{layer["@name"]}</option>
+                                const label = props?.onResolveLayerLabel?.(layer["@id"], layer["@name"]) ?? layer["@name"];
+                                return <option key={`selected-layer-${layer["@id"]}`} value={`${index}`}>{label}</option>
                             })}
                         </HTMLSelect>
                     </div>

diff --git a/src/containers/selection-panel.tsx b/src/containers/selection-panel.tsx
@@ -14,7 +14,7 @@ import {
 } from "../api/common";
 import { Callout, Intent } from '@blueprintjs/core';
 import { AppContext } from '../components/context';
-import { useViewerLocale, useActiveMapSelectionSet, useActiveMapName } from './hooks';
+import { useViewerLocale, useActiveMapSelectionSet, useActiveMapName, useActiveMapState } from './hooks';
 
 export interface ISelectionPanelContainerProps {
     maxHeight?: number;
@@ -24,6 +24,7 @@ export interface ISelectionPanelContainerProps {
 const SelectionPanelContainer = (props: ISelectionPanelContainerProps) => {
     const { maxHeight, selectedFeatureRenderer } = props;
     const locale = useViewerLocale();
+    const map = useActiveMapState();
     const selection = useActiveMapSelectionSet();
     const dispatch = useDispatch();
     const activeMapName = useActiveMapName();
@@ -37,14 +38,21 @@ const SelectionPanelContainer = (props: ISelectionPanelContainerProps) => {
             const view = viewer.getViewForExtent(bbox);
             setCurrentView(view);
         }
-    }
+    };
+    const resolveLayerLabel = (layerId: string, _: string) => {
+        const layer = map?.Layer?.filter?.(l => l.ObjectId == layerId)?.[0];
+        if (layer) {
+            return layer.LegendLabel;
+        }
+    };
     const onShowSelectedFeature = (layerId: string, selectionKey: string) => {
         if (activeMapName) {
             showSelectedFeature(activeMapName, layerId, selectionKey);
         }
-    }
+    };
     if (selection != null && selection.SelectedFeatures != null) {
         return <SelectionPanel locale={locale}
+            onResolveLayerLabel={resolveLayerLabel}
             allowHtmlValues={appContext.allowHtmlValuesInSelection()}
             cleanHTML={appContext.getHTMLCleaner()}
             selection={selection.SelectedFeatures}