add action buttons to loading error screen

src/App.tsx

@@ -13,18 +13,20 @@ import tw from 'twin.macro';
 import 'styled-components';
 import usePluginStore from './stores/pluginStore';
 import DragContext from './systems/dnd/DragContext';
+import LoadingError from './components/LoadingError';
 
-const Wrapper = tw.div`bg-gray-200 text-midnight-600 w-screen h-screen relative overflow-hidden`;
+const Wrapper = tw.main`bg-gray-200 text-midnight-600 w-screen h-screen relative overflow-hidden`;
 
 // fetch the dataset once on app init
 useDataset.getState().fetch();
 
 const loadingSelector = (d: Dataset) => d.loading;
+const loadingErrorSelector = (d: Dataset) => d.loadingError;
 
 const App = (): JSX.Element => {
     const plugins = usePluginStore((state) => state.plugins);
-
     const loading = useDataset(loadingSelector) || plugins === undefined;
+    const loadingError = useDataset(loadingErrorSelector);
 
     const workspace = useRef<WorkspaceHandle>(null);
     const resetWorkspace = () => workspace.current?.reset();
@@ -44,7 +46,7 @@ const App = (): JSX.Element => {
         <DragContext>
             <Wrapper>
                 <WebGLDetector />
-                {!loading && (
+                {!loading && !loadingError && (
                     <ContextMenuProvider>
                         <div tw="flex flex-col h-full w-full">
                             <div tw="flex-initial relative">
@@ -72,6 +74,7 @@ const App = (): JSX.Element => {
                         <LoadingIndicator />
                     </div>
                 )}
+                {loadingError && <LoadingError problem={loadingError} />}
                 <ToastContainer position="bottom-right" />
             </Wrapper>
         </DragContext>

src/components/LoadingError.tsx

@@ -0,0 +1,39 @@
+import application from '../application';
+import { useDataset } from '../lib';
+import { Problem } from '../types';
+import Center from './ui/Center';
+import tw from 'twin.macro';
+
+interface Props {
+    problem: Problem;
+}
+
+const Button = tw.button`border border-gray-600 rounded px-2 py-1 text-sm`;
+
+const LoadingError = ({ problem }: Props): JSX.Element => {
+    const reload = () => location.reload();
+    const browse = () => useDataset.getState().clearLoadingError();
+    const close = () => window.close();
+
+    return (
+        <Center tw="flex flex-col gap-y-4 text-midnight-600">
+            <div tw="flex flex-col items-center">
+                <h1 tw="text-lg">Failed to load your dataset</h1>
+                <p tw="text-sm text-gray-800">(with the following API error)</p>
+            </div>
+            <div tw="border border-red-600 rounded bg-red-100 divide-y divide-red-600">
+                <h2 tw="font-bold p-1">{problem.title}</h2>
+                {problem.detail && <p tw="p-1 text-sm">{problem.detail}</p>}
+            </div>
+            <div tw="flex flex-row gap-x-2">
+                <Button onClick={reload}>Reload</Button>
+                {application.filebrowsingAllowed && (
+                    <Button onClick={browse}>Open another dataset</Button>
+                )}
+                <Button onClick={close}>Close</Button>
+            </div>
+        </Center>
+    );
+};
+
+export default LoadingError;

src/stores/dataset/dataset.ts

@@ -6,7 +6,6 @@ import { useColors } from '../colors';
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
-import { Table } from '../../client';
 import {
     ColumnsStats,
     DataColumn,
@@ -87,6 +86,7 @@ export interface Dataset {
     isComputingRelevance: boolean;
     recomputeColumnRelevance: () => void;
     focusRow: (row?: number) => void;
+    clearLoadingError: () => void;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -472,6 +472,9 @@ export const useDataset = create(
                     colorTransferFunctions: newTransferFunctions,
                 });
             },
+            clearLoadingError: () => {
+                set({ loadingError: undefined });
+            },
         };
     })
 );