Fix for Plotly chart not rendering (#1701)

* Fix for Plotly graph rendering * Jest test fix
kedro-org · Jan 15, 2024 · d2c91a1 · d2c91a1
1 parent 92836db
commit d2c91a1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/components/experiment-tracking/run-dataset/run-dataset.js b/src/components/experiment-tracking/run-dataset/run-dataset.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import Accordion from '../accordion';
 import PinArrowIcon from '../../icons/pin-arrow';
@@ -77,7 +77,12 @@ const RunDataset = ({
   trackingData,
   theme,
 }) => {
-  if (!trackingData) {
+  const clonedTrackingData = useMemo(
+    () => structuredClone(trackingData),
+    [trackingData]
+  );
+
+  if (!clonedTrackingData) {
     return null;
   }
 
@@ -87,7 +92,7 @@ const RunDataset = ({
         'details-dataset--not-overview': activeTab !== 'Overview',
       })}
     >
-      {Object.keys(trackingData)
+      {Object.keys(clonedTrackingData)
         .filter((group) => {
           if (activeTab === 'Plots' && group === activeTab) {
             return true;
@@ -122,7 +127,7 @@ const RunDataset = ({
               layout="left"
               size="large"
             >
-              {trackingData[group].length === 0 && (
+              {clonedTrackingData[group].length === 0 && (
                 <div className="details-dataset__row">
                   <span
                     className="details-dataset__name-header"
@@ -165,7 +170,7 @@ const RunDataset = ({
                   </TransitionGroup>
                 </div>
               )}
-              {trackingData[group].map((dataset) => {
+              {clonedTrackingData[group].map((dataset) => {
                 const { data, datasetType, datasetName, runIds } = dataset;
 
                 return (

diff --git a/src/components/experiment-tracking/run-dataset/run-dataset.test.js b/src/components/experiment-tracking/run-dataset/run-dataset.test.js
@@ -3,6 +3,7 @@ import RunDataset from '.';
 import { runs, trackingData } from '../../experiment-wrapper/mock-data';
 import JSONObject from '../../json-object';
 import { shallow, mount } from 'enzyme';
+import 'core-js/stable/structured-clone';
 
 const booleanTrackingData = {
   JSONData: [