chart disappears on refresh (#1346)

* chart disappaers on refresh resolves #1339 resolves #1064 * Fab's comments --------- Co-authored-by: Fred Lefévère-Laoide <[email protected]>
Avaiga · Jun 4, 2024 · cc5ec3a · cc5ec3a
1 parent 89f60ea
commit cc5ec3a
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 64 deletions.
diff --git a/frontend/taipy-gui/package-lock.json b/frontend/taipy-gui/package-lock.json
diff --git a/frontend/taipy-gui/package.json b/frontend/taipy-gui/package.json
@@ -15,7 +15,7 @@
     "date-fns-tz": "^3.1.3",
     "lodash": "^4.17.21",
     "notistack": "^3.0.0",
-    "plotly.js": "^2.6.0",
+    "plotly.js": "^2.33.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.3",

diff --git a/frontend/taipy-gui/src/components/Taipy/Chart.tsx b/frontend/taipy-gui/src/components/Taipy/Chart.tsx
@@ -11,16 +11,7 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, {
-    CSSProperties,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-    lazy,
-    Suspense,
-} from "react";
+import React, { CSSProperties, useCallback, useEffect, useMemo, useRef, useState, lazy, Suspense } from "react";
 import {
     Config,
     Data,
@@ -214,7 +205,7 @@ const defaultConfig = {
     addIndex: [],
 } as ChartConfig;
 
-const emptyLayout = {} as Record<string, Record<string, unknown>>;
+const emptyLayout = {} as Partial<Layout>;
 const emptyData = {} as Record<string, TraceValueType>;
 
 const TaipyPlotlyButtons: ModeBarButtonAny[] = [
@@ -227,15 +218,20 @@ const TaipyPlotlyButtons: ModeBarButtonAny[] = [
             path: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z",
         },
         click: function (gd: HTMLElement, evt: Event) {
-            const title = gd.classList.toggle("full-screen") ? "Exit Full screen" : "Full screen";
-            (evt.currentTarget as HTMLElement).setAttribute("data-title", title);
-            const {height} = gd.dataset;
-            if (height) {
-                gd.attributeStyleMap.set("height", height);
-            } else {
-                gd.setAttribute("data-height", getComputedStyle(gd).height)
+            const div = gd.querySelector("div.svg-container") as HTMLDivElement;
+            if (!div) {
+                return;
+            }
+            const { height } = gd.dataset;
+            if (!height) {
+                gd.setAttribute("data-height", getComputedStyle(div).height);
+            }
+            const fs = gd.classList.toggle("full-screen");
+            (evt.currentTarget as HTMLElement).setAttribute("data-title", fs ? "Exit Full screen" : "Full screen");
+            if (height && !fs) {
+                div.attributeStyleMap.set("height", height);
             }
-            window.dispatchEvent(new Event('resize'));
+            window.dispatchEvent(new Event("resize"));
         },
     },
 ];
@@ -421,16 +417,20 @@ const Chart = (props: ChartProp) => {
                           getArrayValue(config.names, idx) ||
                           (config.columns[trace[1]] ? getColNameFromIndexed(config.columns[trace[1]].dfid) : undefined),
                   } as Record<string, unknown>;
-                  ret.marker = {...getArrayValue(config.markers, idx, ret.marker || {})};
-                  MARKER_TO_COL.forEach((prop) => {
-                      const val = (ret.marker as Record<string, unknown>)[prop];
-                      if (typeof val === "string") {
-                          const arr = getValueFromCol(datum, val as string);
-                          if (arr.length) {
-                              (ret.marker as Record<string, unknown>)[prop] = arr;
+                  ret.marker = { ...getArrayValue(config.markers, idx, ret.marker || {}) };
+                  if (Object.keys(ret.marker as object).length) {
+                      MARKER_TO_COL.forEach((prop) => {
+                          const val = (ret.marker as Record<string, unknown>)[prop];
+                          if (typeof val === "string") {
+                              const arr = getValueFromCol(datum, val as string);
+                              if (arr.length) {
+                                  (ret.marker as Record<string, unknown>)[prop] = arr;
+                              }
                           }
-                      }
-                  });
+                      });
+                  } else {
+                      delete ret.marker;
+                  }
                   const xs = getValue(datum, trace, 0) || [];
                   const ys = getValue(datum, trace, 1) || [];
                   const addIndex = getArrayValue(config.addIndex, idx, true) && !ys.length;
@@ -504,7 +504,7 @@ const Chart = (props: ChartProp) => {
             }
         }
         plconf.modeBarButtonsToAdd = TaipyPlotlyButtons;
-        plconf.responsive = true;
+        // plconf.responsive = true; // this is the source of the on/off height ...
         plconf.autosizable = true;
         if (!active) {
             plconf.staticPlot = true;

diff --git a/taipy/gui/gui.py b/taipy/gui/gui.py
@@ -962,8 +962,8 @@ def __upload_files(self):
                                 # remove file_path after it is merged
                                 part_file_path.unlink()
                     except EnvironmentError as ee:  # pragma: no cover
-                        _warn("Cannot group file after chunk upload", ee)
-                        return
+                        _warn(f"Cannot group file after chunk upload for {file.filename}", ee)
+                        return (f"Cannot group file after chunk upload for {file.filename}", 500)
                 # notify the file is uploaded
                 newvalue = str(file_path)
                 if multiple: