@datawheel/data-explorer 0.1.3 → 0.2.1

package/dist/main.js

@@ -14,7 +14,7 @@ import formUrlEncode from 'form-urlencoded';
 import formUrlDecode from 'form-urldecoded';
 import { MRT_ProgressBar, flexRender, MRT_TableBodyCell, MRT_ToolbarAlertBanner, useMantineReactTable, MantineReactTable, MRT_TablePagination } from 'mantine-react-table';
 import { formatAbbreviate, format } from 'd3plus-format';
-import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from '@tanstack/react-query';
 import debounce from 'lodash.debounce';
 import { matchSorter } from 'match-sorter';
 import yn from 'yn';
@@ -1703,7 +1703,7 @@ function willDownloadQuery(format2) {
       const dataURL = query.toString("logiclayer").replace(olapClient.datasource.serverUrl, "");
       return Promise.all([
         axios({ url: dataURL, responseType: "blob" }).then((response) => response.data),
-        calcMaxMemberCount(query, params).then((maxRows) => {
+        calcMaxMemberCount(query, params, dispatch).then((maxRows) => {
           if (maxRows > 5e4) {
             dispatch(loadingActions.setLoadingMessage({ type: "HEAVY_QUERY", rows: maxRows }));
           }
@@ -1725,10 +1725,19 @@ function willExecuteQuery({ limit, offset } = {}) {
     const allParams = isPrefetch ? { ...params, pagiLimit: limit, pagiOffset: offset } : params;
     const { result: currentResult } = selectCurrentQueryItem(state);
     if (!isValidQuery(params)) return Promise.resolve();
-    return olapClient.getCube(params.cube).then((cube) => {
+    return olapClient.getCube(params.cube).then(async (cube) => {
       const query = applyQueryParams(cube.query, allParams, { previewLimit });
+      const axios = olapClient.datasource.axiosInstance;
+      const dataURL = query.toString("logiclayer").replace(olapClient.datasource.serverUrl, "");
       return Promise.all([
-        olapClient.execQuery(query, endpoint),
+        axios({ url: dataURL }).then((response) => {
+          return {
+            data: response.data,
+            headers: { ...response.headers },
+            query,
+            status: response.status
+          };
+        }),
         calcMaxMemberCount(query, allParams, dispatch).then((maxRows) => {
           if (maxRows > 5e4) {
             dispatch(loadingActions.setLoadingMessage({ type: "HEAVY_QUERY", rows: maxRows }));
@@ -1737,19 +1746,20 @@ function willExecuteQuery({ limit, offset } = {}) {
       ]).then(
         (result) => {
           const [aggregation] = result;
+          const { data, headers, status } = aggregation;
           !isPrefetch && dispatch(
             queriesActions.updateResult({
-              data: aggregation.data,
-              types: aggregation.data.length ? describeData(cube.toJSON(), params, aggregation.data) : currentResult.types,
-              headers: { ...aggregation.headers },
+              data,
+              types: (data == null ? void 0 : data.data.length) ? describeData(cube.toJSON(), params, data == null ? void 0 : data.data) : currentResult.types,
+              headers: { ...headers },
               sourceCall: query.toSource(),
-              status: aggregation.status || 500,
+              status: status || 500,
               url: query.toString(endpoint)
             })
           );
           return {
-            data: aggregation.data,
-            types: aggregation.data.length ? describeData(cube.toJSON(), params, aggregation.data) : currentResult.types
+            data,
+            types: (data == null ? void 0 : data.data.length) ? describeData(cube.toJSON(), params, data == null ? void 0 : data.data) : currentResult.types
           };
         },
         (error) => {
@@ -2437,11 +2447,16 @@ function CubeSource() {
 
 // src/components/TableFooter.tsx
 function TableFooter(props) {
-  const { result, table, data = [] } = props;
+  const { result, table } = props;
   const { translate: t } = useTranslation();
   const { url } = result;
   const { copy, copied } = useClipboard({ timeout: 1e3 });
   const copyHandler = useCallback(() => copy(url), [url]);
+  const totalRowCount = table.options.rowCount;
+  const {
+    pagination: { pageSize }
+  } = table.getState();
+  const showPagination = totalRowCount && Boolean(totalRowCount > pageSize);
   return /* @__PURE__ */ React10__default.createElement(Box, { w: "100%", sx: { flex: "0 0 70px" } }, /* @__PURE__ */ React10__default.createElement(
     Flex,
     {
@@ -2452,7 +2467,7 @@ function TableFooter(props) {
       gap: "sm"
     },
     /* @__PURE__ */ React10__default.createElement(CubeSource, null),
-    /* @__PURE__ */ React10__default.createElement(Group, { position: "right", spacing: "sm" }, /* @__PURE__ */ React10__default.createElement(Text, { c: "dimmed" }, t("results.count_rows", { n: data.length })), /* @__PURE__ */ React10__default.createElement(MRT_TablePagination, { table }), /* @__PURE__ */ React10__default.createElement(ApiAndCsvButtons, { copied, copyHandler, url }))
+    /* @__PURE__ */ React10__default.createElement(Group, { position: "right", spacing: "sm" }, /* @__PURE__ */ React10__default.createElement(Text, { c: "dimmed" }, t("results.count_rows", { n: totalRowCount })), showPagination && /* @__PURE__ */ React10__default.createElement(MRT_TablePagination, { table }), /* @__PURE__ */ React10__default.createElement(ApiAndCsvButtons, { copied, copyHandler, url }))
   ));
 }
 var ApiAndCsvButtons = (props) => {
@@ -3149,7 +3164,7 @@ function getFiltersConditions(fn, value) {
   ]);
   return (_a = comparisonMap.get(fn)) == null ? void 0 : _a(value);
 }
-function useTableData({ offset, limit, columns, filters, cuts }) {
+function useTableData({ offset, limit, columns, filters, cuts, pagination }) {
   const normalizedFilters = filters.map((filter) => ({
     id: filter.measure,
     value: getFilterValue(filter)
@@ -3160,10 +3175,8 @@ function useTableData({ offset, limit, columns, filters, cuts }) {
   const cutKey = JSON.stringify(normalizedCuts);
   const actions2 = useActions();
   const columnsStr = JSON.stringify(columns.sort());
-  const page = offset;
+  const page = pagination.pageIndex;
   const [filterKeydebouced, setDebouncedTerm] = useState([
-    limit,
-    offset,
     columnsStr,
     filterKey,
     cutKey,
@@ -3171,7 +3184,7 @@ function useTableData({ offset, limit, columns, filters, cuts }) {
   ]);
   useEffect(() => {
     const handler = debounce(() => {
-      const term = [limit, offset, columnsStr, filterKey, cutKey, page];
+      const term = [columnsStr, filterKey, cutKey, page];
       setDebouncedTerm(term);
     }, 700);
     handler();
@@ -3182,13 +3195,56 @@ function useTableData({ offset, limit, columns, filters, cuts }) {
     queryFn: () => {
       return actions2.willExecuteQuery().then((res) => {
         const { data, types } = res;
-        return { data: data != null ? data : [], types };
+        const { data: tableData, page: page2 } = data;
+        return { data: tableData != null ? tableData : [], types, page: page2 };
       });
     },
     staleTime: 3e5,
     enabled: !!filterKeydebouced
   });
 }
+function usePrefetch({
+  data,
+  isPlaceholderData,
+  limit,
+  offset,
+  totalRowCount,
+  columns,
+  cuts,
+  filters,
+  pagination
+}) {
+  const queryClient2 = useQueryClient();
+  const actions2 = useActions();
+  const page = pagination.pageIndex + 1;
+  const hasMore = page * pagination.pageSize <= totalRowCount;
+  const off = page * pagination.pageSize;
+  const normalizedFilters = filters.map((filter) => ({
+    id: filter.measure,
+    value: getFilterValue(filter)
+    // fn: getFilterFn(filter)
+  }));
+  const normalizedCuts = cuts.map((cut) => ({ id: cut.uniqueName, members: cut.members }));
+  const filterKey = JSON.stringify(normalizedFilters);
+  const cutKey = JSON.stringify(normalizedCuts);
+  const columnsStr = JSON.stringify(columns.sort());
+  const key = [columnsStr, filterKey, cutKey, page];
+  React10__default.useEffect(() => {
+    if (!isPlaceholderData && hasMore) {
+      queryClient2.prefetchQuery({
+        queryKey: ["table", key],
+        queryFn: () => {
+          return actions2.willExecuteQuery({ offset: off, limit }).then((res) => {
+            const { data: data2, types } = res;
+            const { data: tableData, page: page2 } = data2;
+            return { data: tableData != null ? tableData : [], types, page: page2 };
+          });
+        },
+        staleTime: 3e5
+      });
+    }
+  }, [data, limit, offset, page, isPlaceholderData, key, queryClient2, hasMore, off]);
+}
 function useTable({
   cube,
   result,
@@ -3239,18 +3295,29 @@ function useTable({
       return { measure, filter };
     });
   }, [measuresMap, measuresOlap, filtersMap, filterItems]);
-  const { isLoading, isFetching, isError, data } = useTableData({
+  const { isLoading, isFetching, isError, data, isPlaceholderData } = useTableData({
     offset,
     limit,
     columns: finalUniqueKeys,
     filters: filterItems.filter(isActiveItem),
-    cuts: itemsCuts.filter(isActiveCut)
+    cuts: itemsCuts.filter(isActiveCut),
+    pagination
   });
   const tableData = (data == null ? void 0 : data.data) || [];
   const tableTypes = (data == null ? void 0 : data.types) || types;
+  const totalRowCount = data == null ? void 0 : data.page.total;
   const finalKeys = Object.values(tableTypes).filter((t2) => !t2.isId).filter(columnFilter).sort(columnSorting);
-  const totalRowCount = result.data.length === limit ? limit * 10 : result.data.length;
-  const fetchedTableData = tableData != null ? tableData : [];
+  usePrefetch({
+    data: tableData,
+    isPlaceholderData,
+    offset,
+    limit,
+    totalRowCount,
+    columns: finalUniqueKeys,
+    filters: filterItems.filter(isActiveItem),
+    cuts: itemsCuts.filter(isActiveCut),
+    pagination
+  });
   useEffect(() => {
     actions2.updatePagination({
       limit: pagination.pageSize,
@@ -3426,7 +3493,7 @@ function useTable({
   );
   const table = useMantineReactTable({
     columns,
-    data: fetchedTableData,
+    data: tableData,
     onPaginationChange: setPagination,
     enableHiding: false,
     manualFiltering: true,
@@ -3442,7 +3509,7 @@ function useTable({
     ...constTableProps,
     ...mantineTableProps
   });
-  return { table, isError, isLoading, data: fetchedTableData };
+  return { table, isError, isLoading, data: tableData };
 }
 function TableView({ table, result, isError, isLoading, data }) {
   const isData = Boolean(table.getRowModel().rows.length);
@@ -4097,7 +4164,6 @@ function LocaleSelector() {
     if (currentCode !== l.value) {
       resetGraph();
       actions2.updateLocale(l.value);
-      actions2.willRequestQuery();
     }
   };
   if (localeOptions.length < 2) {
@@ -4113,7 +4179,13 @@ function LocaleSelector() {
       selectedItem: currentCode,
       selectProps: {
         styles: localeSelectorStyle,
-        icon: /* @__PURE__ */ React10__default.createElement(IconLanguage, { size: "0.8rem", color: theme.colorScheme === "dark" ? theme.fn.lighten(theme.fn.primaryColor(), 0.8) : theme.fn.primaryColor() })
+        icon: /* @__PURE__ */ React10__default.createElement(
+          IconLanguage,
+          {
+            size: "0.8rem",
+            color: theme.colorScheme === "dark" ? theme.fn.lighten(theme.fn.primaryColor(), 0.8) : theme.fn.primaryColor()
+          }
+        )
       }
     }
   )));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "exports": {
     ".": {
       "import": "./dist/main.js"