Merge pull request #1320 from visualize-admin/perf/specifiy-component…

…s-iris-for-observation-query

perf: Specify component iris in query filters

app/browse/datatable.tsx

@@ -285,6 +285,7 @@ export const DataSetTable = ({
     chartConfig,
     dimensions: componentsData?.dataCubesComponents?.dimensions,
     measures: componentsData?.dataCubesComponents?.measures,
+    componentIris,
   });
   const [{ data: observationsData }] = useDataCubesObservationsQuery({
     variables: {

app/charts/shared/chart-data-filters.tsx

@@ -71,14 +71,15 @@ export const ChartDataFilters = (props: ChartDataFiltersProps) => {
   const { dataSource, chartConfig, dimensions, measures } = props;
   const { loading } = useLoadingState();
   const dataFilters = useInteractiveFilters((d) => d.dataFilters);
+  const componentIris = chartConfig.interactiveFiltersConfig?.dataFilters
+    .componentIris as string[];
   const queryFilters = useQueryFilters({
     chartConfig,
     dimensions,
     measures,
     allowNoneValues: true,
+    componentIris,
   });
-  const componentIris = chartConfig.interactiveFiltersConfig?.dataFilters
-    .componentIris as string[];
   const [filtersVisible, setFiltersVisible] = React.useState(false);
 
   React.useEffect(() => {

app/charts/shared/chart-helpers.tsx

@@ -71,11 +71,13 @@ export const useQueryFilters = ({
   dimensions,
   measures,
   allowNoneValues,
+  componentIris,
 }: {
   chartConfig: ChartConfig;
   dimensions?: Dimension[];
   measures?: Measure[];
   allowNoneValues?: boolean;
+  componentIris?: string[];
 }): DataCubeObservationFilter[] | undefined => {
   const allDataFilters = useInteractiveFilters((d) => d.dataFilters);
 
@@ -94,10 +96,7 @@ export const useQueryFilters = ({
 
       return {
         iri: cube.iri,
-        // componentIris: getComponentIris(cube.iri, {
-        //   dimensions,
-        //   measures,
-        // }),
+        componentIris,
         filters: prepareQueryFilters(
           chartConfig.chartType,
           filters,
@@ -116,45 +115,10 @@ export const useQueryFilters = ({
     allowNoneValues,
     dimensions,
     measures,
+    componentIris,
   ]);
 };
 
-// Handle correctly when improving performance of data fetching!
-// const getComponentIris = (
-//   cubeIri: string,
-//   options: {
-//     dimensions: Dimension[];
-//     measures: Measure[];
-//   }
-// ) => {
-//   const { dimensions, measures } = options;
-
-//   if (dimensions.length === 0 && measures.length === 0) {
-//     return;
-//   }
-
-//   const filteredDimensionIris: string[] = [];
-
-//   for (const dimension of dimensions) {
-//     if (dimension.isJoinByDimension) {
-//       if (dimension.originalIris.some((d) => d.cubeIri === cubeIri)) {
-//         filteredDimensionIris.push(
-//           ...dimension.originalIris.map((d) => d.dimensionIri)
-//         );
-//       }
-//     } else {
-//       if (dimension.cubeIri === cubeIri) {
-//         filteredDimensionIris.push(dimension.iri);
-//       }
-//     }
-//   }
-
-//   return [
-//     ...filteredDimensionIris,
-//     ...measures.filter((d) => d.cubeIri === cubeIri).map((d) => d.iri),
-//   ];
-// };
-
 type IFKey = keyof NonNullable<InteractiveFiltersConfig>;
 
 export const getChartConfigFilterComponentIris = ({ cubes }: ChartConfig) => {

app/components/chart-filters-list.tsx

@@ -1,7 +1,10 @@
 import { Box, Typography } from "@mui/material";
 import React, { Fragment } from "react";
 
-import { useQueryFilters } from "@/charts/shared/chart-helpers";
+import {
+  extractChartConfigComponentIris,
+  useQueryFilters,
+} from "@/charts/shared/chart-helpers";
 import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import {
   ChartConfig,
@@ -38,6 +41,7 @@ export const ChartFiltersList = (props: ChartFiltersListProps) => {
     chartConfig,
     dimensions,
     measures,
+    componentIris: extractChartConfigComponentIris(chartConfig),
   });
   const [{ data }] = useDataCubesComponentsQuery({
     variables: {

app/components/chart-footnotes.tsx

@@ -3,7 +3,10 @@ import { Box, Button, Link, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { PropsWithChildren, useEffect, useState } from "react";
 
-import { useQueryFilters } from "@/charts/shared/chart-helpers";
+import {
+  extractChartConfigComponentIris,
+  useQueryFilters,
+} from "@/charts/shared/chart-helpers";
 import { useChartTablePreview } from "@/components/chart-table-preview";
 import { DataDownloadMenu, RunSparqlQuery } from "@/components/data-download";
 import { ChartConfig, DataSource } from "@/configurator";
@@ -73,6 +76,7 @@ export const ChartFootnotes = ({
     chartConfig,
     dimensions,
     measures,
+    componentIris: extractChartConfigComponentIris(chartConfig),
   });
   const commonQueryVariables = {
     sourceType: dataSource.type,

app/components/chart-with-filters.tsx

@@ -86,6 +86,7 @@ const GenericChart = (props: GenericChartProps) => {
     chartConfig,
     dimensions,
     measures,
+    componentIris,
   });
   const commonProps = {
     dataSource,