Merge pull request #1393 from zauberzeug/plotly

Re-use plotly plot if config did not change

nicegui/elements/plotly.py

@@ -43,12 +43,8 @@ class Plotly(Element, component='plotly.vue', libraries=['lib/plotly/plotly.min.
         self.update()
 
     def update(self) -> None:
+        self._props['options'] = self._get_figure_json()
         super().update()
-        options = self._get_figure_json()
-        options['config'] = \
-            {**options['config'], **{'responsive': True}} if 'config' in options else {'responsive': True}
-        self._props['options'] = options
-        self.run_method('update', self._props['options'])
 
     def _get_figure_json(self) -> Dict:
         if isinstance(self.figure, go.Figure):

nicegui/elements/plotly.vue

@@ -6,15 +6,34 @@
 export default {
   async mounted() {
     await this.$nextTick();
-    Plotly.newPlot(this.$el.id, this.options.data, this.options.layout, this.options.config);
+    this.update();
+  },
+  updated() {
+    this.update();
   },
-
   methods: {
-    update(options) {
-      Plotly.newPlot(this.$el.id, options.data, options.layout, options.config);
+    update() {
+      // default responsive to true
+      const options = this.options;
+      if (options.config === undefined) options.config = { responsive: true };
+      if (options.config.responsive === undefined) options.config.responsive = true;
+
+      // re-use plotly instance if config is the same
+      if (JSON.stringify(options.config) == JSON.stringify(this.last_options.config)) {
+        Plotly.react(this.$el.id, this.options.data, this.options.layout);
+      } else {
+        Plotly.newPlot(this.$el.id, this.options.data, this.options.layout, options.config);
+      }
+
+      // store last options
+      this.last_options = options;
     },
   },
-
+  data() {
+    return {
+      last_options: {},
+    };
+  },
   props: {
     options: Object,
   },
@@ -23,10 +42,8 @@ export default {
 
 <style>
 /*
-  fix styles to correctly render modebar, otherwise large
-  buttons with unwanted line breaks are shown, possibly
-  due to other CSS libraries overriding default styles
-  affecting plotly styling.
+  fix styles to correctly render modebar, otherwise large buttons with unwanted line breaks are shown,
+  possibly due to other CSS libraries overriding default styles affecting plotly styling.
 */
 .js-plotly-plot .plotly .modebar-group {
   display: flex;