wip

frontend/package.json

@@ -19,7 +19,6 @@
         "test:ct:ui": "playwright test -c playwright.ct.config.ts --ui"
     },
     "dependencies": {
-        "@deck.gl/carto": "^8.9.35",
         "@equinor/eds-core-react": "^0.42.0",
         "@equinor/eds-icons": "^0.21.0",
         "@equinor/esv-intersection": "^3.0.10",

frontend/src/lib/components/MenuButton/menuButton.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { MenuButton as MuiMenuButton } from "@mui/base/MenuButton";
+
+export type MenuButtonProps = {
+    ref?: React.Ref<HTMLButtonElement>;
+    label?: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+};
+
+export function MenuButton(props: MenuButtonProps): React.ReactNode {
+    return (
+        <MuiMenuButton
+            {...props}
+            className="hover:bg-blue-200 focus:outline-blue-600 p-1 text-sm rounded flex gap-1 items-center focus:outline focus:outline-1 hover:text-gray-900 text-gray-600"
+        />
+    );
+}

frontend/src/modules/2DViewer/layers/components/LayersActions.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import { DenseIconButton } from "@lib/components/DenseIconButton";
 import { Menu } from "@lib/components/Menu";
+import { MenuButton } from "@lib/components/MenuButton/menuButton";
 import { MenuDivider } from "@lib/components/MenuDivider";
 import { MenuHeading } from "@lib/components/MenuHeading";
 import { MenuItem } from "@lib/components/MenuItem";
-import { Dropdown, MenuButton } from "@mui/base";
+import { Dropdown } from "@mui/base";
 import { Add, ArrowDropDown } from "@mui/icons-material";
 
 export type LayersAction = {
@@ -54,7 +54,7 @@ export function LayersActions(props: LayersActionsProps): React.ReactNode {
             } else {
                 content.push(
                     <MenuItem
-                        key={item.identifier}
+                        key={`${item.identifier}-${index}`}
                         className="text-sm p-0.5 flex gap-2 items-center"
                         style={{ paddingLeft: `${indentLevel * 1}rem` }}
                         onClick={() => props.onActionClick(item.identifier)}
@@ -70,12 +70,10 @@ export function LayersActions(props: LayersActionsProps): React.ReactNode {
 
     return (
         <Dropdown>
-            <MenuButton>
-                <DenseIconButton title="Add items">
-                    <Add fontSize="inherit" />
-                    <span>Add</span>
-                    <ArrowDropDown fontSize="inherit" />
-                </DenseIconButton>
+            <MenuButton label="Add items">
+                <Add fontSize="inherit" />
+                <span>Add</span>
+                <ArrowDropDown fontSize="inherit" />
             </MenuButton>
             <Menu anchorOrigin="bottom-end" className="text-sm p-1 max-h-80 overflow-auto">
                 {makeContent(props.layersActionGroups)}

frontend/src/modules/2DViewer/layers/components/ViewComponent.tsx

@@ -33,10 +33,16 @@ export function ViewComponent(props: ViewComponentProps): React.ReactNode {
     function makeEndAdornment() {
         const adornments: React.ReactNode[] = [];
         if (props.actions) {
-            adornments.push(<LayersActions layersActionGroups={props.actions} onActionClick={handleActionClick} />);
+            adornments.push(
+                <LayersActions
+                    key="layers-actions"
+                    layersActionGroups={props.actions}
+                    onActionClick={handleActionClick}
+                />
+            );
         }
-        adornments.push(<ExpandCollapseAllButton group={props.group} />);
-        adornments.push(<RemoveButton item={props.group} />);
+        adornments.push(<ExpandCollapseAllButton key="expand-collapse" group={props.group} />);
+        adornments.push(<RemoveButton key="remove" item={props.group} />);
         return adornments;
     }
 

frontend/src/modules/2DViewer/view/components/ReadoutWrapper.tsx

@@ -26,7 +26,6 @@ export function ReadoutWrapper(props: ReadooutWrapperProps): React.ReactNode {
     }
 
     function handleMouseHover(event: MapMouseEvent): void {
-        console.debug("Hover event", event);
         setLayerPickingInfo(event.infos);
     }
 

frontend/src/modules/2DViewer/view/customDeckGlLayers/AdvancedWellsLayer.ts

@@ -3,6 +3,8 @@ import { GeoJsonLayer } from "@deck.gl/layers/typed";
 import { WellsLayer } from "@webviz/subsurface-viewer/dist/layers";
 
 export class AdvancedWellsLayer extends WellsLayer {
+    static layerName: string = "AdvancedWellsLayer";
+
     constructor(props: any) {
         super(props);
     }

frontend/src/modules/2DViewer/view/customDeckGlLayers/WellborePicksLayer.ts

@@ -23,8 +23,9 @@ export type WellBorePicksLayerProps = {
 };
 
 export class WellborePicksLayer extends CompositeLayer<WellBorePicksLayerProps> {
+    static layerName: string = "WellborePicksLayer";
+
     filterSubLayer(context: FilterContext): boolean {
-        return true;
         if (context.layer.id.includes("text")) {
             return context.viewport.zoom > -4;
         }