From acc05e16c1d3826ddb1f9487c03dd2be18bb40b3 Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Tue, 30 Nov 2021 02:06:26 +0300
Subject: [PATCH] feat: store display type in URL (#1855)

---
 .../Home/Configurator/DisplayTypeSwitch.tsx          | 12 ++++++++----
 app/vmui/packages/vmui/src/state/common/reducer.ts   |  2 +-
 app/vmui/packages/vmui/src/utils/query-string.ts     |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/vmui/packages/vmui/src/components/Home/Configurator/DisplayTypeSwitch.tsx b/app/vmui/packages/vmui/src/components/Home/Configurator/DisplayTypeSwitch.tsx
index 84f920db0..a60f19621 100644
--- a/app/vmui/packages/vmui/src/components/Home/Configurator/DisplayTypeSwitch.tsx
+++ b/app/vmui/packages/vmui/src/components/Home/Configurator/DisplayTypeSwitch.tsx
@@ -12,8 +12,12 @@ export type DisplayType = "table" | "chart" | "code";
 
 const StylizedToggleButton = withStyles({
   root: {
-    padding: 6,
+    display: "grid",
+    gridTemplateColumns: "18px auto",
+    gridGap: 6,
+    padding: "8px 12px",
     color: "white",
+    lineHeight: "19px",
     "&.Mui-selected": {
       color: "white"
     }
@@ -34,13 +38,13 @@ export const DisplayTypeSwitch: FC = () => {
         dispatch({type: "SET_DISPLAY_TYPE", payload: val ?? displayType})
     }>
     <StylizedToggleButton value="chart" aria-label="display as chart">
-      <ShowChartIcon/>&nbsp;Query Range as Chart
+      <ShowChartIcon/><span>Query Range as Chart</span>
     </StylizedToggleButton>
     <StylizedToggleButton value="code" aria-label="display as code">
-      <CodeIcon/>&nbsp;Instant Query as JSON
+      <CodeIcon/><span>Instant Query as JSON</span>
     </StylizedToggleButton>
     <StylizedToggleButton value="table" aria-label="display as table">
-      <TableChartIcon/>&nbsp;Instant Query as Table
+      <TableChartIcon/><span>Instant Query as Table</span>
     </StylizedToggleButton>
   </ToggleButtonGroup>;
 };
\ No newline at end of file
diff --git a/app/vmui/packages/vmui/src/state/common/reducer.ts b/app/vmui/packages/vmui/src/state/common/reducer.ts
index a0b3ac250..64a5a5dd6 100644
--- a/app/vmui/packages/vmui/src/state/common/reducer.ts
+++ b/app/vmui/packages/vmui/src/state/common/reducer.ts
@@ -50,7 +50,7 @@ const query = getQueryStringValue("g0.expr", "") as string;
 
 export const initialState: AppState = {
   serverUrl: getDefaultServer(),
-  displayType: "chart",
+  displayType: getQueryStringValue("tab", "chart") as DisplayType,
   query: query, // demo_memory_usage_bytes
   queryHistory: { index: 0, values: [query] },
   time: {
diff --git a/app/vmui/packages/vmui/src/utils/query-string.ts b/app/vmui/packages/vmui/src/utils/query-string.ts
index 49270ef63..8d8721994 100644
--- a/app/vmui/packages/vmui/src/utils/query-string.ts
+++ b/app/vmui/packages/vmui/src/utils/query-string.ts
@@ -6,7 +6,7 @@ const stateToUrlParams = {
   "time.duration": "g0.range_input",
   "time.period.date": "g0.end_input",
   "time.period.step": "g0.step_input",
-  "stacked": "g0.stacked",
+  "displayType": "tab"
 };
 
 // TODO need function for detect types.