Merging the customImportMap and maps layer plugin into 1 single plugi…

…n. (opensearch-project#166) * Merging the customImportMap and maps layer plugin into 1 single plugin. Signed-off-by: Navneet Verma <[email protected]> Signed-off-by: Navneet Verma <[email protected]>
msfroh · Jan 6, 2023 · 7c2e618 · 7c2e618
1 parent 71b191c
commit 7c2e618
Show file tree

Hide file tree

Showing 61 changed files with 6,145 additions and 14 deletions.
diff --git a/custom_import_map/.eslintrc b/custom_import_map/.eslintrc
diff --git a/custom_import_map/.eslintrc.js b/custom_import_map/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: ['@elastic/eslint-config-kibana', 'plugin:@elastic/eui/recommended'],
+  rules: {
+    '@osd/eslint/require-license-header': 'off',
+  },
+};
diff --git a/custom_import_map/.i18nrc.json b/custom_import_map/.i18nrc.json
@@ -0,0 +1,7 @@
+{
+  "prefix": "customImportMap",
+  "paths": {
+    "customImportMap": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}
diff --git a/custom_import_map/common/constants/shared.ts b/custom_import_map/common/constants/shared.ts
@@ -12,3 +12,5 @@ export const MAX_FILE_PAYLOAD_SIZE_IN_MB = 25;
 export const MAX_FILE_PAYLOAD_SIZE = fromMBtoBytes(MAX_FILE_PAYLOAD_SIZE_IN_MB);
 export const PLUGIN_ID = 'customImportMap';
 export const PLUGIN_NAME = 'customImportMap';
+export const PLUGIN_NAVIGATION_BAR_TILE = 'Maps';
+export const PLUGIN_NAVIGATION_BAR_ID = 'maps-dashboards';
diff --git a/custom_import_map/common/index.ts b/custom_import_map/common/index.ts
@@ -9,6 +9,7 @@ import {
   MAX_FILE_PAYLOAD_SIZE,
   MAX_FILE_PAYLOAD_SIZE_IN_MB,
   PLUGIN_ID,
+  PLUGIN_NAVIGATION_BAR_ID,
   PLUGIN_NAME,
 } from './constants/shared';
 
@@ -18,5 +19,103 @@ export {
   MAX_FILE_PAYLOAD_SIZE,
   MAX_FILE_PAYLOAD_SIZE_IN_MB,
   PLUGIN_ID,
+  PLUGIN_NAVIGATION_BAR_ID,
   PLUGIN_NAME,
 };
+
+export const MAP_VECTOR_TILE_BASIC_STYLE = 'https://tiles.maps.opensearch.org/styles/basic.json';
+export const MAP_GLYPHS = 'https://tiles.maps.opensearch.org/fonts/{fontstack}/{range}.pbf';
+export const MAP_VECTOR_TILE_DATA_SOURCE = 'https://tiles.maps.opensearch.org/data/v1.json';
+export const MAP_DEFAULT_MIN_ZOOM = 0;
+export const MAP_DEFAULT_MAX_ZOOM = 22;
+export const MAP_REFERENCE_LAYER_DEFAULT_OPACITY = 100;
+export const MAP_DATA_LAYER_DEFAULT_OPACITY = 70;
+export const MAP_LAYER_DEFAULT_MIN_OPACITY = 0;
+export const MAP_LAYER_DEFAULT_MAX_OPACITY = 100;
+export const MAP_LAYER_DEFAULT_OPACITY_STEP = 1;
+export const MAP_LAYER_DEFAULT_BORDER_THICKNESS = 1;
+export const DOCUMENTS_DEFAULT_REQUEST_NUMBER = 1000;
+export const DOCUMENTS_DEFAULT_SHOW_TOOLTIPS: boolean = false;
+export const DOCUMENTS_DEFAULT_TOOLTIPS: string[] = [];
+export const DOCUMENTS_DEFAULT_MARKER_SIZE = 5;
+export const LAYER_PANEL_SHOW_LAYER_ICON = 'eye';
+export const LAYER_PANEL_HIDE_LAYER_ICON = 'eyeClosed';
+export const MAX_LAYER_NAME_LIMIT = 35;
+export const MAP_LAYER_DEFAULT_NAME = 'Default map';
+export const NEW_MAP_LAYER_DEFAULT_PREFIX = 'New layer';
+
+// Starting position [lng, lat] and zoom
+export const MAP_INITIAL_STATE = {
+  lng: 0,
+  lat: 0,
+  zoom: 1,
+};
+
+export const APP_PATH = {
+  LANDING_PAGE_PATH: '/',
+  CREATE_MAP: '/create',
+  EDIT_MAP: '/:id',
+};
+
+export enum DASHBOARDS_MAPS_LAYER_NAME {
+  OPENSEARCH_MAP = 'OpenSearch Map',
+  DOCUMENTS = 'Documents',
+  CUSTOM_MAP = 'Custom Map',
+}
+
+export enum DASHBOARDS_MAPS_LAYER_TYPE {
+  OPENSEARCH_MAP = 'opensearch_vector_tile_map',
+  DOCUMENTS = 'documents',
+  CUSTOM_MAP = 'custom_map',
+}
+
+export enum DASHBOARDS_MAPS_LAYER_ICON {
+  OPENSEARCH_MAP = 'globe',
+  DOCUMENTS = 'document',
+  CUSTOM_MAP = 'globe',
+}
+
+export enum DASHBOARDS_MAPS_LAYER_DESCRIPTION {
+  OPENSEARCH_MAP = 'Default basemaps from OpenSearch',
+  DOCUMENTS = 'View points, lines and polygons on map',
+  CUSTOM_MAP = 'Configure Maps to use custom map source',
+}
+
+export const DOCUMENTS = {
+  name: DASHBOARDS_MAPS_LAYER_NAME.DOCUMENTS,
+  type: DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS,
+  icon: DASHBOARDS_MAPS_LAYER_ICON.DOCUMENTS,
+  description: DASHBOARDS_MAPS_LAYER_DESCRIPTION.DOCUMENTS,
+};
+
+export const OPENSEARCH_MAP_LAYER = {
+  name: DASHBOARDS_MAPS_LAYER_NAME.OPENSEARCH_MAP,
+  type: DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP,
+  icon: DASHBOARDS_MAPS_LAYER_ICON.OPENSEARCH_MAP,
+  description: DASHBOARDS_MAPS_LAYER_DESCRIPTION.OPENSEARCH_MAP,
+};
+
+export const CUSTOM_MAP = {
+  name: DASHBOARDS_MAPS_LAYER_NAME.CUSTOM_MAP,
+  type: DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP,
+  icon: DASHBOARDS_MAPS_LAYER_ICON.CUSTOM_MAP,
+  description: DASHBOARDS_MAPS_LAYER_DESCRIPTION.CUSTOM_MAP,
+};
+
+export interface Layer {
+  name: DASHBOARDS_MAPS_LAYER_NAME;
+  type: DASHBOARDS_MAPS_LAYER_TYPE;
+  icon: DASHBOARDS_MAPS_LAYER_ICON;
+  description: DASHBOARDS_MAPS_LAYER_DESCRIPTION;
+}
+
+export const LAYER_VISIBILITY = {
+  NONE: 'none',
+  VISIBLE: 'visible',
+};
+
+export const LAYER_ICON_TYPE_MAP: { [key: string]: string } = {
+  [DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP]: 'globe',
+  [DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS]: 'document',
+  [DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP]: 'globe',
+};
diff --git a/custom_import_map/common/map_saved_object_attributes.ts b/custom_import_map/common/map_saved_object_attributes.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SavedObjectAttributes } from 'opensearch-dashboards/server';
+
+export interface MapSavedObjectAttributes extends SavedObjectAttributes {
+  /** Title of the map */
+  title: string;
+  /** Description of the map */
+  description?: string;
+  /** State of the map, which could include current zoom level, lat, lng etc. */
+  mapState?: string;
+  /** Maps-dashboards layers of the map */
+  layerList?: string;
+  /** UI state of the map */
+  uiState?: string;
+  /** Version is used to track version differences in saved object mapping */
+  version: number;
+  /** SearchSourceFields is used to reference other saved objects */
+  searchSourceFields?: {
+    index?: string;
+  };
+}
diff --git a/custom_import_map/opensearch_dashboards.json b/custom_import_map/opensearch_dashboards.json
@@ -1,9 +1,9 @@
 {
     "id": "customImportMap",
     "version": "3.0.0.0",
-    "opensearchDashboardsVersion": "2.4.1",
+    "opensearchDashboardsVersion": "3.0.0",
     "server": true,
     "ui": true,
-    "requiredPlugins": ["regionMap", "opensearchDashboardsReact"],
+    "requiredPlugins": ["regionMap", "opensearchDashboardsReact", "navigation", "savedObjects", "data"],
     "optionalPlugins": []
   }
