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 ( - + { + setIsAddNewLayerModalVisible(false); + setIsLayerConfigVisible(true); + }} + /> ); }); - 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: ( - {selectLayers} + {availableLayers} ), }, @@ -71,7 +81,7 @@ export const AddLayerPanel = () => { + Add layer - {isModalVisible && ( + {isAddNewLayerModalVisible && ( 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
- } /> + } /> { + return ( + setIsLayerConfigVisible(false)}> + + +

{selectedLayerConfig.name}

+ + + + + {JSON.stringify(selectedLayerConfig)} + + + + setIsLayerConfigVisible(false)}>Close + + + ); +}; 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({ + 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 ( - - - - - -

Map Layers

- - - - {demoLayers.map((layer) => ( -
- - - - - - - window.alert('Hidden button clicked')} - aria-label="Hide or show layer" - color="text" - /> - - - window.alert('Delete button clicked')} - aria-label="Delete layer" - color="text" + if (isLayerControlVisible) { + return ( + + + + + + +

Map layers

+ + + + setIsLayerControlVisible((visible) => !visible)} + aria-label="Hide layer control" + color="text" + className="layerControlPanel__visButton" + /> + + + + + {demoLayers.map((layer) => ( +
+ { + setSelectedLayerConfig(layer); + if (selectedLayerConfig.id === layer.id && isLayerConfigVisible === false) { + setIsLayerConfigVisible((visible) => !visible); + } + }} + > + + + + + window.alert('Hidden button clicked')} + aria-label="Hide or show layer" + color="text" + /> + + + window.alert('Delete button clicked')} + aria-label="Delete layer" + color="text" + /> + + - - -
- ))} - - - - + +
+ ))} + {isLayerConfigVisible && ( + + )} + + + + + ); + } + + return ( + + setIsLayerControlVisible((visible) => !visible)} + aria-label="Show layer control" + > + Map layers + + ); }; 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';