fetch data functions updated

web/src/api/busterv2/datasets/queryRequests.ts

@@ -18,7 +18,8 @@ export const useGetDatasetData = (datasetId: string) => {
   return useCreateReactQuery<BusterDatasetData>({
     queryKey: ['datasetData', datasetId],
     queryFn,
-    enabled: !!datasetId
+    enabled: !!datasetId,
+    refetchOnMount: false
   });
 };
 

web/src/api/busterv2/datasets/requests.ts

@@ -23,7 +23,7 @@ export const getDatasetMetadata = async (datasetId: string): Promise<BusterDatas
 
 export const getDatasetData = async (datasetId: string): Promise<BusterDatasetData> => {
   return await mainApi
-    .get<BusterDatasetData>(`/datasets/${datasetId}/data`)
+    .get<BusterDatasetData>(`/datasets/${datasetId}/data/sample`)
     .then((res) => res.data);
 };
 

web/src/api/busterv2/datasets/responseInterfaces.ts

@@ -23,26 +23,11 @@ export interface BusterDatasetListItem {
 }
 
 export type BusterDataset = {
-  created_at: string;
-  created_by: string;
-  data_source_id: string;
-  database_name: string;
-  definition: string; //aka SQL
-  deleted_at: null;
-  enabled: boolean;
+  description: string;
   id: string;
   name: string;
-  schema: string;
-  type: 'view';
-  updated_at: string;
-  updated_by: string;
-  when_not_to_use: string;
-  when_to_use: string;
-  columns: BusterDatasetColumn[];
-  created_by_name: string;
-  data_source: DataSource;
-  data: Record<string, string | number | null>[];
-  imported: boolean;
+  sql: string;
+  yml_file: string;
 };
 
 export interface BusterDatasetColumn {
@@ -58,6 +43,4 @@ export interface BusterDatasetColumn {
   updated_at: string;
 }
 
-export interface BusterDatasetData {
-  data: Record<string, string | number | null>[];
-}
+export type BusterDatasetData = Record<string, string | number | null>[];

web/src/app/app/datasets/[datasetId]/_DatasetPageContext.tsx

@@ -13,14 +13,14 @@ import {
 export const useDatasetPageContext = ({ datasetId }: { datasetId: string }) => {
   const segments = useSelectedLayoutSegment() as DatasetApps;
   const [sql, setSQL] = useState<string>('');
-  const { dataset } = useIndividualDataset({ datasetId });
+  const datasetResult = useIndividualDataset({ datasetId });
   const selectedApp = segments;
 
   useLayoutEffect(() => {
-    setSQL(dataset?.definition || '');
-  }, [dataset?.definition]);
+    setSQL(datasetResult.dataset?.sql || '');
+  }, [datasetResult.dataset?.sql]);
 
-  return { sql, selectedApp, dataset, setSQL };
+  return { sql, selectedApp, setSQL, ...datasetResult };
 };
 
 const DatasetPageContext = createContext<ReturnType<typeof useDatasetPageContext>>(

web/src/app/app/datasets/[datasetId]/_DatasetsIndividualHeader/DatasetsIndividualHeader.tsx

@@ -28,14 +28,14 @@ export const DatasetsIndividualHeader: React.FC<{
   const isSQLApp = selectedApp === DatasetApps.EDITOR;
 
   const disablePublish = useMemo(() => {
-    const originalSQL = selectedDataset?.definition || '';
+    const originalSQL = selectedDataset?.sql || '';
     return !selectedDataset?.id || !sql || originalSQL === sql;
-  }, [selectedDataset?.definition, sql]);
+  }, [selectedDataset?.sql, sql]);
 
   const preventNavigation = !disablePublish;
 
   const onReset = useMemoizedFn(() => {
-    setSQL(selectedDataset?.definition || '');
+    setSQL(selectedDataset?.sql || '');
   });
 
   const onClosePublishModal = useMemoizedFn(() => {
@@ -86,7 +86,7 @@ export const DatasetsIndividualHeader: React.FC<{
             <Divider type="vertical" className="!h-4" />
 
             <div className="flex items-center space-x-2">
-              <Button type="text" onClick={onReset} disabled={sql === selectedDataset?.definition}>
+              <Button type="text" onClick={onReset} disabled={sql === selectedDataset?.sql}>
                 Reset
               </Button>
               <AppTooltip title={'Open publish dataset'} shortcuts={['p']}>

web/src/app/app/datasets/[datasetId]/overview/OverviewData.tsx

@@ -1,8 +1,7 @@
-import { BusterDataset } from '@/api/busterv2/datasets';
-import { AppMaterialIcons } from '@/components';
+import { BusterDataset, BusterDatasetData } from '@/api/busterv2/datasets';
+import { AppMaterialIcons, CircleSpinnerLoaderContainer, ShimmerText } from '@/components';
 import AppDataGrid from '@/components/table/AppDataGrid';
 import { useUserConfigContextSelector } from '@/context/Users';
-import { createBusterRoute, BusterRoutes } from '@/routes';
 import { useAntToken } from '@/styles/useAntToken';
 import { Button } from 'antd';
 import Link from 'next/link';
@@ -13,10 +12,10 @@ import isEmpty from 'lodash/isEmpty';
 import { createStyles } from 'antd-style';
 
 export const OverviewData: React.FC<{
-  definition: BusterDataset['definition'];
   datasetId: string;
-  data: BusterDataset['data'];
-}> = React.memo(({ definition, datasetId, data }) => {
+  data: BusterDatasetData;
+  isFetchedDatasetData: boolean;
+}> = React.memo(({ datasetId, data, isFetchedDatasetData }) => {
   const token = useAntToken();
   const isAdmin = useUserConfigContextSelector((state) => state.isAdmin);
 
@@ -28,11 +27,13 @@ export const OverviewData: React.FC<{
     <div
       className="buster-chart h-full w-full overflow-auto"
       style={{
-        maxHeight: '500px',
+        maxHeight: '70vh',
         border: `0.5px solid ${token.colorBorder}`,
         borderRadius: `${token.borderRadius}px`
       }}>
-      {!isEmpty(data) ? (
+      {!isFetchedDatasetData ? (
+        <LoadingState />
+      ) : !isEmpty(data) ? (
         <AppDataGrid
           rows={data || []}
           headerFormat={isAdmin ? (v) => v : undefined}
@@ -56,6 +57,14 @@ const EmptyState = () => {
   );
 };
 
+const LoadingState: React.FC<{}> = () => {
+  return (
+    <div className="flex justify-center py-24">
+      <ShimmerText text="Loading data..." />
+    </div>
+  );
+};
+
 const useStyles = createStyles(({ token }) => ({
   emptyState: {
     background: token.colorBgBase

web/src/app/app/datasets/[datasetId]/overview/page.tsx

@@ -9,10 +9,13 @@ import { Divider } from 'antd';
 export default function Page() {
   const selectedApp = useDatasetPageContextSelector((state) => state.selectedApp);
   const dataset = useDatasetPageContextSelector((state) => state.dataset);
+  const datasetData = useDatasetPageContextSelector((state) => state.datasetData);
+  const isFetchedDataset = useDatasetPageContextSelector((state) => state.isFetchedDataset);
+  const isFetchedDatasetData = useDatasetPageContextSelector((state) => state.isFetchedDatasetData);
   const sql = useDatasetPageContextSelector((state) => state.sql);
   const setSQL = useDatasetPageContextSelector((state) => state.setSQL);
 
-  const showSkeletonLoader = !dataset || !dataset?.id;
+  const showSkeletonLoader = !dataset?.id || !isFetchedDataset;
 
   return (
     <div className="mx-auto overflow-y-auto px-14 pb-12 pt-12">
@@ -23,16 +26,16 @@ export default function Page() {
           <div className="flex w-full flex-col space-y-5">
             <OverviewHeader
               datasetId={dataset.id}
-              description={dataset.when_to_use}
+              description={dataset.description}
               name={dataset.name}
             />
 
             <Divider />
 
             <OverviewData
-              definition={dataset.definition}
               datasetId={dataset.id}
-              data={dataset.data}
+              data={datasetData}
+              isFetchedDatasetData={isFetchedDatasetData}
             />
           </div>
         )}

web/src/context/Datasets/useIndividualDatasetHook.ts

@@ -111,7 +111,7 @@ export const useIndividualDatasetHook = ({}: {}) => {
 };
 
 export const useIndividualDataset = ({ datasetId }: { datasetId: string }) => {
-  const { data: dataset } = useGetDatasetMetadata(datasetId);
-  const { data: datasetData } = useGetDatasetData(datasetId);
-  return { dataset, datasetData };
+  const { data: dataset, isFetched: isFetchedDataset } = useGetDatasetMetadata(datasetId);
+  const { data: datasetData, isFetched: isFetchedDatasetData } = useGetDatasetData(datasetId);
+  return { dataset, datasetData, isFetchedDataset, isFetchedDatasetData };
 };