Feature/lazy loading

RELEASE.md

@@ -16,7 +16,7 @@ Please follow the established format:
 
 - Upgrade to `dart-scss` and update the recommended Node version to v16. (#1026)
 - Fix the export functionality of experiment tracking data. (#1033)
-- Color cleanup and refactor. (#1007)
+- Add lazy loading to experiment tracking. (#1041)
 # Release 5.0.1
 
 ## Bug fixes and other changes

package.json

@@ -70,6 +70,7 @@
     "lodash.noop": "^3.0.1",
     "lodash.sortby": "^4.7.0",
     "plotly.js-dist-min": "^1.58.4",
+    "react-content-loader": "^6.2.0",
     "react-csv": "^2.2.2",
     "react-custom-scrollbars": "^4.2.1",
     "react-json-view": "^1.21.3",

src/components/experiment-tracking/details/details.js

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
 import RunMetadata from '../run-metadata';
+import { SingleRunMetadataLoader } from '../run-metadata/run-metadata-loader';
 import RunDataset from '../run-dataset';
+import { SingleRunDatasetLoader } from '../run-dataset/run-dataset-loader';
 import RunDetailsModal from '../run-details-modal';
 import RunPlotsModal from '../run-plots-modal';
 import RunExportModal from '../run-export-modal';
@@ -12,9 +14,11 @@ import './details.css';
 const Details = ({
   enableComparisonView,
   enableShowChanges,
-  runDataError,
+  isRunDataLoading,
+  newRunAdded,
   onRunSelection,
   pinnedRun,
+  runDataError,
   runMetadata,
   runTrackingData,
   selectedRunIds,
@@ -30,6 +34,33 @@ const Details = ({
 }) => {
   const [runMetadataToEdit, setRunMetadataToEdit] = useState(null);
   const [runDatasetToShow, setRunDatasetToShow] = useState({});
+  const [showSingleRunLoader, setShowSingleRunLoader] = useState(false);
+  const [showRunLoader, setRunLoader] = useState(false);
+
+  // delay showing loader for 0.2s so it has enough time to load the data first
+  useEffect(() => {
+    // for single run
+    if (isRunDataLoading && !enableComparisonView) {
+      const showSingleRunLoaderTimer = setTimeout(() => {
+        setShowSingleRunLoader(true);
+      }, 200);
+
+      return () => clearTimeout(showSingleRunLoaderTimer);
+    } else {
+      setShowSingleRunLoader(false);
+    }
+
+    // for multiple runs when the comparison mode is active
+    if (isRunDataLoading && newRunAdded) {
+      const showRunLoaderTimer = setTimeout(() => {
+        setRunLoader(true);
+      }, 200);
+
+      return () => clearTimeout(showRunLoaderTimer);
+    } else {
+      setRunLoader(false);
+    }
+  }, [isRunDataLoading, newRunAdded, enableComparisonView]);
 
   useEffect(() => {
     if (runMetadata && !enableComparisonView) {
@@ -45,6 +76,19 @@ const Details = ({
     return null;
   }
 
+  if (showSingleRunLoader) {
+    return (
+      <div
+        className={classnames('kedro', 'details-mainframe', {
+          'details-mainframe--sidebar-visible': sidebarVisible,
+        })}
+      >
+        <SingleRunMetadataLoader theme={theme} />
+        <SingleRunDatasetLoader theme={theme} />
+      </div>
+    );
+  }
+
   return (
     <>
       <ButtonTimeoutContextProvider>
@@ -84,6 +128,8 @@ const Details = ({
           setPinnedRun={setPinnedRun}
           setRunMetadataToEdit={setRunMetadataToEdit}
           setShowRunDetailsModal={setShowRunDetailsModal}
+          showLoader={showRunLoader}
+          theme={theme}
         />
         <RunDataset
           enableComparisonView={enableComparisonView}
@@ -92,7 +138,9 @@ const Details = ({
           pinnedRun={pinnedRun}
           setRunDatasetToShow={setRunDatasetToShow}
           setShowRunPlotsModal={setShowRunPlotsModal}
+          showLoader={showRunLoader}
           trackingData={runTrackingData}
+          theme={theme}
         />
       </div>
     </>

src/components/experiment-tracking/run-dataset/run-dataset-loader.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import {
+  experimentTrackingLazyLoadingColours,
+  experimentTrackingLazyLoadingGap,
+} from '../../../config';
+
+import './run-dataset.css';
+
+const GAP = experimentTrackingLazyLoadingGap;
+
+const SubCatLoader = ({ y }) => (
+  <>
+    <rect width="10" height="10" x="0" y={y + 3} />
+    <rect width="100" height="20" x="30" y={y} />
+  </>
+);
+
+const TitleLoader = ({ y }) => (
+  <>
+    <rect width="10" height="10" x="0" y={y + 3} />
+    <rect width="180" height="20" x="30" y={y} />
+    <rect width="50" height="16" x="0" y={y + GAP} />
+    <rect width="100" height="16" x="0" y={y + GAP * 2} />
+  </>
+);
+
+const DetailsLoader = ({ x, y }) => {
+  return (
+    <>
+      <rect width="0" height="0" x={x} y={y} />
+      <rect width="50" height="16" x={x} y={y + GAP} />
+      <rect width="180" height="16" x={x} y={y + GAP * 2} />
+    </>
+  );
+};
+
+export const SingleRunDatasetLoader = ({ theme }) => (
+  <div className="details-dataset">
+    <ContentLoader
+      viewBox="0 0 1000 625"
+      width="1000px"
+      height="100%"
+      backgroundColor={
+        theme === 'dark'
+          ? experimentTrackingLazyLoadingColours.backgroundDarkTheme
+          : experimentTrackingLazyLoadingColours.backgroundLightTheme
+      }
+      foregroundColor={
+        theme === 'dark'
+          ? experimentTrackingLazyLoadingColours.foregroundDarkTheme
+          : experimentTrackingLazyLoadingColours.foregroundLightTheme
+      }
+    >
+      <SubCatLoader y={0} />
+
+      <TitleLoader y={50} />
+      <DetailsLoader x={380} y={50} />
+
+      <TitleLoader y={185} />
+      <DetailsLoader x={380} y={185} />
+
+      <TitleLoader y={320} />
+      <DetailsLoader x={380} y={320} />
+    </ContentLoader>
+  </div>
+);
+
+export const DataSetLoader = ({ x, y, length, theme }) => {
+  return (
+    <ContentLoader
+      viewBox="0 10 200 30"
+      width="180px"
+      height="100%"
+      backgroundColor={
+        theme === 'dark'
+          ? experimentTrackingLazyLoadingColours.backgroundDarkTheme
+          : experimentTrackingLazyLoadingColours.backgroundLightTheme
+      }
+      foregroundColor={
+        theme === 'dark'
+          ? experimentTrackingLazyLoadingColours.foregroundDarkTheme
+          : experimentTrackingLazyLoadingColours.foregroundLightTheme
+      }
+    >
+      <rect width="150" height="16" x={x} y={y + length * 2} />
+    </ContentLoader>
+  );
+};

src/components/experiment-tracking/run-dataset/run-dataset.js

@@ -5,6 +5,7 @@ import PinArrowIcon from '../../icons/pin-arrow';
 import PlotlyChart from '../../plotly-chart';
 import { sanitizeValue } from '../../../utils/experiment-tracking-utils';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { DataSetLoader } from './run-dataset-loader';
 
 import getShortType from '../../../utils/short-type';
 import './run-dataset.css';
@@ -49,7 +50,9 @@ const RunDataset = ({
   pinnedRun,
   setRunDatasetToShow,
   setShowRunPlotsModal,
+  showLoader,
   trackingData,
+  theme,
 }) => {
   if (!trackingData) {
     return null;
@@ -76,7 +79,6 @@ const RunDataset = ({
           >
             {trackingData[group].map((dataset) => {
               const { data, datasetType, datasetName, runIds } = dataset;
-
               return (
                 <Accordion
                   className="details-dataset__accordion"
@@ -109,7 +111,9 @@ const RunDataset = ({
                         enableComparisonView,
                         enableShowChanges,
                         setRunDatasetToShow,
-                        setShowRunPlotsModal
+                        setShowRunPlotsModal,
+                        showLoader,
+                        theme
                       );
                     })}
                 </Accordion>
@@ -142,7 +146,9 @@ function buildDatasetDataMarkup(
   enableComparisonView,
   enableShowChanges,
   setRunDatasetToShow,
-  setShowRunPlotsModal
+  setShowRunPlotsModal,
+  showLoader,
+  theme
 ) {
   const isPlotlyDataset = getShortType(datasetType) === 'plotly';
   const isImageDataset = getShortType(datasetType) === 'image';
@@ -181,6 +187,14 @@ function buildDatasetDataMarkup(
               </CSSTransition>
             ))}
           </TransitionGroup>
+          {showLoader && (
+            <DataSetLoader
+              length={datasetValues.length}
+              theme={theme}
+              x={0}
+              y={12}
+            />
+          )}
         </div>
       ) : null}
       <div className="details-dataset__row">
@@ -248,6 +262,14 @@ function buildDatasetDataMarkup(
             );
           })}
         </TransitionGroup>
+        {showLoader && (
+          <DataSetLoader
+            length={datasetValues.length}
+            theme={theme}
+            x={0}
+            y={12}
+          />
+        )}
       </div>
     </React.Fragment>
   );

src/components/experiment-tracking/run-dataset/run-dataset.scss

@@ -9,7 +9,6 @@
 
 .details-dataset__accordion {
   margin-bottom: 36px;
-  max-width: 75em;
   width: 100%;
 }
 

src/components/experiment-tracking/run-metadata/animation.scss

@@ -40,9 +40,11 @@ $animation-timing: 0.3s;
 
 .details-metadata__run--first-run-comparison-view .details-metadata__title {
   opacity: 1;
-  transition: opacity $animation-timing ease-in;
+  transition: opacity $animation-timing linear;
 }
 
+// animation for other run when select or deselect
+// needed to use react-cssTransition to animate when the run is not existed in the DOM anymore
 // animation for other run when select or deselect
 // needed to use react-cssTransition to animate when the run is not existed in the DOM anymore
 .details-metadata__run-animation-enter,

src/components/experiment-tracking/run-metadata/run-metadata-loader.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import {
+  experimentTrackingLazyLoadingColours,
+  experimentTrackingLazyLoadingGap,
+} from '../../../config';
+
+import './run-metadata.css';
+
+const GAP = experimentTrackingLazyLoadingGap;
+
+const TitleLoader = () => (
+  <>
+    <rect width="180" height="20" x="0" y="12" />
+    <rect width="88" height="16" x="0" y={12 + GAP} />
+    <rect width="88" height="16" x="0" y={12 + GAP * 2} />
+    <rect width="88" height="16" x="0" y={12 + GAP * 3} />
+    <rect width="88" height="16" x="0" y={12 + GAP * 4} />
+    <rect width="88" height="16" x="0" y={12 + GAP * 5} />
+    <rect width="88" height="16" x="0" y={12 + GAP * 6} />
+  </>
+);
+
+const DetailsLoader = ({ x }) => (
+  <>
+    <rect width="0" height="0" x={x} y="12" />
+    <rect width="30" height="16" x={x} y={12 + GAP} />
+    <rect width="180" height="16" x={x} y={12 + GAP * 2} />
+    <rect width="88" height="16" x={x} y={12 + GAP * 3} />
+    <rect width="50" height="16" x={x} y={12 + GAP * 4} />
+    <rect width="100" height="16" x={x} y={12 + GAP * 5} />
+    <rect width="150" height="16" x={x} y={12 + GAP * 6} />
+  </>
+);
+
+export const SingleRunMetadataLoader = ({ theme }) => (
+  <div className="details-metadata">
+    <ContentLoader
+      viewBox="0 0 1000 300"
+      width="1000px"
+      height="100%"
+      backgroundColor={
+        theme === 'dark'
+          ? experimentTrackingLazyLoadingColours.backgroundDarkTheme
+          : experimentTrackingLazyLoadingColours.backgroundLightTheme
+      }
+      foregroundColor={
+        theme === 'dark'
+          ? experimentTrackingLazyLoadingColours.foregroundDarkTheme
+          : experimentTrackingLazyLoadingColours.foregroundLightTheme
+      }
+    >
+      <TitleLoader />
+      <DetailsLoader x={380} />
+    </ContentLoader>
+  </div>
+);
+
+export const MetaDataLoader = ({ length, theme }) => {
+  const x = length > 1 ? 75 : 0;
+
+  return (
+    <tbody className="details-metadata__run-lazy-loader">
+      <tr>
+        <td>
+          <ContentLoader
+            viewBox="0 0 200 300"
+            width="200px"
+            height="100%"
+            backgroundColor={
+              theme === 'dark'
+                ? experimentTrackingLazyLoadingColours.backgroundDarkTheme
+                : experimentTrackingLazyLoadingColours.backgroundLightTheme
+            }
+            foregroundColor={
+              theme === 'dark'
+                ? experimentTrackingLazyLoadingColours.foregroundDarkTheme
+                : experimentTrackingLazyLoadingColours.foregroundLightTheme
+            }
+          >
+            <DetailsLoader x={x} />
+          </ContentLoader>
+        </td>
+      </tr>
+    </tbody>
+  );
+};