Add forecasting dashboard - UI - transformation creation, table, and comparison

libs/core-ui/src/index.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 export * from "./lib/cohortKey";
-export * from "./lib/Cohort/isAllDataCohort";
+export * from "./lib/Cohort/allDataCohortUtils";
 export * from "./lib/Cohort/Cohort";
 export * from "./lib/Cohort/CohortList/CohortList";
 export * from "./lib/Cohort/Constants";

libs/core-ui/src/lib/Cohort/CohortInfo/CohortInfo.tsx

@@ -6,9 +6,9 @@ import { localization } from "@responsible-ai/localization";
 import React from "react";
 
 import { getCohortFilterCount } from "../../util/getCohortFilterCount";
+import { isAllDataErrorCohort } from "../allDataCohortUtils";
 import { ErrorCohortStats } from "../CohortStats";
 import { ErrorCohort } from "../ErrorCohort";
-import { isAllDataErrorCohort } from "../isAllDataCohort";
 import { PredictionPath } from "../PredictionPath/PredictionPath";
 
 import { cohortInfoStyles } from "./CohortInfo.styles";

libs/core-ui/src/lib/Cohort/CohortInfoSection/CohortInfoSection.tsx

@@ -10,7 +10,7 @@ import {
   IModelAssessmentContext,
   ModelAssessmentContext
 } from "../../Context/ModelAssessmentContext";
-import { isAllDataErrorCohort } from "../isAllDataCohort";
+import { isAllDataErrorCohort } from "../allDataCohortUtils";
 
 export interface ICohortInfoSectionProps {
   toggleShiftCohortVisibility: () => void;

libs/forecasting/src/lib/ForecastingDashboard/Controls/ForecastComparison.tsx

@@ -14,15 +14,20 @@ import { SeriesOptionsType } from "highcharts";
 import React from "react";
 
 import { forecastingDashboardStyles } from "../ForecastingDashboard.styles";
+import { Transformation } from "../Interfaces/Transformation";
 
 import { getForecastPrediction } from "./getForecastPrediction";
 
-export class IForecastComparisonProps {}
+export interface IForecastComparisonProps {
+  transformations: Map<string, Transformation>;
+}
 
 export interface IForecastComparisonState {
   timeSeriesId?: number;
   baselinePrediction?: Array<[number, number]>;
   trueY?: Array<[number, number]>;
+  transformationPredictions: Map<string, Array<[number, number]>>;
+  selectedTransformations: Set<string>;
 }
 
 const stackTokens = {
@@ -39,7 +44,11 @@ export class ForecastComparison extends React.Component<
 
   public constructor(props: IForecastComparisonProps) {
     super(props);
-    this.state = {};
+    this.state = {
+      baselinePrediction: undefined,
+      selectedTransformations: new Set<string>(),
+      transformationPredictions: new Map<string, Array<[number, number]>>()
+    };
   }
 
   public async componentDidMount(): Promise<void> {
@@ -58,11 +67,36 @@ export class ForecastComparison extends React.Component<
     if (currentlySelectedTimeSeriesId !== this.state.timeSeriesId) {
       const trueY = this.getTrueY();
       const baselinePrediction = await this.getBaselineForecastPrediction();
+      const selectedTransformationsAndPredictions =
+        await this.getSelectedForecastPredictions(
+          [...this.props.transformations.keys()],
+          true
+        );
       this.setState({
         baselinePrediction,
+        selectedTransformations:
+          selectedTransformationsAndPredictions.selectedTransformations,
         timeSeriesId: currentlySelectedTimeSeriesId,
+        transformationPredictions:
+          selectedTransformationsAndPredictions.transformationPredictions,
         trueY
       });
+      return;
+    }
+
+    // Check if any new transformations were added.
+    // If so, add their corresponding predictions to this.state.transformationPredictions.
+    // If we add deletion for transformations we will need to check for transformations
+    // that have been removed and delete their corresponding predictions, too.
+    const currentTransformations = [...this.props.transformations.keys()];
+    const prevTransformations = new Set(
+      this.state.transformationPredictions.keys()
+    );
+    const newlyAddedTransformations = currentTransformations.filter(
+      (t) => !prevTransformations.has(t)
+    );
+    if (newlyAddedTransformations.length > 0) {
+      this.addSelectedForecastPredictions(newlyAddedTransformations);
     }
   }
 
@@ -89,6 +123,17 @@ export class ForecastComparison extends React.Component<
         type: "spline"
       } as SeriesOptionsType);
     }
+    this.state.selectedTransformations.forEach((transformationName) => {
+      const transformationPredictions =
+        this.state.transformationPredictions.get(transformationName);
+      if (transformationPredictions) {
+        seriesData.push({
+          data: transformationPredictions,
+          name: transformationName,
+          type: "spline"
+        } as SeriesOptionsType);
+      }
+    });
 
     return (
       <Stack tokens={stackTokens}>
@@ -155,6 +200,72 @@ export class ForecastComparison extends React.Component<
     return undefined;
   };
 
+  private getSelectedForecastPredictions = async (
+    newTransformationNames: string[],
+    ignoreExisting?: boolean
+  ): Promise<{
+    transformationPredictions: Map<string, Array<[number, number]>>;
+    selectedTransformations: Set<string>;
+  }> => {
+    const newTransformationPredictions = await Promise.all(
+      newTransformationNames.map(async (newTransformationName) => {
+        if (this.context.requestForecast === undefined) {
+          return;
+        }
+        const newTransformation = this.props.transformations.get(
+          newTransformationName
+        );
+        if (newTransformation === undefined) {
+          return;
+        }
+
+        const pred = await getForecastPrediction(
+          newTransformation.cohort.cohort,
+          this.context.jointDataset,
+          this.context.requestForecast,
+          newTransformation
+        );
+        if (pred && this.context.dataset.index) {
+          return orderByTime(pred, this.getIndices(this.context.dataset.index));
+        }
+        return undefined;
+      })
+    );
+
+    const newMap = ignoreExisting
+      ? new Map<string, Array<[number, number]>>()
+      : new Map(this.state.transformationPredictions);
+    const newSet = ignoreExisting
+      ? new Set<string>()
+      : new Set(this.state.selectedTransformations);
+    newTransformationNames.forEach((newTransformationName, index) => {
+      const newPredictions = newTransformationPredictions[index];
+      if (newPredictions !== undefined) {
+        newMap.set(newTransformationName, newPredictions);
+        newSet.add(newTransformationName);
+      }
+    });
+
+    return {
+      selectedTransformations: newSet,
+      transformationPredictions: newMap
+    };
+  };
+
+  private addSelectedForecastPredictions = async (
+    newTransformationNames: string[]
+  ): Promise<void> => {
+    const selectedTransformationsAndPredictions =
+      await this.getSelectedForecastPredictions(newTransformationNames);
+
+    this.setState({
+      selectedTransformations:
+        selectedTransformationsAndPredictions.selectedTransformations,
+      transformationPredictions:
+        selectedTransformationsAndPredictions.transformationPredictions
+    });
+  };
+
   private readonly getTrueY = (): Array<[number, number]> | undefined => {
     if (this.context.dataset.index) {
       return orderByTime(