Add export button support to ComponentMapper and update BiasDetection component

Author: devhelpr

src/assets/bias-detection-python-code.tsx

@@ -647,6 +647,10 @@ def run():
         'key': 'biasAnalysis.conclusionDescriptionHigherAverage' if p_val < 0.05 else 'biasAnalysis.conclusionNoSignificance'
     }))
 
+    setResult(json.dumps({
+        'type': 'export-button',
+    }))
+
 
     setResult(json.dumps({
         'type': 'heading',

src/components/componentMapper.tsx

@@ -14,6 +14,7 @@ import TextValueSelect from './composed-components/TextValueSelect';
 import { createArrayFromPythonDictionary } from './createArrayFromPythonDictionary';
 import ClusterCategoriesDistributionAccordeonContent from './composed-components/ClusterCategoriesDistributionAccordeonContent';
 import ClusterNumericalVariableDistributionAccordeonContent from './composed-components/ClusterNumericalVariableDistributionAccordeonContent';
+import { ReactNode } from 'react';
 
 interface Comparison {
     key: string;
@@ -23,9 +24,11 @@ interface Comparison {
 export default function ComponentMapper({
     items,
     data,
+    exportButton,
 }: {
     items: string[];
     data: CSVData;
+    exportButton?: ReactNode;
 }) {
     const { t } = useTranslation();
     const components = items
@@ -34,6 +37,14 @@ export default function ComponentMapper({
                 const resultItem = JSON.parse(r);
 
                 switch (resultItem.type) {
+                    case 'export-button': {
+                        if (exportButton) {
+                            return (
+                                <Fragment key={index}>{exportButton}</Fragment>
+                            );
+                        }
+                        return null;
+                    }
                     case 'data-set-preview':
                         return (
                             <Fragment key={index}>

src/components/composed-components/ClusterCategoriesDistributionAccordeonContent.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ErrorBoundary from '../ErrorBoundary';
 import FilterSelect from '../ui/FilterSelect';
@@ -71,7 +71,7 @@ const ClusterCategoriesDistributionAccordeonContent = ({
                         }
                     );
                     return (
-                        <>
+                        <Fragment key={index}>
                             {categorieFilter === chart.selectFilterGroup ||
                             (!categorieFilter &&
                                 chart.selectFilterGroup === defaultCategory) ||
@@ -98,7 +98,7 @@ const ClusterCategoriesDistributionAccordeonContent = ({
                                     />
                                 </>
                             ) : null}
-                        </>
+                        </Fragment>
                     );
                 })}
             </ErrorBoundary>

src/routes/BiasDetection.tsx

@@ -156,19 +156,21 @@ export default function BiasDetection() {
                     loading && 'overflow-hidden'
                 )}
             >
-                {initialised && data.data.length > 0 && result.length > 0 && (
-                    <div className="ml-auto flex flex-row gap-2 hideonprint">
-                        <ExportButton
-                            buttonAlign={'right'}
-                            clusterInfo={clusterInfo}
-                            reactToPrintFn={reactToPrintFn}
-                            data={data}
-                        />
-                    </div>
-                )}
-
                 {result.length > 0 ? (
-                    <ComponentMapper items={result} data={data} />
+                    <ComponentMapper
+                        items={result}
+                        data={data}
+                        exportButton={
+                            <div className="flex flex-row gap-2 hideonprint justify-start">
+                                <ExportButton
+                                    buttonAlign={'left'}
+                                    clusterInfo={clusterInfo}
+                                    reactToPrintFn={reactToPrintFn}
+                                    data={data}
+                                />
+                            </div>
+                        }
+                    />
                 ) : loading ? (
                     <LoadingState
                         loadingMessageKey={loadingMessage}
@@ -185,17 +187,6 @@ export default function BiasDetection() {
                         <div className="flex-1" />
                     </>
                 )}
-
-                {initialised && data.data.length > 0 && result.length > 0 && (
-                    <div className="flex flex-row gap-2 hideonprint">
-                        <ExportButton
-                            buttonAlign={'center'}
-                            clusterInfo={clusterInfo}
-                            reactToPrintFn={reactToPrintFn}
-                            data={data}
-                        />
-                    </div>
-                )}
             </div>
         </main>
     );