Merge pull request #40 from buildrs/oleg/loading

Oleg/loading
bldrs-ai · Nov 1, 2021 · 3f86e99 · 3f86e99
2 parents 433a61f + 180c9b7
commit 3f86e99
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 56 deletions.
diff --git a/public/index.html b/public/index.html
@@ -52,7 +52,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Buildrs</title>
+    <title>BLDRS</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,11 +1,11 @@
 import './App.css';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { createTheme, ThemeProvider } from '@material-ui/core/styles';
 import { grey } from '@material-ui/core/colors';
 import CadView from './Containers/CadView';
 
-const outerTheme = createTheme({
+const bldrsTheme = createTheme({
   palette: {
     primary: {
       main: grey[500],
@@ -19,7 +19,7 @@ const outerTheme = createTheme({
 
 function App() {
   return (
-    <ThemeProvider theme={outerTheme}>
+    <ThemeProvider theme={bldrsTheme}>
       <Router>
         <Switch>
           <Route path='/'>

diff --git a/src/Components/SnackbarMessage.js b/src/Components/SnackbarMessage.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import Snackbar from '@mui/material/Snackbar';
+import { makeStyles } from '@material-ui/core/styles';
+import MuiAlert from '@mui/material/Alert';
+
+const Alert = React.forwardRef(function Alert(props, ref) {
+  return <MuiAlert elevation={1} ref={ref} variant='filled' {...props} />;
+});
+
+const useStyles = makeStyles((theme) => ({
+  alert: {
+    backgroundColor: '#787878',
+    width: 'auto',
+    paddingRight: 20,
+  },
+}));
+
+const SnackBarMessage = ({ message, type, open }) => {
+  const classes = useStyles();
+  return (
+    <Snackbar
+      open={open}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      autoHideDuration={6000}
+    >
+      <Alert
+        style={{
+          backgroundColor: '#787878',
+          width: 'auto',
+          paddingRight: 20,
+          textTransform: 'uppercase',
+        }}
+        severity={type}
+      >
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default SnackBarMessage;
diff --git a/src/Components/ToolBar.js b/src/Components/ToolBar.js
@@ -44,7 +44,7 @@ const ToolBar = ({ fileOpen, onClickShare }) => {
           }}
         >
           <Typography variant='h6' className={classes.title}>
-            BUILDRS
+            BLDRS
           </Typography>
 
           <IconButton

diff --git a/src/Containers/CadView.js b/src/Containers/CadView.js
@@ -9,12 +9,11 @@ import SearchBar from '../Components/SearchBar';
 import ToolBar from '../Components/ToolBar';
 import gtag from '../utils/gtag.js';
 
+import SnackBarMessage from '../Components/SnackbarMessage';
 import '../App.css';
 
-
 const debug = 0;
 
-
 const useStyles = makeStyles((theme) => ({
   root: {
     ...theme.typography.button,
@@ -111,25 +110,33 @@ const CadView = () => {
   const [selectedElement, setSelectedElement] = useState({});
   const [selectedElements, setSelectedElements] = useState([]);
   const [expandedElements, setExpandedElements] = useState([]);
-
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingMessage, setLoadingMessage] = useState();
+  console.log('is Loading', isLoading);
   const onClickShare = () => setShowShare(!showShare);
 
-  const [searchIndex, setSearchIndex] = useState({clearIndex: () => {}});
-
+  const [searchIndex, setSearchIndex] = useState({ clearIndex: () => {} });
 
   const clearSearch = () => {
     setSelectedElements([]);
     viewer.IFC.unpickIfcItems();
-  }
-
+  };
 
-  const selectItems = resultIDs => {
-    setSelectedElements(resultIDs.map(id => id + ''));
+  const selectItems = async (resultIDs) => {
+    console.log('in the select items');
+    setIsLoading(true);
+    setLoadingMessage('Selection in progress');
+    setSelectedElements(resultIDs.map((id) => id + ''));
+    console.log('selected elements', selectedElements);
     try {
       if (debug >= 2) {
         console.log('picking ifc items: ', resultIDs);
       }
-      viewer.pickIfcItemsByID(0, resultIDs);
+      console.log('in the try method');
+      setIsLoading(true);
+      await viewer.pickIfcItemsByID(0, resultIDs);
+      console.log('after await ');
+      setIsLoading(false);
     } catch (e) {
       // IFCjs will throw a big stack trace if there is not a visual
       // element, e.g. for IfcSite, but we still want to proceed to
@@ -138,10 +145,9 @@ const CadView = () => {
         console.error('TODO: no visual element for item ids: ', resultIDs);
       }
     }
-  }
-
+  };
 
-  const onSearch = query => {
+  const onSearch = (query) => {
     clearSearch();
     if (debug) {
       console.log(`CadView#onSearch: query: ${query}`);
@@ -154,34 +160,36 @@ const CadView = () => {
     const resultIDs = searchIndex.search(query);
     selectItems(resultIDs);
     gtag('event', 'search', {
-      search_term: query
+      search_term: query,
     });
-  }
-
+    setIsLoading(false);
+  };
 
   // TODO(pablo): search suggest
-  const onSearchModify = target => {}
+  const onSearchModify = (target) => {};
 
-  const onElementSelect = async elt => {
+  const onElementSelect = async (elt) => {
     const id = elt.expressID;
-    if (id === undefined) throw new Error('Selected element is missing Express ID');
+    if (id === undefined)
+      throw new Error('Selected element is missing Express ID');
     selectItems([id]);
     const props = await viewer.getProperties(0, elt.expressID);
     setSelectedElement(props);
     setShowItemPanel(true);
-  }
-
+  };
 
   const onModelLoad = (rootElt, viewer) => {
     setRootElement(rootElt);
     if (debug >= 2) {
-      console.log(`CadView#fileOpen: json: '${JSON.stringify(rootElt, null, '  ')}'`);
+      console.log(
+        `CadView#fileOpen: json: '${JSON.stringify(rootElt, null, '  ')}'`
+      );
     }
-    const expanded = [rootElt.expressID+''];
+    const expanded = [rootElt.expressID + ''];
     let elt = rootElt;
     for (let i = 0; i < 3; i++) {
       if (elt.children.length > 0) {
-        expanded.push(elt.expressID+'');
+        expanded.push(elt.expressID + '');
         elt = elt.children[0];
       }
     }
@@ -198,7 +206,6 @@ const CadView = () => {
     setShowSearchBar(true);
   };
 
-
   // Similar to componentDidMount and componentDidUpdate:
   useEffect(() => {
     const container = document.getElementById('viewer-container');
@@ -211,7 +218,7 @@ const CadView = () => {
     viewer.addGrid();
     window.onmousemove = viewer.prepickIfcItem;
     window.ondblclick = viewer.addClippingPlane;
-    window.onkeydown = event => viewer.removeClippingPlane();
+    window.onkeydown = (event) => viewer.removeClippingPlane();
 
     // Expanded version of viewer.loadIfcUrl('/index.ifc').  Using
     // this to get access to progress and error.
@@ -222,55 +229,59 @@ const CadView = () => {
       }
       viewer.IFC.loader.load(
         filePath,
-        model => {
+        (model) => {
           if (debug) {
             console.log('CadView#useEffect$onLoad, model: ', model, viewer);
           }
           viewer.IFC.addIfcModel(model);
           const rootEltPromise = model.ifcManager.getSpatialStructure(0, true);
-          rootEltPromise.then(rootElt => {
+          rootEltPromise.then((rootElt) => {
             onModelLoad(rootElt, viewer);
           });
         },
-        progressEvent => {
+        (progressEvent) => {
           if (debug) {
             console.log('CadView#useEffect$onProgress', progressEvent);
           }
         },
-        error => {
+        (error) => {
           console.error('CadView#useEffect$onError', error);
-        });
+        }
+      );
     }
   }, []);
 
-
-  const loadIfc = async file => {
+  const loadIfc = async (file) => {
+    setIsLoading(true);
+    setLoadingMessage('model is loading');
     if (debug) {
       console.log(viewer);
     }
     await viewer.loadIfc(file, true);
+
     const rootElt = await viewer.IFC.getSpatialStructure(0, true);
     if (debug) {
       console.log('rootElt: ', rootElt);
     }
     onModelLoad(rootElt, viewer);
     gtag('event', 'select_content', {
       content_type: 'ifc_model',
-      item_id: file
+      item_id: file,
     });
+    setIsLoading(false);
   };
 
-
   const fileOpen = () => {
     const viewerContainer = document.getElementById('viewer-container');
     const fileInput = document.createElement('input');
     fileInput.setAttribute('type', 'file');
     fileInput.classList.add('file-input');
     fileInput.addEventListener(
       'change',
-      event => loadIfc(event.target.files[0]),
+      (event) => loadIfc(event.target.files[0]),
       false
     );
+
     viewerContainer.appendChild(fileInput);
     fileInput.click();
   };
@@ -289,6 +300,11 @@ const CadView = () => {
       ></div>
       <div index={{ zIndex: 100 }}>
         <ToolBar fileOpen={fileOpen} onClickShare={onClickShare} />
+        <SnackBarMessage
+          message={loadingMessage}
+          open={isLoading}
+          type={'info'}
+        />
         {showSearchBar && (
           <div className={classes.searchContainer}>
             <SearchBar
@@ -308,26 +324,22 @@ const CadView = () => {
           />
         </div>
 
-        {/* </div> */}
         <div className={classes.menuToolbarContainer}>
           <div>
             {showNavPanel ? (
               <NavPanel
-                viewer = {viewer}
-                element = {rootElement}
-                selectedElements = {selectedElements}
-                expandedElements = {expandedElements}
-                onElementSelect = {onElementSelect} />
-            ) : null
-          }
+                viewer={viewer}
+                element={rootElement}
+                selectedElements={selectedElements}
+                expandedElements={expandedElements}
+                onElementSelect={onElementSelect}
+              />
+            ) : null}
           </div>
-          <div>{
-            showItemPanel ? (
-              <ItemPanel
-                viewer = {viewer}
-                element = {selectedElement} />
-            ) : null
-          }
+          <div>
+            {showItemPanel ? (
+              <ItemPanel viewer={viewer} element={selectedElement} />
+            ) : null}
           </div>
         </div>
       </div>