handle forms

projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/state/app.state.ts

 import {
   GmmFormControlIds,
   GmmImtFormControls,
-  GmmSource,
-} from '@ghsc/nshmp-lib-ng/gmm';
-import {ServiceCallInfo} from '@ghsc/nshmp-lib-ng/nshmp';
+  gmmUtils,
+} from '@ghsc/nshmp-lib-no-ngrx/gmm';
+import {ServiceCallInfo} from '@ghsc/nshmp-lib-no-ngrx/nshmp';
 import {
   NshmpPlot,
   NshmpPlotSettings,
   PlotOptions,
   plotUtils,
-} from '@ghsc/nshmp-lib-ng/plot';
+} from '@ghsc/nshmp-lib-no-ngrx/plot';
 import {
   GmmDistanceResponse,
   GmmDistanceUsage,
@@ -17,18 +17,6 @@ import {
   GmmGroupType,
 } from '@ghsc/nshmp-utils-ts/libs/nshmp-ws/gmm-services';
 import {EnumParameterValues} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws-utils/metadata';
-import {
-  box,
-  createFormGroupState,
-  disable,
-  FormGroupState,
-  updateGroup,
-} from 'ngrx-forms';
-import {SharedAppState} from 'projects/nshmp-apps/src/shared/state/shared';
-
-/** Control panel form id */
-export const CONTROL_PANEL_FORM_ID =
-  'ngrx-forms [Hanging Wall Effects Control Form]';
 
 /**
  * Plot ids.
@@ -38,20 +26,11 @@ export enum Plots {
   GROUND_MOTION = 'GROUND_MOTIONS',
 }
 
-/**
- * Plot settings ids.
- */
-export enum PlotSettingsId {
-  FAULT = 'ngrx-forms [Fault Settings]',
-  GROUND_MOTION = 'ngrx-forms [Ground Motion Settings]',
-}
-
 /**
  * GMM Hanging Wall Effects NGRX state.
  */
-export interface AppState extends SharedAppState {
-  /** Control panel form field state */
-  controlPanelForm: FormGroupState<ControlPanelForm>;
+export interface AppState {
+  plots: Map<string, NshmpPlot>;
   /** Service call info */
   serviceCallInfo: ServiceCallInfo;
   /** GMM service response */
@@ -72,45 +51,16 @@ export interface ControlPanelForm extends GmmImtFormControls {
   rMin: number;
 }
 
-/**
- * Initial state for the control panel,
- */
-export function controlPanelFormInitialState(): FormGroupState<ControlPanelForm> {
-  const state = createFormGroupState<ControlPanelForm>(CONTROL_PANEL_FORM_ID, {
-    dip: null,
-    gmmGroupType: GmmGroupType.ACTIVE_CRUST,
-    gmmSource: box([] as GmmSource[]),
-    imt: 'default',
-    multiSelectableParam: GmmFormControlIds.GMM,
-    Mw: null,
-    MwMulti: box([] as number[]),
-    rMax: 100,
-    rMin: -20,
-    showEpistemicUncertainty: false,
-    vs30: null,
-    vs30Multi: box([] as number[]),
-    width: null,
-    z1p0: null,
-    z2p5: null,
-    zSed: null,
-    zTor: null,
-  });
-
-  return updateGroup<ControlPanelForm>({
-    showEpistemicUncertainty: disable,
-  })(state);
-}
-
 /**
  * Returns the default form values based on the usage.
  *
  * @param parameters The response parameters
  */
-export function defaultFormValues(
+export function usageFormValues(
   parameters: GmmDistanceUsageParameters
 ): ControlPanelForm {
   return {
-    ...controlPanelFormInitialState().value,
+    ...defaultFormValues(),
     dip: parameters.dip.value as number,
     Mw: parameters.Mw.value as number,
     vs30: parameters.vs30.value as number,
@@ -121,65 +71,47 @@ export function defaultFormValues(
   };
 }
 
+/**
+ * Returns the default form values.
+ */
+export function defaultFormValues(): ControlPanelForm {
+  return {
+    dip: null,
+    gmmGroupType: GmmGroupType.ACTIVE_CRUST,
+    gmmSource: [],
+    imt: gmmUtils.imtPlaceHolder().value,
+    multiSelectableParam: GmmFormControlIds.GMM,
+    Mw: null,
+    MwMulti: [],
+    rMax: 100,
+    rMin: -20,
+    showEpistemicUncertainty: false,
+    vs30: null,
+    vs30Multi: [],
+    width: null,
+    z1p0: null,
+    z2p5: null,
+    zSed: null,
+    zTor: null,
+  };
+}
+
 /**
  * Returns the default plots.
  */
 export function defaultPlots(): Map<string, NshmpPlot> {
   const plots = new Map<string, NshmpPlot>();
 
-  const groundMotionPlotData = plotUtils.defaultPlot({
-    id: 'ground-motion-curves',
-    mobileOptions: {
-      ...groundMotionPlotOptions,
-      layout: {
-        ...groundMotionPlotOptions.layout,
-        aspectRatio: '4:3',
-      },
-    },
-    options: groundMotionPlotOptions,
-    title: 'Hanging Wall Effects',
-    xLabel: 'Distance (km)',
-    yLabel: 'Median ground motion (g)',
-  });
-
   plots.set(Plots.GROUND_MOTION, {
     label: 'Hanging Wall Effects',
     plotData: groundMotionPlotData,
-    settingsForm: createFormGroupState<NshmpPlotSettings>(
-      PlotSettingsId.GROUND_MOTION,
-      {
-        config: groundMotionPlotData.config,
-        layout: plotUtils.plotlyLayoutToSettings(groundMotionPlotData.layout),
-      }
-    ),
-  });
-
-  const faultPlotData = plotUtils.defaultPlot({
-    id: 'fault',
-    mobileOptions: {
-      ...faultPlotOptions,
-      layout: {
-        ...faultPlotOptions.layout,
-        aspectRatio: '4:3',
-      },
-    },
-    options: faultPlotOptions,
-    panelBreakpoint: 660 * 0.6,
-    title: '',
-    xLabel: 'Distance (km)',
-    yLabel: 'Depth (km)',
+    settingsForm: plotUtils.plotSettingsToFormGroup(groundMotionSettingsForm),
   });
 
   plots.set(Plots.FAULT, {
-    label: 'Fault',
+    label: 'Faults',
     plotData: faultPlotData,
-    settingsForm: createFormGroupState<NshmpPlotSettings>(
-      PlotSettingsId.FAULT,
-      {
-        config: faultPlotData.config,
-        layout: plotUtils.plotlyLayoutToSettings(faultPlotData.layout),
-      }
-    ),
+    settingsForm: plotUtils.plotSettingsToFormGroup(faultSettingsForm),
   });
 
   return plots;
@@ -190,14 +122,13 @@ export function defaultPlots(): Map<string, NshmpPlot> {
  */
 export function initialState(): AppState {
   return {
-    controlPanelForm: controlPanelFormInitialState(),
     plots: defaultPlots(),
     serviceCallInfo: {
       serviceCalls: [],
       serviceName: 'Ground Motion vs. Distance',
-      usage: null,
+      usage: [],
     },
-    serviceResponses: null,
+    serviceResponses: [],
     supportedImts: [],
     usageResponse: null,
   };
@@ -245,3 +176,44 @@ const faultPlotOptions: PlotOptions = {
     },
   },
 };
+
+const groundMotionPlotData = plotUtils.defaultPlot({
+  id: 'ground-motions',
+  mobileOptions: {
+    ...groundMotionPlotOptions,
+    layout: {
+      ...groundMotionPlotOptions.layout,
+      aspectRatio: '4:3',
+    },
+  },
+  options: groundMotionPlotOptions,
+  title: 'Hanging Wall Effects',
+  xLabel: 'Distance (km)',
+  yLabel: 'Median ground motion (g)',
+});
+
+const groundMotionSettingsForm: NshmpPlotSettings = {
+  config: groundMotionPlotData.config,
+  layout: plotUtils.plotlyLayoutToSettings(groundMotionPlotData.layout),
+};
+
+const faultPlotData = plotUtils.defaultPlot({
+  id: 'fault-id',
+  mobileOptions: {
+    ...faultPlotOptions,
+    layout: {
+      ...faultPlotOptions.layout,
+      aspectRatio: '4:3',
+    },
+  },
+  options: faultPlotOptions,
+  panelBreakpoint: 660 * 0.6,
+  title: '',
+  xLabel: 'Distance (km)',
+  yLabel: 'Depth (km)',
+});
+
+const faultSettingsForm: NshmpPlotSettings = {
+  config: faultPlotData.config,
+  layout: plotUtils.plotlyLayoutToSettings(faultPlotData.layout),
+};