feat (filters): Enable filtering on model & metric comparison views.

src/types.ts

@@ -236,20 +236,20 @@ export interface Data extends TileData {
 }
 
 // ===================================================================================
-//                               WORKERS
+//                          FILTERATION WORKER
 // ===================================================================================
-export interface RequestMessage {
+export interface FilterationRequest {
   evaluationsPerMetric: { [key: string]: TaskEvaluation[] };
   filters: { [key: string]: string[] };
-  expression: object;
   models: Model[];
-  agreementLevels: { [key: string]: number | string }[];
+  expression?: object;
+  agreementLevels?: { [key: string]: number | string }[];
   metric?: Metric;
   allowedValues?: string[];
   annotator?: string;
 }
 
-export interface ResponseMessage {
+export interface FilterationResponse {
   records: {
     taskId: string;
     modelName: string;

src/views/example/Example.tsx

@@ -338,7 +338,7 @@ export default memo(function Example({ data }: { data: Data }) {
                   evaluationsPerMetric={evaluationsPerMetric}
                   models={data.models}
                   metrics={eligibleMetrics}
-                  filters={{}}
+                  filters={filters}
                   onTaskSelection={(taskId) => {
                     setSelectedTaskId(taskId);
                   }}
@@ -353,7 +353,7 @@ export default memo(function Example({ data }: { data: Data }) {
                   evaluationsPerMetric={evaluationsPerMetric}
                   models={data.models}
                   metrics={eligibleMetrics}
-                  filters={{}}
+                  filters={filters}
                   onTaskSelection={(taskId) => {
                     setSelectedTaskId(taskId);
                   }}

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

@@ -76,7 +76,7 @@
   align-items: center;
 }
 
-.performanceGraphTitle {
+.graphTitle {
   display: flex;
   column-gap: $spacing-02;
 }

src/views/metric-behavior/MetricBehavior.tsx

@@ -353,7 +353,7 @@ export default memo(function MetricBehavior({
 
   // Step 2.b: Filter evaluations based on selected models
   const filteredEvaluationsPerMetric = useMemo(() => {
-    var filtered = {};
+    const filtered: { [key: string]: TaskEvaluation[] } = {};
     for (const [metric, evals] of Object.entries(evaluationsPerMetric)) {
       filtered[metric] = evals.filter(
         (evaluation) =>
@@ -700,18 +700,24 @@ export default memo(function MetricBehavior({
           </div>
         ) : (
           <div className={classes.row}>
+            <h4 className={classes.graphTitle}>
+              <strong>Spearman correlation</strong>
+              <span>
+                {`(${Object.values(filteredEvaluationsPerMetric)[0].length ? Object.values(filteredEvaluationsPerMetric)[0].length / (selectedModels ? selectedModels.length : 1) : 0}/${Object.values(evaluationsPerMetric)[0].length / models.length})`}
+              </span>
+            </h4>
             <HeatmapChart
               data={metricToMetricCorrelation}
               options={{
                 // @ts-ignore
                 axes: {
                   bottom: {
-                    title: 'metric',
+                    title: 'Metrics',
                     mapsTo: 'metricA',
                     scaleType: ScaleTypes.LABELS,
                   },
                   left: {
-                    title: 'metric',
+                    title: 'Metrics',
                     mapsTo: 'metricB',
                     scaleType: ScaleTypes.LABELS,
                   },
@@ -759,10 +765,15 @@ export default memo(function MetricBehavior({
           </div>
         ) : (
           <div className={classes.row}>
-            <h4>
-              % instances with same scores (
-              {extractMetricDisplayName(selectedMetricA)} vs.
-              {extractMetricDisplayName(selectedMetricB)})
+            <h4 className={classes.graphTitle}>
+              <strong>
+                % instances with same scores (
+                {extractMetricDisplayName(selectedMetricA)} vs.
+                {extractMetricDisplayName(selectedMetricB)})
+              </strong>
+              <span>
+                {`(${Object.values(filteredEvaluationsPerMetric)[0].length ? Object.values(filteredEvaluationsPerMetric)[0].length / (selectedModels ? selectedModels.length : 1) : 0}/${Object.values(evaluationsPerMetric)[0].length / models.length})`}
+              </span>
             </h4>
             <HeatmapChart
               ref={chartRef}

src/views/model-behavior/ModelBehavior.tsx

@@ -38,7 +38,12 @@ import { GroupedBarChart } from '@carbon/charts-react';
 import { ScaleTypes } from '@carbon/charts';
 
 import { useTheme } from '@/src/theme';
-import { TaskEvaluation, Model, Metric, ResponseMessage } from '@/src/types';
+import {
+  TaskEvaluation,
+  Model,
+  Metric,
+  FilterationResponse,
+} from '@/src/types';
 import {
   AgreementLevels,
   AgreementLevelDefinitions,
@@ -221,7 +226,7 @@ export default function ModelBehavior({
     );
 
     // Step 2.c.ii: Set up event listener for messages from the worker
-    worker.onmessage = function (event: MessageEvent<ResponseMessage>) {
+    worker.onmessage = function (event: MessageEvent<FilterationResponse>) {
       // Step 2.c.ii.*: Copy over response data
       const { records, evaluations } = event.data;
 
@@ -337,8 +342,8 @@ export default function ModelBehavior({
       filterationWorker.postMessage({
         evaluationsPerMetric: evaluationsPerMetric,
         filters: selectedFilters,
-        expression: expression,
         models: selectedModels,
+        expression: expression,
         agreementLevels: selectedAgreementLevels,
         metric: selectedMetric,
         allowedValues: selectedAllowedValues,

src/workers/filter.ts

@@ -18,11 +18,11 @@
 
 import { isEmpty } from 'lodash';
 
-import { RequestMessage, TaskEvaluation } from '@/src/types';
+import { FilterationRequest, TaskEvaluation } from '@/src/types';
 import { areObjectsIntersecting } from '@/src/utilities/objects';
 import { evaluate } from '@/src/utilities/expressions';
 
-onmessage = function (event: MessageEvent<RequestMessage>) {
+onmessage = function (event: MessageEvent<FilterationRequest>) {
   // Step 1: Initialize necessary variables
   const {
     evaluationsPerMetric,
@@ -55,7 +55,7 @@ onmessage = function (event: MessageEvent<RequestMessage>) {
   // Step 3: If a metric is selected
   if (metric) {
     // Step 3.a: If an expression is specified
-    if (event.data.expression && !isEmpty(event.data.expression)) {
+    if (expression && !isEmpty(expression)) {
       // Step 3.a.ii: Build an object containing evaluations per model for every task
       const evaluationsPerTaskPerModel: {
         [key: string]: { [key: string]: TaskEvaluation };
@@ -121,9 +121,10 @@ onmessage = function (event: MessageEvent<RequestMessage>) {
           // Step 3.b.ii: Verify against aggregate value
           if (
             evaluation.modelId in models &&
-            event.data.agreementLevels
-              .map((level) => level.value)
-              .includes(evaluation[`${metric.name}_agg`].level) &&
+            (!agreementLevels ||
+              agreementLevels
+                .map((level) => level.value)
+                .includes(evaluation[`${metric.name}_agg`].level)) &&
             (!allowedValues ||
               isEmpty(allowedValues) ||
               allowedValues.includes(evaluation[`${metric.name}_agg`].value))
@@ -173,9 +174,10 @@ onmessage = function (event: MessageEvent<RequestMessage>) {
           // Step 3.a: Verify against aggregate value
           if (
             evaluation.modelId in models &&
-            agreementLevels
-              .map((level) => level.value)
-              .includes(evaluation[`${metric}_agg`].level) &&
+            (!agreementLevels ||
+              agreementLevels
+                .map((level) => level.value)
+                .includes(evaluation[`${metric}_agg`].level)) &&
             (!allowedValues ||
               isEmpty(allowedValues) ||
               allowedValues.includes(evaluation[`${metric}_agg`].value))