Revize 2c9bdf18

Upgraded visual of the tag tree

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} />
                     ))}