@eeacms/volto-tableau 7.0.5 → 7.2.0

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -1,33 +1,46 @@
-import React, { useEffect } from 'react';
-import { Message } from 'semantic-ui-react';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import React, { useEffect, useState } from 'react';
+import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import { isFunction } from 'lodash';
+import { Message } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import { getContent } from '@plone/volto/actions';
 import PrivacyProtection from '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection';
-import { pickMetadata } from '@eeacms/volto-embed/helpers';
 import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
+import {
+  getQuery,
+  getTableauVisualization,
+  getParameters,
+  getFilters,
+} from '@eeacms/volto-tableau/Tableau/helpers';
+
+const timer = {};
 
-function getTableauVisualization(props) {
-  const { isBlock } = props;
-  const content = (isBlock ? props.tableauContent : props.content) || {};
-  const tableau_visualization =
-    (isBlock
-      ? props.tableauContent?.tableau_visualization
-      : props.content?.tableau_visualization) ||
-    props.data.tableau_visualization ||
-    {};
-  return {
-    ...pickMetadata(content),
-    ...tableau_visualization,
-  };
+function debounce(func, wait = 500, id) {
+  if (!isFunction(func)) return;
+  const name = id || func.name || 'generic';
+  if (timer[name]) clearTimeout(timer[name]);
+  timer[name] = setTimeout(func, wait);
 }
 
 const View = (props) => {
-  const { isBlock, id, mode, data, getContent, useVisibilitySensor } = props;
+  const {
+    isBlock,
+    id,
+    location,
+    mode,
+    data,
+    getContent,
+    useVisibilitySensor,
+    data_query,
+    discodata_query,
+    tableau_vis_url,
+    content,
+    tableauContent,
+  } = props;
   const {
     with_notes = true,
-    with_sources = true,
     with_more_info = true,
     with_download = true,
     with_share = true,
@@ -35,59 +48,135 @@ const View = (props) => {
     tableau_height,
   } = data;
 
-  const tableau_vis_url = flattenToAppURL(data.tableau_vis_url || '');
+  const [tableauVisualization, setTableauVisualization] = useState(() =>
+    getTableauVisualization({
+      isBlock,
+      data,
+      content,
+      tableauContent,
+    }),
+  );
+  const [query, setQuery] = useState(() => {
+    return getQuery({ data_query, location, tableau_vis_url, discodata_query });
+  });
+
+  const [extraParameters, setExtraParameters] = useState(() =>
+    getParameters({ tableauVisualization, query, data }),
+  );
+  const [extraFilters, setExtraFilters] = useState(() =>
+    getFilters({ tableauVisualization, query, data }),
+  );
+
+  /**
+   * Update tableau visualization
+   */
+  useEffect(() => {
+    setTableauVisualization(
+      getTableauVisualization({
+        isBlock,
+        data,
+        content,
+        tableauContent,
+      }),
+    );
+  }, [isBlock, data, content, tableauContent]);
 
-  const tableau_visualization = getTableauVisualization(props);
+  /**
+   * Update query
+   */
+  useEffect(() => {
+    setQuery(
+      getQuery({ data_query, location, tableau_vis_url, discodata_query }),
+    );
+  }, [tableau_vis_url, data_query, discodata_query, location]);
 
-  const { staticParameters = [] } = tableau_visualization;
+  /**
+   * Update extra parameters
+   */
+  useEffect(() => {
+    debounce(
+      () => {
+        setExtraParameters(
+          getParameters({
+            tableauVisualization,
+            query,
+            data,
+          }),
+        );
+      },
+      500,
+      'setExtraParameters',
+    );
+  }, [tableauVisualization, query, data]);
 
-  const extraOptions = React.useMemo(() => {
-    const options = {};
-    staticParameters.forEach((parameter) => {
-      if (parameter.field && parameter.value) {
-        options[parameter.field] = parameter.value;
-      }
-    });
-    return options;
-  }, [staticParameters]);
+  /**
+   * Update extra filters
+   */
+  useEffect(() => {
+    debounce(
+      () => {
+        setExtraFilters(
+          getFilters({
+            tableauVisualization,
+            query,
+            data,
+          }),
+        );
+      },
+      500,
+      'setExtraFilters',
+    );
+  }, [tableauVisualization, query, data]);
 
   useEffect(() => {
-    const tableauVisId = flattenToAppURL(tableau_visualization['@id'] || '');
+    /**
+     * If we are in edit mode, we need to fetch the content of the
+     * tableau visualization
+     */
+    const tableauVisId = flattenToAppURL(tableauVisualization['@id'] || '');
     if (
-      isBlock &&
       mode === 'edit' &&
+      !tableauVisualization.error &&
+      isBlock &&
       tableau_vis_url &&
       tableau_vis_url !== tableauVisId
     ) {
       getContent(tableau_vis_url, null, id);
     }
-  }, [id, isBlock, getContent, mode, tableau_vis_url, tableau_visualization]);
+  }, [id, isBlock, getContent, mode, tableau_vis_url, tableauVisualization]);
 
   if (props.mode === 'edit' && !tableau_vis_url) {
     return <Message>Please select a tableau from block editor.</Message>;
   }
 
+  if (tableauVisualization?.error) {
+    return (
+      <p dangerouslySetInnerHTML={{ __html: tableauVisualization.error }} />
+    );
+  }
+
   return (
     <div className="embed-tableau">
       <PrivacyProtection
         {...props}
-        data={{ ...data, url: tableau_visualization?.url }}
+        data={{ ...data, url: tableauVisualization?.url }}
         useVisibilitySensor={useVisibilitySensor}
       >
         <Tableau
           data={{
-            ...tableau_visualization,
+            ...tableauVisualization,
             tableau_height:
-              tableau_height || tableau_visualization.tableau_height,
+              tableau_height || tableauVisualization.tableau_height,
             with_notes,
-            with_sources,
+            with_sources: true,
             with_more_info,
             with_download,
             with_share,
             with_enlarge,
             tableau_vis_url,
           }}
-          extraOptions={extraOptions}
+          extraParameters={extraParameters}
+          extraFilters={extraFilters}
         />
       </PrivacyProtection>
     </div>
@@ -95,11 +184,19 @@ const View = (props) => {
 };
 
 export default compose(
+  withRouter,
   connect(
-    (state, props) => ({
-      tableauContent: state.content.subrequests?.[props.id]?.data,
-      isBlock: !!props.data?.['@type'],
-    }),
+    (state, props) => {
+      const tableau_vis_url = flattenToAppURL(props.data.tableau_vis_url || '');
+      const pathname = flattenToAppURL(state.content.data['@id']);
+      return {
+        tableauContent: state.content?.subrequests?.[props.id]?.data,
+        discodata_query: state.discodata_query,
+        data_query: state.connected_data_parameters.byContextPath[pathname],
+        isBlock: !!props.data?.['@type'],
+        tableau_vis_url,
+      };
+    },
     {
       getContent,
     },

package/src/Blocks/EmbedTableauVisualization/__snapshots__/Edit.test.jsx.snap

@@ -50,12 +50,31 @@ Array [
           className="ui segment form attached"
         >
           <div
-            className="mocked-url-widget"
+            className="mocked-default-widget"
             id="mocked-field-tableau_vis_url"
           >
             Tableau visualization
              - 
-            No description
+            <div>
+              <p>
+                When using context query parameters please use the corresponding field name from the Tableau service.
+              </p>
+              <p>
+                NOTE: The embeded tableau dashboard must have the parameters defined in the
+                 
+                <span
+                  style={
+                    Object {
+                      "color": "rgb(15, 130, 204)",
+                    }
+                  }
+                >
+                  'Dynamic parameters'
+                </span>
+                 
+                list so that the context query parameters can take effect.
+              </p>
+            </div>
           </div>
           <div
             className="mocked-default-widget"
@@ -135,14 +154,6 @@ Array [
                      - 
                     No description
                   </div>
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_sources"
-                  >
-                    Show sources
-                     - 
-                    Will show sources set in this page Data provenance
-                  </div>
                   <div
                     className="mocked-boolean-widget"
                     id="mocked-field-with_more_info"
@@ -181,6 +192,75 @@ Array [
           </div>
         </div>
       </div>
+      <div
+        className="accordion ui fluid styled form"
+      >
+        <div
+          id="blockform-fieldset-options"
+        >
+          <div
+            className="title"
+            onClick={[Function]}
+          >
+            Parameters
+            <svg
+              className="icon"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": undefined,
+                }
+              }
+              onClick={null}
+              style={
+                Object {
+                  "fill": "currentColor",
+                  "height": "20px",
+                  "width": "auto",
+                }
+              }
+              viewBox=""
+              xmlns=""
+            />
+          </div>
+          <div
+            className="content"
+          >
+            <div
+              aria-hidden={true}
+              className="rah-static rah-static--height-zero"
+              style={
+                Object {
+                  "height": 0,
+                  "overflow": "hidden",
+                }
+              }
+            >
+              <div
+                style={
+                  Object {
+                    "WebkitTransition": "opacity 500ms ease 0ms",
+                    "opacity": 0,
+                    "transition": "opacity 500ms ease 0ms",
+                  }
+                }
+              >
+                <div
+                  className="ui segment attached"
+                >
+                  <div
+                    className="mocked-default-widget"
+                    id="mocked-field-staticParameters"
+                  >
+                    Static parameters
+                     - 
+                    Set a list of static parameters.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div
         className="accordion ui fluid styled form"
       >

package/src/Blocks/EmbedTableauVisualization/schema.js

@@ -53,6 +53,22 @@ const getProtectionSchema = () => ({
   required: [],
 });
 
+const staticParameters = {
+  title: 'Parameter',
+  fieldsets: [{ id: 'default', title: 'Default', fields: ['field', 'value'] }],
+  properties: {
+    field: {
+      title: 'Tableau fieldname',
+      type: 'text',
+    },
+    value: {
+      title: 'Value',
+      type: 'text',
+    },
+  },
+  required: [],
+};
+
 export default (props) => {
   return {
     title: 'Embed Dashboard (Tableau)',
@@ -67,13 +83,17 @@ export default (props) => {
         title: 'Toolbar',
         fields: [
           'with_notes',
-          'with_sources',
           'with_more_info',
           'with_download',
           'with_share',
           'with_enlarge',
         ],
       },
+      {
+        id: 'options',
+        title: 'Parameters',
+        fields: ['staticParameters'],
+      },
       {
         id: 'privacy',
         title: 'Privacy',
@@ -83,7 +103,23 @@ export default (props) => {
     properties: {
       tableau_vis_url: {
         title: 'Tableau visualization',
-        widget: 'url',
+        widget: 'internal_url',
+        description: (
+          <div>
+            <p>
+              When using context query parameters please use the corresponding
+              field name from the Tableau service.
+            </p>
+            <p>
+              NOTE: The embeded tableau dashboard must have the parameters
+              defined in the{' '}
+              <span style={{ color: 'rgb(15, 130, 204)' }}>
+                'Dynamic parameters'
+              </span>{' '}
+              list so that the context query parameters can take effect.
+            </p>
+          </div>
+        ),
       },
       with_notes: {
         title: 'Show note',
@@ -134,6 +170,12 @@ export default (props) => {
         widget: 'object',
         schema: getProtectionSchema(),
       },
+      staticParameters: {
+        title: 'Static parameters',
+        widget: 'object_list',
+        schema: staticParameters,
+        description: 'Set a list of static parameters.',
+      },
     },
 
     required: ['tableau_vis_url'],

package/src/Tableau/Tableau.jsx

@@ -9,7 +9,22 @@ import React, {
 } from 'react';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-import { isEqual, isUndefined, isNaN, isNumber } from 'lodash';
+import {
+  isEqual,
+  isUndefined,
+  isNaN,
+  isNumber,
+  forOwn,
+  find,
+  includes,
+  isArray,
+  isString,
+  isInteger,
+  isBoolean,
+  toString,
+  toInteger,
+  toNumber,
+} from 'lodash';
 import cx from 'classnames';
 import { Button } from 'semantic-ui-react';
 import { Toast, Icon } from '@plone/volto/components';
@@ -48,7 +63,9 @@ const TableauDebug = ({ mode, data, vizState, url, version, clearData }) => {
   return (
     <div className="tableau-debug">
       {!url && !vizState.error && <p className="tableau-error">URL required</p>}
-      {vizState.error && <p className="tableau-error">{vizState.error}</p>}
+      {isString(vizState.error) && (
+        <p className="tableau-error">{vizState.error}</p>
+      )}
       {vizState.loaded && url && (
         <h3 className="tableau-version">
           Tableau <span className="version">{version}</span>
@@ -93,6 +110,7 @@ const Tableau = forwardRef((props, ref) => {
     data = {},
     breakpoints = {},
     extraFilters = {},
+    extraParameters = {},
     extraOptions = {},
     mode = 'view',
     screen = {},
@@ -100,6 +118,7 @@ const Tableau = forwardRef((props, ref) => {
     setVizState,
     onChangeBlock,
   } = props;
+
   const {
     data_provenance = {},
     figure_note = [],
@@ -244,10 +263,10 @@ const Tableau = forwardRef((props, ref) => {
         hideToolbar,
         toolbarPosition,
         device: !!breakpointUrl ? device : 'desktop',
+        ...extraOptions,
         ...data.filters,
-        ...data.parameters,
         ...extraFilters,
-        ...extraOptions,
+        ...extraParameters,
         onFirstInteractive: () => {
           onVizStateUpdate(true, true, null);
           setInitiateViz(false);
@@ -296,32 +315,11 @@ const Tableau = forwardRef((props, ref) => {
         },
       });
     } catch (e) {
-      onVizStateUpdate(false, false, e.get_message());
+      onVizStateUpdate(false, false, e?.get_message?.() || e);
       setInitiateViz(false);
     }
   };
 
-  const addExtraFilters = (extraFilters) => {
-    const worksheets =
-      viz.current.getWorkbook().getActiveSheet().getWorksheets() || [];
-
-    worksheets.forEach((worksheet) => {
-      if (worksheet.getSheetType() === tableau.DashboardObjectType.WORKSHEET) {
-        Object.keys(extraFilters).forEach((filter) => {
-          if (!extraFilters[filter]) {
-            worksheet.clearFilterAsync(filter);
-          } else {
-            worksheet.applyFilterAsync(
-              filter,
-              extraFilters[filter],
-              tableau.FilterUpdateType.REPLACE,
-            );
-          }
-        });
-      }
-    });
-  };
-
   const updateScale = () => {
     const iframe = vizEl.current.querySelector('iframe');
     const { sheetSize = {} } = viz.current.getVizSize() || {};
@@ -358,12 +356,99 @@ const Tableau = forwardRef((props, ref) => {
     /* eslint-disable-next-line */
   }, [loaded, loading, initiateViz]);
 
+  /**
+   * TODO: make this work
+   */
+  // useEffect(() => {
+  //   async function addExtraFilters() {
+  //     if (vizState.current.loaded && viz.current) {
+  //       const dashboard = viz.current.getWorkbook().getActiveSheet();
+  //       const tableauFilters = await dashboard.getFiltersAsync();
+
+  //       forOwn(extraFilters, (value, fieldName) => {
+  //         const tableauFilter = find(
+  //           tableauFilters,
+  //           (f) => f.getFieldName() === fieldName,
+  //         );
+  //         if (!tableauFilter) return;
+  //         if (!value) {
+  //           tableauFilter.getWorksheet().clearFilterAsync(fieldName);
+  //           return;
+  //         }
+  //         const filterType = tableauFilter.getFilterType();
+  //         if (filterType === 'categorical') {
+  //           if (!isArray(value)) {
+  //             value = [value];
+  //           }
+  //           dashboard.applyFilterAsync(
+  //             fieldName,
+  //             value,
+  //             tableau.FilterUpdateType.REPLACE,
+  //           );
+  //         }
+  //         /**
+  //          * TODO: handle other filter types
+  //          */
+  //       });
+  //     }
+  //   }
+  //   addExtraFilters();
+  //   /* eslint-disable-next-line */
+  // }, [loaded, JSON.stringify(extraFilters)]);
+
   useEffect(() => {
-    if (vizState.current.loaded && viz.current) {
-      addExtraFilters(extraFilters);
+    async function addExtraParameters() {
+      if (vizState.current.loaded && viz.current) {
+        const workbook = viz.current.getWorkbook();
+        const tableauParameters = await workbook.getParametersAsync();
+        forOwn(extraParameters, (value, fieldName) => {
+          const tableauParameter = find(
+            tableauParameters,
+            (p) => p.getName() === fieldName,
+          );
+          if (!tableauParameter || !value) return;
+          const allowableValuesType = tableauParameter.getAllowableValuesType();
+          const dataType = tableauParameter.getDataType();
+          if (includes(['all', 'list'], allowableValuesType)) {
+            const values = tableauParameter
+              .getAllowableValues()
+              ?.map((v) => v.value);
+            if (!isArray(value)) {
+              value = [value];
+            }
+            value = value
+              .filter((v) => includes(values, v))
+              .map((v) => {
+                if (dataType === 'string' && !isString(v)) {
+                  return toString(v);
+                }
+                if (dataType === 'integer' && !isInteger(v)) {
+                  return toInteger(v);
+                }
+                if (dataType === 'float' && !isNumber(v)) {
+                  return toNumber(v);
+                }
+                if (dataType === 'boolean' && !isBoolean(v)) {
+                  return !!v;
+                }
+                return v;
+              });
+            if (value.length) {
+              workbook.changeParameterValueAsync(fieldName, value);
+            }
+          }
+          if (allowableValuesType === 'range' && value) {
+            /**
+             * TODO: handle range parameters
+             */
+            workbook.changeParameterValueAsync(fieldName, value);
+          }
+        });
+      }
     }
+    addExtraParameters();
     /* eslint-disable-next-line */
-  }, [JSON.stringify(extraFilters)]);
+  }, [loaded, JSON.stringify(extraParameters)]);
 
   useEffect(() => {
     if (vizState.current.loaded && viz.current && autoScale) {