Merge pull request #413 from bento-platform/fix/data-type-counts

fix: dataset data-types count loading

src/components/datasets/DatasetOverview.js

@@ -4,19 +4,26 @@ import PropTypes from "prop-types";
 import { Col, Divider, Row, Spin, Statistic, Typography } from "antd";
 
 import { EM_DASH } from "@/constants";
-import { useDatasetDataTypes } from "@/modules/datasets/hooks";
+import { useDatasetDataTypesByID } from "@/modules/datasets/hooks";
 import { datasetPropTypesShape, projectPropTypesShape } from "@/propTypes";
 
 const DatasetOverview = ({ isPrivate, project, dataset }) => {
-  const datasetsDataTypes = useDatasetDataTypes();
-  const datasetDataTypes = datasetsDataTypes[dataset.identifier];
-  const isFetchingDataset = datasetDataTypes?.isFetching;
+  const { dataTypesByID, isFetchingDataTypes, hasAttemptedDataTypes } = useDatasetDataTypesByID(dataset.identifier);
 
   // Count data types which actually have data in them for showing in the overview
-  const dataTypeCount = useMemo(
-    () => Object.values(datasetDataTypes?.itemsByID || {}).filter((value) => (value.count || 0) > 0).length,
-    [datasetDataTypes, dataset],
+  const dataTypesCount = useMemo(
+    () => Object.values(dataTypesByID ?? {}).filter((value) => (value.count || 0) > 0).length,
+    [dataTypesByID],
   );
+  const dataTypeDisplay = useMemo(() => {
+    if (isFetchingDataTypes) {
+      // refresh: display count based on previous state
+      if (hasAttemptedDataTypes) return dataTypesCount;
+      // first fetch: wait for data to display count
+      return EM_DASH;
+    }
+    return dataTypesCount;
+  }, [dataTypesCount, isFetchingDataTypes, hasAttemptedDataTypes]);
 
   return (
     <>
@@ -54,8 +61,8 @@ const DatasetOverview = ({ isPrivate, project, dataset }) => {
           <Statistic title="Created" value={new Date(Date.parse(dataset.created)).toLocaleString()} />
         </Col>
         <Col span={isPrivate ? 12 : 8}>
-          <Spin spinning={isFetchingDataset}>
-            <Statistic title="Data types" value={isFetchingDataset ? EM_DASH : dataTypeCount} />
+          <Spin spinning={isFetchingDataTypes}>
+            <Statistic title="Data types" value={dataTypeDisplay} />
           </Spin>
         </Col>
       </Row>

src/modules/datasets/hooks.js

@@ -1,9 +1,13 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useProjects } from "@/modules/metadata/hooks";
 import { useAppDispatch, useAppSelector } from "@/store";
-import { fetchDatasetsDataTypes } from "@/modules/datasets/actions";
+import { fetchDatasetDataTypesSummariesIfPossible, fetchDatasetsDataTypes } from "@/modules/datasets/actions";
 
 export const useDatasetDataTypes = () => {
+  /**
+   * Fetches the data type summaries for ALL datasets.
+   * returns the store's values.
+   */
   const dispatch = useAppDispatch();
   const { datasetsByID } = useProjects();
   useEffect(() => {
@@ -13,3 +17,23 @@ export const useDatasetDataTypes = () => {
   }, [dispatch, datasetsByID]);
   return useAppSelector((state) => state.datasetDataTypes);
 };
+
+export const useDatasetDataTypesByID = (datasetId) => {
+  /**
+   * Fetches the data types ONLY for the given dataset.
+   * Returns the store's value for the given dataset ID.
+   */
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(fetchDatasetDataTypesSummariesIfPossible(datasetId));
+  }, [datasetId]);
+
+  const dataTypes = useAppSelector((state) => state.datasetDataTypes.itemsByID[datasetId]);
+  return useMemo(() => {
+    return {
+      dataTypesByID: dataTypes?.itemsByID,
+      isFetchingDataTypes: dataTypes?.isFetching ?? true,
+      hasAttemptedDataTypes: dataTypes?.hasAttempted ?? false,
+    };
+  }, [dataTypes]);
+};

src/modules/datasets/reducers.js

@@ -26,6 +26,7 @@ export const datasetDataTypes = (
           ...state.itemsByID,
           [datasetID]: {
             itemsByID: state.itemsByID[datasetID]?.itemsByID ?? {},
+            hasAttempted: state.itemsByID[datasetID]?.hasAttempted ?? false,
             isFetching: true,
           },
         },
@@ -57,6 +58,7 @@ export const datasetDataTypes = (
           [datasetID]: {
             ...state.itemsByID[datasetID],
             isFetching: false,
+            hasAttempted: true,
           },
         },
       };