Download options for circuits

src/components/explore-section/Circuit/DetailView/header/Heading.tsx

@@ -22,7 +22,7 @@ export default function Heading({ content }: { content: CircuitSchemaProps }) {
           label="Simulate"
           action={futureActionsForButton}
           disabled
-          link={content.files[0].url}
+          link={content.files[0]?.children?.[0]?.url}
         >
           <SimulateIcon iconColor="#002766" className="h-4 w-4" />
         </ActionButton>
@@ -31,7 +31,7 @@ export default function Heading({ content }: { content: CircuitSchemaProps }) {
           label="Clone model"
           action={futureActionsForButton}
           disabled
-          link={content.files[0].url}
+          link={content.files[0]?.children?.[0]?.url}
         >
           <CloneIcon className="h-4 w-4" />
         </ActionButton>
@@ -40,11 +40,11 @@ export default function Heading({ content }: { content: CircuitSchemaProps }) {
           label="Save to Library"
           action={futureActionsForButton}
           disabled
-          link={content.files[0].url}
+          link={content.files[0]?.children?.[0]?.url}
         >
           <DownloadIcon iconColor="#002766" className="h-4 w-4" />
         </ActionButton>
-        <ActionButton type="link" label="Download" link={content.files[0].url}>
+        <ActionButton type="link" label="Download" link={content.files[0]?.children?.[0]?.url}>
           <DownloadIcon iconColor="#002766" className="h-4 w-4" />
         </ActionButton>
       </div>

src/components/explore-section/Circuit/global/CircuitTable.tsx

@@ -1,17 +1,13 @@
 import { Table } from 'antd';
-import { ColumnsType } from 'antd/es/table';
-import { TableRowSelection } from 'antd/es/table/interface';
 import { usePathname } from 'next/navigation';
-import { Key, ReactNode, useCallback, useMemo, useState } from 'react';
-import { ResizeCallbackData } from 'react-resizable';
+import { Key, ReactNode, useCallback, useState } from 'react';
 import { CircuitSchemaProps } from '../type';
 import calculateSubcircuitsForParent from '../utils/calculate-subcircuits-for-parent';
 import columns from './Columns';
-import CustomRow from './CustomRow';
-import DownloadCircuitButton from './DownloadCircuitButton';
-import ResizableTitle from './ResizableTitle';
 import SubcircuitTable from './SubcircuitsTable';
+import DownloadContainer from './download/DownloadContainer';
 
+import { classNames } from '@/util/utils';
 import styles from './exploreCircuitTable.module.scss';
 
 export type CustomRowProps = {
@@ -25,45 +21,6 @@ export type CustomRowProps = {
   'data-row-key'?: string;
 };
 
-function findSelectedCircuit(
-  circuits: CircuitSchemaProps[],
-  key: string
-): CircuitSchemaProps | null {
-  for (const circuit of circuits) {
-    if (circuit.key === key) {
-      return circuit;
-    }
-    if (circuit.subcircuits) {
-      const found = findSelectedCircuit(circuit.subcircuits, key);
-      if (found) {
-        return found;
-      }
-    }
-  }
-  return null;
-}
-
-function RowWrapper({
-  handleExpandRow,
-  expandedRowKeys,
-  mergedColumns,
-  ...props
-}: CustomRowProps & {
-  handleExpandRow: (expanded: boolean, record: CircuitSchemaProps) => void;
-  expandedRowKeys: Key[];
-  mergedColumns: ColumnsType<CircuitSchemaProps>;
-}) {
-  return (
-    <CustomRow
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      handleExpandRow={handleExpandRow}
-      expandedRowKeys={expandedRowKeys}
-      columnCount={mergedColumns.length}
-    />
-  );
-}
-
 export default function CircuitTable({
   data,
   downloadable = true,
@@ -73,19 +30,10 @@ export default function CircuitTable({
   downloadable?: boolean;
   // hasSearch?: boolean;
 }) {
-  // ROWS
+  const [circuitToDownload, setCircuitToDownload] = useState<CircuitSchemaProps | null>(null);
+  const [downloadModalOpen, SetDownloadModalOpen] = useState<boolean>(false);
+
   const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
-  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
-  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({
-    name: 150,
-    description: 300,
-    brainRegion: 150,
-    numberOfNeurons: 100,
-    specie: 120,
-    contributorSimple: 150,
-    registrationDate: 150,
-    hasSubcircuits: 120,
-  });
 
   // FILTERING
   // const [searchQuery, setSearchQuery] = useState<string>('');
@@ -102,100 +50,57 @@ export default function CircuitTable({
     );
   }, []);
 
-  const handleResize = useCallback(
-    (key: string) =>
-      (e: React.SyntheticEvent, { size }: ResizeCallbackData) => {
-        setColumnWidths((prev) => {
-          const newWidths = { ...prev, [key]: size.width };
-          return newWidths;
-        });
-      },
-    []
-  );
-
   const pathname = usePathname();
   const isCircuitDetailPage = pathname.includes('/circuit/');
 
-  const mergedColumns: ColumnsType<CircuitSchemaProps> = useMemo(() => {
-    return columns(
-      expandedRowKeys,
-      calculateSubcircuitsForParent,
-      handleRowExpandClick,
-      handleResize,
-      isCircuitDetailPage
-    ).map((col) => ({
-      ...col,
-      width: columnWidths[col.key as string] || col.width,
-    }));
-  }, [expandedRowKeys, handleRowExpandClick, handleResize, columnWidths, isCircuitDetailPage]);
+  // DOWNLOAD MODAL
+  const handleOpenDownloadModal = useCallback((record: CircuitSchemaProps) => {
+    setCircuitToDownload(record);
+    SetDownloadModalOpen(true);
+  }, []);
 
-  const rowSelection = useMemo(
-    (): TableRowSelection<CircuitSchemaProps> | undefined =>
-      downloadable
-        ? {
-            type: 'checkbox',
-            selectedRowKeys,
-            onChange: (newSelectedRowKeys: Key[], _selectedRows: CircuitSchemaProps[]) => {
-              const key = newSelectedRowKeys[0] as string;
-              const updatedKeys = selectedRowKeys[0] === key ? [] : [key];
-              setSelectedRowKeys(updatedKeys);
-            },
-          }
-        : undefined,
-    [selectedRowKeys, downloadable]
-  );
+  const handleCloseDownloadModal = useCallback(() => {
+    setCircuitToDownload(null);
+    SetDownloadModalOpen(false);
+  }, []);
 
+  // ROW EXPANSION & SUBCIRCUITS
   const handleExpandRow = useCallback((expanded: boolean, row: CircuitSchemaProps) => {
     const rowKey = row.key;
     setExpandedRowKeys((prev) =>
       expanded ? [...prev, rowKey] : prev.filter((key) => key !== rowKey)
     );
   }, []);
 
-  const selectedRows = useMemo(() => {
-    if (!selectedRowKeys[0]) return [];
-    const selectedCircuit = findSelectedCircuit(data, selectedRowKeys[0]);
-    return selectedCircuit ? [selectedCircuit] : [];
-  }, [data, selectedRowKeys]);
-
   const renderSubcircuits = useCallback(
     (circuit: CircuitSchemaProps) =>
       circuit.subcircuits && circuit.subcircuits.length > 0 ? (
         <SubcircuitTable
+          columns={columns(
+            expandedRowKeys,
+            calculateSubcircuitsForParent,
+            handleRowExpandClick,
+            isCircuitDetailPage,
+            handleOpenDownloadModal
+          )}
           circuit={circuit}
-          mergedColumns={mergedColumns}
-          rowSelection={rowSelection || ({} as TableRowSelection<CircuitSchemaProps>)}
           expandedRowKeys={expandedRowKeys}
           onExpand={handleExpandRow}
           downloadable={downloadable}
-          selectedRows={selectedRows}
-          selectedRowKeys={selectedRowKeys}
         />
       ) : null,
     [
-      mergedColumns,
-      rowSelection,
       expandedRowKeys,
       handleExpandRow,
       downloadable,
-      selectedRowKeys,
-      selectedRows,
+      handleOpenDownloadModal,
+      handleRowExpandClick,
+      isCircuitDetailPage,
     ]
   );
 
-  const rowWrapperWithColumns = (props: CustomRowProps) => (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <RowWrapper
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      handleExpandRow={handleExpandRow}
-      expandedRowKeys={expandedRowKeys}
-      mergedColumns={mergedColumns}
-    />
-  );
-
-  const lastRow = selectedRows.at(-1);
-  const fileUrl = lastRow?.files?.[0]?.url;
+  // const lastRow: CircuitSchemaProps | undefined = selectedRows.at(-1);
+  // const fileUrl = lastRow?.files?.[0]?.url;
 
   return (
     <div className="relative flex w-full flex-col">
@@ -221,19 +126,15 @@ export default function CircuitTable({
                 '--ant-table-expand-icon-col-width': '0px',
               } as React.CSSProperties
             }
-            data-row-selection={downloadable && downloadable.toString()}
-            components={{
-              header: {
-                cell: ResizableTitle,
-              },
-              body: {
-                row: rowWrapperWithColumns,
-              },
-            }}
             dataSource={data}
-            columns={mergedColumns}
+            columns={columns(
+              expandedRowKeys,
+              calculateSubcircuitsForParent,
+              handleRowExpandClick,
+              isCircuitDetailPage,
+              handleOpenDownloadModal
+            )}
             pagination={false}
-            rowSelection={downloadable ? rowSelection : undefined}
             expandable={{
               expandedRowRender: renderSubcircuits,
               expandedRowKeys,
@@ -242,8 +143,29 @@ export default function CircuitTable({
               rowExpandable: (record) => !!record.subcircuits && record.subcircuits.length > 0,
             }}
           />
-          {fileUrl && <DownloadCircuitButton fileUrl={fileUrl} selectedRowKeys={selectedRowKeys} />}
+          {/* {fileUrl && <DownloadCircuitButton fileUrl={fileUrl} selectedRowKeys={selectedRowKeys} />} */}
         </div>
+        <>
+          <div
+            className={classNames(
+              'out-expo fixed bottom-3 z-[999999] h-screen w-[44vw] overflow-y-scroll bg-primary-9 p-8 transition-right duration-500',
+              downloadModalOpen ? 'right-0' : '-right-full'
+            )}
+          >
+            {circuitToDownload !== null && (
+              <DownloadContainer
+                content={circuitToDownload}
+                handleCloseDownloadModal={handleCloseDownloadModal}
+              />
+            )}
+          </div>
+          <div
+            className={classNames(
+              'fixed left-0 top-0 z-[999998] h-screen w-screen bg-black transition-opacity duration-500 ease-out-back',
+              downloadModalOpen ? 'opacity-50' : 'pointer-events-none opacity-0'
+            )}
+          />
+        </>
       </div>
     </div>
   );