Create new map from dashboard visualization and save return

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
opensearch-project · Feb 13, 2023 · d319385 · d319385
1 parent e0f8e27
commit d319385
Show file tree

Hide file tree

Showing 15 changed files with 383 additions and 251 deletions.
diff --git a/common/index.ts b/common/index.ts
@@ -46,7 +46,8 @@ export const MIN_LONGITUDE = -180;
 export const NEW_MAP_LAYER_DEFAULT_PREFIX = 'New layer';
 export const MAP_SAVED_OBJECT_TYPE = 'map';
 // TODO: Replace with actual app icon
-export const MAPS_APP_ICON = 'globe';
+export const MAPS_APP_ICON = 'gisApp';
+export const MAPS_VISUALIZATION_DESCRIPTION = 'Create map visualization with multiple layers';
 
 // Starting position [lng, lat] and zoom
 export const MAP_INITIAL_STATE = {

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -4,6 +4,6 @@
  "opensearchDashboardsVersion": "3.0.0",
  "server": true,
  "ui": true,
- "requiredPlugins": ["regionMap", "opensearchDashboardsReact", "opensearchDashboardsUtils", "navigation", "savedObjects", "data", "embeddable"],
+ "requiredPlugins": ["regionMap", "opensearchDashboardsReact", "opensearchDashboardsUtils", "navigation", "savedObjects", "data", "embeddable", "visualizations"],
  "optionalPlugins": []
  }
