feat (metric behavior): Allow user to drill down in metric behavior view. (#12)

src/processor.ts

@@ -344,6 +344,7 @@ export function exportData(
     let dataToExport: RawData = {
       name: data.name,
       ...(data.exampleId && { exampleId: data.exampleId }),
+      ...(data.filters && { filters: data.filters }),
       models: data.models,
       metrics: data.metrics,
       ...(data.documents && {
@@ -403,6 +404,7 @@ export function exportData(
         dataToExport = {
           name: data.name,
           ...(data.exampleId && { exampleId: data.exampleId }),
+          ...(data.filters && { filters: data.filters }),
           models: data.models,
           metrics: data.metrics,
           ...(relevantDocuments.size !== 0 && {
@@ -426,6 +428,7 @@ export function exportData(
         dataToExport = {
           name: data.name,
           ...(data.exampleId && { exampleId: data.exampleId }),
+          ...(data.filters && { filters: data.filters }),
           models: data.models,
           metrics: data.metrics,
           ...(data.documents && {

src/views/data-characteristics/DataCharacteristics.tsx

@@ -295,9 +295,9 @@ async function computeStatistics(
 // ===================================================================================
 //                               RENDER FUNCTIONS
 // ===================================================================================
-function SkeletonGraphs({ key }: { key: string }) {
+function SkeletonGraphs({ keyValue }: { keyValue: string }) {
   return (
-    <div key={key} className={classes.row}>
+    <div key={keyValue} className={classes.row}>
       <ButtonSkeleton className={classes.viewBtn} />
       &nbsp;
       <div className={classes.graphsGrid}>
@@ -711,8 +711,8 @@ export default function DataCharacteristics({ tasks, filters }: Props) {
     <div className={classes.page}>
       {loading ? (
         <div className={classes.row}>
-          <SkeletonGraphs key={'skeleton-graphs-1'} />
-          <SkeletonGraphs key={'skeleton-graphs-2'} />
+          <SkeletonGraphs keyValue={'skeleton-graphs-1'} />
+          <SkeletonGraphs keyValue={'skeleton-graphs-2'} />
         </div>
       ) : (
         <>

src/views/example/Example.tsx

@@ -230,7 +230,7 @@ export default memo(function Example({ data }: { data: Data }) {
     ];
   }, [data.evaluations, data.tasks, data.models, eligibleMetricsMap]);
 
-  const { } = useBackButton();
+  const {} = useBackButton();
 
   // Step 3: Return
   return (
@@ -331,9 +331,7 @@ export default memo(function Example({ data }: { data: Data }) {
             <TabPanel key={'model-comparator-panel'}>
               {data.models.length == 1 ? (
                 <DisabledTab
-                  message={
-                    'Nothing to see here in absence of multiple models.'
-                  }
+                  message={'Nothing to see here in absence of multiple models.'}
                 />
               ) : (
                 <ModelComparator
@@ -356,6 +354,9 @@ export default memo(function Example({ data }: { data: Data }) {
                   models={data.models}
                   metrics={eligibleMetrics}
                   filters={{}}
+                  onTaskSelection={(taskId) => {
+                    setSelectedTaskId(taskId);
+                  }}
                 ></MetricBehavior>
               )}
             </TabPanel>

src/views/metric-behavior/MetricBehavior.module.scss

@@ -117,17 +117,9 @@
   color: $gray-40;
 }
 
-.table {
-  display: table;
-  border-collapse: separate;
-  border-spacing: 50px;
-}
-
-.tableRow {
-  display: table-row;
-}
-
-.tableCell {
-  display: table-cell;
-  width: 600px;
+.tasksTableContainer {
+  margin: $spacing-05 0;
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-03;
 }

src/views/metric-behavior/MetricBehavior.tsx

@@ -19,8 +19,10 @@
 'use client';
 
 import { isEmpty } from 'lodash';
-import { useState, useMemo, useEffect, memo } from 'react';
+import { useState, useMemo, useEffect, useRef, memo } from 'react';
+
 import { WarningAlt } from '@carbon/icons-react';
+import { FilterableMultiSelect, Tag } from '@carbon/react';
 import { HeatmapChart } from '@carbon/charts-react';
 import { ColorLegendType, ScaleTypes } from '@carbon/charts';
 
@@ -38,12 +40,11 @@ import { areObjectsIntersecting } from '@/src/utilities/objects';
 
 import Filters from '@/src/components/filters/Filters';
 import MetricSelector from '@/src/components/selectors/MetricSelector';
+import TasksTable from '@/src/views/tasks-table/TasksTable';
 
 import '@carbon/charts-react/styles.css';
 import classes from './MetricBehavior.module.scss';
 
-import { FilterableMultiSelect, Tag } from '@carbon/react';
-
 // ===================================================================================
 //                                TYPES
 // ===================================================================================
@@ -52,6 +53,7 @@ interface Props {
   models: Model[];
   metrics: Metric[];
   filters: { [key: string]: string[] };
+  onTaskSelection: Function;
 }
 
 // ===================================================================================
@@ -147,6 +149,13 @@ function calculateCorrelation(
   return correlationMap;
 }
 
+/**
+ * Calculate overlap matix between metric values
+ * @param evaluationsPerMetric
+ * @param metricA
+ * @param metricB
+ * @returns
+ */
 function calculateOverlap(
   evaluationsPerMetric: { [key: string]: TaskEvaluation[] },
   metricA: Metric,
@@ -196,7 +205,35 @@ function calculateOverlap(
       console.log(`Check the data in evaluation B for taskId ${taskId}`);
     }
   });
-  return overlapMap;
+
+  // Step 4: Sorted MxN matrix (where M and N are ranges of metricA and metricB)
+  const sortedOverlapMap: { [key: string]: { [key: string]: number } } = {};
+  // Only sort keys when metric is of 'numerical' type
+  if (metricA.type === 'numerical') {
+    Object.keys(overlapMap)
+      .sort()
+      .forEach((a) => {
+        if (metricB.type === 'numerical') {
+          sortedOverlapMap[a] = Object.fromEntries(
+            Object.keys(overlapMap[a])
+              .sort()
+              .map((b) => [b, overlapMap[a][b]]),
+          );
+        } else {
+          sortedOverlapMap[a] = overlapMap[a];
+        }
+      });
+  } else {
+    Object.entries(overlapMap).forEach(([a, b]) => {
+      sortedOverlapMap[a] = Object.fromEntries(
+        Object.keys(b)
+          .sort()
+          .map((key) => [key, b[key]]),
+      );
+    });
+  }
+
+  return sortedOverlapMap;
 }
 
 function sortMetricAggregatedValues(values: string[], metric: Metric) {
@@ -236,14 +273,16 @@ export function prepareHeatMapData(
   let count: number = 0;
   sortedMetricAVals.forEach((metricValA) => {
     sortedMetricBVals.forEach((metricValB) => {
-      temp.push({
-        metricA: extractMetricDisplayValue(metricValA, metricA.values),
-        metricB: extractMetricDisplayValue(metricValB, metricB.values),
-        value: heatMap[metricValA][metricValB]
-          ? heatMap[metricValA][metricValB]
-          : 0,
-      });
-      count += heatMap[metricValA][metricValB];
+      if (heatMap[metricValA][metricValB]) {
+        temp.push({
+          metricA: extractMetricDisplayValue(metricValA, metricA.values),
+          metricB: extractMetricDisplayValue(metricValB, metricB.values),
+          value: heatMap[metricValA][metricValB]
+            ? heatMap[metricValA][metricValB]
+            : 0,
+        });
+        count += heatMap[metricValA][metricValB];
+      }
     });
   });
 
@@ -256,6 +295,7 @@ export function prepareHeatMapData(
 
     return temp2;
   }
+
   return temp;
 }
 
@@ -267,6 +307,7 @@ export default memo(function MetricBehavior({
   models,
   metrics,
   filters,
+  onTaskSelection,
 }: Props) {
   // Step 1: Initialize state and necessary variables
   const [WindowWidth, setWindowWidth] = useState<number>(
@@ -276,15 +317,19 @@ export default memo(function MetricBehavior({
     global?.window && window.innerHeight,
   );
   const [selectedModels, setSelectedModels] = useState<Model[]>(models);
-  const [selectedMetricA, setSelectedMetricA] = useState<Metric | undefined>(
-    undefined,
-  );
-  const [selectedMetricB, setSelectedMetricB] = useState<Metric | undefined>(
-    undefined,
-  );
+  const [selectedMetricA, setSelectedMetricA] = useState<Metric | undefined>();
+  const [selectedMetricB, setSelectedMetricB] = useState<Metric | undefined>();
   const [selectedFilters, setSelectedFilters] = useState<{
     [key: string]: string[];
   }>({});
+  const [selectedMetricARange, setSelectedMetricARange] = useState<
+    number[] | string
+  >();
+  const [selectedMetricBRange, setSelectedMetricBRange] = useState<
+    number[] | string
+  >();
+  const tableRef = useRef(null);
+  const chartRef = useRef(null);
 
   // Step 2: Run effects
   // Step 2.a: Window resizing
@@ -341,6 +386,239 @@ export default memo(function MetricBehavior({
     }
   }, [filteredEvaluationsPerMetric, selectedMetricA, selectedMetricB]);
 
+  // Step 2.e: Reset ranges on selected metric change
+  useEffect(() => {
+    setSelectedMetricARange(undefined);
+    setSelectedMetricBRange(undefined);
+  }, [selectedMetricA, selectedMetricB]);
+
+  // Step 2.f: Identify visible evaluations
+  const visibleEvaluations: TaskEvaluation[] = useMemo(() => {
+    if (selectedMetricA && selectedMetricB) {
+      // Step 1: Initialize necessary variables
+      const selectedModelIds = selectedModels.map((model) => model.modelId);
+
+      const evaluationsPerTask: { [key: string]: TaskEvaluation } = {};
+
+      // Step 2: Add eligible evaluations for 1st selected metric (A)
+      filteredEvaluationsPerMetric[selectedMetricA.name].forEach(
+        (evaluation) => {
+          if (selectedModelIds.includes(evaluation.modelId)) {
+            const UUID = `${evaluation.taskId}<::>${evaluation.modelId}`;
+            if (selectedMetricARange) {
+              if (typeof selectedMetricARange === 'string') {
+                if (
+                  extractMetricDisplayValue(
+                    evaluation[`${selectedMetricA.name}_agg`].value,
+                    selectedMetricA.values,
+                  ) === selectedMetricARange
+                ) {
+                  if (evaluationsPerTask.hasOwnProperty(UUID)) {
+                    evaluationsPerTask[UUID] = {
+                      ...evaluationsPerTask[UUID],
+                      [`${selectedMetricA.name}`]:
+                        evaluation[`${selectedMetricA.name}`],
+                      [`${selectedMetricA.name}_agg`]:
+                        evaluation[`${selectedMetricA.name}_agg`],
+                    };
+                  } else {
+                    evaluationsPerTask[UUID] = evaluation;
+                  }
+                }
+              } else if (Array.isArray(selectedMetricARange)) {
+                if (
+                  evaluation[`${selectedMetricA.name}_agg`].value >=
+                    selectedMetricARange[0] &&
+                  evaluation[`${selectedMetricA.name}_agg`].value <=
+                    selectedMetricARange[1]
+                ) {
+                  if (evaluationsPerTask.hasOwnProperty(UUID)) {
+                    evaluationsPerTask[UUID] = {
+                      ...evaluationsPerTask[UUID],
+                      [`${selectedMetricA.name}`]:
+                        evaluation[`${selectedMetricA.name}`],
+                      [`${selectedMetricA.name}_agg`]:
+                        evaluation[`${selectedMetricA.name}_agg`],
+                    };
+                  } else {
+                    evaluationsPerTask[UUID] = evaluation;
+                  }
+                }
+              }
+            } else {
+              if (evaluationsPerTask.hasOwnProperty(UUID)) {
+                evaluationsPerTask[UUID] = {
+                  ...evaluationsPerTask[UUID],
+                  [`${selectedMetricA.name}`]:
+                    evaluation[`${selectedMetricA.name}`],
+                  [`${selectedMetricA.name}_agg`]:
+                    evaluation[`${selectedMetricA.name}_agg`],
+                };
+              } else {
+                evaluationsPerTask[UUID] = evaluation;
+              }
+            }
+          }
+        },
+      );
+
+      // Step 2: Add eligible evaluations for 2nd selected metric (B)
+      filteredEvaluationsPerMetric[selectedMetricB.name].forEach(
+        (evaluation) => {
+          if (selectedModelIds.includes(evaluation.modelId)) {
+            const UUID = `${evaluation.taskId}<::>${evaluation.modelId}`;
+            if (selectedMetricBRange) {
+              if (typeof selectedMetricBRange === 'string') {
+                if (
+                  extractMetricDisplayValue(
+                    evaluation[`${selectedMetricB.name}_agg`].value,
+                    selectedMetricB.values,
+                  ) === selectedMetricBRange
+                ) {
+                  if (evaluationsPerTask.hasOwnProperty(UUID)) {
+                    evaluationsPerTask[UUID] = {
+                      ...evaluationsPerTask[UUID],
+                      [`${selectedMetricB.name}`]:
+                        evaluation[`${selectedMetricB.name}`],
+                      [`${selectedMetricB.name}_agg`]:
+                        evaluation[`${selectedMetricB.name}_agg`],
+                    };
+                  } else {
+                    evaluationsPerTask[UUID] = evaluation;
+                  }
+                }
+              } else if (Array.isArray(selectedMetricBRange)) {
+                if (
+                  evaluation[`${selectedMetricB.name}_agg`].value >=
+                    selectedMetricBRange[0] &&
+                  evaluation[`${selectedMetricB.name}_agg`].value <=
+                    selectedMetricBRange[1]
+                ) {
+                  if (evaluationsPerTask.hasOwnProperty(UUID)) {
+                    evaluationsPerTask[UUID] = {
+                      ...evaluationsPerTask[UUID],
+                      [`${selectedMetricB.name}`]:
+                        evaluation[`${selectedMetricB.name}`],
+                      [`${selectedMetricB.name}_agg`]:
+                        evaluation[`${selectedMetricB.name}_agg`],
+                    };
+                  } else {
+                    evaluationsPerTask[UUID] = evaluation;
+                  }
+                }
+              }
+            } else {
+              if (evaluationsPerTask.hasOwnProperty(UUID)) {
+                evaluationsPerTask[UUID] = {
+                  ...evaluationsPerTask[UUID],
+                  [`${selectedMetricB.name}`]:
+                    evaluation[`${selectedMetricB.name}`],
+                  [`${selectedMetricB.name}_agg`]:
+                    evaluation[`${selectedMetricB.name}_agg`],
+                };
+              } else {
+                evaluationsPerTask[UUID] = evaluation;
+              }
+            }
+          }
+        },
+      );
+
+      // Step 3: Only retains evaluation tasks where both metric values are available
+      return Object.values(evaluationsPerTask).filter(
+        (evaluation) =>
+          evaluation.hasOwnProperty(`${selectedMetricA.name}`) &&
+          evaluation.hasOwnProperty(`${selectedMetricA.name}_agg`) &&
+          evaluation.hasOwnProperty(`${selectedMetricB.name}`) &&
+          evaluation.hasOwnProperty(`${selectedMetricB.name}_agg`),
+      );
+    }
+    return [];
+  }, [
+    filteredEvaluationsPerMetric,
+    selectedModels,
+    selectedMetricA,
+    selectedMetricARange,
+    selectedMetricB,
+    selectedMetricBRange,
+  ]);
+
+  // Step 2.g: Add chart event
+  useEffect(() => {
+    // Step 2.g.i: Update function
+    function onClick(event) {
+      // Set range for 1st selected metric (A)
+      if (selectedMetricA?.type === 'numerical') {
+        if (event.detail.datum['metricA'].substring(1).includes('-')) {
+          const match = event.detail.datum['metricA'].match(
+            /^(-?\d*\.?\d*)-(-?\d*\.?\d*)$/,
+          );
+          setSelectedMetricARange([parseFloat(match[1]), parseFloat(match[2])]);
+        } else {
+          setSelectedMetricARange([
+            parseFloat(event.detail.datum['metricA']),
+            parseFloat(event.detail.datum['metricA']),
+          ]);
+        }
+      } else {
+        setSelectedMetricARange(event.detail.datum['metricA']);
+      }
+
+      // Set range for 2nd selected metric (B)
+      if (selectedMetricB?.type === 'numerical') {
+        if (event.detail.datum['metricB'].substring(1).includes('-')) {
+          const match = event.detail.datum['metricB'].match(
+            /^(-?\d*\.?\d*)-(-?\d*\.?\d*)$/,
+          );
+          setSelectedMetricBRange([parseFloat(match[1]), parseFloat(match[2])]);
+        } else {
+          setSelectedMetricARange([
+            parseFloat(event.detail.datum['metricB']),
+            parseFloat(event.detail.datum['metricB']),
+          ]);
+        }
+      } else {
+        setSelectedMetricBRange(event.detail.datum['metricB']);
+      }
+    }
+
+    // Step 2.g.ii: Local copy of reference
+    let ref = null;
+
+    // Step 2.g.iii: Update reference and add event
+    if (chartRef && chartRef.current) {
+      ref = chartRef.current;
+
+      //@ts-ignore
+      ref.chart.services.events.addEventListener('heatmap-click', onClick);
+    }
+
+    // Step 2.g.iv: Cleanup function
+    return () => {
+      if (ref) {
+        //@ts-ignore
+        ref.chart.services.events.removeEventListener('heatmap-click', onClick);
+      }
+    };
+  }, [chartRef, selectedMetricA, selectedMetricB, metricToMetricOverlap]);
+
+  // Step 2.h: Scroll task table into view
+  useEffect(() => {
+    if (
+      selectedMetricARange &&
+      selectedMetricBRange &&
+      tableRef &&
+      tableRef.current
+    ) {
+      //@ts-ignore
+      tableRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+        inline: 'center',
+      });
+    }
+  }, [tableRef, selectedMetricARange, selectedMetricBRange]);
+
   // Step 3: Render
   return (
     <div className={classes.page}>
@@ -443,7 +721,6 @@ export default memo(function MetricBehavior({
                     type: ColorLegendType.QUANTIZE,
                   },
                 },
-                experimental: false,
                 width: Math.round(WindowWidth * 0.6) + 'px',
                 height: Math.round(WindowHeight * 0.6) + 'px',
                 toolbar: {
@@ -488,6 +765,7 @@ export default memo(function MetricBehavior({
               {extractMetricDisplayName(selectedMetricB)})
             </h4>
             <HeatmapChart
+              ref={chartRef}
               data={prepareHeatMapData(
                 selectedMetricA,
                 selectedMetricB,
@@ -524,6 +802,26 @@ export default memo(function MetricBehavior({
           </div>
         )
       ) : null}
+
+      {selectedMetricA && selectedMetricB && !isEmpty(visibleEvaluations) ? (
+        <div ref={tableRef} className={classes.tasksTableContainer}>
+          <h4>
+            Tasks<sup>*</sup>
+          </h4>
+
+          <TasksTable
+            metrics={[selectedMetricA, selectedMetricB]}
+            evaluations={visibleEvaluations}
+            models={selectedModels}
+            filters={filters}
+            onClick={onTaskSelection}
+          />
+          <span className={classes.tasksTableWarning}>
+            <sup>*</sup> Only tasks with aggregate scores in selected range are
+            shown in the above table.
+          </span>
+        </div>
+      ) : null}
     </div>
   );
 });

src/views/model-behavior/ModelBehavior.tsx

@@ -836,7 +836,7 @@ export default function ModelBehavior({
         <div className={classes.row}>
           <h4>Tasks</h4>
           <TasksTable
-            metric={selectedMetric}
+            metrics={[selectedMetric]}
             evaluations={visibleEvaluations}
             models={selectedModels}
             filters={filters}

src/views/model-comparator/ModelComparator.tsx

@@ -581,9 +581,15 @@ export default function ModelComparator({
 
   // Step 2.i: Add chart event
   useEffect(() => {
+    // Step 2.i.*: Local copy of reference
+    let ref = null;
+
+    // Step 2.i.**: Update reference and add event
     if (chartRef && chartRef.current) {
+      ref = chartRef.current;
+
       //@ts-ignore
-      chartRef.current.chart.services.events.addEventListener(
+      ref.chart.services.events.addEventListener(
         'scatter-click',
         ({ detail }) => {
           onTaskSelection(detail.datum.taskId);
@@ -591,10 +597,11 @@ export default function ModelComparator({
       );
     }
 
+    // Step 2.i.***: Cleanup function
     return () => {
-      if (chartRef && chartRef.current) {
+      if (ref) {
         //@ts-ignore
-        chartRef.current.chart.services.events.removeEventListener(
+        ref.chart.services.events.removeEventListener(
           'scatter-click',
           ({ detail }) => {
             onTaskSelection(detail.datum.taskId);
@@ -956,7 +963,7 @@ export default function ModelComparator({
             {filteredEvaluations ? (
               <>
                 <TasksTable
-                  metric={selectedMetric}
+                  metrics={[selectedMetric]}
                   evaluations={filteredEvaluations}
                   models={[modelA, modelB]}
                   filters={filters}

src/views/tasks-table/TasksTable.module.scss

@@ -35,6 +35,19 @@
   align-items: center;
 }
 
+.tableCellValue {
+  display: flex;
+  column-gap: $spacing-03;
+  align-items: center;
+  border-left: 1px solid var(--cds-border-inverse);
+  padding-left: $spacing-03;
+}
+
+.tableCellValue:first-child {
+  border-left: none;
+  padding-left: 0;
+}
+
 .majorityValue {
   font-size: 14px;
   line-height: 18px;

src/views/tasks-table/TasksTable.tsx

@@ -62,7 +62,7 @@ type EvaluationRow = {
   taskId: string;
 };
 interface Props {
-  metric: Metric;
+  metrics: Metric[];
   evaluations: TaskEvaluation[];
   models: Model[];
   filters: { [key: string]: string[] };
@@ -81,7 +81,7 @@ interface Props {
  */
 function populateTable(
   evaluations: TaskEvaluation[],
-  metric: Metric,
+  metrics: Metric[],
   models: Model[],
   taskInputMap: { [key: string]: any },
   filters: { [key: string]: string[] },
@@ -115,15 +115,22 @@ function populateTable(
     }
 
     // Add annotations
-    entry[`${evaluation.modelId}::value`] = annotator
-      ? extractMetricDisplayValue(
-          evaluation[metric.name][annotator].value,
-          metric.values,
-        )
-      : extractMetricDisplayValue(
-          evaluation[`${metric.name}_agg`].value,
-          metric.values,
-        );
+    entry[`${evaluation.modelId}::value`] = {};
+    metrics.forEach((metric) => {
+      if (annotator) {
+        entry[`${evaluation.modelId}::value`][metric.name] =
+          extractMetricDisplayValue(
+            evaluation[metric.name][annotator].value,
+            metric.values,
+          );
+      } else {
+        entry[`${evaluation.modelId}::value`][metric.name] =
+          extractMetricDisplayValue(
+            evaluation[`${metric.name}_agg`].value,
+            metric.values,
+          );
+      }
+    });
 
     // Step 1.b: Save updated entry into evaluations map
     evaluationsMap.set(evaluation.taskId, entry);
@@ -258,7 +265,7 @@ function sparkline(
 //                               MAIN FUNCTION
 // ===================================================================================
 export default function TasksTable({
-  metric,
+  metrics,
   evaluations,
   models,
   filters,
@@ -285,10 +292,12 @@ export default function TasksTable({
     return Object.fromEntries(
       evaluations.map((evaluation) => [
         `${evaluation.taskId}:${evaluation.modelId}`,
-        evaluation[metric.name],
+        Object.fromEntries(
+          metrics.map((metric) => [metric.name, evaluation[metric.name]]),
+        ),
       ]),
     );
-  }, [evaluations, metric]);
+  }, [evaluations, metrics]);
 
   // Step 2.e: Build tasks map
   const taskInputMap = useMemo(() => {
@@ -306,13 +315,13 @@ export default function TasksTable({
       () =>
         populateTable(
           evaluations,
-          metric,
+          metrics,
           models,
           taskInputMap,
           filters,
           annotator,
         ),
-      [evaluations, metric, models, filters, taskInputMap, annotator],
+      [evaluations, metrics, models, filters, taskInputMap, annotator],
     );
 
   // Step 2.g: Identify visible rows
@@ -538,22 +547,57 @@ export default function TasksTable({
                             ) : (
                               <TableCell key={cell.id}>
                                 <div className={classes.tableCell}>
-                                  <div className={classes.majorityValue}>
-                                    {cell.value
-                                      ? Array.isArray(cell.value)
-                                        ? cell.value.join(', ')
-                                        : cell.value
-                                      : '-'}
-                                  </div>
-                                  {!annotator &&
-                                    cell.value &&
-                                    sparkline(
-                                      evaluationsMap[
-                                        cell.id.split('::value', 1)[0]
-                                      ],
-                                      metric,
-                                      theme,
-                                    )}
+                                  {cell.value ? (
+                                    typeof cell.value === 'object' ? (
+                                      <>
+                                        {metrics.map((metric) => {
+                                          return (
+                                            <>
+                                              <div
+                                                className={
+                                                  classes.tableCellValue
+                                                }
+                                                key={`${cell.id}::${metric.name}`}
+                                              >
+                                                <div
+                                                  className={
+                                                    classes.majorityValue
+                                                  }
+                                                >
+                                                  {cell.value[metric.name]}
+                                                </div>
+                                                {!annotator &&
+                                                evaluationsMap[
+                                                  cell.id.split('::value', 1)[0]
+                                                ]
+                                                  ? sparkline(
+                                                      evaluationsMap[
+                                                        cell.id.split(
+                                                          '::value',
+                                                          1,
+                                                        )[0]
+                                                      ][metric.name],
+                                                      metric,
+                                                      theme,
+                                                    )
+                                                  : null}
+                                              </div>
+                                            </>
+                                          );
+                                        })}
+                                      </>
+                                    ) : (
+                                      <div className={classes.majorityValue}>
+                                        {Array.isArray(cell.value)
+                                          ? cell.value.join(', ')
+                                          : cell.value}
+                                      </div>
+                                    )
+                                  ) : (
+                                    <div className={classes.majorityValue}>
+                                      -
+                                    </div>
+                                  )}
                                 </div>
                               </TableCell>
                             ),