new content feature: accordion component

Author: devhelpr

package-lock.json

@@ -16,6 +16,7 @@
     "dependencies": {
         "@heroicons/react": "^2.1.5",
         "@hookform/resolvers": "^3.9.0",
+        "@radix-ui/react-accordion": "^1.2.1",
         "@radix-ui/react-checkbox": "^1.1.2",
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-icons": "^1.3.0",

package.json

@@ -230,42 +230,47 @@ def run():
 
     if dataType == 'numeric':
         diff_df = diffDataframe(df, features, type='Numerical')
+        
+        overview = "";
+
         for feat in features:
             diff = diff_df.loc[feat,"Difference"].round(2)
                 
             if diff < 0:
-                setResult(json.dumps(
-                    {'type': 'text', 'data': f'{abs(diff)} less {feat} than in the rest of the dataset.'}
-                ))
+                overview += f'{abs(diff)} less {feat} than in the rest of the dataset. '
+               
             elif diff > 0:
-                setResult(json.dumps(
-                    {'type': 'text', 'data': f'{diff} more {feat} than in the rest of the dataset.'}
-                ))
+                overview += f'{diff} more {feat} than in the rest of the dataset. '
+                
             elif diff == 0:
-                setResult(json.dumps(
-                    {'type': 'text', 'data': f'equal {feat} as in the rest of the dataset.'}
-                ))
+                overview += f'equal {feat} as in the rest of the dataset. '
+               
+            overview += '''  
+'''
+
+        setResult(json.dumps(
+            {'type': 'accordion', 'title': 'Open details to view feature comparisons to the rest of the dataset','content': overview}
+        ))
     else:
         diff_df = diffDataframe(df, features, type='Categorical')
+        overview = "";
         for feat in features:
             values = df[feat].unique().tolist()
             for value in values:
                 diff = diff_df.loc[value,"Difference"].round(2)     
                          
                 if (isinstance(diff, float)):
                     if diff < 0:
-                        setResult(json.dumps(
-                            {'type': 'text', 'data': f'{abs(diff)} less {value} than in the rest of the dataset.'}
-                        ))
+                        overview += f'{abs(diff)} less {value} than in the rest of the dataset. '
                     elif diff > 0:
-                        setResult(json.dumps(
-                            {'type': 'text', 'data': f'{diff} more {value} than in the rest of the dataset.'}
-                        ))
+                        overview += f'{diff} more {value} than in the rest of the dataset. '
                     elif diff == 0:
-                        setResult(json.dumps(
-                            {'type': 'text', 'data': f'equal {value} as in the rest of the dataset.'}
-                        ))
-        
+                        overview += f'equal {value} as in the rest of the dataset. '
+                    overview += '''  
+'''
+        setResult(json.dumps(
+            {'type': 'accordion', 'title': 'Open details to view feature comparisons to the rest of the dataset','content': overview}
+        ))
 
     if dataType == 'numeric':
         for col in full_df.columns:

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

@@ -6,6 +6,12 @@ import Markdown from 'react-markdown';
 import { getLabel } from './graphs/get-label';
 import { CSVData } from './bias-detection-interfaces/csv-data';
 import { Fragment } from 'react/jsx-runtime';
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from './ui/accordion';
 
 const createArrayFromPythonDictionary = (dict: Record<string, number>) => {
     const resultArray = [];
@@ -71,6 +77,21 @@ export default function ComponentMapper({
                                 {resultItem.data}
                             </h5>
                         );
+                    case 'accordion':
+                        return (
+                            <Accordion key={index} type="single" collapsible>
+                                <AccordionItem value="item-1">
+                                    <AccordionTrigger>
+                                        {resultItem.title}
+                                    </AccordionTrigger>
+                                    <AccordionContent>
+                                        <Markdown className="mt-2 text-gray-800 markdown">
+                                            {resultItem.content}
+                                        </Markdown>
+                                    </AccordionContent>
+                                </AccordionItem>
+                            </Accordion>
+                        );
                     case 'histogram': {
                         const histogramData = JSON.parse(resultItem.data)?.map(
                             (x: Record<string, number>, index: number) => {

src/components/componentMapper.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Item
+        ref={ref}
+        className={cn('border-b', className)}
+        {...props}
+    />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Header className="flex">
+        <AccordionPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                'flex flex-1 items-center justify-between pb-4 text-md font-semibold transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180',
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+        </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Content
+        ref={ref}
+        className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+        {...props}
+    >
+        <div className={cn('pb-4 pt-0', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };