better loading free table data

packages/web/src/appobj/archiveFileAppObject.js

@@ -29,14 +29,20 @@ function Menu({ data, setOpenedTabs }) {
     openArchive(setOpenedTabs, data.fileName, data.folderName);
   };
   const handleOpenWrite = async () => {
-    const resp = await axios.post('archive/load-free-table', { file: data.fileName, folder: data.folderName });
+    // const resp = await axios.post('archive/load-free-table', { file: data.fileName, folder: data.folderName });
 
     openNewTab(setOpenedTabs, {
       title: data.fileName,
       icon: 'freetable.svg',
       tabComponent: 'FreeTableTab',
       props: {
-        initialData: resp.data,
+        initialData: {
+          functionName: 'archiveReader',
+          props: {
+            fileName: data.fileName,
+            folderName: data.folderName,
+          },
+        },
         archiveFile: data.fileName,
         archiveFolder: data.folderName,
       },

packages/web/src/datagrid/DataGridCore.js

@@ -90,22 +90,6 @@ const RowCountLabel = styled.div`
   bottom: 20px;
 `;
 
-const LoadingInfoWrapper = styled.div`
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-`;
-const LoadingInfoBox = styled.div`
-  background-color: #ccc;
-  padding: 10px;
-  border: 1px solid gray;
-`;
-
 /** @param props {import('./types').DataGridProps} */
 export default function DataGridCore(props) {
   const {
@@ -296,14 +280,7 @@ export default function DataGridCore(props) {
     return `Rows: ${allRowCount.toLocaleString()}`;
   }, [selectedCells, allRowCount, grider, visibleRealColumns]);
 
-  if (!columns || columns.length == 0)
-    return (
-      <LoadingInfoWrapper>
-        <LoadingInfoBox>
-          <LoadingInfo message="Waiting for structure" />
-        </LoadingInfoBox>
-      </LoadingInfoWrapper>
-    );
+  if (!columns || columns.length == 0) return <LoadingInfo wrapper message="Waiting for structure" />;
 
   if (errorMessage) {
     return <ErrorInfo message={errorMessage} />;
@@ -936,8 +913,8 @@ export default function DataGridCore(props) {
           )}
         </TableHead>
         <TableBody ref={tableBodyRef}>
-          {_.range(firstVisibleRowScrollIndex, firstVisibleRowScrollIndex + visibleRowCountUpperBound)
-            .map((rowIndex) => (
+          {_.range(firstVisibleRowScrollIndex, firstVisibleRowScrollIndex + visibleRowCountUpperBound).map(
+            (rowIndex) => (
               <DataGridRow
                 key={rowIndex}
                 grider={grider}
@@ -952,7 +929,8 @@ export default function DataGridCore(props) {
                 display={display}
                 focusedColumn={display.focusedColumn}
               />
-            ))}
+            )
+          )}
         </TableBody>
       </Table>
       <HorizontalScrollBar
@@ -972,23 +950,14 @@ export default function DataGridCore(props) {
         viewportRatio={visibleRowCountUpperBound / grider.rowCount}
       />
       {allRowCount && <RowCountLabel>{rowCountInfo}</RowCountLabel>}
-      {props.toolbarPortalRef && props.toolbarPortalRef.current &&
+      {props.toolbarPortalRef &&
+        props.toolbarPortalRef.current &&
         tabVisible &&
         ReactDOM.createPortal(
-          <DataGridToolbar
-            reload={() => display.reload()}
-            save={handleSave}
-            grider={grider}
-          />,
+          <DataGridToolbar reload={() => display.reload()} save={handleSave} grider={grider} />,
           props.toolbarPortalRef.current
         )}
-      {isLoading && (
-        <LoadingInfoWrapper>
-          <LoadingInfoBox>
-            <LoadingInfo message="Loading data" />
-          </LoadingInfoBox>
-        </LoadingInfoWrapper>
-      )}
+      {isLoading && <LoadingInfo wrapper message="Loading data" />}
     </GridContainer>
   );
 }

packages/web/src/tabs/FreeTableTab.js

@@ -9,14 +9,33 @@ import FreeTableGrid from '../freetable/FreeTableGrid';
 import SaveArchiveModal from '../modals/SaveArchiveModal';
 import useModalState from '../modals/useModalState';
 import axios from '../utility/axios';
+import LoadingInfo from '../widgets/LoadingInfo';
 import { changeTab } from '../utility/common';
+import ErrorInfo from '../widgets/ErrorInfo';
 
 export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, toolbarPortalRef, tabid, initialData }) {
   const [config, setConfig] = useGridConfig(tabid);
-  const [modelState, dispatchModel] = useUndoReducer(initialData || createFreeTableModel());
+  const [modelState, dispatchModel] = useUndoReducer(createFreeTableModel());
   const storageKey = `tabdata_freetable_${tabid}`;
   const saveSqlFileModalState = useModalState();
   const setOpenedTabs = useSetOpenedTabs();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState(null);
+
+  const handleLoadInitialData = async () => {
+    setIsLoading(true);
+    try {
+      const resp = await axios.post('runners/load-reader', initialData);
+      // @ts-ignore
+      dispatchModel({ type: 'reset', value: resp.data });
+      setIsLoading(false);
+    } catch (err) {
+      setIsLoading(false);
+      const errorMessage = (err && err.response && err.response.data && err.response.data.error) || 'Loading failed';
+      setErrorMessage(errorMessage);
+      console.error(err.response);
+    }
+  };
 
   React.useEffect(() => {
     const existingData = localStorage.getItem(storageKey);
@@ -24,6 +43,8 @@ export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, to
       const value = JSON.parse(existingData);
       // @ts-ignore
       dispatchModel({ type: 'reset', value });
+    } else if (initialData) {
+      handleLoadInitialData();
     }
   }, []);
 
@@ -40,6 +61,13 @@ export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, to
     }));
   };
 
+  if (isLoading) {
+    return <LoadingInfo wrapper message="Loading data" />;
+  }
+  if (errorMessage) {
+    return <ErrorInfo message={errorMessage} />;
+  }
+
   return (
     <>
       <FreeTableGrid

packages/web/src/widgets/LoadingInfo.js

@@ -13,8 +13,24 @@ const Spinner = styled.div`
   margin: 10px;
 `;
 
-export default function LoadingInfo({ message }) {
-  return (
+const LoadingInfoWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+`;
+const LoadingInfoBox = styled.div`
+  background-color: #ccc;
+  padding: 10px;
+  border: 1px solid gray;
+`;
+
+export default function LoadingInfo({ message, wrapper = false }) {
+  const core = (
     <Container>
       <Spinner>
         <i className="fas fa-spinner fa-spin" />
@@ -22,4 +38,13 @@ export default function LoadingInfo({ message }) {
       {message}
     </Container>
   );
+  if (wrapper) {
+    return (
+      <LoadingInfoWrapper>
+        <LoadingInfoBox>{core}</LoadingInfoBox>
+      </LoadingInfoWrapper>
+    );
+  } else {
+    return core;
+  }
 }