From 9d8b5a12e5f3c5718851956104ae3f5ff8210d16 Mon Sep 17 00:00:00 2001
From: Junqiu Lei <junqiu@amazon.com>
Date: Wed, 5 Oct 2022 11:13:32 -0500
Subject: [PATCH] Add config layer basic component (#54)

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
---
 src/plugins/maps_dashboards/common/index.ts   |   7 +
 src/plugins/maps_dashboards/package-lock.json |   5 +
 .../add_layer_panel/add_layer_panel.scss      |   5 +
 .../add_layer_panel/add_layer_panel.tsx       |  32 ++--
 .../maps_dashboards/public/components/app.tsx |   5 +-
 .../public/components/layer_config/index.ts   |   6 +
 .../layer_config/layer_config_panel.tsx       |  48 +++++
 .../layer_control_panel.scss                  |  13 +-
 .../layer_control_panel.tsx                   | 181 ++++++++++++------
 .../public/components/map_container/index.ts  |   6 +
 .../map_container/map_container.tsx}          |   6 +-
 .../public/components/maps_list/index.ts      |   6 +
 .../maps_list}/maps_list.tsx                  |   0
 .../public/model/ILayerConfig.ts              |   9 +
 .../maps_dashboards/public/pages/index.tsx    |   7 -
 15 files changed, 257 insertions(+), 79 deletions(-)
 create mode 100644 src/plugins/maps_dashboards/public/components/layer_config/index.ts
 create mode 100644 src/plugins/maps_dashboards/public/components/layer_config/layer_config_panel.tsx
 create mode 100644 src/plugins/maps_dashboards/public/components/map_container/index.ts
 rename src/plugins/maps_dashboards/public/{pages/map_page/map.tsx => components/map_container/map_container.tsx} (79%)
 create mode 100644 src/plugins/maps_dashboards/public/components/maps_list/index.ts
 rename src/plugins/maps_dashboards/public/{pages/list_maps_page => components/maps_list}/maps_list.tsx (100%)
 create mode 100644 src/plugins/maps_dashboards/public/model/ILayerConfig.ts
 delete mode 100644 src/plugins/maps_dashboards/public/pages/index.tsx

diff --git a/src/plugins/maps_dashboards/common/index.ts b/src/plugins/maps_dashboards/common/index.ts
index fd9e6517..6f897b6e 100644
--- a/src/plugins/maps_dashboards/common/index.ts
+++ b/src/plugins/maps_dashboards/common/index.ts
@@ -20,3 +20,10 @@ export const MAP_INITIAL_STATE = {
 export const APP_PATH = {
   CREATE_MAP: '/create-map',
 };
+
+export enum LAYER_TYPE {
+  BASE_MAP = 'base map',
+  CLUSTER_MAP = 'cluster',
+  CHOROPLETH_MAP = 'choropleth',
+  WEB_MAP_SERVICE = 'wms',
+}
diff --git a/src/plugins/maps_dashboards/package-lock.json b/src/plugins/maps_dashboards/package-lock.json
index f8a43c38..b786a608 100644
--- a/src/plugins/maps_dashboards/package-lock.json
+++ b/src/plugins/maps_dashboards/package-lock.json
@@ -222,6 +222,11 @@
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
       "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
     },
+    "uuid": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
+    },
     "vt-pbf": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
diff --git a/src/plugins/maps_dashboards/public/components/add_layer_panel/add_layer_panel.scss b/src/plugins/maps_dashboards/public/components/add_layer_panel/add_layer_panel.scss
index 81f40a8e..09dc6f50 100644
--- a/src/plugins/maps_dashboards/public/components/add_layer_panel/add_layer_panel.scss
+++ b/src/plugins/maps_dashboards/public/components/add_layer_panel/add_layer_panel.scss
@@ -1,3 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 .addLayer__button {
   padding: $euiSizeM $euiSizeM
 }
