Revize 2c9bdf18

Upgraded visual of the tag tree

webapp/components/annotation/CategoryItem.tsx

@@ -1 +1 @@
 import { Col, Container, Row, Stack } from 'react-bootstrap';
 import { Button } from 'antd';
-import { DownOutlined, TagOutlined } from '@ant-design/icons';
+import { DownOutlined, TagOutlined, UpOutlined } from '@ant-design/icons';
 import { TagCategoryInfo } from '../../api';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { TagItem } from './TagItem';
 
 /**
@@ -16 +16 @@
      */
     const [visibleTags, setVisibleTags] = useState(false);
 
+    /**
+     * Button icon.
+     */
+    const [buttonIcon, setButtonIcon] = useState<React.ReactNode>(<DownOutlined />);
+
     /**
      * Changes visibility of tags.
      */
     const changeTagsVisibility = () => {
+        setButtonIcon(visibleTags ? <DownOutlined /> : <UpOutlined />);
         setVisibleTags(!visibleTags);
     };
 
     return (
-        <Container>
+        <Container className="shadow-sm rounded">
             <Row>
-                <Col>
-                    <Button
-                        type="text"
-                        icon={<DownOutlined />}
-                        onClick={changeTagsVisibility}
-                        className="w-100 text-start"
-                    >
-                        {props.category.name}
-                    </Button>
-                </Col>
-                <Col md="auto">
-                    <TagOutlined style={{ color: props.category.color ?? 'black' }} />
-                </Col>
+                <Button
+                    type="text"
+                    icon={buttonIcon}
+                    onClick={changeTagsVisibility}
+                    className="w-100 text-start rounded"
+                >
+                    {props.category.name}
+                </Button>
             </Row>
             {visibleTags && (
-                <Stack>
+                <Stack gap={2} className="mt-1 mb-2">
                     {props.category.tags?.map((tag, index) => (
                         <TagItem tag={tag} key={index} />
                     ))}

webapp/components/annotation/SubTagItem.tsx

@@ -25 +25 @@
     return (
         <Container>
             <Row>
-                <Button type="text" onClick={onSelectSubTag} className="w-100 text-start">
+                <Button onClick={onSelectSubTag} className="w-100 text-start rounded">
                     {props.subTag.name}
                 </Button>
             </Row>

webapp/components/annotation/TagItem.tsx

@@ -1 @@
-import { Col, Container, Row, Stack } from 'react-bootstrap';
+import { Container, Row, Stack } from 'react-bootstrap';
 import { TagInfo } from '../../api';
 import { Button } from 'antd';
-import { DownOutlined, TagOutlined } from '@ant-design/icons';
-import { useContext, useState } from 'react';
+import { DownOutlined, TagOutlined, UpOutlined } from '@ant-design/icons';
+import React, { useContext, useState } from 'react';
 import { SubTagItem } from './SubTagItem';
 import { TagCategoryContext } from '../../contexts/TagCategoryContext';
 
@@ -22 +22 @@
      */
     const { selectTag } = useContext(TagCategoryContext);
 
+    /**
+     * Button icon.
+     */
+    const [buttonIcon, setButtonIcon] = useState<React.ReactNode>(<DownOutlined />);
+
     /**
      * Changes visibility of sub tags.
      */
     const changeSubTagsVisibility = () => {
+        setButtonIcon(visibleSubTags ? <DownOutlined /> : <UpOutlined />);
         setVisibleSubTags(!visibleSubTags);
     };
 
@@ -36 +42 @@
         selectTag(props.tag, null);
     };
 
+    /**
+     * Does tag have sub tags?
+     */
+    const hasSubTags = (props.tag.subTags?.length ?? 0) > 0;
+
     return (
         <Container>
             <Row>
-                <Col>
-                    {props.tag.subTags && (
-                        <Button
-                            type="text"
-                            icon={<DownOutlined />}
-                            onClick={changeSubTagsVisibility}
-                            className="w-100 text-start"
-                        >
-                            {props.tag.name}
-                        </Button>
-                    )}
-                    {!props.tag.subTags && (
-                        <Button
-                            type="text"
-                            onClick={onSelectTag}
-                            className="w-100 text-start"
-                        >
-                            {props.tag.name}
-                        </Button>
-                    )}
-                </Col>
-                <Col sm="auto">
-                    <TagOutlined style={{ color: props.tag.color ?? 'black' }} />
-                </Col>
+                {hasSubTags && (
+                    <Button
+                        icon={buttonIcon}
+                        onClick={changeSubTagsVisibility}
+                        className="w-100 text-start rounded"
+                    >
+                        {props.tag.name}
+                        <TagOutlined style={{ color: props.tag.color ?? 'black' }} />
+                    </Button>
+                )}
+                {!hasSubTags && (
+                    <Button onClick={onSelectTag} className="w-100 text-start rounded">
+                        {props.tag.name}
+                        <TagOutlined style={{ color: props.tag.color ?? 'black' }} />
+                    </Button>
+                )}
             </Row>
-            {props.tag.subTags && visibleSubTags && (
-                <Stack>
+            {visibleSubTags && (
+                <Stack gap={2} className="mt-2">
                     {props.tag.subTags?.map((subTag, index) => (
                         <SubTagItem tag={props.tag} subTag={subTag} key={index} />
                     ))}

webapp/components/annotation/TagPanel.tsx

@@ -13 +13 @@
 
     return (
         <div>
-            <Stack>
+            <Stack gap={1}>
                 {tagCategories?.map((category, index) => (
                     <CategoryItem category={category} key={index} />
                 ))}

webapp/styles/Annotation.module.scss

@@ -3 +3 @@
 
     grid:
         [main-start] 'tags document annotations' [main-end]
-        / 1fr 3fr 1fr;
+        / max-content 3fr minmax(250px, 1fr);
 
     width:100%;
     height:100%;