feat: [PROD-13564] implement categories details dialog in dataset ove…

…rview

src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericTable.js

@@ -11,7 +11,6 @@ import { Table, TABLE_DATA_STATUS, UPLOAD_FILE_STATUS_KEY } from '@cosmotech/ui'
 import { Api } from '../../../../services/config/Api';
 import { useSetApplicationErrorMessage } from '../../../../state/hooks/ApplicationHooks';
 import { useOrganizationId } from '../../../../state/hooks/OrganizationHooks.js';
-import { useCurrentScenarioDatasetList } from '../../../../state/hooks/ScenarioHooks';
 import { useWorkspaceId } from '../../../../state/hooks/WorkspaceHooks.js';
 import { gridLight, gridDark } from '../../../../theme/';
 import { ConfigUtils, TranslationUtils } from '../../../../utils';
@@ -55,7 +54,6 @@ export const GenericTable = ({
   const workspaceId = useWorkspaceId();
   const datasets = useSelector((state) => state.dataset?.list?.data);
   const scenarioId = useSelector((state) => state.scenario?.current?.data?.id);
-  const currentScenarioDatasetList = useCurrentScenarioDatasetList();
   const setApplicationErrorMessage = useSetApplicationErrorMessage();
   const canChangeRowsNumber = ConfigUtils.getParameterAttribute(parameterData, 'canChangeRowsNumber') ?? false;
 
@@ -132,7 +130,6 @@ export const GenericTable = ({
       };
 
       lastNewParameterValue.current = newParameterValue;
-
       if (!isUnmount.current) {
         setParameter(newParameterValue);
       }
@@ -210,14 +207,14 @@ export const GenericTable = ({
     }
     GenericTable.downloadLocked[lockId] = true;
     try {
-      if (!currentScenarioDatasetList || currentScenarioDatasetList?.length === 0)
+      const sourceDatasetId = context.targetDatasetId;
+      if (!sourceDatasetId)
         throw new Error(
           t(
             'genericcomponent.table.labels.noDatasetsError',
             'Impossible to fetch data from dataset because the list of datasets is empty'
           )
         );
-      const sourceDatasetId = currentScenarioDatasetList[0];
       const dynamicValuesConfig = ConfigUtils.getParameterAttribute(parameterData, 'dynamicValues');
       const query = dynamicValuesConfig?.query;
       if (!query)
@@ -723,6 +720,8 @@ export const GenericTable = ({
         buildErrorsPanelTitle={buildErrorsPanelTitle}
         maxErrorsCount={MAX_ERRORS_COUNT}
         isDirty={isDirty}
+        visibilityOptions={context.tableOptions?.buttons}
+        height={context.tableOptions?.height ?? '256px'}
       />
       <TableDeleteRowsDialog
         open={isConfirmRowsDeletionDialogOpen}

src/components/ScenarioParameters/components/index.js

@@ -4,3 +4,16 @@
 export { default as ScenarioParametersTabs } from './ScenarioParametersTabs/ScenarioParametersTabs';
 export { default as ScenarioParametersTabsWrapper } from './ScenarioParametersTabs/ScenarioParametersTabsWrapper';
 export { ScenarioActions } from './ScenarioActions';
+export {
+  GenericDateInput,
+  GenericEnumInput,
+  GenericMultiSelect,
+  GenericRadioInput,
+  GenericNumberInput,
+  GenericTextInput,
+  GenericToggleInput,
+  GenericUploadFile,
+  GenericTable,
+  GenericSliderInput,
+  ScenarioSelect,
+} from './ScenarioParametersInputs';

src/components/ScenarioParameters/index.js

@@ -2,3 +2,16 @@
 // Licensed under the MIT license.
 
 export { default as ScenarioParameters } from './ScenarioParameters';
+export {
+  GenericDateInput,
+  GenericEnumInput,
+  GenericMultiSelect,
+  GenericRadioInput,
+  GenericNumberInput,
+  GenericTextInput,
+  GenericToggleInput,
+  GenericUploadFile,
+  GenericTable,
+  GenericSliderInput,
+  ScenarioSelect,
+} from './components';

src/components/index.js

@@ -12,3 +12,16 @@ export { default as ShareCurrentScenarioButton } from './ShareCurrentScenarioBut
 export { default as CurrentScenarioPowerBiReport } from './CurrentScenarioPowerBIReport';
 export { default as CreateScenarioButton } from './CreateScenarioButton';
 export { default as CurrentScenarioSelector } from './CurrentScenarioSelector';
+export {
+  GenericDateInput,
+  GenericEnumInput,
+  GenericMultiSelect,
+  GenericRadioInput,
+  GenericNumberInput,
+  GenericTextInput,
+  GenericToggleInput,
+  GenericUploadFile,
+  GenericTable,
+  GenericSliderInput,
+  ScenarioSelect,
+} from './ScenarioParameters';

src/config/overrides/Workspaces.js

@@ -207,6 +207,27 @@ export const WORKSPACES = [
                 { id: 'max_waiters', name: { en: 'Max. waiters', fr: 'Max. serveurs' }, queryId: 'bars' },
               ],
               attributes: ['NbWaiters', 'RestockQty', 'Stock'],
+              previewTable: {
+                columns: [
+                  {
+                    field: 'nbWaiters',
+                    type: ['int'],
+                    headerName: 'Number of waiters',
+                  },
+                  {
+                    field: 'restockQty',
+                    type: ['int'],
+                    headerName: 'Restock quantity',
+                  },
+                  {
+                    field: 'stock',
+                    type: ['int'],
+                    headerName: 'Stock',
+                  },
+                ],
+                queryId: 'bars_attributes',
+                resultKey: 'fields',
+              },
             },
             {
               id: 'customers',
@@ -228,10 +249,51 @@ export const WORKSPACES = [
                   queryId: 'customers',
                 },
               ],
-              attributes: ['Satisfaction', 'SurroundingSatisfaction', 'Thirsty'],
+              attributes: ['Name', 'Satisfaction', 'SurroundingSatisfaction', 'Thirsty'],
+              previewTable: {
+                columns: [
+                  {
+                    field: 'name',
+                    headerName: 'Name',
+                    type: ['string'],
+                  },
+                  {
+                    field: 'satisfaction',
+                    headerName: 'Satisfaction',
+                    type: ['int'],
+                  },
+                  {
+                    field: 'surroundingSatisfaction',
+                    headerName: 'Surrounding satisfaction',
+                    type: ['int'],
+                  },
+                  {
+                    field: 'thirsty',
+                    headerName: 'Thirsty',
+                    type: ['bool'],
+                  },
+                ],
+                queryId: 'customers_attributes',
+                resultKey: 'fields',
+              },
+            },
+            {
+              id: 'fakeEntityType',
+              description: {
+                en: 'Fake category without data',
+                fr: 'Catégorie factice sans aucune donnée',
+              },
+              name: { en: 'Fake entity', fr: 'Entité factice' },
+              type: 'entity',
             },
           ],
           queries: [
+            {
+              id: 'bars_attributes',
+              query:
+                'MATCH(bar: Bar) WITH {name: bar.id, nbWaiters: bar.NbWaiters, stock: bar.Stock, ' +
+                'restockQty: bar.RestockQty} as fields RETURN fields',
+            },
             {
               id: 'bars',
               query:
@@ -248,6 +310,13 @@ export const WORKSPACES = [
               id: 'satisfaction_graph',
               query: 'OPTIONAL MATCH (:Customer)-[r]->(:Customer) RETURN COUNT(r) AS satisfaction_links_count',
             },
+            {
+              id: 'customers_attributes',
+              query:
+                'MATCH(customer: Customer) WITH {name: customer.id, satisfaction: customer.Satisfaction, ' +
+                'surroundingSatisfaction: customer.SurroundingSatisfaction, thirsty: customer.Thirsty} ' +
+                'as fields RETURN fields',
+            },
             {
               id: 'relationships',
               query: 'OPTIONAL MATCH ()-[r]->() RETURN COUNT(r) AS relationships_count',

src/services/config/WorkspaceSchema.js

@@ -142,6 +142,17 @@ const basicWebAppOptions = z.object({
               description: LABELS_DICT,
               kpis: z.array(TWINGRAPH_INDICATOR).optional().nullable(),
               attributes: z.array(z.string().optional()).optional().nullable(),
+              previewTable: z
+                .object({
+                  columns: z.array(
+                    z.object({ field: z.string(), headerName: z.string(), type: z.array(z.string()) }).strict()
+                  ),
+                  queryId: z.string(),
+                  resultKey: z.string(),
+                })
+                .strict()
+                .optional()
+                .nullable(),
             })
             .strict()
             .required()

src/state/sagas/datasets/QueryDatasetTwingraph/QueryDatasetTwingraph.js

@@ -44,8 +44,16 @@ function* runDatasetTwingraphQuery(action, query, attemptsNumber = 0) {
 function* startAllDatasetTwingraphQueries(action) {
   const { workspace } = action.payload;
   const queries = workspace?.webApp?.options?.datasetManager?.queries ?? [];
+  const graphIndicators = workspace?.webApp?.options?.datasetManager?.graphIndicators;
+  const categories = workspace?.webApp?.options?.datasetManager?.categories;
+
   yield all(
     queries.map((query, index) => {
+      if (
+        !categories.some((category) => (category?.kpis ?? []).some((kpi) => kpi?.queryId === query.id)) &&
+        !graphIndicators.some((indicator) => indicator?.queryId === query.id)
+      )
+        return null;
       if (index !== 0) delay(TWINGRAPH_QUERIES_DELAY);
       return spawn(runDatasetTwingraphQuery, action, query);
     })

src/views/DatasetManager/components/DatasetOverview/components/CategoryAccordion/CategoryAccordion.js

@@ -8,7 +8,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Grid, Typography } from
 import { makeStyles } from '@mui/styles';
 import { exists } from 'i18next';
 import { TranslationUtils } from '../../../../../../utils';
-import { KPI } from './components';
+import { KPI, CategoryDetailsDialog } from './components';
 
 const useStyles = makeStyles((theme) => ({
   categoryType: { opacity: '70%' },
@@ -51,8 +51,8 @@ const CategoryAccordion = (props) => {
     );
 
     let categoryMainKpis = null;
-    if (!expanded && category.kpis) {
-      categoryMainKpis = category.kpis
+    if (!expanded && category?.kpis) {
+      categoryMainKpis = (category?.kpis ?? [])
         .filter((kpi) => kpi.id != null)
         .slice(0, 2)
         .map((kpi, index) => {
@@ -109,18 +109,19 @@ const CategoryAccordion = (props) => {
     const descriptionString = t(TranslationUtils.getDatasetCategoryDescriptionTranslationKey(category.id));
     const description = hasDescription && <Typography sx={{ whiteSpace: 'pre-line' }}>{descriptionString}</Typography>;
 
+    const kpisWithResult = (category?.kpis ?? []).map((kpi) => ({
+      ...kpi,
+      ...queriesResults.categoriesKpis.find((kpiResult) => kpiResult.id === kpi.id),
+    }));
+
     let categoryKpis = null;
     if (category.kpis && category.kpis.length > 0)
       categoryKpis = category.kpis.map((kpi, index) => {
-        const kpiWithResult = {
-          ...kpi,
-          ...queriesResults.categoriesKpis.find((kpiResult) => kpiResult.id === kpi.id),
-        };
         return (
           <KPI
             key={`kpi-${index}`}
             valueProps={{ sx: { opacity: '70%' } }}
-            kpi={kpiWithResult}
+            kpi={kpisWithResult.find((kpiResult) => kpiResult.id === kpi.id)}
             categoryId={category.id}
           />
         );
@@ -139,7 +140,7 @@ const CategoryAccordion = (props) => {
           <Typography>{t('commoncomponents.datasetmanager.overview.attributesLabel', 'Attributes:')}</Typography>
         </Grid>
         <Grid item>
-          <Typography sx={{ opacity: '70%' }}>{category.attributes.join(', ')}</Typography>
+          <Typography sx={{ opacity: '70%' }}>{category.attributes?.join(', ')}</Typography>
         </Grid>
       </Grid>
     );
@@ -155,6 +156,9 @@ const CategoryAccordion = (props) => {
         {description && <Grid item>{description}</Grid>}
         {categoryKpis && <Grid item>{categoryKpis}</Grid>}
         {attributes && <Grid item>{attributes}</Grid>}
+        <Grid container item direction="row" justifyContent="flex-end">
+          <CategoryDetailsDialog category={category} kpis={kpisWithResult} />
+        </Grid>
       </Grid>
     );
   }, [t, category, queriesResults.categoriesKpis]);