diff --git a/public/components/add_layer_panel/add_layer_panel.tsx b/public/components/add_layer_panel/add_layer_panel.tsx
@@ -41,7 +41,6 @@ interface Props {
  newLayerIndex: number;
  mapConfig: ConfigSchema;
  layerCount: number;
- inDashboardMode: boolean;
 }
 
 export const AddLayerPanel = ({
@@ -53,7 +52,6 @@ export const AddLayerPanel = ({
  newLayerIndex,
  mapConfig,
  layerCount,
- inDashboardMode,
 }: Props) => {
  const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
  const [highlightItem, setHighlightItem] = useState<Layer | null>(null);
@@ -111,33 +109,31 @@ export const AddLayerPanel = ({
 
  return (
  <div className="addLayer">
- {inDashboardMode ? null : (
- <EuiFlexItem className="addLayer__button">
- <EuiToolTip
- display="block"
- position="top"
- content={
- <p>
- {isMaxLayerLimitReached()
- ? `You've added the maximum number of layers (${MAX_LAYER_LIMIT}).`
- : 'Add layer'}
- </p>
- }
+ <EuiFlexItem className="addLayer__button">
+ <EuiToolTip
+ display="block"
+ position="top"
+ content={
+ <p>
+ {isMaxLayerLimitReached()
+ ? `You've added the maximum number of layers (${MAX_LAYER_LIMIT}).`
+ : 'Add layer'}
+ </p>
+ }
+ >
+ <EuiButton
+ fullWidth
+ size="s"
+ fill
+ onClick={showModal}
+ aria-label="Add layer"
+ isDisabled={IsLayerConfigVisible || isMaxLayerLimitReached()}
+ data-test-subj="addLayerButton"
  >
- <EuiButton
- fullWidth
- size="s"
- fill
- onClick={showModal}
- aria-label="Add layer"
- isDisabled={IsLayerConfigVisible || isMaxLayerLimitReached()}
- data-test-subj="addLayerButton"
- >
- Add layer
- </EuiButton>
- </EuiToolTip>
- </EuiFlexItem>
- )}
+ Add layer
+ </EuiButton>
+ </EuiToolTip>
+ </EuiFlexItem>
  {isAddNewLayerModalVisible && (
  <EuiModal onClose={closeModal}>
  <EuiModalHeader>

diff --git a/public/components/layer_control_panel/layer_control_panel.tsx b/public/components/layer_control_panel/layer_control_panel.tsx
@@ -30,7 +30,6 @@ import { AddLayerPanel } from '../add_layer_panel';
 import { LayerConfigPanel } from '../layer_config';
 import { MapLayerSpecification } from '../../model/mapLayerType';
 import {
- DASHBOARDS_MAPS_LAYER_TYPE,
  LAYER_ICON_TYPE_MAP,
  LAYER_PANEL_HIDE_LAYER_ICON,
  LAYER_PANEL_SHOW_LAYER_ICON,
@@ -98,16 +97,17 @@ export const LayerControlPanel = memo(
  >();
  const [visibleLayers, setVisibleLayers] = useState<MapLayerSpecification[]>([]);
 
+ // Update data layers when state bar changes
  useEffect(() => {
- if (timeRange) {
- layers.forEach((layer: MapLayerSpecification) => {
- if (layer.type === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP) {
- return;
- }
- handleDataLayerRender(layer, mapState, services, maplibreRef, undefined, timeRange);
- });
- }
+ layers.forEach((layer: MapLayerSpecification) => {
+ if (referenceLayerTypeLookup[layer.type]) {
+ return;
+ }
+ handleDataLayerRender(layer, mapState, services, maplibreRef, undefined, timeRange);
+ });
+ }, [timeRange, mapState]);
 
+ useEffect(() => {
  if (!isUpdatingLayerRender && initialLayersLoaded) {
  return;
  }
@@ -138,7 +138,7 @@ export const LayerControlPanel = memo(
  setInitialLayersLoaded(true);
  }
  setIsUpdatingLayerRender(false);
- }, [layers, timeRange]);
+ }, [layers]);
 
  useEffect(() => {
  const getCurrentVisibleLayers = () => {
@@ -210,9 +210,6 @@ export const LayerControlPanel = memo(
  };
 
  const onClickLayerName = (layer: MapLayerSpecification) => {
- if (inDashboardMode) {
- return;
- }
  if (hasUnsavedChanges()) {
  notifications.toasts.addWarning(
  `You have unsaved changes for ${selectedLayerConfig?.name}`
@@ -356,8 +353,13 @@ export const LayerControlPanel = memo(
  return visibleLayers.includes(layer);
  };
 
+ if (inDashboardMode) {
+ return null;
+ }
+
+ let content;
  if (isLayerControlVisible) {
- return (
+ content = (
  <I18nProvider>
  <EuiPanel
  paddingSize="none"
@@ -390,11 +392,7 @@ export const LayerControlPanel = memo(
  </EuiFlexGroup>
  <EuiHorizontalRule margin="none" />
  <EuiDragDropContext onDragEnd={onDragEnd}>
- <EuiDroppable
- droppableId="LAYERS_HANDLE_DROPPABLE_AREA"
- spacing="none"
- isDropDisabled={inDashboardMode}
- >
+ <EuiDroppable droppableId="LAYERS_HANDLE_DROPPABLE_AREA" spacing="none">
  {getReverseLayers().map((layer, index) => {
  const isLayerSelected =
  isLayerConfigVisible &&
@@ -407,7 +405,6 @@ export const LayerControlPanel = memo(
  index={index}
  draggableId={layer.id}
  customDragHandle={true}
- isDragDisabled={inDashboardMode}
  >
  {(provided) => (
  <div key={layer.id}>
@@ -445,58 +442,54 @@ export const LayerControlPanel = memo(
  />
  </EuiToolTip>
  </EuiFlexItem>
- {!inDashboardMode && (
- <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
- <EuiFlexItem
- grow={false}
- className="layerControlPanel__layerFunctionButton"
- >
- <EuiButtonIcon
- iconType={
- layerVisibility.get(layer.id)
- ? LAYER_PANEL_HIDE_LAYER_ICON
- : LAYER_PANEL_SHOW_LAYER_ICON
- }
- size="s"
- onClick={() => onLayerVisibilityChange(layer)}
- aria-label="Hide or show layer"
- color="text"
- title={
- layerVisibility.get(layer.id) ? 'Hide layer' : 'Show layer'
- }
- />
- </EuiFlexItem>
- <EuiFlexItem
- grow={false}
- className="layerControlPanel__layerFunctionButton"
- >
- <EuiButtonIcon
- size="s"
- iconType="trash"
- onClick={() => onDeleteLayerIconClick(layer)}
- aria-label="Delete layer"
- color={
- layer.id === selectedLayerConfig?.id ? 'text' : 'danger'
- }
- title="Delete layer"
- disabled={layer.id === selectedLayerConfig?.id}
- />
- </EuiFlexItem>
- <EuiFlexItem
- grow={false}
- className="layerControlPanel__layerFunctionButton"
- >
- <EuiButtonEmpty
- size="s"
- iconType="grab"
- {...provided.dragHandleProps}
- aria-label="Drag Handle"
- color="text"
- title="Move layer up or down"
- />
- </EuiFlexItem>
- </EuiFlexGroup>
- )}
+ <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
+ <EuiFlexItem
+ grow={false}
+ className="layerControlPanel__layerFunctionButton"
+ >
+ <EuiButtonIcon
+ iconType={
+ layerVisibility.get(layer.id)
+ ? LAYER_PANEL_HIDE_LAYER_ICON
+ : LAYER_PANEL_SHOW_LAYER_ICON
+ }
+ size="s"
+ onClick={() => onLayerVisibilityChange(layer)}
+ aria-label="Hide or show layer"
+ color="text"
+ title={
+ layerVisibility.get(layer.id) ? 'Hide layer' : 'Show layer'
+ }
+ />
+ </EuiFlexItem>
+ <EuiFlexItem
+ grow={false}
+ className="layerControlPanel__layerFunctionButton"
+ >
+ <EuiButtonIcon
+ size="s"
+ iconType="trash"
+ onClick={() => onDeleteLayerIconClick(layer)}
+ aria-label="Delete layer"
+ color={layer.id === selectedLayerConfig?.id ? 'text' : 'danger'}
+ title="Delete layer"
+ disabled={layer.id === selectedLayerConfig?.id}
+ />
+ </EuiFlexItem>
+ <EuiFlexItem
+ grow={false}
+ className="layerControlPanel__layerFunctionButton"
+ >
+ <EuiButtonEmpty
+ size="s"
+ iconType="grab"
+ {...provided.dragHandleProps}
+ aria-label="Drag Handle"
+ color="text"
+ title="Move layer up or down"
+ />
+ </EuiFlexItem>
+ </EuiFlexGroup>
  </EuiFlexGroup>
  <EuiHorizontalRule margin="none" />
  </div>
@@ -529,26 +522,27 @@ export const LayerControlPanel = memo(
  setIsNewLayer={setIsNewLayer}
  mapConfig={mapConfig}
  layerCount={layers.length}
- inDashboardMode={inDashboardMode}
  />
  {deleteLayerModal}
  </EuiFlexGroup>
  </EuiPanel>
  </I18nProvider>
  );
+ } else {
+ content = (
+ <EuiFlexItem grow={false} className="layerControlPanel layerControlPanel--hide">
+ <EuiButtonIcon
+ className="layerControlPanel__visButton"
+ size="s"
+ iconType="menuRight"
+ onClick={() => setIsLayerControlVisible((visible) => !visible)}
+ aria-label="Show layer control"
+ title="Expand layers panel"
+ />
+ </EuiFlexItem>
+ );
  }
 
- return (
- <EuiFlexItem grow={false} className="layerControlPanel layerControlPanel--hide">
- <EuiButtonIcon
- className="layerControlPanel__visButton"
- size="s"
- iconType="menuRight"
- onClick={() => setIsLayerControlVisible((visible) => !visible)}
- aria-label="Show layer control"
- title="Expand layers panel"
- />
- </EuiFlexItem>
- );
+ return <div className="layerControlPanel-container">{content}</div>;
  }
 );
diff --git a/public/components/map_container/map_container.tsx b/public/components/map_container/map_container.tsx
@@ -204,22 +204,20 @@ export const MapContainer = ({
  zoom: {zoom}
  </small>
  </EuiPanel>
- <div className="layerControlPanel-container">
- {mounted && (
- <LayerControlPanel
- maplibreRef={maplibreRef}
- layers={layers}
- setLayers={setLayers}
- layersIndexPatterns={layersIndexPatterns}
- setLayersIndexPatterns={setLayersIndexPatterns}
- mapState={mapState}
- zoom={zoom}
- mapConfig={mapConfig}
- inDashboardMode={inDashboardMode}
- timeRange={timeRange}
- />
- )}
- </div>
+ {mounted && (
+ <LayerControlPanel
+ maplibreRef={maplibreRef}
+ layers={layers}
+ setLayers={setLayers}
+ layersIndexPatterns={layersIndexPatterns}
+ setLayersIndexPatterns={setLayersIndexPatterns}
+ mapState={mapState}
+ zoom={zoom}
+ mapConfig={mapConfig}
+ inDashboardMode={inDashboardMode}
+ timeRange={timeRange}
+ />
+ )}
  <div className="map-container" ref={mapContainer} />
  </div>
  );