Merge pull request #729 from plotly/async-components

Make FornaContainer component async
plotly · Feb 24, 2023 · 2954dfe · 2954dfe
2 parents 2b16035 + e7a6feb
commit 2954dfe
Show file tree

Hide file tree

Showing 18 changed files with 152 additions and 116 deletions.
diff --git a/R/internal.R b/R/internal.R
@@ -14,6 +14,12 @@ all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
 version = "1.0.2", src = list(href = NULL,
 file = "deps"), meta = NULL,
+script = 'async-fornacontainer.js',
+stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
+all_files = FALSE, async = TRUE), class = "html_dependency"),
+`dash_bio` = structure(list(name = "dash_bio",
+version = "1.0.2", src = list(href = NULL,
+file = "deps"), meta = NULL,
 script = 'async-ideogram.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
@@ -92,6 +98,12 @@ all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
 version = "1.0.2", src = list(href = NULL,
 file = "deps"), meta = NULL,
+script = 'async-fornacontainer.js.map',
+stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
+all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
+`dash_bio` = structure(list(name = "dash_bio",
+version = "1.0.2", src = list(href = NULL,
+file = "deps"), meta = NULL,
 script = 'async-ideogram.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),

diff --git a/dash_bio/__init__.py b/dash_bio/__init__.py
@@ -32,6 +32,7 @@
 async_resources = [
     'alignment',
     'circos',
+    'fornacontainer',
     'ideogram',
     'igv',
     'pileup',

diff --git a/dash_bio/async-fornacontainer.js b/dash_bio/async-fornacontainer.js
diff --git a/dash_bio/async-fornacontainer.js.map b/dash_bio/async-fornacontainer.js.map
diff --git a/dash_bio/bundle.js b/dash_bio/bundle.js
diff --git a/dash_bio/bundle.js.map b/dash_bio/bundle.js.map
diff --git a/dash_bio/dash_bio-shared.js b/dash_bio/dash_bio-shared.js
diff --git a/dash_bio/dash_bio-shared.js.map b/dash_bio/dash_bio-shared.js.map
diff --git a/dash_bio/metadata.json b/dash_bio/metadata.json
@@ -807,15 +807,7 @@
   "src/lib/components/FornaContainer.react.js": {
     "description": "FornaContainer is a force-directed graph that is used to visualize\nthe secondary structure of biomolecules. It is based on the fornac\nlibrary (https://github.com/ViennaRNA/fornac).",
     "displayName": "FornaContainer",
-    "methods": [
-      {
-        "name": "renderNewSequences",
-        "docblock": null,
-        "modifiers": [],
-        "params": [],
-        "returns": null
-      }
-    ],
+    "methods": [],
     "props": {
       "id": {
         "type": {

diff --git a/inst/deps/async-fornacontainer.js b/inst/deps/async-fornacontainer.js
diff --git a/inst/deps/async-fornacontainer.js.map b/inst/deps/async-fornacontainer.js.map
diff --git a/inst/deps/bundle.js b/inst/deps/bundle.js
diff --git a/inst/deps/bundle.js.map b/inst/deps/bundle.js.map
diff --git a/inst/deps/dash_bio-shared.js b/inst/deps/dash_bio-shared.js
diff --git a/inst/deps/dash_bio-shared.js.map b/inst/deps/dash_bio-shared.js.map
diff --git a/src/lib/LazyLoader.js b/src/lib/LazyLoader.js
@@ -6,6 +6,10 @@ export default {
         ),
     circos: () =>
         import(/* webpackChunkName: "circos" */ './fragments/Circos.react'),
+    fornacontainer: () =>
+        import(
+            /* webpackChunkName: "fornacontainer" */ './fragments/FornaContainer.react'
+        ),
     ideogram: () =>
         import(/* webpackChunkName: "ideogram" */ './fragments/Ideogram.react'),
     igv: () => import(/* webpackChunkName: "igv" */ './fragments/Igv.react'),

diff --git a/src/lib/components/FornaContainer.react.js b/src/lib/components/FornaContainer.react.js
@@ -1,112 +1,20 @@
-import React, {Component} from 'react';
+import React, {Component, lazy, Suspense} from 'react';
 import PropTypes from 'prop-types';
-import {FornaContainer as PreFornaContainer} from 'fornac';
-import * as R from 'ramda';
+import LazyLoader from '../LazyLoader';
+
+const RealFornaContainer = lazy(LazyLoader.fornacontainer);
 
 /**
  * FornaContainer is a force-directed graph that is used to visualize
  * the secondary structure of biomolecules. It is based on the fornac
  * library (https://github.com/ViennaRNA/fornac).
  */
 export default class FornaContainer extends Component {
-    constructor(props) {
-        super(props);
-        this.renderNewSequences = this.renderNewSequences.bind(this);
-        this.containerRef = React.createRef();
-    }
-
-    componentDidMount() {
-        const {
-            height,
-            width,
-            nodeFillColor,
-            colorScheme,
-            customColors,
-            allowPanningAndZooming,
-            hoverPattern,
-        } = this.props;
-
-        this._fornaContainer = new PreFornaContainer(
-            this.containerRef.current,
-            {
-                initialSize: [width, height],
-                allowPanningAndZooming: allowPanningAndZooming,
-                hoverPattern: hoverPattern,
-            }
-        );
-        // initialize the correct colors
-        this._fornaContainer.addCustomColors(customColors);
-        this._fornaContainer.changeColorScheme(colorScheme);
-
-        this.renderNewSequences();
-
-        if (nodeFillColor !== undefined) {
-            this._fornaContainer.setOutlineColor(nodeFillColor);
-        }
-    }
-
-    componentDidUpdate() {
-        this.renderNewSequences();
-    }
-
-    renderNewSequences() {
-        const {sequences} = this.props;
-
-        if (this._fornaContainer) {
-            this._fornaContainer.clearNodes();
-
-            sequences.forEach((seq) => {
-                const unpackedOptions = Object.assign({}, seq.options, {
-                    sequence: seq.sequence,
-                    structure: seq.structure,
-                });
-                this._fornaContainer.addRNA(seq.structure, unpackedOptions);
-            });
-        }
-    }
-
-    shouldComponentUpdate(nextProps) {
-        const {sequences, colorScheme, hoverPattern, loading_state} =
-            this.props;
-
-        if (!R.equals(sequences, nextProps.sequences)) {
-            return true;
-        }
-
-        if (nextProps.hoverPattern !== hoverPattern) {
-            this._fornaContainer.setHoverPattern(nextProps.hoverPattern);
-            return true;
-        }
-
-        this._fornaContainer.addCustomColors(nextProps.customColors);
-        this._fornaContainer.changeColorScheme(colorScheme);
-
-        if (nextProps.nodeFillColor !== undefined) {
-            this._fornaContainer.setOutlineColor(nextProps.nodeFillColor);
-        }
-
-        if (
-            JSON.stringify(loading_state) !==
-            JSON.stringify(nextProps.loading_state)
-        ) {
-            return true;
-        }
-
-        return false;
-    }
-
     render() {
         return (
-            <div
-                id={this.props.id}
-                ref={this.containerRef}
-                style={{outline: 'none'}}
-                data-dash-is-loading={
-                    (this.props.loading_state &&
-                        this.props.loading_state.is_loading) ||
-                    undefined
-                }
-            />
+            <Suspense fallback={null}>
+                <RealFornaContainer {...this.props} />
+            </Suspense>
         );
     }
 }
@@ -303,3 +211,6 @@ FornaContainer.defaultProps = {
     allowPanningAndZooming: true,
     colorScheme: 'sequence',
 };
+
+export const defaultProps = FornaContainer.defaultProps;
+export const propTypes = FornaContainer.propTypes;
diff --git a/src/lib/fragments/FornaContainer.react.js b/src/lib/fragments/FornaContainer.react.js
@@ -0,0 +1,110 @@
+import React, {Component} from 'react';
+import {FornaContainer as PreFornaContainer} from 'fornac';
+import * as R from 'ramda';
+import {propTypes, defaultProps} from '../components/FornaContainer.react';
+
+export default class FornaContainer extends Component {
+    constructor(props) {
+        super(props);
+        this.renderNewSequences = this.renderNewSequences.bind(this);
+        this.containerRef = React.createRef();
+    }
+
+    componentDidMount() {
+        const {
+            height,
+            width,
+            nodeFillColor,
+            colorScheme,
+            customColors,
+            allowPanningAndZooming,
+            hoverPattern,
+        } = this.props;
+
+        this._fornaContainer = new PreFornaContainer(
+            this.containerRef.current,
+            {
+                initialSize: [width, height],
+                allowPanningAndZooming: allowPanningAndZooming,
+                hoverPattern: hoverPattern,
+            }
+        );
+        // initialize the correct colors
+        this._fornaContainer.addCustomColors(customColors);
+        this._fornaContainer.changeColorScheme(colorScheme);
+
+        this.renderNewSequences();
+
+        if (nodeFillColor !== undefined) {
+            this._fornaContainer.setOutlineColor(nodeFillColor);
+        }
+    }
+
+    componentDidUpdate() {
+        this.renderNewSequences();
+    }
+
+    renderNewSequences() {
+        const {sequences} = this.props;
+
+        if (this._fornaContainer) {
+            this._fornaContainer.clearNodes();
+
+            sequences.forEach((seq) => {
+                const unpackedOptions = Object.assign({}, seq.options, {
+                    sequence: seq.sequence,
+                    structure: seq.structure,
+                });
+                this._fornaContainer.addRNA(seq.structure, unpackedOptions);
+            });
+        }
+    }
+
+    shouldComponentUpdate(nextProps) {
+        const {sequences, colorScheme, hoverPattern, loading_state} =
+            this.props;
+
+        if (!R.equals(sequences, nextProps.sequences)) {
+            return true;
+        }
+
+        if (nextProps.hoverPattern !== hoverPattern) {
+            this._fornaContainer.setHoverPattern(nextProps.hoverPattern);
+            return true;
+        }
+
+        this._fornaContainer.addCustomColors(nextProps.customColors);
+        this._fornaContainer.changeColorScheme(colorScheme);
+
+        if (nextProps.nodeFillColor !== undefined) {
+            this._fornaContainer.setOutlineColor(nextProps.nodeFillColor);
+        }
+
+        if (
+            JSON.stringify(loading_state) !==
+            JSON.stringify(nextProps.loading_state)
+        ) {
+            return true;
+        }
+
+        return false;
+    }
+
+    render() {
+        return (
+            <div
+                id={this.props.id}
+                ref={this.containerRef}
+                style={{outline: 'none'}}
+                data-dash-is-loading={
+                    (this.props.loading_state &&
+                        this.props.loading_state.is_loading) ||
+                    undefined
+                }
+            />
+        );
+    }
+}
+
+FornaContainer.defaultProps = defaultProps;
+FornaContainer.propTypes = propTypes;