fix: first click on zoom to data doesn't work

questdb · Dec 16, 2024 · 3ed7981 · 3ed7981
1 parent 99c6e5a
commit 3ed7981
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 66 deletions.
diff --git a/packages/web-console/src/scenes/Editor/Metrics/graph.tsx b/packages/web-console/src/scenes/Editor/Metrics/graph.tsx
@@ -4,7 +4,8 @@ import { MetricDuration, Widget, xAxisFormat, hasData } from "./utils"
 import { useGraphOptions } from "./useGraphOptions"
 import uPlot from "uplot"
 import UplotReact from "uplot-react"
-import { Box, Loader } from "@questdb/react-components"
+import { Box, Button, Loader } from "@questdb/react-components"
+import { Text } from "../../../components/Text"
 
 const Actions = styled.div`
   margin-right: 0;
@@ -42,40 +43,19 @@ const GraphWrapper = styled(Box).attrs({
   flexDirection: "column",
   align: "center",
 })`
+  position: relative;
   padding: 1rem 0;
+`
 
-  .graph-no-data {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    width: 100%;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
-  }
-
-  .graph-no-data-text {
-    color: ${({ theme }) => theme.color.gray2};
-    font-size: 1.4rem;
-    text-align: center;
-  }
-
-  .graph-no-data-button {
-    align-self: center;
-    background-color: ${({ theme }) => theme.color.selection};
-    border: none;
-    color: ${({ theme }) => theme.color.foreground};
-    border-radius: 0.4rem;
-    height: 3rem;
-    padding: 0 1rem;
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${({ theme }) => theme.color.comment};
-    }
-  }
+const GraphOverlay = styled(Box).attrs({
+  flexDirection: "column",
+  align: "center",
+  justifyContent: "center",
+})`
+  width: 100%;
+  height: 15rem;
+  position: absolute;
+  z-index: 1;
 `
 
 const Label = styled.div`
@@ -93,7 +73,6 @@ const LabelValue = styled.span`
 type Props = {
   dateFrom: Date
   dateTo: Date
-  lastRefresh?: Date
   tableId?: number
   tableName?: string
   beforeLabel?: React.ReactNode
@@ -170,6 +149,24 @@ export const Graph = ({
         <Actions>{actions}</Actions>
       </Header>
       <GraphWrapper>
+        {!hasData(data) && !loading && (
+          <GraphOverlay>
+            {isTableMetric && !tableName ? (
+              <Text color="gray2">
+                {tableId
+                  ? "Table does not exist. Please select another one"
+                  : "Select a table to see metrics"}
+              </Text>
+            ) : (
+              <Text color="gray2">No data available for this period</Text>
+            )}
+            {canZoomToData && (
+              <Button skin="secondary" onClick={onZoomToData}>
+                Zoom to data
+              </Button>
+            )}
+          </GraphOverlay>
+        )}
         <UplotReact
           options={{
             ...graphOptions,
@@ -179,34 +176,6 @@ export const Graph = ({
           data={data}
           onCreate={(uplot) => {
             uPlotRef.current = uplot
-            if (!hasData(data) && !loading) {
-              const noData = document.createElement("div")
-              noData.className = "graph-no-data"
-              uplot.over.appendChild(noData)
-
-              const noDataText = document.createElement("span")
-              if (isTableMetric && !tableName) {
-                noDataText.innerText = tableId
-                  ? "Table does not exist. Please select another one"
-                  : "Select a table to see metrics"
-              } else {
-                noDataText.innerText = "No data available for this period"
-              }
-              noDataText.className = "graph-no-data-text"
-              noData.appendChild(noDataText)
-
-              if (canZoomToData) {
-                const zoomToDataButton = document.createElement("button")
-                zoomToDataButton.className = "graph-no-data-button"
-                zoomToDataButton.innerText = "Zoom to data"
-                zoomToDataButton.onclick = () => {
-                  if (onZoomToData) {
-                    onZoomToData()
-                  }
-                }
-                noData.appendChild(zoomToDataButton)
-              }
-            }
           }}
         />
         <Label>

diff --git a/packages/web-console/src/scenes/Editor/Metrics/metric.tsx b/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
@@ -51,7 +51,6 @@ export const Metric = ({
   onTableChange,
   onColorChange,
   onMetricDurationChange,
-  lastRefresh,
   fetchMode,
   rollingAppendLimit,
   sampleBy,
@@ -62,13 +61,12 @@ export const Metric = ({
   onTableChange: (metric: MetricItem, tableId: number) => void
   onColorChange: (metric: MetricItem, color: string) => void
   onMetricDurationChange: (duration: MetricDuration) => void
-  lastRefresh?: Date
   fetchMode: FetchMode
   rollingAppendLimit: number
   sampleBy: SampleBy
 }) => {
   const { quest } = useContext(QuestContext)
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(metric.tableId !== undefined)
   const [data, setData] = useState<uPlot.AlignedData>([[], []])
   const [lastNotNull, setLastNotNull] = useState<number>()
   const [colorPickerOpen, setColorPickerOpen] = useState(false)
@@ -203,7 +201,6 @@ export const Metric = ({
     <Graph
       dateFrom={dateFrom}
       dateTo={dateTo}
-      lastRefresh={lastRefresh}
       data={metric.tableId && hasData(data) ? data : [[], []]}
       canZoomToData={canZoomToData}
       onZoomToData={handleZoomToData}