models - pop up page

src/app/page.tsx

@@ -210,10 +210,31 @@ export default function Home() {
   const orgTotalPages = Math.ceil(sortedOrgData.length / orgPageSize);
 
   const handleModelChildrenClick = (model: ModelData, type: 'direct' | 'all') => {
+    console.log('Model data:', model);
+    console.log('Children type:', type);
     setSelectedModel(model);
     setSelectedModelChildrenType(type);
-    const children = type === 'direct' ? model.direct_children || [] : model.all_children || [];
-    setSelectedModelChildren(children);
+    let children;
+    if (type === 'direct') {
+      children = model.direct_children || [];
+    } else {
+      children = model.all_children || [];
+    }
+    console.log('Children:', children);
+
+    // Handle Vector data structure
+    if (children && typeof children === 'object' && 'get' in children && 'length' in children) {
+      const vectorChildren = [];
+      for (let i = 0; i < children.length; i++) {
+        vectorChildren.push(children.get(i));
+      }
+      setSelectedModelChildren(vectorChildren);
+    } else if (Array.isArray(children)) {
+      setSelectedModelChildren(children);
+    } else {
+      console.error('Unexpected children data structure:', children);
+      setSelectedModelChildren([]);
+    }
   };
 
   const handleOrgModelsClick = (org: string) => {
@@ -385,7 +406,7 @@ export default function Home() {
           </h2>
           {selectedModelChildren.length > 0 ? (
             <Table
-              data={selectedModelChildren.map((child) => ({ model: child }))}
+              data={selectedModelChildren.map((child, index) => ({ id: index, model: child }))}
               columns={[{ key: 'model', label: 'Model' }]}
               pageSize={modalPageSize}
               currentPage={modelChildrenPage}