Skip to content

Commit dd123ed

Browse files
devhelprdevhelpr
committed
export-button also below report
1 parent bc5926a commit dd123ed

File tree

3 files changed

+109
-65
lines changed

3 files changed

+109
-65
lines changed

‎src/components/synthetic-data-interfaces/data.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export interface SyntheticData {
2+
data: Record<string, string>[];
3+
stringified: string;
4+
fileName: string;
5+
demo?: boolean;
6+
}

‎src/components/synthetic-data/export-button.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { downloadFile } from '@/lib/download-file';
2+
import {
3+
DropdownMenu,
4+
DropdownMenuTrigger,
5+
DropdownMenuContent,
6+
DropdownMenuItem,
7+
} from '@radix-ui/react-dropdown-menu';
8+
9+
import { ChevronDown, Share } from 'lucide-react';
10+
import { Button } from '../ui/button';
11+
import { SyntheticDataInfo } from '../synthetic-data-interfaces/cluster-export';
12+
import { useTranslation } from 'react-i18next';
13+
import { UseReactToPrintFn } from 'react-to-print';
14+
import { SyntheticData } from '../synthetic-data-interfaces/data';
15+
16+
export const ExportButton = ({
17+
clusterInfo,
18+
reactToPrintFn,
19+
data,
20+
handleExport,
21+
}: {
22+
clusterInfo: SyntheticDataInfo | undefined;
23+
reactToPrintFn: UseReactToPrintFn;
24+
data: SyntheticData;
25+
handleExport: (syntheticData: object[]) => void;
26+
}) => {
27+
const { t } = useTranslation();
28+
return (
29+
<div className="ml-auto flex flex-row gap-2 hideonprint">
30+
<DropdownMenu>
31+
<DropdownMenuTrigger asChild>
32+
<Button variant="outline" size="sm" className="p-4 text-sm">
33+
{t('downloadButton')}
34+
<ChevronDown className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" />
35+
</Button>
36+
</DropdownMenuTrigger>
37+
<DropdownMenuContent
38+
align="end"
39+
className="bg-white p-4 rounded-md flex flex-col gap-2 shadow-md"
40+
>
41+
<DropdownMenuItem
42+
onClick={() => reactToPrintFn()}
43+
className="flex flex-row items-center"
44+
>
45+
<Share className="size-3.5 mr-2" />
46+
{t('syntheticData.exportToPDF')}
47+
</DropdownMenuItem>
48+
{clusterInfo && (
49+
<>
50+
<DropdownMenuItem
51+
className="flex flex-row items-center"
52+
onClick={() => {
53+
downloadFile(
54+
JSON.stringify(
55+
{
56+
fileName: data.fileName,
57+
...clusterInfo,
58+
},
59+
null,
60+
2
61+
),
62+
`${data.fileName.replace('.csv', '') || 'cluster-info'}-${clusterInfo.date.toISOString()}.json`,
63+
'application/json'
64+
);
65+
}}
66+
>
67+
<Share className="size-3.5 mr-2" />
68+
{t('syntheticData.exportToJSON')}
69+
</DropdownMenuItem>
70+
<DropdownMenuItem
71+
className="flex flex-row items-center"
72+
onClick={() => {
73+
handleExport(
74+
clusterInfo.syntheticData as object[]
75+
);
76+
}}
77+
>
78+
<Share className="size-3.5 mr-2" />
79+
{t('syntheticData.exportToCSV')}
80+
</DropdownMenuItem>
81+
</>
82+
)}
83+
</DropdownMenuContent>
84+
</DropdownMenu>
85+
</div>
86+
);
87+
};

‎src/routes/SyntheticData.tsx‎

