Added prop to hide toolbar (#890)

Co-authored-by: Shadab Khan <[email protected]>

Author: shadab-skhan

react/src/demo/example-data/deckgl-map.json

@@ -23,6 +23,9 @@
       ],
       "horizontal": false
     },
+    "toolbar": {
+      "visible": true
+    },
     "coordinateUnit": "m",
     "resources": {
       "propertyMap": "https://raw.githubusercontent.com/equinor/webviz-subsurface-components/master/react/src/demo/example-data/propertyMap.png",
@@ -136,7 +139,7 @@
       },
       {
         "@@type": "DrawingLayer"
-      }
+      }
     ],
     "editedData": {},
     "views": {

react/src/lib/components/DeckGLMap/DeckGLMap.tsx

@@ -29,6 +29,9 @@ interface DeckGLMapProps {
         position?: number[] | null;
     };
     coordinateUnit?: string;
+    toolbar?: {
+        visible?: boolean | null;
+    };
     legend?: {
         visible?: boolean | null;
         position?: number[] | null;
@@ -50,6 +53,7 @@ const DeckGLMap: React.FC<DeckGLMapProps> = ({
     scale,
     coordinateUnit,
     legend,
+    toolbar,
     colorTables,
     editedData,
     setProps,
@@ -115,6 +119,7 @@ const DeckGLMap: React.FC<DeckGLMapProps> = ({
                 coords={coords}
                 scale={scale}
                 coordinateUnit={coordinateUnit}
+                toolbar={toolbar}
                 legend={legend}
                 colorTables={colorTables}
                 editedData={editedData}
@@ -253,6 +258,16 @@ DeckGLMap.propTypes = {
      */
     coordinateUnit: PropTypes.string,
 
+    /**
+     * Parameters to control toolbar
+     */
+    toolbar: PropTypes.shape({
+        /**
+         * Toggle toolbar visibility
+         */
+        visible: PropTypes.bool,
+    }),
+
     /**
      * Parameters for the legend
      */

react/src/lib/components/DeckGLMap/components/Map.tsx

@@ -125,6 +125,13 @@ export interface MapProps {
 
     coordinateUnit?: string;
 
+    /**
+     * Parameters to control toolbar
+     */
+    toolbar?: {
+        visible?: boolean | null;
+    };
+
     legend?: {
         visible?: boolean | null;
         position?: number[] | null;
@@ -158,6 +165,7 @@ const Map: React.FC<MapProps> = ({
     coords,
     scale,
     coordinateUnit,
+    toolbar,
     legend,
     colorTables,
     editedData,
@@ -327,10 +335,12 @@ const Map: React.FC<MapProps> = ({
                                     colorTables={colorTables}
                                 />
                             )}
-                            <Settings
-                                viewportId={view.id}
-                                layerIds={view.layerIds}
-                            />
+                            {toolbar?.visible && (
+                                <Settings
+                                    viewportId={view.id}
+                                    layerIds={view.layerIds}
+                                />
+                            )}
                             {views.showLabel && (
                                 <ViewFooter>
                                     {`${
@@ -377,6 +387,9 @@ Map.defaultProps = {
         widthPerUnit: 100,
         position: [10, 10],
     },
+    toolbar: {
+        visible: true,
+    },
     legend: {
         visible: true,
         position: [5, 10],

react/src/lib/components/DeckGLMap/storybook/DeckGLMap.stories.jsx

@@ -289,6 +289,9 @@ KhMapMesh.args = {
             ...meshMapLayer,
         },
     ],
+    toolbar: {
+        visible: false,
+    },
     bounds: [432150, 6475800, 439400, 6481500],
     views: {
         layout: [1, 1],
@@ -335,6 +338,9 @@ GridLayer.args = {
             visible: true,
         },
     ],
+    toolbar: {
+        visible: false,
+    },
     views: {
         layout: [1, 1],
         viewports: [