Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion app/browser/dataset-preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Flex from "@/components/flex";
import { HintRed, Loading, LoadingDataError } from "@/components/hint";
import { DataSource } from "@/config-types";
import { sourceToLabel } from "@/domain/datasource";
import { getQueryRequestContext } from "@/graphql/hooks";
import {
useDataCubeMetadataQuery,
useDataCubePreviewQuery,
Expand Down Expand Up @@ -86,6 +87,11 @@ export interface Preview {
label: string;
}

const DATA_CUBE_PREVIEW_QUERY_REQUEST_CONTEXT = getQueryRequestContext({
querySource: "DataSetPreview / dataset-preview.tsx",
queryReason: "Needed to display a dataset preview in the /browse page.",
});

export const DataSetPreview = ({
dataSetIri,
dataSource,
Expand All @@ -110,7 +116,10 @@ export const DataSetPreview = ({
useDataCubeMetadataQuery({ variables });
const [
{ data: previewData, fetching: fetchingPreview, error: previewError },
] = useDataCubePreviewQuery({ variables });
] = useDataCubePreviewQuery({
variables,
context: DATA_CUBE_PREVIEW_QUERY_REQUEST_CONTEXT,
});
const classes = useStyles({
descriptionPresent: !!metadata?.dataCubeMetadata.description,
});
Expand Down
17 changes: 16 additions & 1 deletion app/gql-flamegraph/devtool.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -330,14 +330,29 @@ const Queries = ({ queries }: { queries: RequestQueryMeta[] }) => {
return (
<div key={i} style={{ overflowX: "auto" }}>
<div>
{q.source && (
<>
<Typography variant="caption" sx={{ fontWeight: "bold" }}>
{q.source}
</Typography>
{" – "}
</>
)}
<Typography variant="caption">
{q.endTime - q.startTime}ms
</Typography>{" "}
-{" "}
{" "}
<CopyLink toCopy={q.text} sx={{ fontSize: "small" }}>
Copy
</CopyLink>
</div>
{q.reason && (
<div style={{ marginBottom: "0.25rem" }}>
<Typography variant="caption" sx={{ fontStyle: "italic" }}>
ℹ️ {q.reason}
</Typography>
</div>
)}
<Box
cols={100}
rows={10}
Expand Down
37 changes: 26 additions & 11 deletions app/graphql/client.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,38 @@ import { flag } from "@/flags/flag";
import { devtoolsExchanges } from "@/graphql/devtools";

const graphqlEndpointFlag = flag("graphql.endpoint");

if (graphqlEndpointFlag) {
console.log("ℹ️ Using custom GraphQL endpoint:", graphqlEndpointFlag);
}
export const client = createClient({
url: graphqlEndpointFlag ?? GRAPHQL_ENDPOINT,
exchanges: [...devtoolsExchanges, ...defaultExchanges],
fetchOptions: {
headers: getHeaders(),
},
});

function getHeaders() {
export const GQL_DEBUG_HEADER = "x-visualize-debug";
export const GQL_CACHE_CONTROL_HEADER = "x-visualize-cache-control";
export const GQL_QUERY_SOURCE_HEADER = "x-visualize-query-source";
export const GQL_QUERY_REASON_HEADER = "x-visualize-query-reason";

export const getGraphqlHeaders = ({
querySource,
queryReason,
}: {
querySource?: string;
queryReason?: string;
} = {}) => {
const debug = flag("debug");
const disableCache = flag("server-side-cache.disable");

return {
"x-visualize-debug": debug ? "true" : "",
"x-visualize-cache-control": disableCache ? "no-cache" : "",
[GQL_DEBUG_HEADER]: debug ? "true" : "",
[GQL_CACHE_CONTROL_HEADER]: disableCache ? "no-cache" : "",
[GQL_QUERY_SOURCE_HEADER]: querySource ?? "",
[GQL_QUERY_REASON_HEADER]: queryReason ?? "",
};
}
};

export const client = createClient({
url: graphqlEndpointFlag ?? GRAPHQL_ENDPOINT,
exchanges: [...devtoolsExchanges, ...defaultExchanges],
fetchOptions: {
headers: getGraphqlHeaders(),
},
});
34 changes: 27 additions & 7 deletions app/graphql/context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ import { SPARQL_GEO_ENDPOINT } from "@/domain/env";
import { Awaited } from "@/domain/types";
import { Timings } from "@/gql-flamegraph/resolvers";
import { getMaybeCachedSparqlUrl } from "@/graphql/caching-utils";
import {
GQL_CACHE_CONTROL_HEADER,
GQL_DEBUG_HEADER,
GQL_QUERY_REASON_HEADER,
GQL_QUERY_SOURCE_HEADER,
} from "@/graphql/client";
import { RequestQueryMeta } from "@/graphql/query-meta";
import {
QueryResolvers,
Expand Down Expand Up @@ -84,10 +90,17 @@ const createLoaders = async (

export type Loaders = Awaited<ReturnType<typeof createLoaders>>;

const setupSparqlClients = (
ctx: VisualizeGraphQLContext,
sourceUrl: string
) => {
const setupSparqlClients = ({
ctx,
sourceUrl,
querySource,
queryReason,
}: {
ctx: VisualizeGraphQLContext;
sourceUrl: string;
querySource: string | undefined;
queryReason: string | undefined;
}) => {
const sparqlClient = new ParsingClient({
endpointUrl: sourceUrl,
});
Expand All @@ -105,6 +118,8 @@ const setupSparqlClients = (
startTime: t.start,
endTime: t.end,
text: args[0],
source: querySource,
reason: queryReason,
});
};

Expand Down Expand Up @@ -147,11 +162,11 @@ const sparqlCache = new LRUCache({
});

const shouldUseServerSideCache = (req: IncomingMessage) => {
return req.headers["x-visualize-cache-control"] !== "no-cache";
return req.headers[GQL_CACHE_CONTROL_HEADER] !== "no-cache";
};

const isDebugMode = (req: IncomingMessage) => {
return req.headers["x-visualize-debug"] === "true";
return req.headers[GQL_DEBUG_HEADER] === "true";
};

const createContextContent = async ({
Expand All @@ -164,7 +179,12 @@ const createContextContent = async ({
req: IncomingMessage;
}) => {
const { sparqlClient, sparqlClientStream, geoSparqlClient } =
setupSparqlClients(ctx, sourceUrl);
setupSparqlClients({
ctx,
sourceUrl,
querySource: req.headers[GQL_QUERY_SOURCE_HEADER]?.toString(),
queryReason: req.headers[GQL_QUERY_REASON_HEADER]?.toString(),
});
const contextCache = shouldUseServerSideCache(req) ? sparqlCache : undefined;
const loaders = await createLoaders(
sparqlClient,
Expand Down
27 changes: 21 additions & 6 deletions app/graphql/hooks.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { Client, useClient } from "urql";
import { Client, OperationContext, useClient } from "urql";

import { ConfiguratorState, hasChartConfigs } from "@/configurator";
import {
DataCubeComponents,
DataCubeMetadata,
DataCubesObservations,
} from "@/domain/data";
import { Locale } from "@/locales/locales";
import { assert } from "@/utils/assert";

import { joinDimensions, mergeObservations } from "./join";
import { getGraphqlHeaders } from "@/graphql/client";
import { joinDimensions, mergeObservations } from "@/graphql/join";
import {
DataCubeComponentFilter,
DataCubeComponentsDocument,
Expand All @@ -24,7 +22,24 @@ import {
DataCubeObservationsDocument,
DataCubeObservationsQuery,
DataCubeObservationsQueryVariables,
} from "./query-hooks";
} from "@/graphql/query-hooks";
import { Locale } from "@/locales/locales";
import { assert } from "@/utils/assert";

export const getQueryRequestContext = (options: {
querySource?: string;
queryReason?: string;
}): Partial<OperationContext> => {
if (!options) {
return {};
}

return {
fetchOptions: {
headers: getGraphqlHeaders(options),
},
};
};

const useQueryKey = (options: object) => {
return useMemo(() => {
Expand Down
3 changes: 2 additions & 1 deletion app/graphql/query-meta.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ export type RequestQueryMeta = {
text: string;
startTime: number;
endTime: number;
label?: string;
source?: string;
reason?: string;
};
Loading