From 1f90e28370f18ef53e260aa98e448039b9b5d81c Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Thu, 4 Aug 2022 18:29:19 +0200
Subject: [PATCH] WIP

---
 .../chart_types/flame_chart/flame_chart.tsx   |  12 ++-
 .../icicle/04_cpu_profile_gl_flame.story.tsx  | 102 ++++++++++++------
 2 files changed, 78 insertions(+), 36 deletions(-)

diff --git a/packages/charts/src/chart_types/flame_chart/flame_chart.tsx b/packages/charts/src/chart_types/flame_chart/flame_chart.tsx
index 31e75db76f2..e96447f91e7 100644
--- a/packages/charts/src/chart_types/flame_chart/flame_chart.tsx
+++ b/packages/charts/src/chart_types/flame_chart/flame_chart.tsx
@@ -211,6 +211,10 @@ class FlameComponent extends React.Component<FlameProps> {
 
   constructor(props: Readonly<FlameProps>) {
     super(props);
+    this.initialize();
+  }
+
+  initialize = () => {
     const columns = this.props.columnarViewModel;
 
     // vector length checks
@@ -243,7 +247,7 @@ class FlameComponent extends React.Component<FlameProps> {
 
     // search
     this.currentColor = columns.color;
-  }
+  };
 
   private focusOnNavElement(element?: NavRect) {
     if (!element) {
@@ -331,6 +335,7 @@ class FlameComponent extends React.Component<FlameProps> {
      * the DOM element has just been appended, and getContext('2d') is always non-null,
      * so we could use a couple of ! non-null assertions but no big plus
      */
+    this.initialize();
     this.tryCanvasContext();
     this.drawCanvas();
     this.props.onChartRendered();
@@ -348,6 +353,9 @@ class FlameComponent extends React.Component<FlameProps> {
   };
 
   componentDidUpdate = () => {
+    console.log('component did update');
+    this.initialize();
+    this.restoreGL(this.glContext);
     if (!this.ctx) this.tryCanvasContext();
     this.bindControls();
     this.ensureTextureAndDraw();
@@ -970,7 +978,7 @@ class FlameComponent extends React.Component<FlameProps> {
           <div
             style={{
               position: 'absolute',
-              transform: `translate(20px, 20px)`,
+              transform: 'translate(20px, 20px)',
               background: 'beige',
               opacity: 0.8,
             }}
diff --git a/storybook/stories/icicle/04_cpu_profile_gl_flame.story.tsx b/storybook/stories/icicle/04_cpu_profile_gl_flame.story.tsx
index e291db9f831..0dac54edca7 100644
--- a/storybook/stories/icicle/04_cpu_profile_gl_flame.story.tsx
+++ b/storybook/stories/icicle/04_cpu_profile_gl_flame.story.tsx
@@ -7,18 +7,22 @@
  */
 
 import { action } from '@storybook/addon-actions';
-import { boolean, button } from '@storybook/addon-knobs';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { Chart, Datum, Flame, Settings, PartialTheme, FlameGlobalControl, FlameNodeControl } from '@elastic/charts';
+import {
+  Chart,
+  ColumnarViewModel,
+  Datum,
+  Flame,
+  Settings,
+  PartialTheme,
+  ControlProviderCallback,
+} from '@elastic/charts';
 import columnarMock from '@elastic/charts/src/mocks/hierarchical/cpu_profile_tree_mock_columnar.json';
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
 
 import { useBaseTheme } from '../../use_base_theme';
 
-const position = new Float32Array(columnarMock.position);
-const size = new Float32Array(columnarMock.size);
-
 const pseudoRandom = getRandomNumberGenerator('a_seed');
 
 const paletteColorBrewerCat12 = [
@@ -36,55 +40,85 @@ const paletteColorBrewerCat12 = [
   [255, 237, 111],
 ];
 
-const columnarData = {
-  label: columnarMock.label.map((index: number) => columnarMock.dictionary[index]), // reversing the dictionary encoding
-  value: new Float64Array(columnarMock.value),
-  // color: new Float32Array((columnarMock.color.match(/.{2}/g) ?? []).map((hex: string) => Number.parseInt(hex, 16) / 255)),
-  color: new Float32Array(
-    columnarMock.label.flatMap(() => [...paletteColorBrewerCat12[pseudoRandom(0, 11)].map((c) => c / 255), 1]),
-  ),
-  position0: position, // new Float32Array([...position].slice(1)), // try with the wrong array length
-  position1: position,
-  size0: size,
-  size1: size,
-};
+function generateColorsForLabels(labels: any[]): number[] {
+  return labels.flatMap(() => [...paletteColorBrewerCat12[pseudoRandom(0, 11)].map((c) => c / 255), 1]);
+}
 
-const noop = () => {};
+const largeDataset: ColumnarViewModel = (() => {
+  return {
+    label: columnarMock.label.map((index: number) => columnarMock.dictionary[index]),
+    value: new Float64Array(columnarMock.value),
+    color: new Float32Array(generateColorsForLabels(columnarMock.label)),
+    position0: new Float32Array(columnarMock.position),
+    position1: new Float32Array(columnarMock.position),
+    size0: new Float32Array(columnarMock.size),
+    size1: new Float32Array(columnarMock.size),
+  };
+})();
 
-export const Example = () => {
-  let resetFocusControl: FlameGlobalControl = noop; // initial value
-  let focusOnNodeControl: FlameNodeControl = noop; // initial value
+const smallDataset: ColumnarViewModel = (() => {
+  const labels = ['root', 'kernel', 'libxul.so', 'libxul.so'];
+  const value = [1428, 1428, 1099, 329];
+  const position = [0, 0.67, 0, 0.33, 0, 0, 0.769607, 0];
+  const size = [1, 1, 0.769607, 0.230393];
+
+  return {
+    label: labels,
+    value: new Float64Array(value),
+    color: new Float32Array(generateColorsForLabels(labels)),
+    position0: new Float32Array(position),
+    position1: new Float32Array(position),
+    size0: new Float32Array(size),
+    size1: new Float32Array(size),
+  };
+})();
+
+export const Example = (
+  // should check why it's not a good idea; in the meantime:
+  // eslint-disable-next-line unicorn/no-object-as-default-parameter
+  props?: { controlProviderCallback: ControlProviderCallback },
+) => {
+  const [columnarData, setColumnarData] = useState(largeDataset);
+  const [seconds, setSeconds] = useState(0);
 
   const onElementListeners = {
     onElementClick: action('onElementClick'),
     onElementOver: action('onElementOver'),
     onElementOut: action('onElementOut'),
   };
+
   const theme: PartialTheme = {
     chartMargins: { top: 0, left: 0, bottom: 0, right: 0 },
     chartPaddings: { left: 0, right: 0, top: 0, bottom: 0 },
   };
-  button('Reset focus', () => {
-    resetFocusControl();
-  });
-  button('Set focus on random node', () => {
-    focusOnNodeControl(Math.floor(20 * Math.random()));
-  });
-  const debug = boolean('Debug history', false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSeconds((seconds) => seconds + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (seconds > 0 && seconds % 10 === 0) {
+      if ((seconds / 10) % 2 === 0) {
+        setColumnarData(largeDataset);
+      } else {
+        setColumnarData(smallDataset);
+      }
+    }
+  }, [seconds]);
 
   return (
     <Chart>
-      <Settings theme={theme} baseTheme={useBaseTheme()} {...onElementListeners} debug={debug} />
+      <Settings theme={theme} baseTheme={useBaseTheme()} {...onElementListeners} />
       <Flame
         id="spec_1"
         columnarData={columnarData}
         valueAccessor={(d: Datum) => d.value as number}
         valueFormatter={(value) => `${value}`}
         animation={{ duration: 500 }}
-        controlProviderCallback={{
-          resetFocus: (control) => (resetFocusControl = control),
-          focusOnNode: (control) => (focusOnNodeControl = control),
-        }}
+        controlProviderCallback={props?.controlProviderCallback ?? (() => {})}
       />
     </Chart>
   );