:feat: adding expend list

src/content/series/Tags.tsx

@@ -3,31 +3,35 @@ import { getInstancesOfSeries } from "../../services/orthanc";
 import { Input, Spinner } from "../../ui";
 import { useCustomQuery } from "../../utils";
 import { instanceHeader, instanceTags } from "../../services/instances";
+import { Metadata, Tag } from "../../utils/types";
+import { Meta } from "@storybook/react";
 
 type TagsProps = {
   seriesId: string;
 };
+
 const Tags = ({ seriesId }: TagsProps) => {
   const { data: instances } = useCustomQuery(
     ["series", seriesId, "instances"],
     () => getInstancesOfSeries(seriesId)
   );
   const [instanceNumber, setInstanceNumber] = useState<number>(1);
+  const [expanded, setExpanded] = useState<{ [key: string]: boolean }>({});
 
   const currentInstanceId =
     instanceNumber != null && instances != null
       ? instances[instanceNumber - 1].id
       : null;
 
-  const { data: header } = useCustomQuery(
+  const { data: header } = useCustomQuery<Metadata>(
     ["instances", currentInstanceId, "metadata"],
     () => instanceHeader(currentInstanceId),
     {
       enabled: currentInstanceId !== null,
     }
   );
 
-  const { data: tags } = useCustomQuery(
+  const { data: tags } = useCustomQuery<Metadata>(
     ["instances", currentInstanceId, "tags"],
     () => instanceTags(currentInstanceId),
     {
@@ -43,21 +47,43 @@ const Tags = ({ seriesId }: TagsProps) => {
     };
   }, [header, tags]);
 
-  const getComponent = (
-    tagName: string,
-    tag: string | Record<string, string>[]
-  ) => {
-    if (Array.isArray(tag)) {
-      return tag.map((tagItem) => {
-        return Object.entries(tagItem).map(([key, tag]) => {
-          return getComponent(key, tag);
-        });
-      });
+  const toggleExpand = (key: string) => {
+    setExpanded((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
+
+  const getComponent = (tagAddress: string, tag: Tag) => {
+    if (Array.isArray(tag.Value)) {
+      return (
+        <li key={tagAddress} className="ml-4">
+          <button
+            onClick={() => toggleExpand(tagAddress)}
+            className="text-blue-600 underline"
+          >
+            {tag.Name} {expanded[tagAddress] ? "▲" : "▼"}
+          </button>
+          {expanded[tagAddress] && (
+            <ul className="list-disc pl-4">
+              {tag.Value.map((metadata, index) => (
+                <li key={`${tagAddress}-${index}`}>
+                  <ul>
+                    {Object.entries(metadata).map(([addressTag, tag]) =>
+                      getComponent(addressTag, tag)
+                    )}
+                  </ul>
+                </li>
+              ))}
+            </ul>
+          )}
+        </li>
+      );
     } else {
       return (
-        <span>
-          <strong>{tagName}:</strong> {tag}
-        </span>
+        <li className="ml-4 px-2" key={tagAddress}>
+          {tag.Name} - {tag.Value}
+        </li>
       );
     }
   };
@@ -73,11 +99,13 @@ const Tags = ({ seriesId }: TagsProps) => {
         value={instanceNumber ?? 1}
         onChange={(event) => setInstanceNumber(Number(event.target?.value))}
       />
-      <ul>
-        {Object.entries(metadata).map(([key, tag]) => (
-          <li key={key}>{getComponent(key, tag)}</li>
-        ))}
-      </ul>
+      <div>
+        <ul className="list-disc">
+          {Object.entries(metadata).map(([tagAddress, tag]) =>
+            getComponent(tagAddress, tag)
+          )}
+        </ul>
+      </div>
     </>
   );
 };