feat: store display type in URL (#1855)

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>;
 };

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: {

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.