diff --git a/custom_import_map/package.json b/custom_import_map/package.json
@@ -22,6 +22,9 @@
   "dependencies": {
     "@opensearch-dashboards-test/opensearch-dashboards-test-library": "git+https://github.com/opensearch-project/opensearch-dashboards-test-library.git#main",
     "@cypress/skip-test": "^2.6.1",
-    "cypress-file-upload": "^5.0.8"
+    "cypress-file-upload": "^5.0.8",
+    "maplibre-gl": "^2.4.0",
+    "uuid": "3.3.2",
+    "prettier": "^2.1.1"
   }
 }
diff --git a/custom_import_map/public/_variables.scss b/custom_import_map/public/_variables.scss
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+$mapHeaderOffset: 154px;
diff --git a/custom_import_map/public/application.tsx b/custom_import_map/public/application.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppMountParameters } from '../../../src/core/public';
+import { MapServices } from './types';
+import { MapsDashboardsApp } from './components/app';
+import { OpenSearchDashboardsContextProvider } from '../../../src/plugins/opensearch_dashboards_react/public';
+
+export const renderApp = ({ element }: AppMountParameters, services: MapServices) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <MapsDashboardsApp />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};
diff --git a/custom_import_map/public/components/add_layer_panel/add_layer_panel.scss b/custom_import_map/public/components/add_layer_panel/add_layer_panel.scss
@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.addLayer__button {
+  padding: $euiSizeM $euiSizeM;
+}
+
+.addLayerDialog__description {
+  width: 272px;
+}
diff --git a/custom_import_map/public/components/add_layer_panel/add_layer_panel.tsx b/custom_import_map/public/components/add_layer_panel/add_layer_panel.tsx
@@ -0,0 +1,153 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiModal,
+  EuiModalBody,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiHorizontalRule,
+  EuiTitle,
+  EuiButton,
+  EuiIcon,
+  EuiKeyPadMenuItem,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import './add_layer_panel.scss';
+import {
+  DOCUMENTS,
+  OPENSEARCH_MAP_LAYER,
+  CUSTOM_MAP,
+  Layer,
+  NEW_MAP_LAYER_DEFAULT_PREFIX,
+} from '../../../common';
+import { getLayerConfigMap } from '../../utils/getIntialConfig';
+
+interface Props {
+  setIsLayerConfigVisible: Function;
+  setSelectedLayerConfig: Function;
+  IsLayerConfigVisible: boolean;
+  addLayer: Function;
+  setIsNewLayer: Function;
+  newLayerIndex: number;
+}
+
+export const AddLayerPanel = ({
+  setIsLayerConfigVisible,
+  setSelectedLayerConfig,
+  IsLayerConfigVisible,
+  addLayer,
+  setIsNewLayer,
+  newLayerIndex,
+}: Props) => {
+  const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
+  const [highlightItem, setHighlightItem] = useState<Layer | null>(null);
+
+  function onClickAddNewLayer(layerType: string) {
+    const initLayerConfig = getLayerConfigMap()[layerType];
+    initLayerConfig.name = NEW_MAP_LAYER_DEFAULT_PREFIX + ' ' + newLayerIndex;
+    setSelectedLayerConfig(initLayerConfig);
+    setIsAddNewLayerModalVisible(false);
+    setIsLayerConfigVisible(true);
+    setIsNewLayer(true);
+    addLayer(initLayerConfig);
+  }
+
+  const dataLayers = [DOCUMENTS];
+  const dataLayerItems = Object.values(dataLayers).map((layerItem, index) => {
+    return (
+      <EuiKeyPadMenuItem
+        key={layerItem.name}
+        label={layerItem.name}
+        onClick={() => onClickAddNewLayer(layerItem.type)}
+        onFocus={() => setHighlightItem(layerItem)}
+        onMouseEnter={() => setHighlightItem(layerItem)}
+        onMouseLeave={() => setHighlightItem(null)}
+        onBlur={() => setHighlightItem(null)}
+      >
+        <EuiIcon type={layerItem.icon} size="xl" color="secondary" />
+      </EuiKeyPadMenuItem>
+    );
+  });
+
+  const referenceLayers = [OPENSEARCH_MAP_LAYER, CUSTOM_MAP];
+  const referenceLayersItems = Object.values(referenceLayers).map((layerItem, index) => {
+    return (
+      <EuiKeyPadMenuItem
+        key={index}
+        label={layerItem.name}
+        aria-label={layerItem.name}
+        onClick={() => onClickAddNewLayer(layerItem.type)}
+        onFocus={() => setHighlightItem(layerItem)}
+        onMouseEnter={() => setHighlightItem(layerItem)}
+        onMouseLeave={() => setHighlightItem(null)}
+        onBlur={() => setHighlightItem(null)}
+      >
+        <EuiIcon type={layerItem.icon} size="xl" color="secondary" />
+      </EuiKeyPadMenuItem>
+    );
+  });
+
+  const closeModal = () => setIsAddNewLayerModalVisible(false);
+  const showModal = () => setIsAddNewLayerModalVisible(true);
+
+  return (
+    <div className="addLayer">
+      <EuiFlexItem className="addLayer__button">
+        <EuiButton
+          size="s"
+          fill
+          onClick={showModal}
+          aria-label="Add layer"
+          isDisabled={IsLayerConfigVisible}
+        >
+          Add layer
+        </EuiButton>
+      </EuiFlexItem>
+      {isAddNewLayerModalVisible && (
+        <EuiModal onClose={closeModal}>
+          <EuiModalHeader>
+            <EuiModalHeaderTitle>
+              <h2>Add layer</h2>
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+          <EuiModalBody>
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <EuiTitle size="s">
+                  <h6>Data layer</h6>
+                </EuiTitle>
+                <EuiSpacer size="s" />
+                <EuiFlexGroup gutterSize="xs">{dataLayerItems}</EuiFlexGroup>
+                <EuiSpacer size="s" />
+                <EuiHorizontalRule margin="xs" />
+                <EuiTitle size="s">
+                  <h6>Reference layer</h6>
+                </EuiTitle>
+                <EuiSpacer size="s" />
+                <EuiFlexGroup gutterSize="xs">{referenceLayersItems}</EuiFlexGroup>
+              </EuiFlexItem>
+              <EuiFlexItem className="addLayerDialog__description">
+                <EuiTitle size="s">
+                  <h6>{highlightItem?.name ? highlightItem.name : 'Select a layer type'}</h6>
+                </EuiTitle>
+                <EuiSpacer size="m" />
+                <EuiText>
+                  {highlightItem?.description
+                    ? highlightItem.description
+                    : 'Start creating your map by selecting a layer type.'}
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiModalBody>
+        </EuiModal>
+      )}
+    </div>
+  );
+};
diff --git a/custom_import_map/public/components/add_layer_panel/index.ts b/custom_import_map/public/components/add_layer_panel/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { AddLayerPanel } from './add_layer_panel';