Skip to content

Commit 3533289

Browse files
loris-olivier-obiloris-maru
loris-olivier-obi
and
loris-maru
authored
Download options for circuits (#347)
* Removed the component of search bar and filter options * Added the Download container and modified the download item schema * Cleaned the CircuitTable file by removing merged columns and resize logic * Added the four different types of filetype * Refine the layout in css * Added the animation for the download modal * Modify style of full circuit download * Added total number of files at top * Added new JSON from Daniela * Added the full circuit data --------- Co-authored-by: Loris Olivier <53363974+loris-maru@users.noreply.github.com>
1 parent bb110b0 commit 3533289

File tree

12 files changed

+416
-245
lines changed

12 files changed

+416
-245
lines changed

‎public/circuits/ALL_CIRCUITS.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function Heading({ content }: { content: CircuitSchemaProps }) {
2222
label="Simulate"
2323
action={futureActionsForButton}
2424
disabled
25-
link={content.files[0].url}
25+
link={content.files[0]?.children?.[0]?.url}
2626
>
2727
<SimulateIcon iconColor="#002766" className="h-4 w-4" />
2828
</ActionButton>
@@ -31,7 +31,7 @@ export default function Heading({ content }: { content: CircuitSchemaProps }) {
3131
label="Clone model"
3232
action={futureActionsForButton}
3333
disabled
34-
link={content.files[0].url}
34+
link={content.files[0]?.children?.[0]?.url}
3535
>
3636
<CloneIcon className="h-4 w-4" />
3737
</ActionButton>
@@ -40,11 +40,11 @@ export default function Heading({ content }: { content: CircuitSchemaProps }) {
4040
label="Save to Library"
4141
action={futureActionsForButton}
4242
disabled
43-
link={content.files[0].url}
43+
link={content.files[0]?.children?.[0]?.url}
4444
>
4545
<DownloadIcon iconColor="#002766" className="h-4 w-4" />
4646
</ActionButton>
47-
<ActionButton type="link" label="Download" link={content.files[0].url}>
47+
<ActionButton type="link" label="Download" link={content.files[0]?.children?.[0]?.url}>
4848
<DownloadIcon iconColor="#002766" className="h-4 w-4" />
4949
</ActionButton>
5050
</div>

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

Lines changed: 57 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import { Table } from 'antd';
2-
import { ColumnsType } from 'antd/es/table';
3-
import { TableRowSelection } from 'antd/es/table/interface';
42
import { usePathname } from 'next/navigation';
5-
import { Key, ReactNode, useCallback, useMemo, useState } from 'react';
6-
import { ResizeCallbackData } from 'react-resizable';
3+
import { Key, ReactNode, useCallback, useState } from 'react';
74
import { CircuitSchemaProps } from '../type';
85
import calculateSubcircuitsForParent from '../utils/calculate-subcircuits-for-parent';
96
import columns from './Columns';
10-
import CustomRow from './CustomRow';
11-
import DownloadCircuitButton from './DownloadCircuitButton';
12-
import ResizableTitle from './ResizableTitle';
137
import SubcircuitTable from './SubcircuitsTable';
8+
import DownloadContainer from './download/DownloadContainer';
149

10+
import { classNames } from '@/util/utils';
1511
import styles from './exploreCircuitTable.module.scss';
1612

1713
export type CustomRowProps = {
@@ -25,45 +21,6 @@ export type CustomRowProps = {
2521
'data-row-key'?: string;
2622
};
2723

28-
function findSelectedCircuit(
29-
circuits: CircuitSchemaProps[],
30-
key: string
31-
): CircuitSchemaProps | null {
32-
for (const circuit of circuits) {
33-
if (circuit.key === key) {
34-
return circuit;
35-
}
36-
if (circuit.subcircuits) {
37-
const found = findSelectedCircuit(circuit.subcircuits, key);
38-
if (found) {
39-
return found;
40-
}
41-
}
42-
}
43-
return null;
44-
}
45-
46-
function RowWrapper({
47-
handleExpandRow,
48-
expandedRowKeys,
49-
mergedColumns,
50-
...props
51-
}: CustomRowProps & {
52-
handleExpandRow: (expanded: boolean, record: CircuitSchemaProps) => void;
53-
expandedRowKeys: Key[];
54-
mergedColumns: ColumnsType<CircuitSchemaProps>;
55-
}) {
56-
return (
57-
<CustomRow
58-
// eslint-disable-next-line react/jsx-props-no-spreading
59-
{...props}
60-
handleExpandRow={handleExpandRow}
61-
expandedRowKeys={expandedRowKeys}
62-
columnCount={mergedColumns.length}
63-
/>
64-
);
65-
}
66-
6724
export default function CircuitTable({
6825
data,
6926
downloadable = true,
@@ -73,19 +30,10 @@ export default function CircuitTable({
7330
downloadable?: boolean;
7431
// hasSearch?: boolean;
7532
}) {
76-
// ROWS
33+
const [circuitToDownload, setCircuitToDownload] = useState<CircuitSchemaProps | null>(null);
34+
const [downloadModalOpen, SetDownloadModalOpen] = useState<boolean>(false);
35+
7736
const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
78-
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
79-
const [columnWidths, setColumnWidths] = useState<Record<string, number>>({
80-
name: 150,
81-
description: 300,
82-
brainRegion: 150,
83-
numberOfNeurons: 100,
84-
specie: 120,
85-
contributorSimple: 150,
86-
registrationDate: 150,
87-
hasSubcircuits: 120,
88-
});
8937

9038
// FILTERING
9139
// const [searchQuery, setSearchQuery] = useState<string>('');
@@ -102,100 +50,57 @@ export default function CircuitTable({
10250
);
10351
}, []);
10452

105-
const handleResize = useCallback(
106-
(key: string) =>
107-
(e: React.SyntheticEvent, { size }: ResizeCallbackData) => {
108-
setColumnWidths((prev) => {
109-
const newWidths = { ...prev, [key]: size.width };
110-
return newWidths;
111-
});
112-
},
113-
[]
114-
);
115-
11653
const pathname = usePathname();
11754
const isCircuitDetailPage = pathname.includes('/circuit/');
11855

119-
const mergedColumns: ColumnsType<CircuitSchemaProps> = useMemo(() => {
120-
return columns(
121-
expandedRowKeys,
122-
calculateSubcircuitsForParent,
123-
handleRowExpandClick,
124-
handleResize,
125-
isCircuitDetailPage
126-
).map((col) => ({
127-
...col,
128-
width: columnWidths[col.key as string] || col.width,
129-
}));
130-
}, [expandedRowKeys, handleRowExpandClick, handleResize, columnWidths, isCircuitDetailPage]);
56+
// DOWNLOAD MODAL
57+
const handleOpenDownloadModal = useCallback((record: CircuitSchemaProps) => {
58+
setCircuitToDownload(record);
59+
SetDownloadModalOpen(true);
60+
}, []);
13161

132-
const rowSelection = useMemo(
133-
(): TableRowSelection<CircuitSchemaProps> | undefined =>
134-
downloadable
135-
? {
136-
type: 'checkbox',
137-
selectedRowKeys,
138-
onChange: (newSelectedRowKeys: Key[], _selectedRows: CircuitSchemaProps[]) => {
139-
const key = newSelectedRowKeys[0] as string;
140-
const updatedKeys = selectedRowKeys[0] === key ? [] : [key];
141-
setSelectedRowKeys(updatedKeys);
142-
},
143-
}
144-
: undefined,
145-
[selectedRowKeys, downloadable]
146-
);
62+
const handleCloseDownloadModal = useCallback(() => {
63+
setCircuitToDownload(null);
64+
SetDownloadModalOpen(false);
65+
}, []);
14766

67+
// ROW EXPANSION & SUBCIRCUITS
14868
const handleExpandRow = useCallback((expanded: boolean, row: CircuitSchemaProps) => {
14969
const rowKey = row.key;
15070
setExpandedRowKeys((prev) =>
15171
expanded ? [...prev, rowKey] : prev.filter((key) => key !== rowKey)
15272
);
15373
}, []);
15474

155-
const selectedRows = useMemo(() => {
156-
if (!selectedRowKeys[0]) return [];
157-
const selectedCircuit = findSelectedCircuit(data, selectedRowKeys[0]);
158-
return selectedCircuit ? [selectedCircuit] : [];
159-
}, [data, selectedRowKeys]);
160-
16175
const renderSubcircuits = useCallback(
16276
(circuit: CircuitSchemaProps) =>
16377
circuit.subcircuits && circuit.subcircuits.length > 0 ? (
16478
<SubcircuitTable
79+
columns={columns(
80+
expandedRowKeys,
81+
calculateSubcircuitsForParent,
82+
handleRowExpandClick,
83+
isCircuitDetailPage,
84+
handleOpenDownloadModal
85+
)}
16586
circuit={circuit}
166-
mergedColumns={mergedColumns}
167-
rowSelection={rowSelection || ({} as TableRowSelection<CircuitSchemaProps>)}
16887
expandedRowKeys={expandedRowKeys}
16988
onExpand={handleExpandRow}
17089
downloadable={downloadable}
171-
selectedRows={selectedRows}
172-
selectedRowKeys={selectedRowKeys}
17390
/>
17491
) : null,
17592
[
176-
mergedColumns,
177-
rowSelection,
17893
expandedRowKeys,
17994
handleExpandRow,
18095
downloadable,
181-
selectedRowKeys,
182-
selectedRows,
96+
handleOpenDownloadModal,
97+
handleRowExpandClick,
98+
isCircuitDetailPage,
18399
]
184100
);
185101

186-
const rowWrapperWithColumns = (props: CustomRowProps) => (
187-
// eslint-disable-next-line react/jsx-props-no-spreading
188-
<RowWrapper
189-
// eslint-disable-next-line react/jsx-props-no-spreading
190-
{...props}
191-
handleExpandRow={handleExpandRow}
192-
expandedRowKeys={expandedRowKeys}
193-
mergedColumns={mergedColumns}
194-
/>
195-
);
196-
197-
const lastRow = selectedRows.at(-1);
198-
const fileUrl = lastRow?.files?.[0]?.url;
102+
// const lastRow: CircuitSchemaProps | undefined = selectedRows.at(-1);
103+
// const fileUrl = lastRow?.files?.[0]?.url;
199104

200105
return (
201106
<div className="relative flex w-full flex-col">
@@ -221,19 +126,15 @@ export default function CircuitTable({
221126
'--ant-table-expand-icon-col-width': '0px',
222127
} as React.CSSProperties
223128
}
224-
data-row-selection={downloadable && downloadable.toString()}
225-
components={{
226-
header: {
227-
cell: ResizableTitle,
228-
},
229-
body: {
230-
row: rowWrapperWithColumns,
231-
},
232-
}}
233129
dataSource={data}
234-
columns={mergedColumns}
130+
columns={columns(
131+
expandedRowKeys,
132+
calculateSubcircuitsForParent,
133+
handleRowExpandClick,
134+
isCircuitDetailPage,
135+
handleOpenDownloadModal
136+
)}
235137
pagination={false}
236-
rowSelection={downloadable ? rowSelection : undefined}
237138
expandable={{
238139
expandedRowRender: renderSubcircuits,
239140
expandedRowKeys,
@@ -242,8 +143,29 @@ export default function CircuitTable({
242143
rowExpandable: (record) => !!record.subcircuits && record.subcircuits.length > 0,
243144
}}
244145
/>
245-
{fileUrl && <DownloadCircuitButton fileUrl={fileUrl} selectedRowKeys={selectedRowKeys} />}
146+
{/* {fileUrl && <DownloadCircuitButton fileUrl={fileUrl} selectedRowKeys={selectedRowKeys} />} */}
246147
</div>
148+
<>
149+
<div
150+
className={classNames(
151+
'out-expo fixed bottom-3 z-[999999] h-screen w-[44vw] overflow-y-scroll bg-primary-9 p-8 transition-right duration-500',
152+
downloadModalOpen ? 'right-0' : '-right-full'
153+
)}
154+
>
155+
{circuitToDownload !== null && (
156+
<DownloadContainer
157+
content={circuitToDownload}
158+
handleCloseDownloadModal={handleCloseDownloadModal}
159+
/>
160+
)}
161+
</div>
162+
<div
163+
className={classNames(
164+
'fixed left-0 top-0 z-[999998] h-screen w-screen bg-black transition-opacity duration-500 ease-out-back',
165+
downloadModalOpen ? 'opacity-50' : 'pointer-events-none opacity-0'
166+
)}
167+
/>
168+
</>
247169
</div>
248170
</div>
249171
);

0 commit comments

Comments
 (0)