diff --git a/esp/src/package-lock.json b/esp/src/package-lock.json
index ecb1390c775..3391efbb526 100644
--- a/esp/src/package-lock.json
+++ b/esp/src/package-lock.json
@@ -51,6 +51,7 @@
         "react-hook-form": "7.51.2",
         "react-hot-toast": "2.4.1",
         "react-reflex": "4.2.6",
+        "react-singleton-hook": "3.4.0",
         "react-sizeme": "3.0.2",
         "universal-router": "9.2.0",
         "xstyle": "0.3.3"
@@ -9777,6 +9778,23 @@
         "react-dom": ">0.13.0"
       }
     },
+    "node_modules/react-singleton-hook": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-singleton-hook/-/react-singleton-hook-3.4.0.tgz",
+      "integrity": "sha512-eQEpyacGAaRejmWUizUdNNQFn5AO0iaKRSl1jxgC0FQadVY/I1WFuPrYiutglPzO9s8yEbIh95UXVJQel4d7HQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "15 - 18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-sizeme": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.2.tgz",
diff --git a/esp/src/package.json b/esp/src/package.json
index e9d7224d6f4..de3511485ec 100644
--- a/esp/src/package.json
+++ b/esp/src/package.json
@@ -77,6 +77,7 @@
     "react-hook-form": "7.51.2",
     "react-hot-toast": "2.4.1",
     "react-reflex": "4.2.6",
+    "react-singleton-hook": "3.4.0",
     "react-sizeme": "3.0.2",
     "universal-router": "9.2.0",
     "xstyle": "0.3.3"
diff --git a/esp/src/src-react/components/Metrics.tsx b/esp/src/src-react/components/Metrics.tsx
index 40413d012c7..95d16528912 100644
--- a/esp/src/src-react/components/Metrics.tsx
+++ b/esp/src/src-react/components/Metrics.tsx
@@ -11,7 +11,7 @@ import { scopedLogger } from "@hpcc-js/util";
 import nlsHPCC from "src/nlsHPCC";
 import { WUTimelineNoFetch } from "src/Timings";
 import * as Utility from "src/Utility";
-import { FetchStatus, useMetricsOptions, useWUQueryMetrics, MetricsOptions as MetricsOptionsT } from "../hooks/metrics";
+import { FetchStatus, useMetricsViews, useWUQueryMetrics } from "../hooks/metrics";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { AutosizeComponent, AutosizeHpccJSComponent } from "../layouts/HpccJSAdapter";
 import { DockPanel, DockPanelItem, ResetableDockPanel } from "../layouts/DockPanel";
@@ -89,10 +89,10 @@ class TableEx extends Table {
     }
 
     _rawDataMap: { [id: number]: string } = {};
