Support dark mode in maps-dashboards (#455)

Signed-off-by: Junqiu Lei <[email protected]>

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased 2.x](https://github.com/opensearch-project/dashboards-maps/compare/2.9...2.x)
 ### Features
 * Allow filtering geo_shape fields around map extent ([#452](https://github.com/opensearch-project/dashboards-maps/pull/452))
+* Support dark mode in maps-dashboards([#455](https://github.com/opensearch-project/dashboards-maps/pull/455))
 
 ### Enhancements
 

common/config.ts

@@ -10,7 +10,8 @@ export const configSchema = schema.object({
     defaultValue: 'https://tiles.maps.opensearch.org/data/v1.json',
   }),
   opensearchVectorTileStyleUrl: schema.string({
-    defaultValue: 'https://tiles.maps.opensearch.org/styles/basic.json',
+    // TODO: Change this to the production URL once it is available
+    defaultValue: 'https://staging.tiles.maps.opensearch.org/styles/manifest.json',
   }),
   opensearchVectorTileGlyphsUrl: schema.string({
     defaultValue: 'https://tiles.maps.opensearch.org/fonts/{fontstack}/{range}.pbf',

common/index.ts

@@ -193,3 +193,8 @@ export const DRAW_FILTER_RECTANGLE = 'Draw Rectangle';
 export const DRAW_FILTER_SPATIAL_RELATIONS = ['intersects', 'disjoint', 'within'];
 
 export const PER_PAGE_REQUEST_NUMBER = 50;
+
+export const DEFAULT_VECTOR_TILE_STYLES = {
+  BASIC: 'basic',
+  DARK: 'dark',
+};

public/application.tsx

@@ -9,16 +9,11 @@ import { AppMountParameters } from '../../../src/core/public';
 import { MapServices } from './types';
 import { MapsDashboardsApp } from './components/app';
 import { OpenSearchDashboardsContextProvider } from '../../../src/plugins/opensearch_dashboards_react/public';
-import { ConfigSchema } from '../common/config';
 
-export const renderApp = (
-  { element }: AppMountParameters,
-  services: MapServices,
-  mapConfig: ConfigSchema
-) => {
+export const renderApp = ({ element }: AppMountParameters, services: MapServices) => {
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={services}>
-      <MapsDashboardsApp mapConfig={mapConfig} />
+      <MapsDashboardsApp />
     </OpenSearchDashboardsContextProvider>,
     element
   );

public/components/add_layer_panel/add_layer_panel.tsx

@@ -31,7 +31,6 @@ import {
   MAX_LAYER_LIMIT,
 } from '../../../common';
 import { getLayerConfigMap } from '../../utils/getIntialConfig';
-import { ConfigSchema } from '../../../common/config';
 
 interface Props {
   setIsLayerConfigVisible: Function;
@@ -40,7 +39,6 @@ interface Props {
   addLayer: Function;
   setIsNewLayer: Function;
   newLayerIndex: number;
-  mapConfig: ConfigSchema;
   layerCount: number;
 }
 
@@ -51,14 +49,13 @@ export const AddLayerPanel = ({
   addLayer,
   setIsNewLayer,
   newLayerIndex,
-  mapConfig,
   layerCount,
 }: Props) => {
   const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
   const [highlightItem, setHighlightItem] = useState<Layer | null>(null);
 
   function onClickAddNewLayer(layerType: string) {
-    const initLayerConfig = getLayerConfigMap(mapConfig)[layerType];
+    const initLayerConfig = getLayerConfigMap()[layerType];
     initLayerConfig.name = NEW_MAP_LAYER_DEFAULT_PREFIX + ' ' + newLayerIndex;
     setSelectedLayerConfig(initLayerConfig);
     setIsAddNewLayerModalVisible(false);

public/components/app.tsx

@@ -11,12 +11,8 @@ import { MapPage } from './map_page';
 import { APP_PATH } from '../../common';
 import { useOpenSearchDashboards } from '../../../../src/plugins/opensearch_dashboards_react/public';
 import { MapServices } from '../types';
-import { ConfigSchema } from '../../common/config';
 
-interface Props {
-  mapConfig: ConfigSchema;
-}
-export const MapsDashboardsApp = ({ mapConfig }: Props) => {
+export const MapsDashboardsApp = () => {
   const {
     services: { appBasePath },
   } = useOpenSearchDashboards<MapServices>();
@@ -25,10 +21,7 @@ export const MapsDashboardsApp = ({ mapConfig }: Props) => {
     <Router history={appBasePath}>
       <I18nProvider>
         <Switch>
-          <Route
-            path={[APP_PATH.CREATE_MAP, APP_PATH.EDIT_MAP]}
-            render={() => <MapPage mapConfig={mapConfig} />}
-          />
+          <Route path={[APP_PATH.CREATE_MAP, APP_PATH.EDIT_MAP]} render={() => <MapPage />} />
           <Route exact path={APP_PATH.LANDING_PAGE_PATH} render={() => <MapsList />} />
         </Switch>
       </I18nProvider>

public/components/layer_control_panel/layer_control_panel.tsx

@@ -33,7 +33,6 @@ import { LAYER_ICON_TYPE_MAP } from '../../../common';
 import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 import { MapServices } from '../../types';
 import { MapState } from '../../model/mapState';
-import { ConfigSchema } from '../../../common/config';
 import { moveLayers, removeLayers } from '../../model/map/layer_operations';
 import { DeleteLayerModal } from './delete_layer_modal';
 import { HideLayer } from './hide_layer_button';
@@ -46,7 +45,6 @@ interface Props {
   setLayersIndexPatterns: (indexPatterns: IndexPattern[]) => void;
   mapState: MapState;
   zoom: number;
-  mapConfig: ConfigSchema;
   isReadOnlyMode: boolean;
   selectedLayerConfig: MapLayerSpecification | undefined;
   setSelectedLayerConfig: (layerConfig: MapLayerSpecification | undefined) => void;
@@ -59,7 +57,6 @@ export const LayerControlPanel = memo(
     setLayers,
     layers,
     zoom,
-    mapConfig,
     isReadOnlyMode,
     selectedLayerConfig,
     setSelectedLayerConfig,
@@ -393,7 +390,6 @@ export const LayerControlPanel = memo(
                 addLayer={addLayer}
                 newLayerIndex={newLayerIndex()}
                 setIsNewLayer={setIsNewLayer}
-                mapConfig={mapConfig}
                 layerCount={layers.length}
               />
               {isDeleteLayerModalVisible && (

public/components/map_container/map_container.scss

@@ -18,6 +18,33 @@
   top: $euiSizeS;
 }
 
+.maplibregl-ctrl-zoom-in {
+  background: lightOrDarkTheme($ouiColorEmptyShade, $ouiColorLightestShade) !important;
+  .maplibregl-ctrl-icon {
+    background-image: lightOrDarkTheme(
+        url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E"),
+        url("data:image/svg+xml,%0A%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='rgb(223, 229, 239)'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E"))
+    !important;
+  }
+}
+
+.maplibregl-ctrl-zoom-out {
+  background: lightOrDarkTheme($euiColorEmptyShade, $ouiColorLightestShade) !important;
+  .maplibregl-ctrl-icon {
+    background-image: lightOrDarkTheme(
+        url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E"),
+        url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='rgb(223, 229, 239)'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E"))
+    !important;
+  }
+}
+
+.maplibregl-ctrl-compass {
+  background: lightOrDarkTheme($euiColorEmptyShade, $ouiColorLightestShade) !important;
+  background-image: lightOrDarkTheme(
+      url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='rgb(223, 229, 239)'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")) !important;
+}
+
 .layerControlPanel-container {
   z-index: 1;
   position: absolute;

public/components/map_container/map_container.tsx

@@ -24,7 +24,6 @@ import {
 import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 import { ResizeChecker } from '../../../../../src/plugins/opensearch_dashboards_utils/public';
 import { MapServices } from '../../types';
-import { ConfigSchema } from '../../../common/config';
 import { baseLayerTypeLookup } from '../../model/layersFunctions';
 import { MapsFooter } from './maps_footer';
 import { DisplayFeatures } from '../tooltip/display_features';
@@ -42,7 +41,6 @@ interface MapContainerProps {
   setLayersIndexPatterns: (indexPatterns: IndexPattern[]) => void;
   maplibreRef: React.MutableRefObject<Maplibre | null>;
   mapState: MapState;
-  mapConfig: ConfigSchema;
   isReadOnlyMode: boolean;
   dashboardProps?: DashboardProps;
   isUpdatingLayerRender: boolean;
@@ -64,7 +62,6 @@ export const MapContainer = ({
   setLayersIndexPatterns,
   maplibreRef,
   mapState,
-  mapConfig,
   isReadOnlyMode,
   dashboardProps,
   isUpdatingLayerRender,
@@ -93,11 +90,12 @@ export const MapContainer = ({
 
   useEffect(() => {
     if (!mapContainer.current) return;
+    const vectorTileFontURL = services.mapConfig.opensearchVectorTileGlyphsUrl;
     const mbStyle = {
       version: 8 as 8,
       sources: {},
       layers: [],
-      glyphs: mapConfig.opensearchVectorTileGlyphsUrl,
+      glyphs: vectorTileFontURL,
     };
 
     maplibreRef.current = new Maplibre({
@@ -188,7 +186,7 @@ export const MapContainer = ({
     if (isUpdatingLayerRender || isReadOnlyMode) {
       if (selectedLayerConfig) {
         if (baseLayerTypeLookup[selectedLayerConfig.type]) {
-          handleBaseLayerRender(selectedLayerConfig, maplibreRef, onError);
+          handleBaseLayerRender(selectedLayerConfig, maplibreRef, services, onError);
         } else {
           updateIndexPatterns();
           handleDataLayerRender(
@@ -201,7 +199,7 @@ export const MapContainer = ({
         setSelectedLayerConfig(undefined);
       } else {
         renderDataLayers(layers, mapState, services, maplibreRef, dashboardProps);
-        renderBaseLayers(layers, maplibreRef, onError);
+        renderBaseLayers(layers, maplibreRef, services, onError);
         // Because of async layer rendering, layers order is not guaranteed, so we need to order layers
         // after all layers are rendered.
         maplibreRef.current!.once('idle', orderLayersAfterRenderLoaded);
@@ -269,7 +267,6 @@ export const MapContainer = ({
           setLayersIndexPatterns={setLayersIndexPatterns}
           mapState={mapState}
           zoom={zoom}
-          mapConfig={mapConfig}
           isReadOnlyMode={isReadOnlyMode}
           selectedLayerConfig={selectedLayerConfig}
           setSelectedLayerConfig={setSelectedLayerConfig}

public/components/map_page/map_page.tsx

@@ -29,15 +29,10 @@ import {
   Query,
 } from '../../../../../src/plugins/data/public';
 import { MapState } from '../../model/mapState';
-import { ConfigSchema } from '../../../common/config';
 import { GeoShapeFilterMeta, ShapeFilter } from '../../../../../src/plugins/data/common';
 import { buildGeoShapeFilterMeta } from '../../model/geo/filter';
 import { FilterBar } from '../filter_bar/filter_bar';
 
-interface MapPageProps {
-  mapConfig: ConfigSchema;
-}
-
 export interface DashboardProps {
   timeRange?: TimeRange;
   refreshConfig?: RefreshInterval;
@@ -46,16 +41,11 @@ export interface DashboardProps {
 }
 
 interface MapComponentProps {
-  mapConfig: ConfigSchema;
   mapIdFromSavedObject: string;
   dashboardProps?: DashboardProps;
 }
 
-export const MapComponent = ({
-  mapIdFromSavedObject,
-  mapConfig,
-  dashboardProps,
-}: MapComponentProps) => {
+export const MapComponent = ({ mapIdFromSavedObject, dashboardProps }: MapComponentProps) => {
   const { services } = useOpenSearchDashboards<MapServices>();
   const {
     savedObjects: { client: savedObjectsClient },
@@ -88,7 +78,7 @@ export const MapComponent = ({
         setLayersIndexPatterns(savedIndexPatterns);
       });
     } else {
-      const initialDefaultLayer: MapLayerSpecification = getLayerConfigMap(mapConfig)[
+      const initialDefaultLayer: MapLayerSpecification = getLayerConfigMap()[
         OPENSEARCH_MAP_LAYER.type
       ] as MapLayerSpecification;
       initialDefaultLayer.name = MAP_LAYER_DEFAULT_NAME;
@@ -154,7 +144,6 @@ export const MapComponent = ({
         setLayersIndexPatterns={setLayersIndexPatterns}
         maplibreRef={maplibreRef}
         mapState={mapState}
-        mapConfig={mapConfig}
         isReadOnlyMode={isReadOnlyMode}
         dashboardProps={dashboardProps}
         isUpdatingLayerRender={isUpdatingLayerRender}
@@ -165,7 +154,7 @@ export const MapComponent = ({
   );
 };
 
-export const MapPage = ({ mapConfig }: MapPageProps) => {
+export const MapPage = () => {
   const { id: mapId } = useParams<{ id: string }>();
-  return <MapComponent mapIdFromSavedObject={mapId} mapConfig={mapConfig} />;
+  return <MapComponent mapIdFromSavedObject={mapId} />;
 };

public/components/toolbar/spatial_filter/__snapshots__/filter-by_shape.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`render polygon renders filter by polygon in middle of drawing 1`] = `
       <button
         aria-label="draw_filter_shape"
         aria-pressed={true}
-        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--fill euiButtonIcon--small"
+        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--fill euiButtonIcon--small spatialFilterToolbar__shapeButton"
         disabled={false}
         onClick={[Function]}
         title="Cancel"
@@ -57,7 +57,7 @@ exports[`render polygon renders filter by polygon option 1`] = `
       <button
         aria-label="draw_filter_shape"
         aria-pressed={false}
-        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small spatialFilterToolbar__shapeButton"
         disabled={false}
         onClick={[Function]}
         title="Draw Polygon"
@@ -95,7 +95,7 @@ exports[`render rectangle renders filter by rectangle in middle of drawing 1`] =
       <button
         aria-label="draw_filter_shape"
         aria-pressed={true}
-        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--fill euiButtonIcon--small"
+        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--fill euiButtonIcon--small spatialFilterToolbar__shapeButton"
         disabled={false}
         onClick={[Function]}
         title="Cancel"
@@ -137,7 +137,7 @@ exports[`render rectangle renders filter by rectangle option 1`] = `
       <button
         aria-label="draw_filter_shape"
         aria-pressed={false}
-        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small spatialFilterToolbar__shapeButton"
         disabled={false}
         onClick={[Function]}
         title="Draw Rectangle"

public/components/toolbar/spatial_filter/__snapshots__/filter_toolbar.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders spatial filter before drawing 1`] = `
+exports[`SpatialFilterToolbar tests renders spatial filter before drawing 1`] = `
 <EuiFlexGroup
   alignItems="center"
   direction="column"
@@ -11,6 +11,8 @@ exports[`renders spatial filter before drawing 1`] = `
     <FilterByShape
       defaultLabel="rectangle"
       iconType="vector"
+      isDarkMode={false}
+      mode="rectangle"
       setDrawFilterProperties={[MockFunction]}
       shapeLabel="Draw Rectangle"
       shapeMode="rectangle"
@@ -20,6 +22,8 @@ exports[`renders spatial filter before drawing 1`] = `
     <FilterByShape
       defaultLabel="polygon"
       iconType={Object {}}
+      isDarkMode={false}
+      mode="rectangle"
       setDrawFilterProperties={[MockFunction]}
       shapeLabel="Draw Polygon"
       shapeMode="polygon"
@@ -28,7 +32,7 @@ exports[`renders spatial filter before drawing 1`] = `
 </EuiFlexGroup>
 `;
 
-exports[`renders spatial filter while drawing 1`] = `
+exports[`SpatialFilterToolbar tests renders spatial filter while drawing 1`] = `
 <EuiFlexGroup
   alignItems="center"
   direction="column"
@@ -39,6 +43,8 @@ exports[`renders spatial filter while drawing 1`] = `
     <FilterByShape
       defaultLabel="rectangle"
       iconType="vector"
+      isDarkMode={false}
+      mode="polygon"
       setDrawFilterProperties={[MockFunction]}
       shapeLabel="Draw Rectangle"
       shapeMode="rectangle"
@@ -48,6 +54,8 @@ exports[`renders spatial filter while drawing 1`] = `
     <FilterByShape
       defaultLabel="polygon"
       iconType={Object {}}
+      isDarkMode={false}
+      mode="polygon"
       setDrawFilterProperties={[MockFunction]}
       shapeLabel="Draw Polygon"
       shapeMode="polygon"