feat: new sidebar elements and positive prediction design

label-sleuth · Jul 31, 2023 · 421e41e · 421e41e
1 parent 7376f47
commit 421e41e
Show file tree

Hide file tree

Showing 19 changed files with 976 additions and 188 deletions.
diff --git a/frontend/src/assets/sleuth_black.svg b/frontend/src/assets/sleuth_black.svg
diff --git a/frontend/src/assets/sleuth_blue.svg b/frontend/src/assets/sleuth_blue.svg
diff --git a/frontend/src/components/element/MainElement.tsx b/frontend/src/components/element/MainElement.tsx
@@ -12,55 +12,127 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import React, { useMemo } from "react";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Box } from "@mui/system";
 import { useAppSelector } from "../../customHooks/useRedux";
 import classes from "./Element.module.css";
 import labelButtonClasses from "../labelButtons/index.module.css";
 import { getPanelDOMKey } from "../../utils/utils";
-import { PanelIdsEnum } from "../../const";
+import { LabelTypesEnum, PanelIdsEnum } from "../../const";
 import useLabelState from "../../customHooks/useLabelState";
 import { useElemStyles } from "../../customHooks/useElemStyles";
 import { Element } from "../../global";
 import { LabelingButtons } from "./LabelingButtons";
 import { LabelCategoriesMenu } from "./LabelNonCurrentCatMenu";
+import sleuthLogo from "../../assets/sleuth_blue.svg";
+import { Tooltip } from "@mui/material";
 
 interface ElementProps {
   element: Element;
 }
 
+export const PosPredIndicator = () => {
+  const radius = 20;
+  const border = 2
+  return (
+    <Tooltip title="Positive prediction" placement="top">
+      <Box
+        sx={{
+          borderColor: "white",
+          borderWidth: "2px",
+          borderStyle: "solid",
+          borderRadius: "100px",
+          height: `${radius + border * 2 }px`,
+        }}
+      >
+        <img
+          style={{
+            opacity: 1,
+            width: `${radius}px`,
+            height: `${radius}px`,
+            margin: 0,
+            padding: 0
+          }}
+          src={sleuthLogo}
+          alt="Positive prediction icon"
+        />
+      </Box>
+    </Tooltip>
+  );
+};
+
 export const MainElement = ({ element }: ElementProps) => {
   const { id, text, userLabel, modelPrediction, snippet } = element;
 
   const curCategory = useAppSelector((state) => state.workspace.curCategory);
   const rightToLeft = useAppSelector((state) => state.featureFlags.rightToLeft);
 
   const { handlePosLabelAction, handleNegLabelAction } = useLabelState();
-  const elementDOMId = useMemo(() => getPanelDOMKey(id, PanelIdsEnum.MAIN_PANEL), [id]);
-  const elemStyleClasses = useElemStyles({ elementDOMId, prediction: modelPrediction, userLabel });
+  const elementDOMId = useMemo(
+    () => getPanelDOMKey(id, PanelIdsEnum.MAIN_PANEL),
+    [id]
+  );
+
+  const elemStyleClasses = useElemStyles({
+    elementDOMId,
+    prediction: modelPrediction,
+    userLabel,
+  });
 
-  const [labelMenuOpenAnchorEl, setLabelMenuOpenAnchorEl] = React.useState<(EventTarget & globalThis.Element) | null>(
-    null
+  const [labelMenuOpenAnchorEl, setLabelMenuOpenAnchorEl] = React.useState<
+    (EventTarget & globalThis.Element) | null
+  >(null);
+  const labelMenuOpen = useMemo(
+    () => Boolean(labelMenuOpenAnchorEl),
+    [labelMenuOpenAnchorEl]
   );
-  const labelMenuOpen = useMemo(() => Boolean(labelMenuOpenAnchorEl), [labelMenuOpenAnchorEl]);
 
   const evaluationIsInProgress = useAppSelector(
-    (state) => state.workspace.panels.panels[PanelIdsEnum.EVALUATION].isInProgress
+    (state) =>
+      state.workspace.panels.panels[PanelIdsEnum.EVALUATION].isInProgress
   );
-
   return curCategory === null ? (
-    <Box className={`${elemStyleClasses.prediction} ${elemStyleClasses.animation}`} id={elementDOMId}>
-      <p className={`${classes["nodata_text"]} ${rightToLeft ? classes.right_to_left : ""}`}>{text}</p>
+    <Box
+      className={`${elemStyleClasses.prediction} ${elemStyleClasses.animation}`}
+      id={elementDOMId}
+    >
+      <p
+        className={`${classes["nodata_text"]} ${
+          rightToLeft ? classes.right_to_left : ""
+        }`}
+      >
+        {text}
+      </p>
     </Box>
   ) : (
     <>
       <Box
-        className={`${elemStyleClasses.prediction} ${elemStyleClasses.animation} ${labelButtonClasses.text_element} ${
+        className={`${elemStyleClasses.prediction} ${
+          elemStyleClasses.animation
+        } ${labelButtonClasses.text_element} ${
           labelMenuOpen ? classes.hover_element_on_menu_open : ""
         }`}
         id={elementDOMId}
+        style={{ position: "relative" }}
       >
-        <p className={`${classes.data_text} ${elemStyleClasses.userLabel} ${rightToLeft ? classes.right_to_left : ""}`}>
+        {modelPrediction === LabelTypesEnum.POS ? (
+          <Box
+            sx={{
+              position: "absolute",
+              left: "-17px",
+              //top: height !== null ? `${height / 2 - 10}px` : "px",
+              top: "8px",
+            }}
+          >
+            <PosPredIndicator />
+          </Box>
+        ) : null}
+        <p
+          className={`${classes.data_text} ${elemStyleClasses.userLabel} ${
+            rightToLeft ? classes.right_to_left : ""
+          }`}
+        >
           {snippet || text}
         </p>
         <LabelingButtons