update UI to support genai task for RAI text dashboard (#2504)

apps/dashboard/src/app/textApplications.ts

@@ -17,6 +17,7 @@ import {
   emotionModelExplanationData
 } from "../model-assessment-text/__mock_data__/emotion";
 import { squad } from "../model-assessment-text/__mock_data__/squad";
+import { squadGenai } from "../model-assessment-text/__mock_data__/squadGenai";
 
 import {
   IDataSet,
@@ -65,6 +66,10 @@ export const textApplications: ITextApplications = <const>{
       squad: {
         classDimension: 3,
         dataset: squad
+      } as IModelAssessmentDataSet,
+      squadGenai: {
+        classDimension: 3,
+        dataset: squadGenai
       } as IModelAssessmentDataSet
     },
     versions: { "1": 1, "2:Static-View": 2 }

apps/dashboard/src/model-assessment-forecasting/__mock_data__/mockForecastingDataSingleTimeSeries.ts

@@ -28,7 +28,9 @@ mockForecastingDataSingleTimeSeries.predicted_y =
     startingIndexBobsSandwichesTimeSeries,
     endingIndexBobsSandwichesTimeSeries
   );
-mockForecastingDataSingleTimeSeries.true_y = mockForecastingData.true_y.slice(
-  startingIndexBobsSandwichesTimeSeries,
-  endingIndexBobsSandwichesTimeSeries
-);
+if (mockForecastingData.true_y) {
+  mockForecastingDataSingleTimeSeries.true_y = mockForecastingData.true_y.slice(
+    startingIndexBobsSandwichesTimeSeries,
+    endingIndexBobsSandwichesTimeSeries
+  );
+}

apps/dashboard/src/model-assessment-text/__mock_data__/squadGenai.ts

@@ -0,0 +1,59 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { DatasetTaskType, IDataset } from "@responsible-ai/core-ui";
+
+export const squadGenai: IDataset = {
+  categorical_features: [],
+  class_names: undefined,
+  feature_names: [
+    "context",
+    "prompt",
+    "positive_words",
+    "negative_words",
+    "negation_words",
+    "negated_entities",
+    "named_persons",
+    "sentence_length"
+  ],
+  features: [
+    [
+      'Architecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.',
+      'Answer the question given the context.\n\ncontext:\nArchitecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.\n\nquestion:\nTo whom did the Virgin Mary allegedly appear in 1858 in Lourdes France?',
+      50,
+      0,
+      0,
+      0,
+      3,
+      827
+    ],
+    [
+      'Architecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.',
+      'Answer the question given the context.\n\ncontext:\nArchitecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.\n\nquestion:\nWhat is in front of the Notre Dame Main Building?',
+      50,
+      0,
+      0,
+      0,
+      2,
+      805
+    ],
+    [
+      'Architecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.',
+      'Answer the question given the context.\n\ncontext:\nArchitecturally, the school has a Catholic character. Atop the Main Building\'s gold dome is a golden statue of the Virgin Mary. Immediately in front of the Main Building and facing it, is a copper statue of Christ with arms upraised with the legend "Venite Ad Me Omnes". Next to the Main Building is the Basilica of the Sacred Heart. Immediately behind the basilica is the Grotto, a Marian place of prayer and reflection. It is a replica of the grotto at Lourdes, France where the Virgin Mary reputedly appeared to Saint Bernadette Soubirous in 1858. At the end of the main drive (and in a direct line that connects through 3 statues and the Gold Dome), is a simple, modern stone statue of Mary.\n\nquestion:\nThe Basilica of the Sacred heart at Notre Dame is beside to which structure?',
+      52,
+      0,
+      0,
+      0,
+      3,
+      832
+    ]
+  ],
+  predicted_y: [
+    "This is a dummy answer",
+    "This is a dummy answer",
+    "This is a dummy answer"
+  ],
+  target_column: undefined,
+  task_type: DatasetTaskType.GenerativeText,
+  true_y: undefined
+};

libs/core-ui/src/lib/DatasetCohort.ts

@@ -120,7 +120,7 @@ export class DatasetCohort {
         dataDict[index][featureName] = val;
       });
     });
