Skip to content

Commit 68281f6

Browse files
devhelprdevhelpr
authored
Merge pull request #73 from NGO-Algorithm-Audit/feature/small-update-may-2025-ubd
Feature/small update may 2025 ubd
2 parents 65c0fce + e9afc4d commit 68281f6

File tree

6 files changed

+131
-59
lines changed

6 files changed

+131
-59
lines changed

‎src/components/BiasSettings.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ export default function BiasSettings({
170170
</div>
171171
<FormField
172172
control={form.control}
173+
disabled={isLoading}
173174
name="file"
174175
render={() => (
175176
<CSVReader onChange={onFileLoad} />
@@ -185,6 +186,7 @@ export default function BiasSettings({
185186
<FormField
186187
control={form.control}
187188
name="targetColumn"
189+
disabled={isLoading}
188190
render={({ field }) => (
189191
<FormItem>
190192
<FormLabel>
@@ -289,10 +291,11 @@ export default function BiasSettings({
289291
<Slider
290292
id="iterations"
291293
defaultValue={iter}
292-
max={100}
294+
max={50}
293295
step={1}
294296
onValueChange={value => setIter(value)}
295297
className="cursor-pointer"
298+
disabled={isLoading}
296299
/>
297300
</div>
298301
<div className="grid gap-3">
@@ -335,6 +338,7 @@ export default function BiasSettings({
335338
step={1}
336339
onValueChange={value => setClusters(value)}
337340
className="cursor-pointer"
341+
disabled={isLoading}
338342
/>
339343
</div>
340344
<div className="flex flex-col gap-3">
@@ -346,6 +350,7 @@ export default function BiasSettings({
346350
<FormField
347351
control={form.control}
348352
name="whichPerformanceMetricValueIsBetter"
353+
disabled={isLoading}
349354
render={({ field }) => (
350355
<RadioGroup
351356
onValueChange={field.onChange}
@@ -355,7 +360,10 @@ export default function BiasSettings({
355360
>
356361
<FormItem className="flex items-center space-x-3 space-y-0">
357362
<FormControl>
358-
<RadioGroupItem value="lower" />
363+
<RadioGroupItem
364+
value="lower"
365+
disabled={isLoading}
366+
/>
359367
</FormControl>
360368
<FormLabel className="font-normal">
361369
{t(
@@ -365,7 +373,10 @@ export default function BiasSettings({
365373
</FormItem>
366374
<FormItem className="flex items-center space-x-3 space-y-0">
367375
<FormControl>
368-
<RadioGroupItem value="higher" />
376+
<RadioGroupItem
377+
value="higher"
378+
disabled={isLoading}
379+
/>
369380
</FormControl>
370381
<FormLabel className="font-normal">
371382
{t(

‎src/components/SyntheticDataSettings.tsx‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ export default function SyntheticDataSettings({
137137
<FormField
138138
control={form.control}
139139
name="file"
140+
disabled={isLoading}
140141
render={() => (
141142
<CSVReader onChange={onFileLoad} />
142143
)}
@@ -182,6 +183,7 @@ export default function SyntheticDataSettings({
182183
<FormField
183184
control={form.control}
184185
name="sdgMethod"
186+
disabled={isLoading}
185187
render={({ field }) => (
186188
<RadioGroup
187189
onValueChange={field.onChange}
@@ -191,7 +193,10 @@ export default function SyntheticDataSettings({
191193
>
192194
<FormItem className="flex items-center space-x-3 space-y-0">
193195
<FormControl>
194-
<RadioGroupItem value="cart" />
196+
<RadioGroupItem
197+
value="cart"
198+
disabled={isLoading}
199+
/>
195200
</FormControl>
196201
<FormLabel className="font-normal">
197202
{t(
@@ -201,7 +206,10 @@ export default function SyntheticDataSettings({
201206
</FormItem>
202207
<FormItem className="flex items-center space-x-3 space-y-0">
203208
<FormControl>
204-
<RadioGroupItem value="gc" />
209+
<RadioGroupItem
210+
value="gc"
211+
disabled={isLoading}
212+
/>
205213
</FormControl>
206214
<FormLabel className="font-normal">
207215
{t(
@@ -243,6 +251,7 @@ export default function SyntheticDataSettings({
243251
<FormField
244252
control={form.control}
245253
name="nanTreatment"
254+
disabled={isLoading}
246255
render={({ field }) => (
247256
<RadioGroup
248257
onValueChange={field.onChange}
@@ -251,7 +260,10 @@ export default function SyntheticDataSettings({
251260
>
252261
<FormItem className="flex items-center space-x-3 space-y-0">
253262
<FormControl>
254-
<RadioGroupItem value="drop" />
263+
<RadioGroupItem
264+
value="drop"
265+
disabled={isLoading}
266+
/>
255267
</FormControl>
256268
<FormLabel className="font-normal">
257269
{t(
@@ -261,7 +273,10 @@ export default function SyntheticDataSettings({
261273
</FormItem>
262274
<FormItem className="flex items-center space-x-3 space-y-0">
263275
<FormControl>
264-
<RadioGroupItem value="impute" />
276+
<RadioGroupItem
277+
value="impute"
278+
disabled={isLoading}
279+
/>
265280
</FormControl>
266281
<FormLabel className="font-normal">
267282
{t(
@@ -288,6 +303,7 @@ export default function SyntheticDataSettings({
288303
step={10}
289304
onValueChange={value => setOutputSamples(value)}
290305
className="cursor-pointer"
306+
disabled={isLoading}
291307
/>
292308
</div>
293309
</fieldset>

‎src/components/bias-detection/export-button.tsx‎

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

‎src/locales/en.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export const en = {
1717
exportToJSON: 'Export synthetic data to json',
1818
downloadButton: 'Download',
1919
loadingPyodide: 'Loading Python environment...',
20-
loadingPackages: 'Loading core packages...',
20+
loadingPackages:
21+
'Loading core packages. On average this takes 10-15 seconds.',
2122
installingPackages: 'Installing additional packages...',
2223
biasSettings: {
2324
exportToPDF: 'Download bias analysis report as pdf',

‎src/locales/nl.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const nl = {
1515
cluster: 'Cluster {{value}}',
1616
downloadButton: 'Download',
1717
loadingPyodide: 'Python omgeving laden...',
18-
loadingPackages: 'Laden van packages',
18+
loadingPackages: 'Laden van packages. Dit duurt gemiddeld 10-15 seconden.',
1919
installingPackages: 'Aanvullende packages laden',
2020
biasSettings: {
2121
exportToPDF: 'Download bias analyse rapport als pdf',

‎src/routes/BiasDetection.tsx‎

Lines changed: 18 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
1-
import { Button } from '@/components/ui/button';
21
import { useEffect, useRef, useState } from 'react';
32
import { pythonCode } from '@/assets/bias-detection-python-code';
43
import { usePython } from '@/components/pyodide/use-python';
54
import BiasSettings from '@/components/BiasSettings';
6-
import { ChevronDown, Share } from 'lucide-react';
75
import { csvReader } from '@/components/CSVReader';
86
import { cn } from '@/lib/utils';
97
import ComponentMapper from '@/components/componentMapper';
10-
import { downloadFile } from '@/lib/download-file';
118
import { useReactToPrint } from 'react-to-print';
129
import Measuring from '@/components/icons/measuring.svg?react';
1310
import { ClusterInfo } from '@/components/bias-detection-interfaces/cluster-export';
1411
import { BiasDetectionParameters } from '@/components/bias-detection-interfaces/BiasDetectionParameters';
1512
import { CSVData } from '@/components/bias-detection-interfaces/csv-data';
1613
import { useTranslation } from 'react-i18next';
1714
import LanguageSwitcher from '@/components/ui/languageSwitcher';
18-
import {
19-
DropdownMenu,
20-
DropdownMenuContent,
21-
DropdownMenuItem,
22-
DropdownMenuTrigger,
23-
} from '@/components/ui/dropdown-menu';
2415
import { LoadingState } from '@/components/LoadingState';
16+
import { ExportButton } from '@/components/bias-detection/export-button';
2517

2618
const PAGE_STYLE = `
2719
@page {
@@ -166,47 +158,12 @@ export default function BiasDetection() {
166158
>
167159
{initialised && data.data.length > 0 && result.length > 0 && (
168160
<div className="ml-auto flex flex-row gap-2 hideonprint">
169-
<DropdownMenu>
170-
<DropdownMenuTrigger asChild>
171-
<Button
172-
variant="outline"
173-
size="sm"
174-
className="p-4 text-sm"
175-
>
176-
{t('downloadButton')}
177-
<ChevronDown className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" />
178-
</Button>
179-
</DropdownMenuTrigger>
180-
<DropdownMenuContent align="end">
181-
<DropdownMenuItem
182-
onClick={() => reactToPrintFn()}
183-
>
184-
<Share className="size-3.5 mr-2" />
185-
{t('biasSettings.exportToPDF')}
186-
</DropdownMenuItem>
187-
{clusterInfo && (
188-
<DropdownMenuItem
189-
onClick={() => {
190-
downloadFile(
191-
JSON.stringify(
192-
{
193-
fileName: 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('biasSettings.exportToJSON')}
206-
</DropdownMenuItem>
207-
)}
208-
</DropdownMenuContent>
209-
</DropdownMenu>
161+
<ExportButton
162+
buttonAlign={'right'}
163+
clusterInfo={clusterInfo}
164+
reactToPrintFn={reactToPrintFn}
165+
data={data}
166+
/>
210167
</div>
211168
)}
212169

@@ -228,6 +185,17 @@ export default function BiasDetection() {
228185
<div className="flex-1" />
229186
</>
230187
)}
188+
189+
{initialised && data.data.length > 0 && result.length > 0 && (
190+
<div className="flex flex-row gap-2 hideonprint">
191+
<ExportButton
192+
buttonAlign={'center'}
193+
clusterInfo={clusterInfo}
194+
reactToPrintFn={reactToPrintFn}
195+
data={data}
196+
/>
197+
</div>
198+
)}
231199
</div>
232200
</main>
233201
);

0 commit comments

Comments
 (0)