Move result actions into sidebar

questdb · Sep 18, 2023 · 352c89b · 352c89b
1 parent 0bf04f5
commit 352c89b
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 184 deletions.
diff --git a/packages/web-console/src/components/Sidebar/index.tsx b/packages/web-console/src/components/Sidebar/index.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components"
 import { Box } from "../Box"
 
 export const Sidebar = styled(Box).attrs({ flexDirection: "column" })`
-  width: 4rem;
+  width: 4.5rem;
   height: 100%;
   background: ${({ theme }) => theme.color.backgroundDarker};
 `
diff --git a/packages/web-console/src/components/Sidebar/navigation.tsx b/packages/web-console/src/components/Sidebar/navigation.tsx
@@ -0,0 +1,38 @@
+import styled from "styled-components"
+import { PrimaryToggleButton } from ".."
+
+type NavigationProps = Readonly<{
+  selected: boolean
+}>
+
+export const Navigation = styled(PrimaryToggleButton)<NavigationProps>`
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 4rem;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  & > span {
+    margin-left: 0 !important;
+  }
+
+  & > :not(:first-child) {
+    margin-top: 0.3rem;
+  }
+`
+
+export const DisabledNavigation = styled.div`
+  display: flex;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  flex: 0 0 4rem;
+  align-items: center;
+  justify-content: center;
+
+  &:disabled {
+    pointer-events: none;
+    cursor: default;
+  }
+`
diff --git a/packages/web-console/src/scenes/Console/index.tsx b/packages/web-console/src/scenes/Console/index.tsx
@@ -1,6 +1,6 @@
-import React from "react"
+import React, { useState } from "react"
 import styled from "styled-components"
-import { Splitter, useScreenSize } from "../../components"
+import { Splitter, useScreenSize, PopperHover } from "../../components"
 import Editor from "../Editor"
 import Result from "../Result"
 import Schema from "../Schema"
@@ -12,8 +12,12 @@ import { useLocalStorage } from "../../providers/LocalStorageProvider"
 import { StoreKey } from "../../utils/localStorage/types"
 import { useSelector, useDispatch } from "react-redux"
 import { selectors, actions } from "../../store"
+import { Tooltip } from "../../components/Tooltip"
 import { Sidebar } from "../../components/Sidebar"
 import { color } from "../../utils"
+import { Navigation } from "../../components/Sidebar/navigation"
+import { Grid, PieChart } from "styled-icons/remix-line"
+import { ViewMode } from "./types"
 
 const Root = styled.div`
   display: flex;
@@ -35,7 +39,7 @@ const Bottom = styled.div`
 const Logo = styled.div`
   position: relative;
   display: flex;
-  width: 4rem;
+  width: 4.5rem;
   height: 4rem;
   background: ${color("black")};
   z-index: 1;
@@ -44,12 +48,30 @@ const Logo = styled.div`
   cursor: pointer;
 `
 
+const viewModes: {
+  icon: React.ReactNode
+  mode: ViewMode
+  tooltipText: string
+}[] = [
+  {
+    icon: <Grid size="18px" />,
+    mode: "grid",
+    tooltipText: "Grid",
+  },
+  {
+    icon: <PieChart size="18px" />,
+    mode: "chart",
+    tooltipText: "Chart",
+  },
+]
+
 const Console = () => {
   const { sm } = useScreenSize()
   const { editorSplitterBasis, resultsSplitterBasis, updateSettings } =
     useLocalStorage()
   const result = useSelector(selectors.query.getResult)
   const dispatch = useDispatch()
+  const [resultViewMode, setResultViewMode] = useState<ViewMode>("grid")
 
   const handleEditorSplitterChange = useCallback((value) => {
     updateSettings(StoreKey.EDITOR_SPLITTER_BASIS, value)
@@ -96,8 +118,28 @@ const Console = () => {
             </Splitter>
           </Top>
           <Bottom>
-            <Sidebar>bottom</Sidebar>
-            {result ? <Result /> : <ZeroState />}
+            <Sidebar>
+              {result &&
+                viewModes.map(({ icon, mode, tooltipText }) => (
+                  <PopperHover
+                    key={mode}
+                    delay={350}
+                    placement="right"
+                    trigger={
+                      <Navigation
+                        direction="left"
+                        onClick={() => setResultViewMode(mode)}
+                        selected={resultViewMode === mode}
+                      >
+                        {icon}
+                      </Navigation>
+                    }
+                  >
+                    <Tooltip>{tooltipText}</Tooltip>
+                  </PopperHover>
+                ))}
+            </Sidebar>
+            {result ? <Result viewMode={resultViewMode} /> : <ZeroState />}
           </Bottom>
         </Splitter>
       </EditorProvider>

diff --git a/packages/web-console/src/scenes/Console/types.ts b/packages/web-console/src/scenes/Console/types.ts
@@ -0,0 +1 @@
+export type ViewMode = "chart" | "grid"