-    this.dataset.true_y.forEach((val, index) => {
+    this.dataset.true_y?.forEach((val, index) => {
       if (Array.isArray(val)) {
         val.forEach((subVal, subIndex) => {
           dataDict[index][DatasetCohortColumns.TrueY + subIndex.toString()] =

libs/core-ui/src/lib/Interfaces/IDataset.ts

@@ -13,7 +13,8 @@ export enum DatasetTaskType {
   MultilabelImageClassification = "multilabel_image_classification",
   Forecasting = "forecasting",
   ObjectDetection = "object_detection",
-  QuestionAnswering = "question_answering"
+  QuestionAnswering = "question_answering",
+  GenerativeText = "generative_text"
 }
 
 export interface ITabularDatasetMetadata {
@@ -31,7 +32,7 @@ export interface IObjectDetectionLabelType {
 
 export interface IDataset {
   task_type: DatasetTaskType;
-  true_y: number[] | number[][] | string[];
+  true_y?: number[] | number[][] | string[];
   predicted_y?: number[] | number[][] | string[];
   probability_y?: number[][];
   features: unknown[][];

libs/core-ui/src/lib/util/datasetUtils/getColumnRanges.ts

@@ -161,7 +161,11 @@ function getRegressionErrorFeatureRange(
   dataset: IDataset,
   modelType: ModelTypes
 ): IColumnRange | undefined {
-  if (modelType === ModelTypes.Regression && dataset.predicted_y) {
+  if (
+    modelType === ModelTypes.Regression &&
+    dataset.predicted_y &&
+    dataset.true_y
+  ) {
     const regressionErrors = [];
     for (let index = 0; index < dataset.features.length; index++) {
       const trueY = dataset.true_y[index];

libs/core-ui/src/lib/util/datasetUtils/getPropertyValues.ts

@@ -44,9 +44,12 @@ export function getPropertyValues(
     });
   }
   if (property === DatasetCohortColumns.TrueY) {
-    return indexes.map((index) => {
-      return dataset.true_y[index];
-    });
+    const trueYs = dataset.true_y;
+    if (trueYs) {
+      return indexes.map((index) => {
+        return trueYs[index];
+      });
+    }
   }
   if (dataset.predicted_y && dataset.true_y) {
     return getErrors(property, indexes, dataset, modelType);
@@ -62,6 +65,7 @@ function getErrors(
 ): unknown[] {
   if (
     dataset.predicted_y &&
+    dataset.true_y &&
     !Array.isArray(dataset.true_y) &&
     !Array.isArray(dataset.predicted_y)
   ) {

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/IndividualFeatureImportanceView/TextLocalImportancePlots.tsx

@@ -86,7 +86,7 @@ export class TextLocalImportancePlots extends React.Component<ITextLocalImportan
       const importances: number[][] | number[][][] =
         textFeatureImportance?.localExplanations;
       const baseValues = textFeatureImportance?.baseValues;
-      const trueY = this.context.dataset.true_y[row[0]];
+      const trueY = this.context.dataset.true_y?.[row[0]];
       const predictedY = this.context.dataset.predicted_y?.[row[0]];
       return {
         baseValues,

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ConfusionMatrixHeatmap.tsx

@@ -215,7 +215,7 @@ export class ConfusionMatrixHeatmap extends React.Component<
     if (this.context.dataset.class_names) {
       return this.context.dataset.class_names;
     }
-    if (this.context.dataset.predicted_y) {
+    if (this.context.dataset.predicted_y && this.context.dataset.true_y) {
       const allClasses = _.uniq([
         ...this.context.dataset.true_y,
         ...this.context.dataset.predicted_y

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/TabsView/TabsView.tsx

@@ -160,6 +160,7 @@ export class TabsView extends React.PureComponent<
               {t.key === GlobalTabKeys.VisionTab &&
                 this.props.dataset.images &&
                 this.props.dataset.predicted_y &&
+                this.props.dataset.true_y &&
                 this.props.dataset.class_names && (
                   <>
                     <div className={classNames.sectionHeader}>