Revize ab68c8da

Tag selection

Report when tag is selected

webapp/contexts/TagCategoryContext.tsx

@@ -1 +1 @@
 import React, { createContext, useEffect, useState } from 'react';
-import { TagCategoryInfo, TagInfo } from '../api';
+import { SubTagInfo, TagCategoryInfo, TagInfo } from '../api';
 import { tagController } from '../controllers';
 
 /**
@@ -7 +7 @@
  */
 interface ITagCategoryContextProvider {
     /**
-     * Tags managed by the context.
+     * Categories managed by the context.
      */
     tagCategories: TagCategoryInfo[] | null;
 
+    /**
+     * Selected tag managed by the context.
+     */
+    selectedTag: TagInfo | null;
+
+    /**
+     * Selected sub tag managed by the context.
+     */
+    selectedSubTag: SubTagInfo | null;
+
     /**
      * Sets new tags.
      * @param newTags An array of new tags.
      */
     setTagCategories: (newTagCategories: TagCategoryInfo[] | null) => void;
+
+    /**
+     * Selects a tag.
+     * @param tag Tag.
+     * @param subTag Sub tag.
+     */
+    selectTag: (tag: TagInfo, subTag: SubTagInfo | null) => void;
 }
 
 /**
@@ -23 +40 @@
  */
 export const TagCategoryContext = createContext<ITagCategoryContextProvider>({
     /**
-     * Default tags.
+     * Default categories.
      */
     tagCategories: null,
 
+    /**
+     * Default selected tag.
+     */
+    selectedTag: null,
+
+    /**
+     * Default selected sub tag.
+     */
+    selectedSubTag: null,
+
     /**
      * Default implementation of setTags method.
-     * @param v Array of new tags.
+     * @param c Array of new tags.
      */
     setTagCategories: (c) => {
         return;
     },
+
+    /**
+     * Default implementation of selectTag.
+     * @param t Tag.
+     * @param s Sub tag.
+     */
+    selectTag: (t: TagInfo, s: SubTagInfo | null) => {
+        return;
+    },
 });
 
 /**
@@ -46 +82 @@
      * Tags managed by the context.
      */
     const [tagCategories, setTagCategories] = useState<TagCategoryInfo[] | null>(null);
+    const [selectedTag, setSelectedTag] = useState<TagInfo | null>(null);
+    const [selectedSubTag, setSelectedSubTag] = useState<SubTagInfo | null>(null);
+
+    /**
+     * Selects a tag.
+     */
+    const selectTag = (tag: TagInfo, subTag: SubTagInfo | null) => {
+        setSelectedTag(tag);
+        setSelectedSubTag(subTag);
+    };
 
     /**
      * Initializes the context.
@@ -62 +108 @@
         <TagCategoryContext.Provider
             value={{
                 tagCategories,
+                selectedTag,
+                selectedSubTag,
                 setTagCategories,
+                selectTag,
             }}
         >
             {props.children}

webapp/pages/annotation/index.tsx

@@ -5 +5 @@
 import 'antd/dist/antd.css';
 import styles from '/styles/Annotation.module.scss';
 import AnnotationProvider from '../../contexts/AnnotationContext';
+import TagCategoryProvider from '../../contexts/TagCategoryContext';
 
 /**
  * Creates an annotation screen.
@@ -13 +14 @@
 function Annotation() {
     return (
         <AnnotationProvider>
-            <MainLayout>
-                <div className={styles.layoutWrapper}>
-                    <div className={styles.tags}>
-                        <TagPanel />
+            <TagCategoryProvider>
+                <MainLayout>
+                    <div className={styles.layoutWrapper}>
+                        <div className={styles.tags}>
+                            <TagPanel />
+                        </div>
+                        <div className={styles.document}>
+                            <DocumentAnnotationView />
+                        </div>
+                        <div className={styles.annotations}>
+                            <AnnotationPanel />
+                        </div>
                     </div>
-                    <div className={styles.document}>
-                        <DocumentAnnotationView />
-                    </div>
-                    <div className={styles.annotations}>
-                        <AnnotationPanel />
-                    </div>
-                </div>
-            </MainLayout>
+                </MainLayout>
+            </TagCategoryProvider>
         </AnnotationProvider>
     );
 }