+ {leftMenu &&
+ ReactDOM.createPortal(
+ ,
+ myQueueButtonDiv,
+ )}
+
+
+
+
+
,
+ middleMenu,
+ )}
+ {myQueueButtonDiv &&
+ ReactDOM.createPortal(
+
+ {children}
+
+
+ );
+}
diff --git a/web/extensions/workspace-manager/src/components/ui/Flex.tsx b/web/extensions/workspace-manager/src/components/ui/Flex.tsx
new file mode 100644
index 000000000000..2e42c99c6b33
--- /dev/null
+++ b/web/extensions/workspace-manager/src/components/ui/Flex.tsx
@@ -0,0 +1,20 @@
+import React, { forwardRef } from "react";
+
+const Flex = forwardRef
+
+ );
+};
+
+export default Spinner;
+
+// type SpinnerSize = "sm" | "md" | "lg";
+// export default function Spinner({ size = "md" }: { size?: SpinnerSize }) {
+// const sizeNum = size === "sm" ? 3 : size === "md" ? 4 : 6;
+// return (
+//
+//
+// );
+// }
diff --git a/web/extensions/workspace-manager/src/components/ui/Stack.tsx b/web/extensions/workspace-manager/src/components/ui/Stack.tsx
new file mode 100644
index 000000000000..f0d5d5bdce77
--- /dev/null
+++ b/web/extensions/workspace-manager/src/components/ui/Stack.tsx
@@ -0,0 +1,15 @@
+import React, { forwardRef } from "react";
+
+const Flex = forwardRef
+//
+//
+//
+// Loading...
+//
+
+ ) : (
+ props.children // Render button children when not loading
+ )}
+
+
+ {children}
+
+
+
+
+
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+
+//
+
+//
+// );
+// }
diff --git a/web/extensions/workspace-manager/src/model-manager/InstallBatchModelsRow.tsx b/web/extensions/workspace-manager/src/model-manager/InstallBatchModelsRow.tsx
new file mode 100644
index 000000000000..1a28e2b27439
--- /dev/null
+++ b/web/extensions/workspace-manager/src/model-manager/InstallBatchModelsRow.tsx
@@ -0,0 +1,86 @@
+// import HoverMenu from "@/components/HoverMenu";
+// import { useDebounceFunc } from "@/components/hooks/useDebounceFunc";
+// import {
+// Button,
+// Checkbox,
+// Flex,
+// Input,
+// Select,
+// Spinner,
+// Stack,
+// } from "@chakra-ui/react";
+// import { IconInfoCircleFilled } from "@tabler/icons-react";
+// import { ChangeEvent, useEffect, useState } from "react";
+
+// export default function InstallBatchModelsRow({
+// index,
+// model,
+// updateModel,
+// removeModel,
+// }: {
+// index: number;
+// model: ModelDep;
+// updateModel: (index: number, change: Partial{output}
+// ✅
} +// +//{error}
+//
+
+
+
+
+
+
+ My Models
+ + {/* */} +❓Select Machine
+ )} +
+ {tree.map((file) => (
+
+ );
+}
diff --git a/web/extensions/workspace-manager/src/model-manager/fileTreeUtils.ts b/web/extensions/workspace-manager/src/model-manager/fileTreeUtils.ts
new file mode 100644
index 000000000000..95729aa14e87
--- /dev/null
+++ b/web/extensions/workspace-manager/src/model-manager/fileTreeUtils.ts
@@ -0,0 +1,60 @@
+type FileNode = {
+ name: string;
+ size?: string;
+ children?: FileNode[];
+};
+
+const formatSize = (sizeB: number): string => {
+ const sizeKB = sizeB / 1024;
+ const sizeMB = sizeKB / 1024;
+ const sizeGB = sizeMB / 1024;
+
+ if (sizeGB >= 1) {
+ return `${sizeGB.toFixed(1)} GB`;
+ } else if (sizeMB >= 1) {
+ return `${sizeMB.toFixed(1)} MB`;
+ } else if (sizeKB >= 1) {
+ return `${sizeKB.toFixed(1)} KB`;
+ } else {
+ return `${sizeB} B`;
+ }
+};
+
+export const convertToTree = (
+ data: Record
+ {file.children == null ? (
+
+
+ ) : (
+
+ ))}
+ {file.name}
+ {file.size}
+
+
+
+
+ )}
+ {file.name}
+
+
+ + {workflow.name} +
+ ) : ( ++ Unsaved +
+ )} +