Merge pull request #66 from Kitware/adblock_wasm

Tell user if file load errored

Sources/MainView.js

@@ -3,6 +3,9 @@ import 'normalize.css/normalize.css';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { ToastContainer, Slide } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 import UI from './ui';
 import Layouts from './layouts';
 import LayoutConfig from './config/glanceLayoutConfig';
@@ -185,6 +188,15 @@ export default class MainView extends React.Component {
         >
           <AboutPage />
         </TitleModal>
+        <ToastContainer
+          position="top-right"
+          autoClose={8000}
+          transition={Slide}
+          hideProgressBar
+          closeOnClick
+          pauseOnHover
+          draggable={false}
+        />
       </div>
     );
   }

Sources/controls/FileLoader/RawReader.js

@@ -210,9 +210,8 @@ export default class RawReader extends React.Component {
           <Button
             className={style.button}
             onClick={this.onLoad}
-            disabled={userDim !== this.state.size}
+            disabled={userDim !== this.state.size || this.state.loading}
             style={{ marginLeft: '5px' }}
-            loading={this.state.loading}
           >
             Read
           </Button>

Sources/controls/FileLoader/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { toast } from 'react-toastify';
+
 import UI from '../../ui';
 import ReaderFactory from '../../io/ReaderFactory';
 import RawReader from './RawReader';
 import style from './FileLoader.mcss';
 
-const { Button, FaIcon } = UI;
+const { Button, FaIcon, Messages } = UI;
 
 export default class FileLoader extends React.Component {
   constructor(props) {
@@ -34,7 +36,10 @@ export default class FileLoader extends React.Component {
             this.setState({ file: null });
             this.props.updateTab('pipeline');
           })
-          .catch(() => {
+          .catch((error) => {
+            if (error) {
+              toast.error(Messages.LoadFailure);
+            }
             // No reader found
             if (files.length === 1) {
               this.setState({ file: files[0] });

Sources/io/ReaderFactory.js

@@ -95,9 +95,11 @@ function readRawData({ fileName, data }) {
         reader[fileNameMethod](fileName);
       }
       const ds = reader[parseMethod](data);
-      Promise.resolve(ds).then((dataset) =>
-        resolve({ dataset, reader, sourceType, name: fileName })
-      );
+      Promise.resolve(ds)
+        .then((dataset) =>
+          resolve({ dataset, reader, sourceType, name: fileName })
+        )
+        .catch(reject);
     } else {
       reject();
     }

Sources/ui/Messages/Messages.mcss

@@ -0,0 +1,8 @@
+.errorLine {
+  margin: 0;
+  padding: 2px;
+}
+
+.errorLink {
+  color: yellow;
+}

Sources/ui/Messages/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import style from './Messages.mcss';
+
+function Link(props) {
+  return (
+    <a rel="noopener noreferrer" target="_blank" {...props}>
+      {props.children}
+    </a>
+  );
+}
+
+Link.propTypes = {
+  children: PropTypes.node,
+};
+
+Link.defaultProps = {
+  children: null,
+};
+
+export const LoadFailure = (
+  <div>
+    <p className={style.errorLine}>Failed to load image.</p>
+    <p className={style.errorLine}>
+      <Link
+        className={style.errorLink}
+        href="https://github.com/Kitware/pv-web-viewer/issues/62"
+      >
+        Perhaps AdBlock is enabled?
+      </Link>
+    </p>
+    <p className={style.errorLine}>
+      Or your image is not yet supported.&nbsp;
+      <Link
+        className={style.errorLink}
+        href="https://github.com/Kitware/pv-web-viewer/issues"
+      >
+        Tell us!
+      </Link>
+    </p>
+  </div>
+);
+
+export default {
+  LoadFailure,
+};

Sources/ui/index.js

@@ -1,11 +1,13 @@
 import Button from './Button';
+import Messages from './Messages';
 import FaIcon from './FaIcon';
 import Menu from './Menu';
 import Progress from './Progress';
 import TitleModal from './TitleModal';
 
 export default {
   Button,
+  Messages,
   FaIcon,
   Menu,
   Progress,

package.json

@@ -18,6 +18,7 @@
         "mout": "1.0.0",
         "normalize.css": "^8.0.0",
         "paraviewweb": "3.0.13",
+        "react-toastify": "^4.0.0-rc.5",
         "shelljs": "0.7.8",
         "vtk.js": "6.4.19"
     },