2438 annotator overflows (#2442)

* Add marginTop parameter to buttongroup component * Adapt the annotator height to the class selector
DISSINET · Nov 12, 2024 · b1acb56 · b1acb56
1 parent 6acc9bb
commit b1acb56
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/packages/client/src/components/advanced/Annotator/Annotator.tsx b/packages/client/src/components/advanced/Annotator/Annotator.tsx
@@ -537,7 +537,7 @@ export const TextAnnotator = ({
       </StyledCanvasWrapper>
 
       {annotator && (
-        <ButtonGroup>
+        <ButtonGroup marginTop>
           <Button
             key={EditMode.HIGHLIGHT}
             icon={<FaPen size={11} />}

diff --git a/packages/client/src/components/basic/ButtonGroup/ButtonGroup.tsx b/packages/client/src/components/basic/ButtonGroup/ButtonGroup.tsx
@@ -5,6 +5,7 @@ interface ButtonGroup {
   $noMarginRight?: boolean;
   column?: boolean;
   marginBottom?: boolean;
+  marginTop?: boolean;
   height?: number;
 }
 export const ButtonGroup = styled.div.attrs({
@@ -13,6 +14,7 @@ export const ButtonGroup = styled.div.attrs({
   display: flex;
   height: ${({ height }) => (height ? `${height / 10}rem` : "")};
   flex-direction: ${({ column }) => (column ? "column" : "row")};
+  margin-top: ${({ marginTop, theme }) => (marginTop ? theme.space[2] : "")};
   margin-bottom: ${({ marginBottom, theme }) =>
     marginBottom ? theme.space[2] : ""};
   > button:not(:last-child),

diff --git a/...in/containers/StatementsListBox/StatementListTextAnnotator/StatementListTextAnnotator.tsx b/...in/containers/StatementsListBox/StatementListTextAnnotator/StatementListTextAnnotator.tsx
@@ -9,7 +9,7 @@ import { Button, Loader } from "components";
 import Dropdown, { EntitySuggester, EntityTag } from "components/advanced";
 import TextAnnotator from "components/advanced/Annotator/Annotator";
 import AnnotatorProvider from "components/advanced/Annotator/AnnotatorProvider";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { FaLongArrowAltRight, FaUnlink } from "react-icons/fa";
 import { GrDocumentMissing } from "react-icons/gr";
 import { TbAnchorOff } from "react-icons/tb";
@@ -20,6 +20,7 @@ import {
   StyledDocumentTag,
   StyledDocumentTitle,
 } from "../StatementLitBoxStyles";
+import useResizeObserver from "use-resize-observer";
 
 interface StatementListTextAnnotator {
   statements: IResponseStatement[];
@@ -206,6 +207,9 @@ export const StatementListTextAnnotator: React.FC<
     return false;
   }, [selectedDocument, territoryId]);
 
+  const { ref: selectorRef, height: selectorHeight = 0 } =
+    useResizeObserver<HTMLDivElement>();
+
   return (
     <animated.div style={animatedStyle}>
       <div
@@ -305,6 +309,7 @@ export const StatementListTextAnnotator: React.FC<
         )}
       </div>
 
+      {/* Class selector */}
       {selectedResource !== false && selectedResource?.data?.documentId && (
         <div
           style={{
@@ -313,6 +318,7 @@ export const StatementListTextAnnotator: React.FC<
             gap: "4px",
             marginBottom: "5px",
           }}
+          ref={selectorRef}
         >
           <StyledModeSwitcher style={{ textWrap: "nowrap" }}>
             Highlight
@@ -342,7 +348,7 @@ export const StatementListTextAnnotator: React.FC<
             <TextAnnotator
               width={
                 statements.length > 0
-                  ? contentWidth - COLLAPSED_TABLE_WIDTH
+                  ? contentWidth - COLLAPSED_TABLE_WIDTH - 5
                   : contentWidth
               }
               hlEntities={hlEntities}
@@ -352,7 +358,7 @@ export const StatementListTextAnnotator: React.FC<
               thisTerritoryEntityId={territoryId}
               initialScrollEntityId={territoryId}
               displayLineNumbers={true}
-              height={contentHeight - 100}
+              height={contentHeight - selectorHeight - 70}
               documentId={selectedDocumentId}
               handleCreateStatement={handleCreateStatement}
               handleCreateTerritory={handleCreateTerritory}