diff --git a/src/plugins/maps_dashboards/public/components/add_layer_panel/add_layer_panel.tsx b/src/plugins/maps_dashboards/public/components/add_layer_panel/add_layer_panel.tsx
index cef14c55..e4a43cf1 100644
--- a/src/plugins/maps_dashboards/public/components/add_layer_panel/add_layer_panel.tsx
+++ b/src/plugins/maps_dashboards/public/components/add_layer_panel/add_layer_panel.tsx
@@ -19,25 +19,35 @@ import {
   EuiKeyPadMenuItem,
 } from '@elastic/eui';
 import './add_layer_panel.scss';
+import { LAYER_TYPE } from '../../../common';
 
-export const AddLayerPanel = () => {
-  // TODO: replace it once layers model ready
-  const layers = ['Base maps', 'Region', 'Coordinate', 'WMS'];
+interface Props {
+  setIsLayerConfigVisible: Function;
+}
 
-  const selectLayers = layers.map((layerItem, index) => {
+export const AddLayerPanel = ({ setIsLayerConfigVisible }: Props) => {
+  const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
+
+  const availableLayers = Object.values(LAYER_TYPE).map((layerItem, index) => {
     return (
       <EuiFlexItem key={index}>
         <EuiKeyPadMenuItem label={`${layerItem}`} aria-label={`${layerItem}`}>
-          <EuiIcon type="visMapRegion" size="xxl" color="primary" />
+          <EuiIcon
+            type="visMapRegion"
+            size="xxl"
+            color="primary"
+            onClick={() => {
+              setIsAddNewLayerModalVisible(false);
+              setIsLayerConfigVisible(true);
+            }}
+          />
         </EuiKeyPadMenuItem>
       </EuiFlexItem>
     );
   });
 
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
-  const closeModal = () => setIsModalVisible(false);
-  const showModal = () => setIsModalVisible(true);
+  const closeModal = () => setIsAddNewLayerModalVisible(false);
+  const showModal = () => setIsAddNewLayerModalVisible(true);
 
   const tabs = [
     {
@@ -46,7 +56,7 @@ export const AddLayerPanel = () => {
       content: (
         <Fragment>
           <EuiSpacer />
-          <EuiFlexGroup gutterSize="l">{selectLayers}</EuiFlexGroup>
+          <EuiFlexGroup gutterSize="l">{availableLayers}</EuiFlexGroup>
         </Fragment>
       ),
     },
@@ -71,7 +81,7 @@ export const AddLayerPanel = () => {
           + Add layer
         </EuiButton>
       </EuiFlexItem>
-      {isModalVisible && (
+      {isAddNewLayerModalVisible && (
         <EuiModal onClose={closeModal}>
           <EuiModalHeader>
             <EuiModalHeaderTitle>
diff --git a/src/plugins/maps_dashboards/public/components/app.tsx b/src/plugins/maps_dashboards/public/components/app.tsx
index 0b1aa3d9..767188ef 100644
--- a/src/plugins/maps_dashboards/public/components/app.tsx
+++ b/src/plugins/maps_dashboards/public/components/app.tsx
@@ -6,7 +6,8 @@
 import React from 'react';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import { I18nProvider } from '@osd/i18n/react';
-import { MapsList, Map } from '../pages/';
+import { MapsList } from './maps_list';
+import { MapContainer } from './map_container';
 import { CoreStart } from '../../../../src/core/public';
 import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
 import { APP_PATH } from '../../common/index';
@@ -25,7 +26,7 @@ export const MapsDashboardsApp = ({ basename, notifications, http }: MapsDashboa
       <I18nProvider>
         <div>
           <Switch>
-            <Route path={APP_PATH.CREATE_MAP} render={(props) => <Map />} />
+            <Route path={APP_PATH.CREATE_MAP} render={(props) => <MapContainer />} />
             <Route
               exact
               path="/"
diff --git a/src/plugins/maps_dashboards/public/components/layer_config/index.ts b/src/plugins/maps_dashboards/public/components/layer_config/index.ts
new file mode 100644
index 00000000..9f6f2e88
--- /dev/null
+++ b/src/plugins/maps_dashboards/public/components/layer_config/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { LayerConfigPanel } from './layer_config_panel';
diff --git a/src/plugins/maps_dashboards/public/components/layer_config/layer_config_panel.tsx b/src/plugins/maps_dashboards/public/components/layer_config/layer_config_panel.tsx
new file mode 100644
index 00000000..c64bef52
--- /dev/null
+++ b/src/plugins/maps_dashboards/public/components/layer_config/layer_config_panel.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiButton,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiCodeBlock,
+  EuiTitle,
+} from '@elastic/eui';
+import { ILayerConfig } from '../../model/ILayerConfig';
+
+interface Props {
+  setIsLayerConfigVisible: Function;
+  selectedLayerConfig: ILayerConfig;
+}
+
+export const LayerConfigPanel = ({ setIsLayerConfigVisible, selectedLayerConfig }: Props) => {
+  return (
+    <EuiFlyout type="push" size="s" onClose={() => setIsLayerConfigVisible(false)}>
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2>{selectedLayerConfig.name}</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiCodeBlock
+          language="js"
+          fontSize="m"
+          paddingSize="m"
+          color="dark"
+          overflowHeight={300}
+          isCopyable
+        >
+          {JSON.stringify(selectedLayerConfig)}
+        </EuiCodeBlock>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButton onClick={() => setIsLayerConfigVisible(false)}>Close</EuiButton>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};
diff --git a/src/plugins/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss b/src/plugins/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss
index 94080b2c..9ca7a567 100644
--- a/src/plugins/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss
+++ b/src/plugins/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss
@@ -1,6 +1,5 @@
-.layerControlPanel {
+.layerControlPanel--show {
   pointer-events: auto;
-
   width: $euiSizeL * 10;
 
   .layerControlPanel__title {
@@ -12,3 +11,13 @@
     width: $euiSizeL;
   }
 }
+
+.layerControlPanel--hide {
+  pointer-events: auto;
+
+  .layerControlPanel__visButton {
+    background-color: $euiColorEmptyShade;
+    color: $euiTextColor;
+    border-color: $euiColorLightShade;
+  }
+}
diff --git a/src/plugins/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx b/src/plugins/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx
index 1fa34746..27a2fba2 100644
--- a/src/plugins/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx
+++ b/src/plugins/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   EuiPanel,
   EuiTitle,
@@ -12,79 +12,150 @@ import {
   EuiListGroupItem,
   EuiButtonEmpty,
   EuiHorizontalRule,
+  EuiButton,
 } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import './layer_control_panel.scss';
 import { AddLayerPanel } from '../add_layer_panel';
+import { LayerConfigPanel } from '../layer_config';
+import { LAYER_TYPE } from '../../../common';
+import { ILayerConfig } from '../../model/ILayerConfig';
 
 const LayerControlPanel = () => {
+  const [isLayerConfigVisible, setIsLayerConfigVisible] = useState(false);
+  const [isLayerControlVisible, setIsLayerControlVisible] = useState(true);
+  const [selectedLayerConfig, setSelectedLayerConfig] = useState<ILayerConfig>({
+    iconType: '',
+    label: '',
+    name: '',
+    type: '',
+    id: '',
+  });
+
   // TODO: replace it once layers model ready
-  const demoLayers = [
+  const demoLayers: ILayerConfig[] = [
     {
       label: 'Base Map',
       iconType: 'visMapRegion',
+      id: 'example_id_1',
+      type: LAYER_TYPE.BASE_MAP,
+      name: 'Base Map Layer',
     },
     {
-      label: 'GeoJson Layer',
+      label: 'Cluster Layer',
       iconType: 'visMapRegion',
+      id: 'example_id_2',
+      type: LAYER_TYPE.CLUSTER_MAP,
+      name: 'Cluster Layer',
     },
   ];
 
-  return (
-    <I18nProvider>
-      <EuiPanel paddingSize="none" className="layerControlPanel">
-        <EuiFlexGroup
-          responsive={false}
-          justifyContent="spaceBetween"
-          direction="column"
-          gutterSize="none"
-        >
-          <EuiFlexItem className="layerControlPanel__title">
-            <EuiTitle size="xs">
-              <h2>Map Layers</h2>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiHorizontalRule margin="none" />
-          {demoLayers.map((layer) => (
-            <div>
-              <EuiFlexGroup alignItems="center" gutterSize="none" direction="row">
-                <EuiFlexItem>
-                  <EuiListGroupItem
-                    key={layer.label}
-                    label={layer.label}
-                    data-item={JSON.stringify(layer)}
-                    iconType={layer.iconType}
-                    aria-label="layer in the map layers list"
-                  />
-                </EuiFlexItem>
-                <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
-                  <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
-                    <EuiButtonEmpty
-                      iconType="eyeClosed"
-                      size="s"
-                      onClick={() => window.alert('Hidden button clicked')}
-                      aria-label="Hide or show layer"
-                      color="text"
-                    />
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
-                    <EuiButtonEmpty
-                      size="s"
-                      iconType="trash"
-                      onClick={() => window.alert('Delete button clicked')}
-                      aria-label="Delete layer"
-                      color="text"
+  if (isLayerControlVisible) {
+    return (
+      <I18nProvider>
+        <EuiPanel paddingSize="none" className="layerControlPanel layerControlPanel--show">
+          <EuiFlexGroup
+            responsive={false}
+            justifyContent="spaceBetween"
+            direction="column"
+            gutterSize="none"
+          >
+            <EuiFlexGroup direction="row" alignItems="center">
+              <EuiFlexItem className="layerControlPanel__title">
+                <EuiTitle size="xs">
+                  <h2>Map layers</h2>
+                </EuiTitle>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  size="s"
+                  iconType="menuLeft"
+                  onClick={() => setIsLayerControlVisible((visible) => !visible)}
+                  aria-label="Hide layer control"
+                  color="text"
+                  className="layerControlPanel__visButton"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+
+            <EuiHorizontalRule margin="none" />
+            {demoLayers.map((layer) => (
+              <div key={layer.id}>
+                <EuiFlexGroup
+                  alignItems="center"
+                  gutterSize="none"
+                  direction="row"
+                  onClick={() => {
+                    setSelectedLayerConfig(layer);
+                    if (selectedLayerConfig.id === layer.id && isLayerConfigVisible === false) {
+                      setIsLayerConfigVisible((visible) => !visible);
+                    }
+                  }}
+                >
+                  <EuiFlexItem>
+                    <EuiListGroupItem
+                      key={layer.id}
+                      label={layer.label}
+                      data-item={JSON.stringify(layer)}
+                      iconType={layer.iconType}
+                      aria-label="layer in the map layers list"
+                      isDisabled={
+                        isLayerConfigVisible &&
+                        selectedLayerConfig &&
+                        selectedLayerConfig.id === layer.id
+                      }
                     />
                   </EuiFlexItem>
+                  <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
+                    <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
+                      <EuiButtonEmpty
+                        iconType="eyeClosed"
+                        size="s"
+                        onClick={() => window.alert('Hidden button clicked')}
+                        aria-label="Hide or show layer"
+                        color="text"
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
+                      <EuiButtonEmpty
+                        size="s"
+                        iconType="trash"
+                        onClick={() => window.alert('Delete button clicked')}
+                        aria-label="Delete layer"
+                        color="text"
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
                 </EuiFlexGroup>
-              </EuiFlexGroup>
-              <EuiHorizontalRule margin="none" />
-            </div>
-          ))}
-          <AddLayerPanel />
-        </EuiFlexGroup>
-      </EuiPanel>
-    </I18nProvider>
+                <EuiHorizontalRule margin="none" />
+              </div>
+            ))}
+            {isLayerConfigVisible && (
+              <LayerConfigPanel
+                setIsLayerConfigVisible={setIsLayerConfigVisible}
+                selectedLayerConfig={selectedLayerConfig}
+              />
+            )}
+            <AddLayerPanel setIsLayerConfigVisible={setIsLayerConfigVisible} />
+          </EuiFlexGroup>
+        </EuiPanel>
+      </I18nProvider>
+    );
+  }
+
+  return (
+    <EuiFlexItem grow={false} className="layerControlPanel layerControlPanel--hide">
+      <EuiButton
+        className="layerControlPanel__visButton"
+        size="s"
+        iconType="menuRight"
+        iconSide="right"
+        onClick={() => setIsLayerControlVisible((visible) => !visible)}
+        aria-label="Show layer control"
+      >
+        Map layers
+      </EuiButton>
+    </EuiFlexItem>
   );
 };
 
diff --git a/src/plugins/maps_dashboards/public/components/map_container/index.ts b/src/plugins/maps_dashboards/public/components/map_container/index.ts
new file mode 100644
index 00000000..b0716344
--- /dev/null
+++ b/src/plugins/maps_dashboards/public/components/map_container/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { MapContainer } from './map_container';
diff --git a/src/plugins/maps_dashboards/public/pages/map_page/map.tsx b/src/plugins/maps_dashboards/public/components/map_container/map_container.tsx
similarity index 79%
rename from src/plugins/maps_dashboards/public/pages/map_page/map.tsx
rename to src/plugins/maps_dashboards/public/components/map_container/map_container.tsx
index cf7db0c2..42d7eb36 100644
--- a/src/plugins/maps_dashboards/public/pages/map_page/map.tsx
+++ b/src/plugins/maps_dashboards/public/components/map_container/map_container.tsx
@@ -4,12 +4,12 @@
  */
 
 import React, { useEffect, useRef } from 'react';
-import { Map as Maplibre } from 'maplibre-gl';
+import { Map as Maplibre, NavigationControl } from 'maplibre-gl';
 import { MaplibreLayersPanelControl } from '../../components/layer_control_panel';
 import '../../index.scss';
 import { MAP_VECTOR_TILE_URL, MAP_INITIAL_STATE } from '../../../common/index';
 
-export const Map = () => {
+export const MapContainer = () => {
   const mapContainer = useRef(null);
 
   useEffect(() => {
@@ -23,9 +23,11 @@ export const Map = () => {
       style: `${mapStyle}`,
       center: [initialState.lng, initialState.lat],
       zoom: initialState.zoom,
+      logoPosition: 'bottom-left',
     });
 
     map.addControl(new MaplibreLayersPanelControl(), 'top-left');
+    map.addControl(new NavigationControl({ showCompass: false }), 'top-right');
   }, []);
 
   // render the map DOM
diff --git a/src/plugins/maps_dashboards/public/components/maps_list/index.ts b/src/plugins/maps_dashboards/public/components/maps_list/index.ts
new file mode 100644
index 00000000..11ecaf3e
--- /dev/null
+++ b/src/plugins/maps_dashboards/public/components/maps_list/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { MapsList } from './maps_list';
diff --git a/src/plugins/maps_dashboards/public/pages/list_maps_page/maps_list.tsx b/src/plugins/maps_dashboards/public/components/maps_list/maps_list.tsx
similarity index 100%
rename from src/plugins/maps_dashboards/public/pages/list_maps_page/maps_list.tsx
rename to src/plugins/maps_dashboards/public/components/maps_list/maps_list.tsx
diff --git a/src/plugins/maps_dashboards/public/model/ILayerConfig.ts b/src/plugins/maps_dashboards/public/model/ILayerConfig.ts
new file mode 100644
index 00000000..e7a80a4a
--- /dev/null
+++ b/src/plugins/maps_dashboards/public/model/ILayerConfig.ts
@@ -0,0 +1,9 @@
+
+//TODO: this is used for UI component development, remove or update it once layer model ready
+export interface ILayerConfig {
+  name: string;
+  id: string;
+  type: string;
+  label: string;
+  iconType: string;
+}
diff --git a/src/plugins/maps_dashboards/public/pages/index.tsx b/src/plugins/maps_dashboards/public/pages/index.tsx
deleted file mode 100644
index f989a0c8..00000000
--- a/src/plugins/maps_dashboards/public/pages/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export { MapsList } from './list_maps_page/maps_list';
-export { Map } from './map_page/map';