fix: max call stack exceeded for dicom tag browser (#4855)

extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx

@@ -18,7 +18,7 @@ export type Row = {
   depth: number;
   parents?: string[];
   children?: string[];
-  areChildrenVisible?: true;
+  areChildrenVisible?: boolean;
 };
 
 let rowCounter = 0;
@@ -91,7 +91,7 @@ const DicomTagBrowser = ({
 
     setShouldShowInstanceList(isImageStack && activeDisplaySet.images.length > 1);
     const tags = getSortedTags(metadata);
-    const rows = getFormattedRowsFromTags({ tags, metadata, depth: 0 });
+    const rows = getFormattedRowsFromTags({ tags, metadata });
     return rows;
   }, [getMetadata, activeDisplaySet]);
 
@@ -186,21 +186,27 @@ const DicomTagBrowser = ({
   );
 };
 
-function getFormattedRowsFromTags({ tags, metadata, depth, parents }) {
+function getFormattedRowsFromTags({ tags, metadata }) {
   const rows: Row[] = [];
+  const stack = [{ tags, depth: 0, parents: null, index: 0, children: [] }];
+  const parentChildMap = new Map();
 
-  tags.forEach(tagInfo => {
+  while (stack.length > 0) {
+    const current = stack.pop();
+    const { tags, depth, parents, index, children } = current;
+
+    for (let i = index; i < tags.length; i++) {
+      const tagInfo = tags[i];
       const uid = generateRowId();
+
+      if (parents?.length > 0) {
+        parents.forEach(parent => {
+          parentChildMap.get(parent).push(uid);
+        });
+      }
+
       if (tagInfo.vr === 'SQ') {
-      const children = tagInfo.values.flatMap(value =>
+        const row = {
-        getFormattedRowsFromTags({
-          tags: value,
-          metadata,
-          depth: depth + 1,
-          parents: parents ? [...parents, uid] : [uid],
-        })
-      );
-      const row: Row = {
           uid,
           tag: tagInfo.tag,
           valueRepresentation: tagInfo.vr,
@@ -209,10 +215,25 @@ function getFormattedRowsFromTags({ tags, metadata, depth, parents }) {
           depth,
           isVisible: true,
           areChildrenVisible: true,
-        children: children.map(child => child.uid),
+          children: [],
           parents,
         };
-      rows.push(row, ...children);
+        rows.push(row);
+        parentChildMap.set(uid, row.children);
+
+        const newParents = parents ? [...parents, uid] : [uid];
+
+        if (tagInfo.values.length > 0) {
+          stack.push({ tags, depth, parents, index: i + 1, children });
+          stack.push({
+            tags: tagInfo.values.flat(),
+            depth: depth + 1,
+            parents: newParents,
+            index: 0,
+            children: [],
+          });
+          break;
+        }
       } else {
         if (tagInfo.vr === 'xs') {
           try {
@@ -223,7 +244,7 @@ function getFormattedRowsFromTags({ tags, metadata, depth, parents }) {
             console.warn(`Failed to parse value representation for tag '${tagInfo.keyword}'`);
           }
         }
-      const row: Row = {
+        const row = {
           uid,
           tag: tagInfo.tag,
           valueRepresentation: tagInfo.vr,
@@ -235,8 +256,8 @@ function getFormattedRowsFromTags({ tags, metadata, depth, parents }) {
         };
         rows.push(row);
       }
-  });
+    }
-
+  }
   return rows;
 }