-    metrics(metrics: any[], options: MetricsOptionsT, scopeFilter: string, matchCase: boolean): this {
+    metrics(metrics: any[], scopeTypes: string[], properties: string[], scopeFilter: string, matchCase: boolean): this {
         this
             .columns(["##"])    //  Reset hash to force recalculation of default widths
-            .columns(["##", nlsHPCC.Type, "StdDevs", nlsHPCC.Scope, ...options.properties, "__StdDevs"])
+            .columns(["##", nlsHPCC.Type, "StdDevs", nlsHPCC.Scope, ...properties, "__StdDevs"])
             .columnFormats([
                 new ColumnFormatEx()
                     .column("StdDevs")
@@ -106,18 +106,18 @@ class TableEx extends Table {
             .data(metrics
                 .filter(m => this.scopeFilterFunc(m, scopeFilter, matchCase))
                 .filter(row => {
-                    return options.scopeTypes.indexOf(row.type) >= 0;
+                    return scopeTypes.indexOf(row.type) >= 0;
                 }).map((row, idx) => {
                     if (idx === 0) {
                         this._rawDataMap = {
                             0: "##", 1: "type", 2: "__StdDevs", 3: "name"
                         };
-                        options.properties.forEach((p, idx2) => {
+                        properties.forEach((p, idx2) => {
                             this._rawDataMap[4 + idx2] = p;
                         });
                     }
                     row.__hpcc_id = row.name;
-                    return [idx, row.type, row.__StdDevs === 0 ? undefined : row.__StdDevs, row.name, ...options.properties.map(p => {
+                    return [idx, row.type, row.__StdDevs === 0 ? undefined : row.__StdDevs, row.name, ...properties.map(p => {
                         return row.__groupedProps[p]?.Value ??
                             row.__groupedProps[p]?.Max ??
                             row.__groupedProps[p]?.Avg ??
@@ -157,6 +157,7 @@ class TableEx extends Table {
 }
 
 type SelectedMetricsSource = "" | "scopesTable" | "scopesSqlTable" | "metricGraphWidget" | "hotspot" | "reset";
+const TIMELINE_FIXEDHEIGHT = 152;
 
 interface MetricsProps {
     wuid: string;
@@ -178,10 +179,9 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
     const [selectedMetrics, setSelectedMetrics] = React.useState<IScope[]>([]);
     const [selectedMetricsPtr, setSelectedMetricsPtr] = React.useState<number>(-1);
     const [metrics, columns, _activities, _properties, _measures, _scopeTypes, fetchStatus, refresh] = useWUQueryMetrics(wuid, querySet, queryId);
+    const { viewIds, viewId, setViewId, view, updateView } = useMetricsViews();
     const [showMetricOptions, setShowMetricOptions] = React.useState(false);
-    const [options, setOptions, saveOptions] = useMetricsOptions();
     const [dockpanel, setDockpanel] = React.useState<ResetableDockPanel>();
-    const [showTimeline, setShowTimeline] = React.useState<boolean>(true);
     const [trackSelection, setTrackSelection] = React.useState<boolean>(true);
     const [fullscreen, setFullscreen] = React.useState<boolean>(false);
     const [hotspots, setHotspots] = React.useState<string>("");
@@ -240,11 +240,14 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
     }, [parentUrl, timeline]);
 
     React.useEffect(() => {
-        timeline
-            .scopes(metrics)
-            .lazyRender()
-            ;
-    }, [metrics, timeline]);
+        if (view.showTimeline) {
+            timeline
+                .scopes(metrics)
+                .height(TIMELINE_FIXEDHEIGHT)
+                .lazyRender()
+                ;
+        }
+    }, [metrics, timeline, view.showTimeline]);
 
     //  Scopes Table  ---
     const onChangeScopeFilter = React.useCallback((event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
@@ -258,7 +261,7 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
 
     const scopesTable = useConst(() => new TableEx()
         .multiSelect(true)
-        .metrics([], options, scopeFilter, matchCase)
+        .metrics([], view.scopeTypes, view.properties, scopeFilter, matchCase)
         .sortable(true)
     );
 
@@ -274,13 +277,13 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
 
     React.useEffect(() => {
         scopesTable
-            .metrics(metrics, options, scopeFilter, matchCase)
+            .metrics(metrics, view.scopeTypes, view.properties, scopeFilter, matchCase)
             .lazyRender()
             ;
-    }, [matchCase, metrics, options, scopeFilter, scopesTable]);
+    }, [matchCase, metrics, scopeFilter, scopesTable, view.properties, view.scopeTypes]);
 
     const updateScopesTable = React.useCallback((selection: IScope[]) => {
-        if (scopesTable?.renderCount() > 0) {
+        if (scopesTable?.renderCount() > 0 && selectedMetricsSource !== "scopesTable") {
             scopesTable.selection([]);
             if (selection.length) {
                 const selRows = scopesTable.data().filter(row => {
@@ -291,7 +294,7 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
                 });
             }
         }
-    }, [scopesTable]);
+    }, [scopesTable, selectedMetricsSource]);
 
     //  Graph  ---
     const metricGraph = useConst(() => new MetricGraph());
@@ -490,9 +493,9 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
     }, [crossTabTable]);
 
     React.useEffect(() => {
-        const dot = metricGraph.graphTpl(selectedLineage ? [selectedLineage] : [], options);
+        const dot = metricGraph.graphTpl(selectedLineage ? [selectedLineage] : [], view);
         setDot(dot);
-    }, [metricGraph, options, selectedLineage]);
+    }, [metricGraph, view, selectedLineage]);
 
     React.useEffect(() => {
         let cancelled = false;
@@ -530,13 +533,14 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
     React.useEffect(() => {
 
         //  Update layout prior to unmount  ---
-        if (dockpanel && options && saveOptions && setOptions) {
+        if (dockpanel && updateView) {
             return () => {
-                setOptions({ ...options, layout: dockpanel.getLayout() });
-                saveOptions();
+                if (dockpanel && updateView) {
+                    updateView({ layout: dockpanel.getLayout() });
+                }
             };
         }
-    }, [dockpanel, options, saveOptions, setOptions]);
+    }, [dockpanel, updateView]);
 
     //  Command Bar  ---
     const buttons = React.useMemo((): ICommandBarItemProps[] => [
@@ -556,19 +560,30 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
         },
         { key: "divider_1", itemType: ContextualMenuItemType.Divider, onRender: () => <ShortVerticalDivider /> },
         {
-            key: "timeline", text: nlsHPCC.Timeline, canCheck: true, checked: showTimeline, iconProps: { iconName: "TimelineProgress" },
+            key: "views", text: viewId, iconProps: { iconName: "View" },
+            subMenuProps: {
+                items: viewIds.map(v => ({
+                    key: v, text: v, onClick: () => {
+                        updateView({ layout: dockpanel.getLayout() });
+                        setViewId(v);
+                    }
+                }))
+            },
+        },
+        {
+            key: "timeline", text: nlsHPCC.Timeline, canCheck: true, checked: view.showTimeline, iconProps: { iconName: "TimelineProgress" },
             onClick: () => {
-                setShowTimeline(!showTimeline);
+                updateView({ showTimeline: !view.showTimeline }, true);
             }
         },
         {
             key: "options", text: nlsHPCC.Options, iconProps: { iconName: "Settings" },
             onClick: () => {
-                setOptions({ ...options, layout: dockpanel.layout() });
+                updateView({ layout: dockpanel.getLayout() });
                 setShowMetricOptions(true);
             }
         }
-    ], [dockpanel, hotspots, onHotspot, options, refresh, setOptions, showTimeline, timeline]);
+    ], [dockpanel, hotspots, onHotspot, refresh, setViewId, timeline, updateView, view.showTimeline, viewId, viewIds]);
 
     const formatColumns = React.useMemo((): Utility.ColumnMap => {
         const copyColumns: Utility.ColumnMap = {};
@@ -610,7 +625,9 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
                     }
                 }]
             }
-        }, {
+        },
+        { key: "divider_2", itemType: ContextualMenuItemType.Divider, onRender: () => <ShortVerticalDivider /> },
+        {
             key: "fullscreen", title: nlsHPCC.MaximizeRestore, iconProps: { iconName: fullscreen ? "ChromeRestore" : "FullScreen" },
             onClick: () => setFullscreen(!fullscreen)
         }
@@ -618,23 +635,18 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
 
     const setShowMetricOptionsHook = React.useCallback((show: boolean) => {
         setShowMetricOptions(show);
-        scopesTable
-            .metrics(metrics, options, scopeFilter, matchCase)
-            .render(() => {
-                updateScopesTable(selectedMetrics);
-            })
-            ;
+    }, []);
 
-    }, [matchCase, metrics, options, scopeFilter, scopesTable, selectedMetrics, updateScopesTable]);
+    console.log("View ID", viewId, view.scopeTypes);
 
     return <HolyGrail fullscreen={fullscreen}
         header={<>
             <CommandBar items={buttons} farItems={rightButtons} />
-            <AutosizeHpccJSComponent widget={timeline} fixedHeight={"160px"} padding={4} hidden={!showTimeline} />
+            <AutosizeHpccJSComponent widget={timeline} fixedHeight={`${TIMELINE_FIXEDHEIGHT + 8}px`} padding={4} hidden={!view.showTimeline} />
         </>}
         main={
             <ErrorBoundary>
-                <DockPanel layout={options?.layout} onCreate={setDockpanel}>
+                <DockPanel layout={view?.layout} onCreate={setDockpanel}>
                     <DockPanelItem key="scopesTable" title={nlsHPCC.Metrics}>
                         <HolyGrail
                             header={<Stack horizontal>
@@ -647,7 +659,7 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
                         />
                     </DockPanelItem>
                     <DockPanelItem key="metricsSql" title={nlsHPCC.MetricsSQL} location="tab-after" relativeTo="scopesTable">
-                        <MetricsSQL defaultSql={options.sql} scopes={metrics} onSelectionChanged={selection => scopesSelectionChanged("scopesSqlTable", selection)}></MetricsSQL>
+                        <MetricsSQL defaultSql={view.sql} scopes={metrics} onSelectionChanged={selection => scopesSelectionChanged("scopesSqlTable", selection)}></MetricsSQL>
                     </DockPanelItem>
                     <DockPanelItem key="metricGraph" title={nlsHPCC.Graph} location="split-right" relativeTo="scopesTable" >
                         <HolyGrail
diff --git a/esp/src/src-react/components/MetricsOptions.tsx b/esp/src/src-react/components/MetricsOptions.tsx
index db72c14579d..ce48f07513e 100644
--- a/esp/src/src-react/components/MetricsOptions.tsx
+++ b/esp/src/src-react/components/MetricsOptions.tsx
@@ -1,13 +1,122 @@
 import * as React from "react";
-import { DefaultButton, PrimaryButton, Checkbox, Pivot, PivotItem, TextField } from "@fluentui/react";
+import { DefaultButton, Dropdown, PrimaryButton, Checkbox, Pivot, PivotItem, TextField, IDropdownOption, Stack, SelectionMode, Selection } from "@fluentui/react";
+import { useConst, useForceUpdate } from "@fluentui/react-hooks";
+import { Button } from "@fluentui/react-components";
+import { BookmarkAddRegular, DeleteRegular } from "@fluentui/react-icons";
 import nlsHPCC from "src/nlsHPCC";
-import { useMetricMeta, useMetricsOptions } from "../hooks/metrics";
+import { MetricsView, clone, useMetricMeta, useMetricsViews } from "../hooks/metrics";
 import { MessageBox } from "../layouts/MessageBox";
 import { JSONSourceEditor, SourceEditor } from "./SourceEditor";
+import { FluentColumns, FluentGrid, useFluentStoreState } from "./controls/Grid";
+import { DockPanelLayout } from "../layouts/DockPanel";
 
 const width = 640;
 const innerHeight = 400;
 
+interface GridOptionsProps {
+    label: string;
+    strArray: string[];
+    strSelection: string[];
+    setSelection: (_: string[]) => void;
+}
+
+const GridOptions: React.FunctionComponent<GridOptionsProps> = ({
+    label,
+    strArray,
+    strSelection,
+    setSelection
+}) => {
+    const [data, setData] = React.useState<{ id: string }[]>([]);
+    const { setTotal, refreshTable } = useFluentStoreState({});
+
+    const columns = React.useMemo((): FluentColumns => {
+        return {
+            col1: {
+                width: 27,
+                selectorType: "checkbox"
+            },
+            id: {
+                label,
+                width: 200,
+                sortable: true
+            }
+        };
+    }, [label]);
+
+    React.useEffect(() => {
+        setData(strArray.map(str => ({ id: str })));
+    }, [strArray]);
+
+    const selectionHandler = useConst(() => {
+        return new Selection({
+            getKey: (item: { id: string }) => item.id,
+            onSelectionChanged: () => setSelection(selectionHandler.getSelection().map(item => item.id)),
+            onItemsChanged: () => {
+                selectionHandler.setAllSelected(false);
+                for (const str of strSelection) {
+                    selectionHandler.setKeySelected(str, true, false);
+                }
+            }
+        });
+    });
+
+    React.useEffect(() => {
+        selectionHandler.setAllSelected(false);
+        for (const str of strSelection) {
+            selectionHandler.setKeySelected(str, true, false);
+        }
+    }, [selectionHandler, strSelection]);
+
+    return <FluentGrid
+        data={data}
+        primaryID={"id"}
+        columns={columns}
+        selectionMode={SelectionMode.multiple}
+        setSelection={selectionHandler}
+        setTotal={setTotal}
+        refresh={refreshTable}
+        height={`${innerHeight}px`}
+    ></FluentGrid>;
+};
+
+interface AddLabelProps {
+    show: boolean;
+    setShow: (_: boolean) => void;
+    onOk: (label: string) => void
+}
+
+export const AddLabel: React.FunctionComponent<AddLabelProps> = ({
+    show,
+    setShow,
+    onOk
+}) => {
+    const [label, setLabel] = React.useState("");
+    const onChangeAddLabel = React.useCallback((event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
+        setLabel(newValue || "");
+    }, [],);
+
+    return <MessageBox title={nlsHPCC.Add} show={show} setShow={setShow} minWidth={width}
+        footer={<>
+            <PrimaryButton text={nlsHPCC.OK} disabled={!label} onClick={() => {
+                onOk(label);
+                setShow(false);
+            }}
+            />
+            <DefaultButton
+                text={nlsHPCC.Cancel}
+                onClick={() => {
+                    setLabel("");
+                    setShow(false);
+                }}
+            />
+        </>}>
+        <TextField label={nlsHPCC.Label} value={label}
+            onChange={onChangeAddLabel}
+        />
+    </MessageBox>;
+
+};
+
 interface MetricsOptionsProps {
     show: boolean;
     setShow: (_: boolean) => void;
@@ -15,107 +124,157 @@ interface MetricsOptionsProps {
 
 export const MetricsOptions: React.FunctionComponent<MetricsOptionsProps> = ({
     show,
-    setShow
+    setShow,
 }) => {
+    const [globalScopeTypes, globalProperties] = useMetricMeta();
+    const { viewIds, viewId, setViewId, view, addView, updateView } = useMetricsViews();
+    const [dirtyView, setDirtyView] = React.useState<MetricsView>(clone(view));
+    const [showAdd, setShowAdd] = React.useState(false);
+    const forceRefresh = useForceUpdate();
+
+    const options = React.useMemo(() => {
+        return viewIds.map(id => ({ key: id, text: id }));
+    }, [viewIds]);
 
-    const [scopeTypes, properties] = useMetricMeta();
-    const [options, setOptions, save, reset] = useMetricsOptions();
+    React.useEffect(() => {
+        setDirtyView(clone(view));
+    }, [view]);
 
     const closeOptions = React.useCallback(() => {
         setShow(false);
     }, [setShow]);
 
-    const allChecked = scopeTypes.length === options.scopeTypes.length;
+    const onDropdownChange = React.useCallback((event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption) => {
+        updateView({ ...view, ...dirtyView });
+        setViewId(item.key as string, true);
+    }, [dirtyView, setViewId, updateView, view]);
 
-    return <MessageBox title={nlsHPCC.Options} show={show} setShow={setShow} minWidth={width}
-        footer={<>
-            <PrimaryButton
-                text={nlsHPCC.OK}
-                onClick={() => {
-                    save();
-                    closeOptions();
-                }}
-            />
-            <DefaultButton
-                text={nlsHPCC.Cancel}
-                onClick={() => {
-                    reset();
-                    closeOptions();
-                }}
-            />
-            <DefaultButton
-                text={nlsHPCC.Defaults}
-                onClick={() => {
-                    reset(true);
-                }}
-            />
-        </>} >
-        <Pivot>
-            <PivotItem key="metrics" headerText={nlsHPCC.Metrics}>
-                <div style={{ height: innerHeight, overflow: "auto" }}>
-                    <Checkbox key="all" label={nlsHPCC.All} checked={allChecked} onChange={(ev, checked) => {
-                        if (checked) {
-                            setOptions({
-                                ...options, scopeTypes: [...scopeTypes]
-                            });
-                        }
-                    }} />
-                    {scopeTypes.map(st => {
-                        return <Checkbox key={st} label={st} checked={options.scopeTypes.indexOf(st) >= 0} onChange={(ev, checked) => {
-                            const scopeTypes = options.scopeTypes.filter(row => row !== st);
-                            if (checked) {
-                                scopeTypes.push(st);
-                            }
-                            setOptions({ ...options, scopeTypes });
-                        }} />;
-                    })}
-                </div>
-            </PivotItem>
-            <PivotItem key="columns" headerText={nlsHPCC.Columns}>
-                <div style={{ height: innerHeight, overflow: "auto" }}>
-                    {properties.map(p => {
-                        return <Checkbox key={p} label={p} checked={options.properties.indexOf(p) >= 0} onChange={(ev, checked) => {
-                            const properties = options.properties.filter(row => row !== p);
-                            if (checked) {
-                                properties.push(p);
-                            }
-                            setOptions({ ...options, properties });
-                        }} />;
-                    })}
-                </div>
-            </PivotItem>
-            <PivotItem key="sql" headerText={nlsHPCC.SQL} >
-                <div style={{ height: innerHeight }}>
-                    <SourceEditor mode="sql" text={options.sql} onTextChange={sql => {
-                        setOptions({ ...options, sql });
-                    }} />
-                </div>
-            </PivotItem>
-            <PivotItem key="graph" headerText={nlsHPCC.Graph}>
-                <div style={{ height: innerHeight, overflow: "auto" }}>
-                    <Checkbox label={nlsHPCC.IgnoreGlobalStoreOutEdges} checked={options.ignoreGlobalStoreOutEdges} onChange={(ev, checked) => {
-                        setOptions({ ...options, ignoreGlobalStoreOutEdges: !!checked });
-                    }} />
-                    <TextField label={nlsHPCC.SubgraphLabel} value={options.subgraphTpl} multiline autoAdjustHeight onChange={(evt, newValue) => {
-                        setOptions({ ...options, subgraphTpl: newValue });
-                    }} />
-                    <TextField label={nlsHPCC.ActivityLabel} value={options.activityTpl} multiline autoAdjustHeight onChange={(evt, newValue) => {
-                        setOptions({ ...options, activityTpl: newValue });
-                    }} />
-                    <TextField label={nlsHPCC.EdgeLabel} value={options.edgeTpl} multiline autoAdjustHeight onChange={(evt, newValue) => {
-                        setOptions({ ...options, edgeTpl: newValue });
+    const onAddLabel = React.useCallback((label: string) => {
+        if (label) {
+            addView(label, { ...view, ...dirtyView });
+        }
+    }, [addView, dirtyView, view]);
+
+    console.log("dirtyView.scopeTypes", viewId, view.scopeTypes);
+
+    return <>
+        <MessageBox title={nlsHPCC.Options} show={show && !showAdd} setShow={setShow} minWidth={width}
+            footer={<>
+                <PrimaryButton
+                    text={nlsHPCC.OK}
+                    onClick={() => {
+                        updateView(dirtyView);
+                        closeOptions();
+                    }}
+                />
+                <DefaultButton
+                    text={nlsHPCC.Cancel}
+                    onClick={() => {
+                        setDirtyView(clone(view));
+                        closeOptions();
+                    }}
+                />
+                <DefaultButton
+                    text={nlsHPCC.Reset}
+                    onClick={() => {
+                        setDirtyView(clone(view));
+                        forceRefresh();
+                    }}
+                />
+            </>}>
+            <>
+                <Stack horizontal>
+                    <Stack.Item grow>
+                        <Dropdown selectedKey={viewId} onChange={onDropdownChange} options={options} />
+                    </Stack.Item>
+                    <Button appearance="subtle" icon={<BookmarkAddRegular />} title={nlsHPCC.Add} disabled hidden onClick={() => {
+                        setShowAdd(true);
                     }} />
-                </div>
-            </PivotItem>
-            <PivotItem key="layout" headerText={nlsHPCC.Layout} >
-                <div style={{ height: innerHeight }}>
-                    <JSONSourceEditor json={options.layout} onChange={obj => {
-                        if (obj) {
-                            setOptions({ ...options, layout: obj });
-                        }
+                    <Button appearance="subtle" icon={<DeleteRegular />} title={nlsHPCC.Delete} disabled hidden onClick={() => {
                     }} />
-                </div>
-            </PivotItem>
-        </Pivot>
-    </MessageBox >;
+                </Stack>
+                <Pivot>
+                    <PivotItem key="metrics" headerText={nlsHPCC.Metrics}>
+                        <div style={{ height: innerHeight, overflow: "auto" }}>
+                            <Stack horizontal>
+                                <Stack.Item grow={1}>
+                                    <GridOptions
+                                        label={nlsHPCC.ScopeTypes}
+                                        strArray={globalScopeTypes}
+                                        strSelection={dirtyView.scopeTypes}
+                                        setSelection={scopeTypes => {
+                                            dirtyView.scopeTypes = [...scopeTypes];
+                                        }}
+                                    ></GridOptions>
+                                </Stack.Item>
+                                <Stack.Item grow={1}>
+                                    <GridOptions
+                                        label={nlsHPCC.ScopeColumns}
+                                        strArray={globalProperties}
+                                        strSelection={dirtyView.properties}
+                                        setSelection={properties => {
+                                            dirtyView.properties = [...properties];
+                                        }}
+                                    ></GridOptions>
+                                </Stack.Item>
+                            </Stack>
+                        </div>
+                    </PivotItem>
+                    <PivotItem key="sql" headerText={nlsHPCC.SQL} >
+                        <div style={{ height: innerHeight }}>
+                            <SourceEditor mode="sql" text={dirtyView.sql} toolbar={false} onTextChange={sql => {
+                                dirtyView.sql = sql;
+                                forceRefresh();
+                            }} />
+                        </div>
+                    </PivotItem>
+                    <PivotItem key="graph" headerText={nlsHPCC.Graph}>
+                        <div style={{ height: innerHeight, overflow: "auto" }}>
+                            <Checkbox label={nlsHPCC.IgnoreGlobalStoreOutEdges} checked={dirtyView.ignoreGlobalStoreOutEdges} onChange={(ev, checked) => {
+                                dirtyView.ignoreGlobalStoreOutEdges = checked;
+                                forceRefresh();
+                            }} />
+                            <TextField label={nlsHPCC.SubgraphLabel} value={dirtyView.subgraphTpl} multiline autoAdjustHeight onChange={(evt, newValue) => {
+                                dirtyView.subgraphTpl = newValue;
+                                forceRefresh();
+                            }} />
+                            <TextField label={nlsHPCC.ActivityLabel} value={dirtyView.activityTpl} multiline autoAdjustHeight onChange={(evt, newValue) => {
+                                dirtyView.activityTpl = newValue;
+                                forceRefresh();
+                            }} />
+                            <TextField label={nlsHPCC.EdgeLabel} value={dirtyView.edgeTpl} multiline autoAdjustHeight onChange={(evt, newValue) => {
+                                dirtyView.edgeTpl = newValue;
+                                forceRefresh();
+                            }} />
+                        </div>
+                    </PivotItem>
+                    <PivotItem key="layout" headerText={nlsHPCC.Layout} >
+                        <div style={{ height: innerHeight }}>
+                            <Checkbox label={nlsHPCC.Timeline} checked={dirtyView.showTimeline} onChange={(ev, checked) => {
+                                dirtyView.showTimeline = checked;
+                                forceRefresh();
+                            }} />
+                            <JSONSourceEditor json={dirtyView.layout} toolbar={false} onChange={obj => {
+                                if (obj) {
+                                    dirtyView.layout = obj as DockPanelLayout;
+                                    forceRefresh();
+                                }
+                            }} />
+                        </div>
+                    </PivotItem>
+                    <PivotItem key="all" headerText={nlsHPCC.All} >
+                        <div style={{ height: innerHeight }}>
+                            <JSONSourceEditor json={dirtyView} toolbar={false} onChange={(obj?: MetricsView) => {
+                                if (obj) {
+                                    setDirtyView(obj);
+                                    forceRefresh();
+                                }
+                            }} />
+                        </div>
+                    </PivotItem>
+                </Pivot>
+            </>
+        </MessageBox>
+        <AddLabel show={showAdd} setShow={setShowAdd} onOk={onAddLabel} />
+    </>;
 };
\ No newline at end of file
diff --git a/esp/src/src-react/components/controls/Grid.tsx b/esp/src/src-react/components/controls/Grid.tsx
index c781322a0f2..770b5b759ba 100644
--- a/esp/src/src-react/components/controls/Grid.tsx
+++ b/esp/src/src-react/components/controls/Grid.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { DetailsList, DetailsListLayoutMode, Dropdown, IColumn as _IColumn, ICommandBarItemProps, IDetailsHeaderProps, IDetailsListStyles, mergeStyleSets, Selection, Stack, TooltipHost, TooltipOverflowMode, IRenderFunction, IDetailsRowProps, SelectionMode, ConstrainMode } from "@fluentui/react";
+import { DetailsList, DetailsListLayoutMode, Dropdown, IColumn as _IColumn, ICommandBarItemProps, IDetailsHeaderProps, IDetailsListStyles, mergeStyleSets, Selection, Stack, TooltipHost, TooltipOverflowMode, IRenderFunction, IDetailsRowProps, SelectionMode, ConstrainMode, ISelection } from "@fluentui/react";
 import { Pagination } from "@fluentui/react-experiments/lib/Pagination";
 import { useConst } from "@fluentui/react-hooks";
 import { BaseStore, Memory, QueryRequest, QuerySortItem } from "src/store/Memory";
@@ -169,6 +169,10 @@ export interface FluentStoreStateProps {
     page?: number
 }
 
+function isISelection(selection: any): selection is ISelection {
+    return typeof selection === "object" && "setAllSelected" in selection;
+}
+
 export interface FluentStoreStateResponse {
     selection: any[];
     setSelection: (selection: any[]) => void;
@@ -201,7 +205,7 @@ interface FluentStoreGridProps {
     height: string,
     refresh: RefreshTable,
     selectionMode?: SelectionMode,
-    setSelection: (selection: any[]) => void,
+    setSelection: ISelection | ((selection: any[]) => void),
     setTotal: (total: number) => void,
     onRenderRow?: IRenderFunction<IDetailsRowProps>
 }
@@ -225,11 +229,13 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
     const [items, setItems] = React.useState<any[]>([]);
     const [columnWidths] = useNonReactiveEphemeralPageStore("columnWidths");
 
-    const selectionHandler = useConst(() => new Selection({
-        onSelectionChanged: () => {
-            setSelection(selectionHandler.getSelection());
-        }
-    }));
+    const selectionHandler = useConst(() => {
+        return isISelection(setSelection) ? setSelection : new Selection({
+            onSelectionChanged: () => {
+                setSelection(selectionHandler.getSelection());
+            }
+        });
+    });
 
     const refreshTable = useDeepCallback((clearSelection = false) => {
         if (isNaN(start) || isNaN(count)) return;
@@ -300,7 +306,32 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
         columnWidths.set(column.key, newWidth);
     }, [columnWidths]);
 
-    return <div data-is-scrollable="true" style={{ overflow: "auto", height: "100%" }}>
+    /*  Monitor Scroll Events (hack)
+
+        Essentially we are setting the scrollElement of the DetailsList to the div that contains the DetailsList (rather than a scrollable pane host).
+        See:  https://github.com/microsoft/fluentui/blob/55d3a31042e8972ea373841bef616c68e6ab69f9/packages/react/src/components/List/List.tsx#L355-L369
+
+        Note: Not sure if `_onScroll` call is needed, but excluding for now as it seems to work without it and is more performant.
+    */
+    // const id = useId("fluent-store-grid-");
+    // const detailListScrollComponent = React.useRef<HTMLDivElement | null>(null);
+    // const detailListComponent = React.useRef<IDetailsListEx | null>(null);
+    // const [detailListElement, setDetailListElement] = React.useState<HTMLDivElement | null>(null);
+    // useMount(() => {
+    //     const detailListElement = document.querySelector<HTMLDivElement>(`#${id} .ms-DetailsList`);
+    //     setDetailListElement(detailListElement);
+    //     if (detailListComponent.current?._list?.current) {
+    //         detailListComponent.current._list.current._scrollElement = detailListElement;
+    //     }
+    // });
+    // useOnEvent(detailListScrollComponent, "scroll", () => {
+    //     detailListComponent.current?._list?.current?._onScroll();
+    // });
+    // useOnEvent(detailListScrollComponent, "scroll", () => {
+    //     detailListComponent.current?._list?.current?._onAsyncScrollDebounced();
+    // });
+
+    return <div data-is-scrollable={"true"} style={{ overflow: "auto" }}>
         <DetailsList
             compact={true}
             items={items}
@@ -328,7 +359,8 @@ interface FluentGridProps {
     columns: FluentColumns,
     height?: string,
     selectionMode?: SelectionMode,
-    setSelection: (selection: any[]) => void,
+    defaultSelection?: any[],
+    setSelection: ISelection | ((selection: any[]) => void),
     setTotal: (total: number) => void,
     refresh: RefreshTable,
     onRenderRow?: IRenderFunction<IDetailsRowProps>
@@ -342,6 +374,7 @@ export const FluentGrid: React.FunctionComponent<FluentGridProps> = ({
     columns,
     height,
     selectionMode = SelectionMode.multiple,
+    defaultSelection,
     setSelection,
     setTotal,
     refresh,
@@ -370,7 +403,7 @@ interface FluentPagedGridProps {
     columns: FluentColumns,
     height?: string,
     selectionMode?: SelectionMode,
-    setSelection: (selection: any[]) => void,
+    setSelection: ISelection | ((selection: any[]) => void),
     setTotal: (total: number) => void,
     refresh: RefreshTable,
     onRenderRow?: IRenderFunction<IDetailsRowProps>
diff --git a/esp/src/src-react/hooks/metrics.ts b/esp/src/src-react/hooks/metrics.ts
index 72f78b279f1..fb08eb2d731 100644
--- a/esp/src/src-react/hooks/metrics.ts
+++ b/esp/src/src-react/hooks/metrics.ts
@@ -2,22 +2,25 @@ import * as React from "react";
 import { useConst, useForceUpdate } from "@fluentui/react-hooks";
 import { WsWorkunits, WorkunitsService, IScope } from "@hpcc-js/comms";
 import { scopedLogger } from "@hpcc-js/util";
+import { singletonHook } from "react-singleton-hook";
 import { userKeyValStore } from "src/KeyValStore";
+import { DockPanelLayout } from "../layouts/DockPanel";
 import { useWorkunit } from "./workunit";
 import { useQuery } from "./query";
 import { useCounter } from "./util";
+import { useUserStore } from "./store";
 
 const logger = scopedLogger("src-react/hooks/metrics.ts");
 
-const METRIC_OPTIONS_VERSION = 2;
-const METRIC_OPTIONS_KEY = `MetricOptions-${METRIC_OPTIONS_VERSION}`;
+const METRIC_OPTIONS_2 = "MetricOptions-2";
+const METRIC_OPTIONS_3 = "MetricOptions-3";
 
 export function resetMetricsViews() {
     const store = userKeyValStore();
-    return store?.delete(METRIC_OPTIONS_KEY);
+    return Promise.all([store?.delete(METRIC_OPTIONS_2), store?.delete(METRIC_OPTIONS_3)]);
 }
 
-export interface MetricsOptions {
+export interface MetricsView {
     scopeTypes: string[];
     properties: string[];
     ignoreGlobalStoreOutEdges: boolean;
@@ -25,73 +28,192 @@ export interface MetricsOptions {
     activityTpl;
     edgeTpl;
     sql: string;
-    layout?: object;
+    layout?: DockPanelLayout;
     showTimeline: boolean;
 }
+export type StringMetricsViewMap = { [id: string]: MetricsView };
 
-const defaults: MetricsOptions = {
-    scopeTypes: ["graph", "subgraph", "activity", "operation", "workflow"],
-    properties: ["TimeElapsed"],
-    ignoreGlobalStoreOutEdges: true,
-    subgraphTpl: "%id% - %TimeElapsed%",
-    activityTpl: "%Label%",
-    edgeTpl: "%Label%\n%NumRowsProcessed%\n%SkewMinRowsProcessed% / %SkewMaxRowsProcessed%",
-    sql: "SELECT type, name, TimeElapsed, id\n    FROM metrics\n    WHERE TimeElapsed IS NOT NULL",
-    layout: undefined,
-    showTimeline: true
+interface UserMetricsView {
+    viewId: string;
+    views: StringMetricsViewMap;
+}
+
+const DefaultMetricsViews: StringMetricsViewMap = {
+    Default: {
+        scopeTypes: ["graph", "subgraph", "activity", "operation", "workflow"],
+        properties: ["CostExecute", "TimeElapsed"],
+        ignoreGlobalStoreOutEdges: true,
+        subgraphTpl: "%id% - %TimeElapsed%",
+        activityTpl: "%Label%",
+        edgeTpl: "%Label%\n%NumRowsProcessed%\n%SkewMinRowsProcessed% / %SkewMaxRowsProcessed%",
+        sql: `\
+SELECT type, name, CostExecute, TimeElapsed, id
+    FROM metrics`,
+        layout: undefined,
+        showTimeline: true
+    },
+    Graphs: {
+        scopeTypes: ["graph", "subgraph"],
+        properties: ["CostExecute", "TimeElapsed"],
+        ignoreGlobalStoreOutEdges: true,
+        subgraphTpl: "%id% - %TimeElapsed%",
+        activityTpl: "%Label%",
+        edgeTpl: "%Label%\n%NumRowsProcessed%\n%SkewMinRowsProcessed% / %SkewMaxRowsProcessed%",
+        sql: `\
+SELECT type, name, CostExecute, TimeElapsed, id
+    FROM metrics
+    WHERE type = 'graph' OR type = 'subgraph'`,
+        layout: undefined,
+        showTimeline: true
+    },
+    Activities: {
+        scopeTypes: ["activity"],
+        properties: ["TimeMaxLocalExecute", "TimeMaxTotalExecute"],
+        ignoreGlobalStoreOutEdges: true,
+        subgraphTpl: "%id% - %TimeElapsed%",
+        activityTpl: "%Label%",
+        edgeTpl: "%Label%\n%NumRowsProcessed%\n%SkewMinRowsProcessed% / %SkewMaxRowsProcessed%",
+        sql: `\
+SELECT type, name, TimeLocalExecute, TimeTotalExecute, id
+    FROM metrics
+    WHERE type = 'activity'`,
+        layout: undefined,
+        showTimeline: true
+    },
+    Peaks: {
+        scopeTypes: ["subgraph"],
+        properties: ["NodeMaxPeakMemory", "NodeMaxPeakRowMemory", "NodeMinPeakMemory", "NodeMinPeakRowMemory", "SizeAvgPeakMemory", "SizeAvgPeakRowMemory", "SizeDeltaPeakMemory", "SizeDeltaPeakRowMemory", "SizeMaxPeakMemory", "SizeMaxPeakRowMemory", "SizeMinPeakMemory", "SizeMinPeakRowMemory", "SizePeakMemory", "SizeStdDevPeakMemory", "SizeStdDevPeakRowMemory", "SkewMaxPeakMemory", "SkewMaxPeakRowMemory", "SkewMinPeakMemory", "SkewMinPeakRowMemory"],
+        ignoreGlobalStoreOutEdges: true,
+        subgraphTpl: "%id% - %TimeElapsed%",
+        activityTpl: "%Label%",
+        edgeTpl: "%Label%\n%NumRowsProcessed%\n%SkewMinRowsProcessed% / %SkewMaxRowsProcessed%",
+        sql: `\
+SELECT type, name, NodeMaxPeakMemory, NodeMaxPeakRowMemory, NodeMinPeakMemory, NodeMinPeakRowMemory, SizeAvgPeakMemory, SizeAvgPeakRowMemory, SizeDeltaPeakMemory, SizeDeltaPeakRowMemory, SizeMaxPeakMemory, SizeMaxPeakRowMemory, SizeMinPeakMemory, SizeMinPeakRowMemory, SizePeakMemory, SizeStdDevPeakMemory, SizeStdDevPeakRowMemory, SkewMaxPeakMemory, SkewMaxPeakRowMemory, SkewMinPeakMemory, SkewMinPeakRowMemory, id
+    FROM metrics
+    WHERE type = 'subgraph'`,
+        layout: undefined,
+        showTimeline: true
+    }
 };
 
-const options: MetricsOptions = { ...defaults };
+// const _defaultUserViews = JSON.stringify({ viewId: _viewId.value, views: _views.value });
 
-function checkLayout(options: MetricsOptions): boolean {
-    if (options?.layout && !options?.layout?.["main"]) {
-        delete options.layout;
-    }
-    return !!options?.layout;
+export function clone<T>(_: T): T {
+    return JSON.parse(JSON.stringify(_));
+}
+
+// function checkLayout(options: MetricsView): boolean {
+//     if (options?.layout && !options?.layout?.["main"]) {
+//         delete options.layout;
+//     }
+//     return !!options?.layout;
+// }
+
+export interface useMetricsViewsResult {
+    viewIds: string[];
+    viewId: string;
+    setViewId: (id: string, forceRefresh?: boolean) => void;
+    view: MetricsView;
+    addView: (label: string, view: Partial<MetricsView>) => void;
+    updateView: (view: Partial<MetricsView>, forceRefresh?: boolean) => void;
+    resetView: (forceRefresh?: boolean) => void;
+    save: () => void;
 }
 
-export function useMetricsOptions(): [MetricsOptions, (opts: MetricsOptions) => void, () => void, (toDefaults?: boolean) => void] {
+const defaultUserMetricViews = JSON.stringify({ viewId: "Default", views: DefaultMetricsViews });
+
+const defaultState: useMetricsViewsResult = {
+    viewIds: Object.keys(DefaultMetricsViews),
+    viewId: "Default",
+    setViewId: (id: string, forceRefresh?: boolean) => { throw new Error("You must useMetricsView before usage."); },
+    view: DefaultMetricsViews.Default,
+    addView: (label: string, view: Partial<MetricsView>) => { throw new Error("You must useMetricsView before usage."); },
+    updateView: (view: Partial<MetricsView>, forceRefresh?: boolean) => { throw new Error("You must useMetricsView before usage."); },
+    resetView: (forceRefresh?: boolean) => { throw new Error("You must useMetricsView before usage."); },
+    save: () => { throw new Error("You must useMetricsView before usage."); },
+};
+
+function useMetricsViewsImpl(): useMetricsViewsResult {
 
-    const store = useConst(() => userKeyValStore());
+    const [loaded, setLoaded] = React.useState(false);
+    const [origViews, setOrigViews] = React.useState<StringMetricsViewMap>(clone(DefaultMetricsViews));
+    const [views, setViews] = React.useState<StringMetricsViewMap>(clone(DefaultMetricsViews));
+    const [viewIds, setViewIds] = React.useState<string[]>(Object.keys(views));
+    const [viewId, setViewId] = React.useState<string>(viewIds[0]);
+    const [view, setView] = React.useState<MetricsView>(views[viewId]);
     const refresh = useForceUpdate();
 
-    const setOptions = React.useCallback((opts: MetricsOptions) => {
-        for (const key in opts) {
-            options[key] = opts[key];
+    const [metricViewStr, setMericViewStr, _resetMetricsViewStr] = useUserStore<string>(METRIC_OPTIONS_3, defaultUserMetricViews);
+    React.useEffect(() => {
+        if (metricViewStr && !loaded) {
+            try {
+                const userView: UserMetricsView = JSON.parse(metricViewStr);
+                setOrigViews(clone(userView.views));
+                setViews(userView.views);
+                setViewIds(Object.keys(userView.views));
+                setViewId(userView.viewId);
+                setLoaded(true);
+            } catch (e) {
+                logger.error(e);
+                const def = clone(DefaultMetricsViews);
+                const keys = Object.keys(def);
+                setViews(def);
+                setViewIds(keys);
+                setViewId(keys[0]);
+            }
         }
+    }, [loaded, metricViewStr, setViewId]);
+
+    React.useEffect(() => {
+        setView(views[viewId]);
+    }, [viewId, views]);
+
+    const addView = React.useCallback((label: string, _: Partial<MetricsView>) => {
+        origViews[label] = clone(view);
+        for (const key in _) {
+            origViews[label] = _[key];
+        }
+        setViewId(label);
         refresh();
-    }, [refresh]);
+    }, [origViews, refresh, view]);
 
-    const save = React.useCallback(() => {
-        if (checkLayout(options)) {
-            store?.set(METRIC_OPTIONS_KEY, JSON.stringify(options), true);
+    const updateView = React.useCallback((_: Partial<MetricsView>, forceRefresh = false) => {
+        for (const key in _) {
+            view[key] = _[key];
         }
-    }, [store]);
-
-    const reset = React.useCallback((toDefaults: boolean = false) => {
-        if (toDefaults) {
-            setOptions({ ...defaults });
-        } else {
-            store?.get(METRIC_OPTIONS_KEY).then(opts => {
-                const options = JSON.parse(opts);
-                checkLayout(options);
-                setOptions({ ...defaults, ...options });
-            });
+        if (forceRefresh) {
+            refresh();
         }
-    }, [setOptions, store]);
+    }, [refresh, view]);
 
-    React.useEffect(() => {
-        reset();
-        const handle = store?.monitor(() => {
-            reset();
-        });
+    const resetView = React.useCallback((forceRefresh = false) => {
+        const def = DefaultMetricsViews[viewId] ?? DefaultMetricsViews["Default"];
+        for (const key in def) {
+            view[key] = def[key];
+        }
+        if (forceRefresh) {
+            refresh();
+        }
+    }, [refresh, view, viewId]);
 
-        return () => handle?.release();
-    }, [reset, store]);
+    const save = React.useCallback(() => {
+        return setMericViewStr(JSON.stringify({ viewId, views }));
+    }, [viewId, views, setMericViewStr]);
 
-    return [options, setOptions, save, reset];
+    return {
+        viewIds,
+        viewId,
+        setViewId,
+        view,
+        addView,
+        updateView,
+        resetView,
+        save
+    };
 }
 
+export const useMetricsViews = singletonHook(defaultState, useMetricsViewsImpl);
+
 export function useMetricMeta(): [string[], string[]] {
 
     const service = useConst(() => new WorkunitsService({ baseUrl: "" }));
diff --git a/esp/src/src-react/util/metricGraph.ts b/esp/src/src-react/util/metricGraph.ts
index 985e5a9c071..5322f65aac6 100644
--- a/esp/src/src-react/util/metricGraph.ts
+++ b/esp/src/src-react/util/metricGraph.ts
@@ -3,7 +3,7 @@ import type { IScope } from "@hpcc-js/comms";
 import { graphviz } from "@hpcc-js/graph";
 import { Graph2, hashSum, scopedLogger } from "@hpcc-js/util";
 import { format } from "src/Utility";
-import { MetricsOptions } from "../hooks/metrics";
+import { MetricsView } from "../hooks/metrics";
 
 import "/src-react/util/metricGraph.css";
 
@@ -216,7 +216,7 @@ export class MetricGraph extends Graph2<IScope, IScopeEdge, IScope> {
         return id.replace(/\s/, "_");
     }
 
-    vertexLabel(v: IScope, options: MetricsOptions): string {
+    vertexLabel(v: IScope, options: MetricsView): string {
         return v.type === "activity" ? format(options.activityTpl, v) : v.Label || v.id;
     }
 
@@ -240,13 +240,13 @@ export class MetricGraph extends Graph2<IScope, IScopeEdge, IScope> {
     }
 
     protected _dedupVertices: { [scopeName: string]: boolean } = {};
-    vertexTpl(v: IScope, options: MetricsOptions): string {
+    vertexTpl(v: IScope, options: MetricsView): string {
         if (this._dedupVertices[v.id] === true) return "";
         this._dedupVertices[v.id] = true;
         return `"${v.id}" [id="${encodeID(v.name)}" label="${encodeLabel(this.vertexLabel(v, options))}" shape="${shape(v)}" class="${this.vertexStatus(v)}"]`;
     }
 
-    hiddenTpl(v: IScope, options: MetricsOptions): string {
+    hiddenTpl(v: IScope, options: MetricsView): string {
         if (this._dedupVertices[v.id] === true) return "";
         this._dedupVertices[v.id] = true;
         return `"${v.id}" [id="${encodeID(v.name)}" label="${encodeLabel(this.vertexLabel(v, options))}" shape="${shape(v)}" class="${this.vertexStatus(v)}" rank="min"]`;
@@ -279,7 +279,7 @@ export class MetricGraph extends Graph2<IScope, IScopeEdge, IScope> {
     }
 
     protected _dedupEdges: { [scopeName: string]: boolean } = {};
-    edgeTpl(e: IScopeEdge, options: MetricsOptions) {
+    edgeTpl(e: IScopeEdge, options: MetricsView) {
         if (this._dedupEdges[e.id] === true) return "";
         this._dedupEdges[e.id] = true;
         if (options.ignoreGlobalStoreOutEdges && this.vertex(this._activityIndex[e.IdSource]).Kind === "22") {
@@ -303,7 +303,7 @@ export class MetricGraph extends Graph2<IScope, IScopeEdge, IScope> {
     }
 
     protected _dedupSubgraphs: { [scopeName: string]: boolean } = {};
-    subgraphTpl(sg: IScope, options: MetricsOptions): string {
+    subgraphTpl(sg: IScope, options: MetricsView): string {
         if (this._dedupSubgraphs[sg.id] === true) return "";
         this._dedupSubgraphs[sg.id] = true;
         const childTpls: string[] = [];
@@ -332,7 +332,7 @@ subgraph cluster_${encodeID(sg.id)} {
 }`;
     }
 
-    graphTpl(items: IScope[] = [], options: MetricsOptions) {
+    graphTpl(items: IScope[] = [], options: MetricsView) {
         this._dedupSubgraphs = {};
         this._dedupVertices = {};
         this._dedupEdges = {};