StatsHouse UI: fix bugs (#387)

* StatsHouse UI: fix case-sensitive search * StatsHouse UI: fix reload setting dash page * StatsHouse UI: fix plot title
VKCOM · Apr 24, 2023 · a9606a0 · a9606a0
1 parent 148fbb3
commit a9606a0
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/statshouse-ui/src/components/Plot/PlotHeaderTitle.tsx b/statshouse-ui/src/components/Plot/PlotHeaderTitle.tsx
@@ -45,7 +45,7 @@ export function PlotHeaderTitle({ indexPlot, compact, dashboard }: PlotHeaderTit
         : params.what.map((qw) => whatToWhatDesc(qw)).join(', '),
     [params.metricName, params.what, plotData.whats]
   );
-  const metricFullName = useMemo(() => metricName + (what ? ': ' + what : ''), [metricName, what]);
+  const metricFullName = useMemo(() => (metricName ? metricName + (what ? ': ' + what : '') : ''), [metricName, what]);
 
   const editCustomName = useCallback(
     (value: string) => {
@@ -92,12 +92,18 @@ export function PlotHeaderTitle({ indexPlot, compact, dashboard }: PlotHeaderTit
           </span>
         ) : (
           <span className="overflow-hidden d-flex flex-row w-100 justify-content-center" title={metricFullName}>
-            <span className="text-body text-truncate">{metricName}</span>
-            {!!what && (
+            {metricName ? (
               <>
-                <span>: </span>
-                <span className="me-3 text-truncate">{what}</span>
+                <span className="text-body text-truncate">{metricName}</span>
+                {!!what && (
+                  <>
+                    <span>:&nbsp;</span>
+                    <span className="me-3 text-truncate">{what}</span>
+                  </>
+                )}
               </>
+            ) : (
+              <span>&nbsp;</span>
             )}
           </span>
         )}
@@ -118,7 +124,8 @@ export function PlotHeaderTitle({ indexPlot, compact, dashboard }: PlotHeaderTit
           <span className="text-body">{metricName}</span>
           {!!what && (
             <>
-              :<span className="me-3"> {what}</span>
+              <span>:&nbsp;</span>
+              <span className="me-3">{what}</span>
             </>
           )}
         </>
@@ -129,7 +136,8 @@ export function PlotHeaderTitle({ indexPlot, compact, dashboard }: PlotHeaderTit
       className="flex-grow-1"
       defaultValue={params.customName || metricFullName}
       placeholder={
-        params.customName || (
+        params.customName ||
+        (metricName && (
           <>
             <span>{metricName}</span>
             {!!what && (
@@ -138,7 +146,7 @@ export function PlotHeaderTitle({ indexPlot, compact, dashboard }: PlotHeaderTit
               </>
             )}
           </>
-        )
+        )) || <span>&nbsp;</span>
       }
       inputPlaceholder={metricFullName}
       onSave={editCustomName}

diff --git a/statshouse-ui/src/store/statshouse.ts b/statshouse-ui/src/store/statshouse.ts
@@ -385,17 +385,17 @@ export const statsHouseState: StateCreator<StatsHouseStore, [['zustand/immer', n
           store.timeRange = new TimeRange(params.timeRange);
         }
         store.params = mergeLeft(store.params, params);
+        if (resetPlot) {
+          store.plotsData = [];
+          store.previews = [];
+          store.dashboardLayoutEdit = false;
+        }
         if (store.params.tabNum < -1) {
           store.dashboardLayoutEdit = true;
         }
         if (store.params.tabNum >= 0) {
           store.dashboardLayoutEdit = false;
         }
-        if (resetPlot) {
-          store.plotsData = [];
-          store.previews = [];
-          store.dashboardLayoutEdit = false;
-        }
       });
       getState().params.plots.forEach((plot, index) => {
         if (changedTimeRange || changedTimeShifts || prevParams.plots[index] !== plot) {

diff --git a/statshouse-ui/src/view/DashboardListView.tsx b/statshouse-ui/src/view/DashboardListView.tsx
@@ -24,8 +24,8 @@ export const DashboardListView: React.FC<DashboardListViewProps> = () => {
     const res = listServerDashboard.filter(
       (item) =>
         searchInput.value === '' ||
-        item.name.includes(searchInput.value) ||
-        item.description.includes(searchInput.value)
+        item.name.toLowerCase().includes(searchInput.value.toLowerCase()) ||
+        item.description.toLowerCase().includes(searchInput.value.toLowerCase())
     );
     res.sort(sortByKey.bind(null, 'name'));
     return res;