feat: BROS-86: Task Summary follow-ups

web/libs/editor/src/components/TaskSummary/DataSummary.tsx

@@ -24,12 +24,20 @@ export const DataSummary = ({ data_types }: { data_types: ObjectTypes }) => {
         cell: ({ getValue }) => {
           const value = getValue();
 
-          // super simple support for images
+          // super simple support for images, audio, and video
           // @todo create a proper data type handler for all data types
           if (type === "image") {
             return <img src={value} alt={field} className="w-full" />;
           }
 
+          if (type === "audio") {
+            return <audio src={value} controls className="w-full" />;
+          }
+
+          if (type === "video") {
+            return <video src={value} controls className="w-full" />;
+          }
+
           // List: [{ id: <id>, body: text, title: text }, ...]
           // Paragraphs: [{ <nameKey>: name, <textKey>: text }, ...]
           if (Array.isArray(value)) {

web/libs/editor/src/components/TaskSummary/LabelingSummary.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { cnm, IconSparks, Userpic } from "@humansignal/ui";
 import { flexRender, getCoreRowModel, useReactTable, createColumnHelper } from "@tanstack/react-table";
 import type { ColumnDef, Row } from "@tanstack/react-table";
-import type { MSTAnnotation, MSTResult } from "../../stores/types";
+import type { MSTAnnotation, MSTResult, RawResult } from "../../stores/types";
 import { renderers } from "./labelings";
 import { ResizeHandler } from "./ResizeHandler";
 import { SummaryBadge } from "./SummaryBadge";
@@ -24,7 +24,7 @@ const cellFn = (control: ControlTag, render: RendererType) => (props: { row: Row
 };
 
 const convertPredictionResult = (result: MSTResult) => {
-  const json = result.toJSON();
+  const json = result.toJSON() as RawResult;
   return {
     ...json,
     // those are real results, so they have full names with @annotation-id postfix
@@ -46,7 +46,7 @@ export const LabelingSummary = ({ annotations: all, controls, onSelect }: Props)
         : (annotation.versions.result ?? []),
   }));
   const columns = useMemo(() => {
-    const columns: ColumnDef<AnnotationSummary, any>[] = controls.map((control) =>
+    const columns: ColumnDef<AnnotationSummary, unknown>[] = controls.map((control) =>
       columnHelper.display({
         id: control.name,
         header: () => (
@@ -71,7 +71,7 @@ export const LabelingSummary = ({ annotations: all, controls, onSelect }: Props)
         const annotation = row.original;
 
         return (
-          <div className="flex gap-tight items-center cursor-pointer" onClick={() => onSelect(annotation)}>
+          <button type="button" className="flex gap-tight items-center cursor-pointer" onClick={() => onSelect(annotation)}>
             <Userpic
               user={annotation.user}
               className={annotation.type === "prediction" ? "!bg-accent-plum-subtle text-accent-plum-bold" : ""}
@@ -80,7 +80,7 @@ export const LabelingSummary = ({ annotations: all, controls, onSelect }: Props)
             </Userpic>
             <span>{annotation.user?.displayName ?? annotation.createdBy}</span>
             <span>#{annotation.id}</span>
-          </div>
+          </button>
         );
       },
     });

web/libs/editor/src/components/TaskSummary/TaskSummary.tsx

@@ -29,9 +29,6 @@ const TaskSummary = ({ annotations: all, store: annotationStore }: TaskSummaryPr
     }
   };
 
-  // Check if agreement should be shown based on project settings
-  const showAgreement = annotationStore.store.project?.review_settings?.show_agreement_to_reviewers ?? true;
-
   const controlTags: [string, MSTControlTag][] = allTags.filter(([_, control]) => control.isControlTag) as [
     string,
     MSTControlTag,
@@ -46,7 +43,7 @@ const TaskSummary = ({ annotations: all, store: annotationStore }: TaskSummaryPr
   // place all controls with the same to_name together
   const grouped = Object.groupBy(controlsList, (control) => control.to_name);
   // show global classifications first, then labels, then per-regions
-  const controls = Object.entries(grouped).flatMap(([_, controls]) => sortControls(controls!));
+  const controls = Object.entries(grouped).flatMap(([_, controls]) => sortControls(controls ?? []));
 
   const objectTags: ObjectTagEntry[] = allTags.filter(
     ([_, tag]) => tag.isObjectTag && tag.value.includes("$"),
@@ -64,13 +61,15 @@ const TaskSummary = ({ annotations: all, store: annotationStore }: TaskSummaryPr
         value:
           "parsedValue" in object
             ? object.parsedValue
+            // @ts-expect-error dataObj and _url are very specific and not added to types
             : (object.dataObj ?? object._url ?? object._value ?? object.value),
       },
     ]),
   );
 
   const values = [
-    ...(showAgreement && typeof task?.agreement === "number"
+    // if agreement is unavailable for current user it's undefined
+    ...(typeof task?.agreement === "number"
       ? [
           {
             title: "Agreement",

web/libs/editor/src/components/TaskSummary/labelings.tsx

@@ -11,6 +11,19 @@ const resultValue = (result: RawResult) => {
   return result.value[result.type];
 };
 
+const LabelingChip = ({ children }: { children: string | number }) => {
+  return (
+    <span
+      className={cnm(
+        "inline-block whitespace-nowrap rounded-4 px-2",
+        "bg-primary-background border border-primary-emphasis text-accent-grape-dark",
+      )}
+    >
+      {children}
+    </span>
+  );
+};
+
 const LabelsRenderer: RendererType = (results, control) => {
   const labels = results.flatMap(resultValue).flat();
 
@@ -25,6 +38,7 @@ const LabelsRenderer: RendererType = (results, control) => {
         .map(([label, data]) => {
           return (
             <span
+              key={label}
               className="inline-block px-2 whitespace-nowrap rounded-4"
               style={{
                 borderLeft: `4px solid ${data.border}`,
@@ -51,29 +65,43 @@ export const renderers: Record<string, RendererType> = {
   timeserieslabels: LabelsRenderer,
   paragraphlabels: LabelsRenderer,
   timelinelabels: LabelsRenderer,
-  number: (results) => {
+  datetime: (results, control) => {
+    if (!results.length) return "-";
+    if (control.per_region) return null;
+
+    return resultValue(results[0]);
+  },
+  number: (results, control) => {
     if (!results.length) return "-";
+    if (control.per_region) return null;
 
     return resultValue(results[0]);
   },
   choices: (results) => {
     const choices = results.flatMap(resultValue).flat();
-    const unique = [...new Set(choices)];
+    const unique: string[] = [...new Set(choices)];
 
     if (!choices.length) return null;
 
     return (
       <span className="flex gap-2 flex-wrap">
         {unique.map((choice) => (
-          <span
-            key={choice}
-            className={cnm(
-              "inline-block whitespace-nowrap rounded-4 px-2",
-              "bg-primary-background border border-primary-emphasis text-accent-grape-dark",
-            )}
-          >
-            {choice}
-          </span>
+          <LabelingChip key={choice}>{choice}</LabelingChip>
+        ))}
+      </span>
+    );
+  },
+  taxonomy: (results, control) => {
+    if (!results.length) return "-";
+    if (control.per_region) return null;
+
+    // @todo use `pathseparator` from control
+    const values: string[] = resultValue(results[0]).map((item: string[]) => item.join(" / "));
+
+    return (
+      <span className="flex gap-2 flex-wrap">
+        {values.map((value) => (
+          <LabelingChip key={value}>{value}</LabelingChip>
         ))}
       </span>
     );
@@ -82,11 +110,25 @@ export const renderers: Record<string, RendererType> = {
     if (!results.length) return "-";
     if (control.per_region) return null;
 
-    const value = resultValue(results[0]);
+    const texts: string[] = resultValue(results[0]);
 
-    if (!value) return null;
+    if (!texts) return null;
+
+    // biome-ignore lint/suspicious/noArrayIndexKey: this piece won't be rerendered with updated data anyway and texts can be huge
+    return <div className="text-ellipsis line-clamp-6">{texts.map((text, i) => <p key={i}>{text}</p>)}</div>;
+  },
+  ranker: (results) => {
+    if (!results.length) return "-";
+
+    const value: Record<string, number[]> = resultValue(results[0]);
 
-    return <span className="text-ellipsis line-clamp-6">{value}</span>;
+    return Object.entries(value).map(([bucket, items]) => {
+      return (
+        <p key={bucket}>
+          <b>{bucket}</b>: <span className="inline-flex gap-2 flex-wrap">{items.map(item => <LabelingChip key={item}>{item}</LabelingChip>)}</span>
+        </p>
+      );
+    });
   },
   rating: (results, control) => {
     if (!results.length) return "-";

web/libs/editor/src/stores/types.d.ts

@@ -6,6 +6,7 @@ type RawResult = {
 };
 
 type MSTResult = {
+  toJSON(): unknown;
   id: string;
   area: MSTRegion;
   annotation: MSTAnnotation;