poc(): add display index in the editor context

packages/common/src/core/schemas/internal/metrics/setMetricAndDisplay.ts

@@ -16,7 +16,8 @@ import { IMetric, IMetricDisplayConfig } from "../../../types/Metrics";
 export function setMetricAndDisplay(
   entity: IHubProject,
   metric: IMetric,
-  displayConfig: IMetricDisplayConfig
+  displayConfig: IMetricDisplayConfig,
+  displayIndex: number
 ): IHubProject {
   const entityCopy = cloneObject(entity);
   const metricId = metric.id;
@@ -27,9 +28,6 @@ export function setMetricAndDisplay(
 
   // get array in case of undefined displays array
   const displays = getWithDefault(entityCopy, "view.metricDisplays", []);
-  const dIndex = displays.findIndex(
-    (d: IMetricDisplayConfig) => d.metricId === metricId
-  );
 
   // existing vs new metric
   if (mIndex > -1) {
@@ -39,8 +37,8 @@ export function setMetricAndDisplay(
   }
 
   // existing vs new display
-  if (dIndex > -1) {
-    displays[dIndex] = displayConfig;
+  if (displayIndex > -1) {
+    displays[displayIndex] = displayConfig;
   } else {
     displays.push(displayConfig);
   }

packages/common/src/core/types/HubEntityEditor.ts

@@ -9,4 +9,6 @@ export type HubEntityEditor = Record<string, any>; // IHubProjectEditor; // | IH
 export interface IEntityEditorContext {
   // represents the current metric id being edited in the editor experience.
   metricId?: string;
+  // represents the current metric display being edited in the editor experience.
+  displayIndex?: number;
 }

packages/common/src/initiatives/HubInitiative.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_INITIATIVE } from "./defaults";
 import { getEditorConfig } from "../core/schemas/getEditorConfig";
 import { IEntityEditorContext } from "../core/types/HubEntityEditor";
-import { cloneObject } from "../util";
+import { cloneObject, isNil } from "../util";
 import {
   createInitiative,
   deleteInitiative,
@@ -285,10 +285,9 @@ export class HubInitiative
     const metric = metrics.find((m) => m.id === editorContext.metricId);
     const displays = getWithDefault(this.entity, "view.metricDisplays", []);
     const displayConfig =
-      displays.find(
-        (display: IMetricDisplayConfig) =>
-          display.metricId === editorContext.metricId
-      ) || {};
+      !isNil(editorContext.displayIndex) && displays[editorContext.displayIndex]
+        ? displays[editorContext.displayIndex]
+        : {};
     editor._metric = metricToEditor(metric, displayConfig);
 
     // 3. handle association group
@@ -322,15 +321,18 @@ export class HubInitiative
    * @param editor
    * @returns
    */
-  async fromEditor(editor: IHubInitiativeEditor): Promise<IHubInitiative> {
+  async fromEditor(
+    editor: IHubInitiativeEditor,
+    editorContext?: IEntityEditorContext
+  ): Promise<IHubInitiative> {
     // 1. extract the ephemeral props we graft onto the editor
     // note: they will be deleted in the editorToInitiative function
     const thumbnail = editor._thumbnail;
     const featuredImage = editor.view.featuredImage;
     const autoShareGroups = editor._groups || [];
 
     // 2. convert the editor values back to a initiative entity
-    let entity = await editorToInitiative(editor, this.context);
+    let entity = await editorToInitiative(editor, this.context, editorContext);
 
     // 3. If the entity hasn't been created then we need to do that before we can
     // create a featured image, if one has been provided.

packages/common/src/initiatives/HubInitiatives.ts

@@ -22,6 +22,7 @@ import {
   IModel,
   IHubInitiativeEditor,
   camelize,
+  IEntityEditorContext,
 } from "../index";
 import { IQuery } from "../search/types/IHubCatalog";
 import {
@@ -114,10 +115,12 @@ export async function createInitiative(
  */
 export async function editorToInitiative(
   editor: IHubInitiativeEditor,
-  context: IArcGISContext
+  context: IArcGISContext,
+  editorContext: IEntityEditorContext = {}
 ): Promise<IHubInitiative> {
   const _metric = editor._metric;
   const _associations = editor._associations;
+  const _displayIndex = editorContext.displayIndex;
 
   // 1. remove the ephemeral props we graft onto the editor
   delete editor._groups;
@@ -140,7 +143,12 @@ export async function editorToInitiative(
       metricName: _metric.cardTitle,
     });
 
-    initiative = setMetricAndDisplay(initiative, metric, displayConfig);
+    initiative = setMetricAndDisplay(
+      initiative,
+      metric,
+      displayConfig,
+      _displayIndex
+    );
   }
 
   // 5. handle association group settings

packages/common/src/metrics/metricToEditor.ts

@@ -42,6 +42,9 @@ export function metricToEditor(
             expressionSet,
             allowExpressionSet,
             fieldType,
+            statistic:
+              displayConfig.statistic ||
+              (metric.source as IServiceQueryMetricSource).statistic,
             sourceLink: displayConfig.sourceLink,
             sourceTitle: displayConfig.sourceTitle,
           },

packages/common/src/projects/HubProject.ts

@@ -30,7 +30,7 @@ import {
   IHubCardViewModel,
 } from "../core/types/IHubCardViewModel";
 import { projectToCardModel } from "./view";
-import { camelize, cloneObject, createId } from "../util";
+import { camelize, cloneObject, createId, isNil } from "../util";
 import { createProject, editorToProject, updateProject } from "./edit";
 import { ProjectEditorType } from "./_internal/ProjectSchema";
 import { enrichEntity } from "../core/enrichEntity";
@@ -207,10 +207,10 @@ export class HubProject
     const metric = metrics.find((m) => m.id === editorContext.metricId);
     const displays = getWithDefault(this.entity, "view.metricDisplays", []);
     const displayConfig =
-      displays.find(
-        (display: IMetricDisplayConfig) =>
-          display.metricId === editorContext.metricId
-      ) || {};
+      !isNil(editorContext.displayIndex) && displays[editorContext.displayIndex]
+        ? displays[editorContext.displayIndex]
+        : {};
+
     editor._metric = metricToEditor(metric, displayConfig);
 
     // 4. slug life
@@ -235,7 +235,7 @@ export class HubProject
     const autoShareGroups = editor._groups || [];
 
     // 2. convert the editor values back to a project entity
-    const entity = editorToProject(editor, this.context.portal);
+    const entity = editorToProject(editor, this.context.portal, editorContext);
 
     // 3. set the thumbnailCache to ensure that
     // the thumbnail is updated on the next save

packages/common/src/projects/edit.ts

@@ -10,7 +10,12 @@ import {
   removeItem,
 } from "@esri/arcgis-rest-portal";
 import { PropertyMapper } from "../core/_internal/PropertyMapper";
-import { IHubItemEntity, IHubProject, IHubProjectEditor } from "../core/types";
+import {
+  IEntityEditorContext,
+  IHubItemEntity,
+  IHubProject,
+  IHubProjectEditor,
+} from "../core/types";
 import { DEFAULT_PROJECT, DEFAULT_PROJECT_MODEL } from "./defaults";
 import { computeProps } from "./_internal/computeProps";
 import { getPropertyMap } from "./_internal/getPropertyMap";
@@ -78,9 +83,11 @@ export async function createProject(
  */
 export function editorToProject(
   editor: IHubProjectEditor,
-  portal: IPortal
+  portal: IPortal,
+  editorContext: IEntityEditorContext = {}
 ): IHubProject {
   const _metric = editor._metric;
+  const _displayIndex = editorContext.displayIndex;
 
   // 1. remove the ephemeral props we graft onto the editor
   delete editor._groups;
@@ -102,7 +109,12 @@ export function editorToProject(
       metricName: _metric.cardTitle,
     });
 
-    project = setMetricAndDisplay(project, metric, displayConfig);
+    project = setMetricAndDisplay(
+      project,
+      metric,
+      displayConfig,
+      _displayIndex
+    );
   }
 
   return project;