setup the loader, script loading, data provenance, error catching

eea · Jan 12, 2023 · bc65898 · bc65898
1 parent 2d8f314
commit bc65898
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git a/src/Blocks/EmbedEEATableauBlock/View.jsx b/src/Blocks/EmbedEEATableauBlock/View.jsx
@@ -21,9 +21,20 @@ const View = (props) => {
 
   return (
     <>
-      <ConnectedTableau {...props.tableau_visualization} id={props.id} />
-      {with_sources &&
-        (props.mode !== 'edit' ? <Sources data={data.tableauSources} /> : '')}
+      {data?.vis_url ? (
+        <>
+          <ConnectedTableau {...props.tableau_visualization} id={props.id} />
+          {with_sources &&
+          data.tableauSources &&
+          props.tableau_visualization ? (
+            <Sources data={data.tableauSources} />
+          ) : (
+            <div>Data provenance is not set in the visualization</div>
+          )}
+        </>
+      ) : (
+        <div>Please select a visualization from block editor.</div>
+      )}
     </>
   );
 };

diff --git a/src/ConnectedTableau/ConnectedTableau.jsx b/src/ConnectedTableau/ConnectedTableau.jsx
@@ -2,9 +2,15 @@ import React from 'react';
 import Tableau from '@eeacms/volto-tableau/Tableau/View';
 
 const ConnectedTableau = (props) => {
+  const [error, setError] = React.useState(null);
+  const [loaded, setLoaded] = React.useState(null);
   return (
     <div className="tableau-block">
       <Tableau
+        error={error}
+        loaded={loaded}
+        setError={setError}
+        setLoaded={setLoaded}
         data={{ ...props?.general, ...props?.options, ...props?.extraOptions }}
         url={props?.general?.url}
       />

diff --git a/src/Sources/Sources.jsx b/src/Sources/Sources.jsx
@@ -12,7 +12,6 @@ import './style.css';
 
 const SourcesWidget = ({ data }) => {
   const [expand, setExpand] = React.useState(true);
-
   return (
     <div>
       <a className="embed-sources-header" onClick={() => setExpand(!expand)}>

diff --git a/src/Tableau/View.jsx b/src/Tableau/View.jsx
@@ -206,12 +206,18 @@ const Tableau = (props) => {
   return (
     <div id="tableau-wrap">
       <div id="tableau-outer">
-        {loaded ? (
-          ''
+        {data && Object.keys(data).length > 0 ? (
+          <>
+            {loaded ? (
+              ''
+            ) : (
+              <div className="tableau-loader">
+                <span>Loading Tableau v{version}</span>
+              </div>
+            )}
+          </>
         ) : (
-          <div className="tableau-loader">
-            <span>Loading Tableau v{version}</span>
-          </div>
+          <div>No data present in that visualization.</div>
         )}
         <div
           className={cx('tableau', version, {

diff --git a/src/helpers.js b/src/helpers.js
@@ -1,13 +1,13 @@
 const loadTableauScript = (callback, version) => {
-  const existingScript = document.getElementById(`tableauJS`);
+  const existingScript = __CLIENT__ && document.getElementById(`tableauJS`);
   //replace script loaded on each version change
   if (existingScript) {
     existingScript.setAttribute(
       'src',
       `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`,
     );
   }
-  if (!existingScript) {
+  if (!existingScript && __CLIENT__) {
     const script = document.createElement('script');
     script.src = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
     script.id = `tableauJS`;