Revize 6973d036

Selected tags highlighting

On click in the middle panel or on click on highlight buttons in the right panel

webapp/components/annotation/DocumentAnnotationView.tsx

@@ -4 +4 @@
  */
 import { useContext } from 'react';
 import { AnnotationContext } from '../../contexts/AnnotationContext';
-import { Button } from 'antd';
-import { DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME } from '../../constants';
+import parse from 'html-react-parser';
+import {
+    DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME,
+    DOCUMENT_OCCURRENCE_ID_ATTRIBUTE_NAME,
+    DOCUMENT_TAG_ID_ATTRIBUTE_NAME,
+} from '../../constants';
 
 export function DocumentAnnotationView() {
-    const { annotation } = useContext(AnnotationContext);
+    const {
+        annotation,
+        setSelectedInstanceId,
+        setSelectedOccurrenceId,
+        selectedInstanceId,
+        selectedOccurrenceId,
+    } = useContext(AnnotationContext);
 
     if (!annotation) {
         return <p>Probíhá načítání anotace ...</p>;
     }
 
-    function getCss() {
+    function detectSelectedElement(e: any) {
+        if (!(e.target instanceof HTMLElement)) {
+            return;
+        }
+
+        const target = e.target as HTMLElement;
+
+        const id = target.getAttribute(DOCUMENT_TAG_ID_ATTRIBUTE_NAME);
+        const idInstance = target.getAttribute(DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME);
+        const idOccurrence = target.getAttribute(DOCUMENT_OCCURRENCE_ID_ATTRIBUTE_NAME);
+
+        if (!id || !idInstance || !idOccurrence) {
+            setSelectedInstanceId(null);
+            setSelectedOccurrenceId(null);
+            return;
+        }
 
+        setSelectedInstanceId(idInstance);
+        setSelectedOccurrenceId(idOccurrence);
+    }
+
+    function getCss() {
         let css = 'span.annotation {border-bottom: 2px solid;}\n';
         css += 'span {line-height: 30px}\n';
         css +=
@@ -27 +57 @@
             css += `span[${DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME}="${info.instanceId}"] { border-color:${info.color}; padding-bottom: ${info.padding}px }\n`;
         }
 
+        if (selectedInstanceId) {
+            css += `span[${DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME}="${selectedInstanceId}"] { background-color: #FCF3CF;  }\n`;
+        }
+        if (selectedOccurrenceId) {
+            css += `span[${DOCUMENT_OCCURRENCE_ID_ATTRIBUTE_NAME}="${selectedOccurrenceId}"] { border-bottom: 4px dotted;  }\n`;
+        }
+
         return <style dangerouslySetInnerHTML={{ __html: css }}></style>;
     }
 
     return (
         <div>
             {getCss()}
-            <div
-                dangerouslySetInnerHTML={{ __html: annotation.documentToRender ?? '' }}
-            />
+            <div onClick={detectSelectedElement}>
+                {parse(annotation.documentToRender ?? '')}
+            </div>
         </div>
     );
 }