From be51fba2272d3be72afd93b09d2af65890064990 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 8 Jan 2025 11:20:55 +0100
Subject: [PATCH] ui: keep state in storage

---
 frontend/app/components/Charts/utils.ts       | 10 ---------
 .../Dashboard/components/WidgetOptions.tsx    |  2 +-
 .../components/WidgetView/WidgetView.tsx      | 22 +++++++++++++++++--
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/Charts/utils.ts b/frontend/app/components/Charts/utils.ts
index 849942947..d3c633576 100644
--- a/frontend/app/components/Charts/utils.ts
+++ b/frontend/app/components/Charts/utils.ts
@@ -199,22 +199,12 @@ export function customTooltipFormatter(uuid: string) {
       const partnerColor =
         (window as any).__seriesColorMap?.[uuid]?.[partnerName] || '#999';
       tooltipContent += `
-      <div class="flex gap-2 items-center mt-2">
-        <div style="
-          border-radius: 99px; 
-          background: ${partnerColor}; 
-          width: 1rem; 
-          height: 1rem;">
-        </div>
-        <div class="font-medium">${partnerName}</div>
-      </div>
       <div style="border-left: 2px dashed ${partnerColor};" class="flex flex-col px-2 ml-2">
         <div class="text-neutral-600 text-sm"> 
           ${secondTs ? formatTimeOrDate(secondTs) : categoryLabel}
         </div>
         <div class="flex items-center gap-1">
           <div class="font-medium">${partnerVal ?? '—'}</div>
-          ${buildCompareTag(partnerVal, value)}
         </div>
       </div>
     `;
diff --git a/frontend/app/components/Dashboard/components/WidgetOptions.tsx b/frontend/app/components/Dashboard/components/WidgetOptions.tsx
index 4fed27829..10cec637f 100644
--- a/frontend/app/components/Dashboard/components/WidgetOptions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetOptions.tsx
@@ -138,7 +138,7 @@ const WidgetViewTypeOptions = observer(({ metric }: { metric: any }) => {
     lineChart: 'Line',
     areaChart: 'Stacked Area',
     barChart: 'Column',
-    progressChart: 'Vertical Bar',
+    progressChart: 'Bar',
     columnChart: 'Horizontal Bar',
     pieChart: 'Pie',
     metric: 'Metric',
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
index ddc6e98f9..a6b197dae 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
@@ -33,8 +33,15 @@ interface Props {
   siteId: any;
 }
 
+const LAYOUT_KEY = '$__layout__$'
+
+function getDefaultState() {
+  const layout = localStorage.getItem(LAYOUT_KEY)
+  return layout || 'flex-row'
+}
+
 function WidgetView(props: Props) {
-  const [layout, setLayout] = useState('flex-row');
+  const [layout, setLayout] = useState(getDefaultState);
   const {
     match: {
       params: { siteId, dashboardId, metricId },
@@ -65,7 +72,13 @@ function WidgetView(props: Props) {
         metricStore.init();
       }
     }
+    const wasCollapsed = settingsStore.menuCollapsed;
     settingsStore.updateMenuCollapsed(true)
+    return () => {
+      if (!wasCollapsed) {
+        settingsStore.updateMenuCollapsed(false)
+      }
+    }
   }, []);
 
   const undoChanges = () => {
@@ -104,6 +117,11 @@ function WidgetView(props: Props) {
     }
   };
 
+  const updateLayout = (layout: string) => {
+    localStorage.setItem(LAYOUT_KEY, layout)
+    setLayout(layout)
+  }
+
   return (
     <Loader loading={loading}>
       <Prompt
@@ -148,7 +166,7 @@ function WidgetView(props: Props) {
                 <Segmented
                   size='small'
                   value={layout}
-                  onChange={setLayout}
+                  onChange={updateLayout}
                   options={[
                     {
                       value: 'flex-row',