Labeling panel

src/client/cypress/e2e/editor/labeling.cy.js

@@ -0,0 +1,35 @@
+import { newUneditableBorehole, startBoreholeEditing, stopBoreholeEditing } from "../helpers/testHelpers.js";
+
+describe.skip("Test labeling tool", () => {
+  it("can show labeling panel", () => {
+    newUneditableBorehole().as("borehole_id");
+    // only show in editing mode
+    cy.get('[data-cy="labeling-toggle-button"]').should("not.exist");
+
+    // panel is closed by default
+    startBoreholeEditing();
+    cy.get('[data-cy="labeling-toggle-button"]').should("exist");
+    cy.get('[data-cy="labeling-panel"]').should("not.exist");
+
+    // panel can be opened and closed
+    cy.get('[data-cy="labeling-toggle-button"]').click();
+    cy.get('[data-cy="labeling-panel"]').should("exist");
+    cy.get('[data-cy="labeling-toggle-button"]').click();
+    cy.get('[data-cy="labeling-panel"]').should("not.exist");
+
+    // panel open state should be reset when editing is stopped, panel position should be preserved
+    cy.get('[data-cy="labeling-toggle-button"]').click();
+    cy.get('[data-cy="labeling-panel"]').should("exist");
+    cy.get('[data-cy="labeling-panel-position-right"]').should("have.class", "Mui-selected");
+    cy.get('[data-cy="labeling-panel-position-bottom"]').click();
+    cy.get('[data-cy="labeling-panel-position-right"]').should("not.have.class", "Mui-selected");
+    cy.get('[data-cy="labeling-panel-position-bottom"]').should("have.class", "Mui-selected");
+
+    stopBoreholeEditing();
+    cy.get('[data-cy="labeling-panel"]').should("not.exist");
+    startBoreholeEditing();
+    cy.get('[data-cy="labeling-panel"]').should("not.exist");
+    cy.get('[data-cy="labeling-toggle-button"]').click();
+    cy.get('[data-cy="labeling-panel-position-bottom"]').should("have.class", "Mui-selected");
+  });
+});

src/client/package.json

@@ -43,6 +43,7 @@
     "i18next-http-backend": "^2.4.2",
     "immer": "^10.0.3",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.438.0",
     "markdown-to-jsx": "^7.0.1",
     "moment": "^2.29.4",
     "oidc-client-ts": "3.0.1",

src/client/src/App.tsx

@@ -19,6 +19,7 @@ import { FilterProvider } from "./pages/overview/sidePanelContent/filter/filterC
 import HeaderComponent from "./components/header/headerComponent.tsx";
 import { AppBox } from "./components/styledComponents.ts";
 import { DetailPage } from "./pages/detail/detailPage.tsx";
+import { LabelingProvider } from "./pages/detail/labeling/labelingContext.tsx";
 
 const queryClient = new QueryClient();
 
@@ -64,7 +65,16 @@ class App extends React.Component {
                           <Router>
                             <Switch>
                               <Route render={props => <SettingsPage {...props} />} key={0} path={"/setting"} />
-                              <Route exact={false} key={1} path={"/:id"} render={() => <DetailPage />} />
+                              <Route
+                                exact={false}
+                                key={1}
+                                path={"/:id"}
+                                render={() => (
+                                  <LabelingProvider>
+                                    <DetailPage />
+                                  </LabelingProvider>
+                                )}
+                              />
                               <Route
                                 render={props => {
                                   return <OverviewPage {...props} />;

src/client/src/AppTheme.ts

@@ -38,6 +38,14 @@ export const theme = createTheme({
       main: "#337083",
       secondary: "#a65462",
     },
+    ai: {
+      background: "#46596B",
+      main: "#5B21B6",
+      mainEnd: "#8B5CF6",
+      active: "#4F46E5",
+      activeEnd: "#E53940",
+      contrastText: "#ffffff",
+    },
     boxShadow: "#DFE4E9",
     background: {
       default: "#ffffff",
@@ -188,6 +196,45 @@ export const theme = createTheme({
             backgroundColor: "rgba(0, 0, 0, 0)",
           },
         },
+        colorAi: {
+          color: "#ffffff",
+          background: "linear-gradient(#5B21B6, #8B5CF6)",
+          "&:hover": {
+            background: "linear-gradient(#4F46E5, #E53940)",
+          },
+          "&:focus-visible": {
+            background: "linear-gradient(#4F46E5, #E53940)",
+            boxShadow: "0px 0px 0px 3px #8655F6",
+          },
+          "&:active": {
+            background: "linear-gradient(#4F46E5, #E53940)",
+          },
+          "&:disabled": {
+            background: "linear-gradient(#4F46E5, #E53940)",
+          },
+        },
+      },
+    },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#ffffff",
+        },
+      },
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          border: "0",
+          borderRadius: "4px !important",
+          margin: "4px",
+          padding: "7px",
+          color: "#337083",
+          "&.Mui-selected": {
+            color: "#2F4356",
+            backgroundColor: "#D6E2E6",
+          },
+        },
       },
     },
     MuiSelect: {

src/client/src/components/buttons/labelingButton.tsx

@@ -0,0 +1,44 @@
+import { ButtonProps, IconButton } from "@mui/material";
+import { forwardRef } from "react";
+import { ChevronDown, ChevronRight, Sparkles } from "lucide-react";
+
+export const LabelingButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  return (
+    <IconButton
+      ref={ref}
+      {...props}
+      color="ai"
+      sx={{
+        borderRadius: "4px",
+      }}>
+      <Sparkles />
+    </IconButton>
+  );
+});
+
+interface LabelingToggleButtonProps extends ButtonProps {
+  panelOpen: boolean;
+  panelPosition: "right" | "bottom";
+}
+
+export const LabelingToggleButton = forwardRef<HTMLButtonElement, LabelingToggleButtonProps>((props, ref) => {
+  const { panelOpen, panelPosition, ...defaultProps } = props;
+  return (
+    <IconButton
+      ref={ref}
+      {...defaultProps}
+      color="ai"
+      sx={{
+        position: "absolute",
+        zIndex: 1000,
+        width: "44px",
+        height: "44px",
+        borderRadius: panelPosition === "right" ? "4px 0 0 4px" : "4px 0 0 0",
+        right: 0,
+        bottom: panelPosition === "bottom" ? "0" : undefined,
+      }}
+      data-cy="labeling-toggle-button">
+      {panelOpen ? panelPosition === "right" ? <ChevronRight /> : <ChevronDown /> : <Sparkles />}
+    </IconButton>
+  );
+});

src/client/src/index.css

@@ -1,3 +1,8 @@
+.lucide {
+    width: 20px;
+    height: 20px;
+    stroke-width: 1.7px;
+}
 
 .ol-popup {
   position: absolute;