Lines changed: 16 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { Button } from '@/components/ui/button';
21
import { useEffect, useRef, useState } from 'react';
32
import { pythonCode } from '@/assets/synthetic-data';
43
import { usePython } from '@/components/pyodide/use-python';
5-
import { Share, ChevronDown } from 'lucide-react';
64
import { csvReader } from '@/components/CSVReader';
75
import { cn } from '@/lib/utils';
86
import ComponentMapper from '@/components/componentMapper';
@@ -12,15 +10,9 @@ import SyntheticDataSettings from '@/components/SyntheticDataSettings';
1210
import { SyntheticDataInfo } from '@/components/synthetic-data-interfaces/cluster-export';
1311
import LanguageSwitcher from '@/components/ui/languageSwitcher';
1412
import { useTranslation } from 'react-i18next';
15-
import {
16-
DropdownMenu,
17-
DropdownMenuContent,
18-
DropdownMenuItem,
19-
DropdownMenuTrigger,
20-
} from '@/components/ui/dropdown-menu';
21-
import { downloadFile } from '@/lib/download-file';
2213
import { SyntheticDataParameters } from '@/components/synthetic-data-interfaces/SyntheticDataParameters';
2314
import { exportToCSV } from '@/lib/utils';
15+
import { ExportButton } from '@/components/synthetic-data/export-button';
2416

2517
const PAGE_STYLE = `
2618
@page {
@@ -163,62 +155,12 @@ export default function SyntheticDataGeneration() {
163155
)}
164156
>
165157
{initialised && data.data.length > 0 && result.length > 0 && (
166-
<div className="ml-auto flex flex-row gap-2 hideonprint">
167-
<DropdownMenu>
168-
<DropdownMenuTrigger asChild>
169-
<Button
170-
variant="outline"
171-
size="sm"
172-
className="p-4 text-sm"
173-
>
174-
{t('downloadButton')}
175-
<ChevronDown className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" />
176-
</Button>
177-
</DropdownMenuTrigger>
178-
<DropdownMenuContent align="end">
179-
<DropdownMenuItem
180-
onClick={() => reactToPrintFn()}
181-
>
182-
<Share className="size-3.5 mr-2" />
183-
{t('syntheticData.exportToPDF')}
184-
</DropdownMenuItem>
185-
{clusterInfo && (
186-
<>
187-
<DropdownMenuItem
188-
onClick={() => {
189-
downloadFile(
190-
JSON.stringify(
191-
{
192-
fileName:
193-
data.fileName,
194-
...clusterInfo,
195-
},
196-
null,
197-
2
198-
),
199-
`${data.fileName.replace('.csv', '') || 'cluster-info'}-${clusterInfo.date.toISOString()}.json`,
200-
'application/json'
201-
);
202-
}}
203-
>
204-
<Share className="size-3.5 mr-2" />
205-
{t('syntheticData.exportToJSON')}
206-
</DropdownMenuItem>
207-
<DropdownMenuItem
208-
onClick={() => {
209-
handleExport(
210-
clusterInfo.syntheticData as object[]
211-
);
212-
}}
213-
>
214-
<Share className="size-3.5 mr-2" />
215-
{t('syntheticData.exportToCSV')}
216-
</DropdownMenuItem>
217-
</>
218-
)}
219-
</DropdownMenuContent>
220-
</DropdownMenu>
221-
</div>
158+
<ExportButton
159+
clusterInfo={clusterInfo}
160+
data={data}
161+
handleExport={handleExport}
162+
reactToPrintFn={reactToPrintFn}
163+
/>
222164
)}
223165

224166
{result.length > 0 ? (
@@ -232,6 +174,15 @@ export default function SyntheticDataGeneration() {
232174
<div className="flex-1" />
233175
</>
234176
)}
177+
178+
{initialised && data.data.length > 0 && result.length > 0 && (
179+
<ExportButton
180+
clusterInfo={clusterInfo}
181+
data={data}
182+
handleExport={handleExport}
183+
reactToPrintFn={reactToPrintFn}
184+
/>
185+
)}
235186
</div>
236187
</main>
237188
);

0 commit comments

Comments
 (0)