Merge pull request #1204 from visualize-admin/chore/update-debug-panel

chore: Add time measuring to SPARQLClientStream and CONSTRUCT queries

CHANGELOG.md

@@ -11,6 +11,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 - Fixes
   - Cascading filters are not stuck anymore in the loading mode in some cases
+- Maintenance
+  - GQL debug panel now includes queries fired through SPARQLClientStream (e.g. hierarchies) and CONSTRUCT queries
 
 # [3.22.8] - 2023-09-29
 

app/gql-flamegraph/devtool.tsx

@@ -1,43 +1,42 @@
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import {
   Accordion,
-  AccordionSummary,
   AccordionDetails,
-  Typography,
+  AccordionProps,
+  AccordionSummary,
   Box,
+  Button,
+  Divider,
   Drawer,
-  AccordionProps,
-  IconButton,
   Grow,
+  IconButton,
   IconButtonProps,
   Link,
   LinkProps,
+  Switch,
+  SwitchProps,
   Tab,
-  Button,
-  Divider,
+  Typography,
 } from "@mui/material";
-import { Switch, SwitchProps } from "@mui/material";
 import { Group } from "@visx/group";
 import { Text } from "@visx/text";
 import { scaleLinear } from "d3-scale";
-import { OperationDefinitionNode } from "graphql";
-import { print } from "graphql";
+import { OperationDefinitionNode, print } from "graphql";
 import maxBy from "lodash/maxBy";
 import minBy from "lodash/minBy";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
 import mitt from "mitt";
-import React, { useEffect, useRef, useState } from "react";
-import { useMemo } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Exchange, Operation, OperationResult } from "urql";
 import { pipe, tap } from "wonka";
 
 import useDisclosure from "@/components/use-disclosure";
-import { useFlag, flag, useFlags } from "@/flags";
+import { flag, useFlag, useFlags } from "@/flags";
 import { RequestQueryMeta } from "@/graphql/query-meta";
 import useEvent from "@/utils/use-event";
 
-export type Timings = Record<
+type Timings = Record<
   string,
   { start: number; end: number; children?: Timings }
 >;
@@ -115,35 +114,34 @@ const Flamegraph = ({
   }, [timings]);
 
   const barHeight = 15;
+
   return (
-    <>
-      <Box
-        sx={{
-          position: "relative",
-          "& svg text": { fontSize: "10px" },
-        }}
-      >
-        <svg width={900} height={50 + rects.length * barHeight}>
-          <g>
-            {rects.map((r, i) => (
-              <Group left={r.x0} top={i * barHeight} key={i}>
-                <rect
-                  x={0}
-                  y={0}
-                  height={barHeight}
-                  width={r.x1 - r.x0}
-                  fill="#ccc"
-                />
-                <Text verticalAnchor="start" y={2}>
-                  {`${r.duration}ms - ${r.path.join(">")}
+    <Box
+      sx={{
+        position: "relative",
+        "& svg text": { fontSize: "10px" },
+      }}
+    >
+      <svg width={900} height={50 + rects.length * barHeight}>
+        <g>
+          {rects.map((r, i) => (
+            <Group left={r.x0} top={i * barHeight} key={i}>
+              <rect
+                x={0}
+                y={0}
+                height={barHeight}
+                width={r.x1 - r.x0}
+                fill="#ccc"
+              />
+              <Text verticalAnchor="start" y={2}>
+                {`${r.duration}ms - ${r.path.join(">")}
           `}
-                </Text>
-              </Group>
-            ))}
-          </g>{" "}
-        </svg>
-      </Box>
-    </>
+              </Text>
+            </Group>
+          ))}
+        </g>{" "}
+      </svg>
+    </Box>
   );
 };
 
@@ -200,6 +198,7 @@ const AccordionOperation = ({
     }
     return maxBy(all, (x) => x.end)?.end! - minBy(all, (x) => x.start)?.start!;
   }, [result?.extensions?.timings]);
+
   return (
     <Accordion {...accordionProps}>
       <AccordionSummary>
@@ -269,7 +268,7 @@ const AccordionOperation = ({
                 SPARQL queries ({result?.extensions?.queries.length})
               </Typography>
               <Queries
-                queries={sortBy(result?.extensions?.queries, (q) => {
+                queries={sortBy(result?.extensions.queries, (q) => {
                   return -(q.endTime - q.startTime);
                 })}
               />
@@ -281,11 +280,7 @@ const AccordionOperation = ({
   );
 };
 
-const Queries = ({
-  queries,
-}: {
-  queries: { startTime: number; endTime: number; text: string }[];
-}) => {
+const Queries = ({ queries }: { queries: RequestQueryMeta[] }) => {
   return (
     <div>
       {queries.map((q, i) => {

app/graphql/context.tsx

@@ -112,11 +112,31 @@ const setupSparqlClients = (
     saveTimingToContext
   );
 
+  sparqlClient.query.construct = timed(
+    sparqlClient.query.construct,
+    saveTimingToContext
+  );
+
+  sparqlClientStream.query.select = timed(
+    sparqlClientStream.query.select,
+    saveTimingToContext
+  );
+
+  sparqlClientStream.query.construct = timed(
+    sparqlClientStream.query.construct,
+    saveTimingToContext
+  );
+
   geoSparqlClient.query.select = timed(
     geoSparqlClient.query.select,
     saveTimingToContext
   );
 
+  geoSparqlClient.query.construct = timed(
+    geoSparqlClient.query.construct,
+    saveTimingToContext
+  );
+
   return { sparqlClient, sparqlClientStream, geoSparqlClient };
 };
 

app/rdf/query-hierarchies.ts

@@ -19,9 +19,9 @@ import { ResolvedDimension } from "@/graphql/shared-types";
 import * as ns from "./namespace";
 import { getCubeDimensionValuesWithMetadata } from "./queries";
 import {
-  pruneTree,
-  mapTree,
   getOptionsFromTree,
+  mapTree,
+  pruneTree,
   regroupTrees,
 } from "./tree-utils";
 
@@ -118,6 +118,7 @@ export const queryHierarchy = async (
   if (hierarchies.length === 0) {
     return null;
   }
+
   const dimensionValuesWithLabels = await getCubeDimensionValuesWithMetadata({
     cube: rdimension.cube,
     dimension: rdimension.dimension,