From 06e8f71f7106556b266f6f59b1194abd9002c4e7 Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 08:05:37 -0500
Subject: [PATCH 01/11] added more examples for reflow

---
 .../graph/CoreConcepts.b/Reflow.e.graph.mdx   |  24 +++-
 .../examples/reflow/BasicReflowExample.jsx    |  10 +-
 .../reflow/DynamicallyUpdatingData.jsx        | 130 ++++++++++++++++++
 .../examples/reflow/PanningExample.jsx        |   2 +-
 4 files changed, 157 insertions(+), 9 deletions(-)
 create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx

diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx
index 98bcebfb3..72ab44f9c 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx
@@ -1,10 +1,24 @@
-import BasicReflowExample from './examples/reflow/BasicReflowExample';
-import PanningExample from './examples/reflow/PanningExample';
+import {Notice} from '@cerner/terra-docs'
 
+import BasicReflowExample from './examples/reflow/BasicReflowExample?dev-site-example';
+import PanningExample from './examples/reflow/PanningExample?dev-site-example';
+import DynamicallyUpdatingDataExample from './examples/reflow/DynamicallyUpdatingData?dev-site-example';
 
 # Reflow
 
-Reflow can be used to dynamically update a graph.
+Reflow can be used to dynamically update a graph without causing a full redraw from scratch.
+It can be invoked by using the `GraphInstance.reflowMultipleDatasets` method.
+
+```js
+const graphInstance = Carbon.api.graph(graphConfig);
+graphInstance.reflowMultipleDatasets();
+```
+
+<Notice variant="deprecation">
+
+The original reflow method, `GraphInstance.reflow()`, is depreacted.
+
+</Notice>
 
 ## Overview
 
@@ -14,3 +28,7 @@ Reflow can be used to dynamically update a graph.
 
 ### Panning
 <PanningExample/>
+
+### Dynamic Data
+
+<DynamicallyUpdatingDataExample />
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/BasicReflowExample.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/BasicReflowExample.jsx
index bc86376d5..8c5bcff11 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/BasicReflowExample.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/BasicReflowExample.jsx
@@ -29,7 +29,7 @@ const graphConfig = {
 const dataset1 = {
   key: 'uid_1',
   label: {
-    display: 'Data Label 1',
+    display: 'Dataset 1',
   },
   color: Carbon.helpers.COLORS.BLACK,
   values: [
@@ -66,14 +66,14 @@ const BasicReflowExample = () => {
     graph.reflowMultipleDatasets();
   };
 
-  const handleClickUpdateLimits = () => {
+  const handleClickUpdateLimits1 = () => {
     graph.config.axis.y.domain.lowerLimit = -52;
     graph.config.axis.y.domain.upperLimit = 52;
 
     graph.reflowMultipleDatasets();
   };
 
-  const handleClickReset = () => {
+  const handleClickUpdateLimits2 = () => {
     graph.config.axis.y.domain.lowerLimit = 0;
     graph.config.axis.y.domain.upperLimit = 20;
 
@@ -83,8 +83,8 @@ const BasicReflowExample = () => {
   return (
     <>
       <Button text="Toggle Calibration" onClick={handleClickToggleCalibration} />
-      <Button text="Update Axis Limits" onClick={handleClickUpdateLimits} />
-      <Button text="Reset" onClick={handleClickReset} />
+      <Button text="Update y-axis limits to -52, 52" onClick={handleClickUpdateLimits1} />
+      <Button text="Update y-axis limits to 0, 20" onClick={handleClickUpdateLimits2} />
       <div>
         AllowCalibration:
         {allowCalibrationStatus}
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
new file mode 100644
index 000000000..09cc57299
--- /dev/null
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+
+import Button from 'terra-button';
+
+import Carbon from '@cerner/carbon-graphs';
+
+//  graph configuration object
+
+const graphConfig = {
+  bindTo: '#dynamic-data-upate-example',
+  axis: {
+    x: {
+      label: 'x-axis',
+      lowerLimit: 80,
+      upperLimit: 280,
+      rangeRounding: false,
+    },
+    y: {
+      label: 'y-axis',
+      lowerLimit: -5,
+      upperLimit: 20,
+    },
+  },
+  allowCalibration: true,
+};
+
+//  graph dataset
+
+const dataset1 = {
+  key: 'uid_1',
+  label: {
+    display: 'Dataset 1',
+  },
+  color: Carbon.helpers.COLORS.PINK,
+  values: [
+    { x: 87, y: -2 },
+    { x: 95, y: 1 },
+    { x: 103, y: -4 },
+    { x: 109, y: -2 },
+    { x: 128, y: 3 },
+    { x: 145, y: 28 },
+    { x: 151, y: 7 },
+    { x: 164, y: 10 },
+    { x: 177, y: 1 },
+    { x: 192, y: 6 },
+    { x: 203, y: -21 },
+    { x: 209, y: -3 },
+    { x: 246, y: 3 },
+  ],
+};
+
+
+// color and shape of the original dataset is retained
+const updatedDataset1 = {
+  key: 'uid_1',
+  values: [
+    { x: 81, y: 21 },
+    { x: 107, y: 6 },
+    { x: 109, y: 7 },
+    { x: 118, y: 5 },
+    { x: 117, y: 21 },
+    { x: 127, y: -20 },
+    { x: 137, y: -9 },
+    { x: 141, y: -6 },
+    { x: 144, y: 39 },
+    { x: 151, y: -14 },
+    { x: 156, y: -9 },
+    { x: 163, y: 4 },
+    { x: 164, y: 29 },
+    { x: 170, y: 30 },
+    { x: 172, y: 31 },
+    { x: 176, y: 34 },
+    { x: 185, y: 1 },
+    { x: 191, y: -2 },
+    { x: 193, y: 38 },
+    { x: 198, y: 40 },
+  ],
+};
+
+// graph rendering
+let graph;
+const DynamicallyUpdatingDataExample = () => {
+  const [allowCalibrationStatus, SetAllowCalibrationStatus] = useState(graphConfig.allowCalibration.toString());
+
+  React.useEffect(() => {
+    graph = Carbon.api.graph(graphConfig);
+    graph.loadContent(Carbon.api.line(dataset1));
+  }, []);
+
+  const handleClickToggleCalibration = () => {
+    graph.config.allowCalibration = !graph.config.allowCalibration;
+    SetAllowCalibrationStatus(graph.config.allowCalibration.toString());
+
+    graph.reflowMultipleDatasets();
+  };
+  
+  const handleClickUpdateData = () => {
+    
+    graph.config.axis.y.domain.lowerLimit = 0;
+    graph.config.axis.y.domain.upperLimit = 20;
+    
+    graph.reflowMultipleDatasets({
+      panData: [
+        updatedDataset1,
+      ],
+    });
+  };
+
+  const handleClickReset = () => {
+//    graph.destroy();
+//    graph = Carbon.api.graph(graphConfig);
+    graph.unloadContent(Carbon.api.line(dataset1));
+    graph.loadContent(Carbon.api.line(dataset1));
+  };
+
+  return (
+    <>
+      <Button text="Toggle Calibration" onClick={handleClickToggleCalibration} />
+      <Button text="Update Data" onClick={handleClickUpdateData} />
+      <Button text="Reset" onClick={handleClickReset} />
+      <div>
+        AllowCalibration:
+        {allowCalibrationStatus}
+      </div>
+      <div id="dynamic-data-upate-example" />
+    </>
+  );
+};
+
+export default DynamicallyUpdatingDataExample;
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/PanningExample.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/PanningExample.jsx
index 9492d5796..e61ba452f 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/PanningExample.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/PanningExample.jsx
@@ -32,7 +32,7 @@ const graphConfig = {
 const dataset1 = {
   key: 'uid_1',
   label: {
-    display: 'Data Label 1',
+    display: 'Dataset 1',
   },
   color: Carbon.helpers.COLORS.BLACK,
   values: [

From 4588682838f609833ddee4b8a85c6a40ef8f4e7b Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 08:08:45 -0500
Subject: [PATCH 02/11] updated example

---
 .../examples/reflow/DynamicallyUpdatingData.jsx      | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
index 09cc57299..3fb4d36ed 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
@@ -7,7 +7,7 @@ import Carbon from '@cerner/carbon-graphs';
 //  graph configuration object
 
 const graphConfig = {
-  bindTo: '#dynamic-data-upate-example',
+  bindTo: '#dynamic-data-update-example',
   axis: {
     x: {
       label: 'x-axis',
@@ -49,8 +49,8 @@ const dataset1 = {
   ],
 };
 
-
-// color and shape of the original dataset is retained
+// Updated values for dataset 1
+// Color, shape & label of the original dataset is retained if it is not updated
 const updatedDataset1 = {
   key: 'uid_1',
   values: [
@@ -100,9 +100,7 @@ const DynamicallyUpdatingDataExample = () => {
     graph.config.axis.y.domain.upperLimit = 20;
     
     graph.reflowMultipleDatasets({
-      panData: [
-        updatedDataset1,
-      ],
+      panData: [updatedDataset1],
     });
   };
 
@@ -122,7 +120,7 @@ const DynamicallyUpdatingDataExample = () => {
         AllowCalibration:
         {allowCalibrationStatus}
       </div>
-      <div id="dynamic-data-upate-example" />
+      <div id="dynamic-data-update-example" />
     </>
   );
 };

From f82615550777821ec57e802991ad8b5998951956 Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 08:52:13 -0500
Subject: [PATCH 03/11] added example

---
 .../graph/CoreConcepts.b/Reflow.e.graph.mdx   |   5 +
 .../reflow/DynamicallyUpdatingData.jsx        |   7 +-
 .../DynamicallyUpdatingMultipleDatasets.jsx   | 169 ++++++++++++++++++
 3 files changed, 176 insertions(+), 5 deletions(-)
 create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets.jsx

diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx
index 72ab44f9c..8b37df649 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx
@@ -3,6 +3,7 @@ import {Notice} from '@cerner/terra-docs'
 import BasicReflowExample from './examples/reflow/BasicReflowExample?dev-site-example';
 import PanningExample from './examples/reflow/PanningExample?dev-site-example';
 import DynamicallyUpdatingDataExample from './examples/reflow/DynamicallyUpdatingData?dev-site-example';
+import DynamicallyUpdatingMultipleDatasetsExample from './examples/reflow/DynamicallyUpdatingMultipleDatasets?dev-site-example';
 
 # Reflow
 
@@ -32,3 +33,7 @@ The original reflow method, `GraphInstance.reflow()`, is depreacted.
 ### Dynamic Data
 
 <DynamicallyUpdatingDataExample />
+
+### Dynamic Data - multiple datasets
+
+<DynamicallyUpdatingMultipleDatasetsExample/>
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
index 3fb4d36ed..91dddccfb 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
@@ -95,9 +95,8 @@ const DynamicallyUpdatingDataExample = () => {
   };
   
   const handleClickUpdateData = () => {
-    
-    graph.config.axis.y.domain.lowerLimit = 0;
-    graph.config.axis.y.domain.upperLimit = 20;
+//    graph.config.axis.y.domain.lowerLimit = 0;
+//    graph.config.axis.y.domain.upperLimit = 20;
     
     graph.reflowMultipleDatasets({
       panData: [updatedDataset1],
@@ -105,8 +104,6 @@ const DynamicallyUpdatingDataExample = () => {
   };
 
   const handleClickReset = () => {
-//    graph.destroy();
-//    graph = Carbon.api.graph(graphConfig);
     graph.unloadContent(Carbon.api.line(dataset1));
     graph.loadContent(Carbon.api.line(dataset1));
   };
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets.jsx
new file mode 100644
index 000000000..72300fbb9
--- /dev/null
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets.jsx
@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+
+import Button from 'terra-button';
+
+import Carbon from '@cerner/carbon-graphs';
+
+//  graph configuration object
+
+const graphConfig = {
+  bindTo: '#dynamic-data-update-multiple-datasets-example',
+  axis: {
+    x: {
+      label: 'x-axis',
+      lowerLimit: 80,
+      upperLimit: 280,
+      rangeRounding: false,
+    },
+    y: {
+      label: 'y-axis',
+      lowerLimit: -5,
+      upperLimit: 20,
+    },
+  },
+  allowCalibration: true,
+};
+
+//  graph dataset
+
+const dataset1 = {
+  key: 'uid_1',
+  label: {
+    display: 'Dataset 1',
+  },
+  color: Carbon.helpers.COLORS.PINK,
+  values: [
+    { x: 87, y: -2 },
+    { x: 95, y: 1 },
+    { x: 103, y: -4 },
+    { x: 109, y: -2 },
+    { x: 128, y: 3 },
+    { x: 145, y: 28 },
+    { x: 151, y: 7 },
+    { x: 164, y: 10 },
+    { x: 177, y: 1 },
+    { x: 192, y: 6 },
+    { x: 203, y: -21 },
+    { x: 209, y: -3 },
+    { x: 246, y: 3 },
+    ],
+};
+
+// Updated values for dataset 1
+// Color, shape & label of the original dataset is retained if it is not updated
+const updatedDataset1 = {
+  key: 'uid_1',
+  values: [
+    { x: 81, y: 21 },
+    { x: 107, y: 6 },
+    { x: 109, y: 7 },
+    { x: 118, y: 5 },
+    { x: 117, y: 21 },
+    { x: 127, y: -20 },
+    { x: 137, y: -9 },
+    { x: 141, y: -6 },
+    { x: 144, y: 39 },
+    { x: 151, y: -14 },
+    { x: 156, y: -9 },
+    { x: 163, y: 4 },
+    { x: 164, y: 29 },
+    { x: 170, y: 30 },
+    { x: 172, y: 31 },
+    { x: 176, y: 34 },
+    { x: 185, y: 1 },
+    { x: 191, y: -2 },
+    { x: 193, y: 38 },
+    { x: 198, y: 40 },
+    ],
+};
+
+const dataset2 = {
+  key: 'uid_2',
+  label: {
+    display: 'Dataset 2',
+  },
+  color: Carbon.helpers.COLORS.LAVENDER,
+  values: [
+    {x: 106, y: 19 },
+    {x: 111, y: 45 },
+    {x: 111, y: -1 },
+    {x: 113, y: 25 },
+    {x: 130, y: 12 },
+    {x: 133, y: 39 },
+    {x: 144, y: 45 },
+    {x: 155, y: 37 },
+    {x: 166, y: 20 },
+    {x: 181, y: 60 },
+    {x: 182, y: 29 },
+    {x: 187, y: -6 },
+    {x: 189, y: 54 },
+    {x: 195, y: 59 },
+    {x: 222, y: 32 },
+  ],
+};
+
+const updatedDataset2 = {
+  key: 'uid_2',
+  values: [
+    {x: 101, y: 31 },
+    {x: 104, y: 7 },
+    {x: 107, y: 120 },
+    {x: 131, y: 19 },
+    {x: 141, y: -5 },
+    {x: 150, y: 27 },
+    {x: 150, y: -1 },
+    {x: 158, y: 28 },
+    {x: 192, y: 27 },
+    {x: 212, y: 13 },
+    {x: 212, y: 46 },
+    {x: 217, y: 3 },
+    {x: 224, y: 0 },
+  ],
+};
+
+// graph rendering
+let graph;
+const DynamicallyUpdatingDataExample = () => {
+  const [allowCalibrationStatus, SetAllowCalibrationStatus] = useState(graphConfig.allowCalibration.toString());
+
+  React.useEffect(() => {
+    graph = Carbon.api.graph(graphConfig);
+    graph.loadContent(Carbon.api.line(dataset1));
+    graph.loadContent(Carbon.api.line(dataset2));
+    }, []);
+
+  const handleClickToggleCalibration = () => {
+    graph.config.allowCalibration = !graph.config.allowCalibration;
+    SetAllowCalibrationStatus(graph.config.allowCalibration.toString());
+
+    graph.reflowMultipleDatasets();
+  };
+
+  const handleClickUpdateData = () => {
+    graph.reflowMultipleDatasets({
+      panData: [updatedDataset1, updatedDataset2],
+    });
+  };
+
+  const handleClickReset = () => {
+    graph.unloadContent(Carbon.api.line(dataset1));
+    graph.unloadContent(Carbon.api.line(dataset2));
+    graph.loadContent(Carbon.api.line(dataset1));
+    graph.loadContent(Carbon.api.line(dataset2));
+  };
+
+  return (
+    <>
+    <Button text="Toggle Calibration" onClick={handleClickToggleCalibration} />
+    <Button text="Update Data" onClick={handleClickUpdateData} />
+    <Button text="Reset" onClick={handleClickReset} />
+    <div>
+      AllowCalibration:
+      {allowCalibrationStatus}
+    </div>
+    <div id="dynamic-data-update-multiple-datasets-example" />
+    </>
+    );
+};
+
+export default DynamicallyUpdatingDataExample;

From cca7eddef3a3b68233f1184d60988f6e98e7126c Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:09:48 -0500
Subject: [PATCH 04/11] added tests

---
 .../test/graphs/General/BasicReflow.test.jsx              | 7 +++++++
 .../test/graphs/General/DynamicallyUpdatingData.test.jsx  | 8 ++++++++
 .../General/DynamicallyUpdatingMultipleDatasets.test.jsx  | 7 +++++++
 .../test/graphs/General/PanningExample.test.jsx           | 7 +++++++
 4 files changed, 29 insertions(+)
 create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/BasicReflow.test.jsx
 create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingData.test.jsx
 create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingMultipleDatasets.test.jsx
 create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/PanningExample.test.jsx

diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/BasicReflow.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/BasicReflow.test.jsx
new file mode 100644
index 000000000..c3ba1703e
--- /dev/null
+++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/BasicReflow.test.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import BasicReflowExample from '../../../graph/CoreConcepts.b/examples/reflow/BasicReflowExample';
+const BasicReflowTest = () => {
+  return <BasicReflowExample/>;
+};
+
+export default BasicReflowTest;
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingData.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingData.test.jsx
new file mode 100644
index 000000000..8165a55ef
--- /dev/null
+++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingData.test.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import DynamicallyUpdatingDataExample from '../../../graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData';
+const DynamicallyUpdatingDataTest = () => {
+  return <DynamicallyUpdatingDataExample/>;
+};
+
+export default DynamicallyUpdatingDataTest;
+
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingMultipleDatasets.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingMultipleDatasets.test.jsx
new file mode 100644
index 000000000..025ef22ef
--- /dev/null
+++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingMultipleDatasets.test.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import DynamicallyUpdatingMultipleDatasetsExample from '../../../graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets';
+const DynamicallyUpdatingMultipleDatasetsTest = () => {
+  return <DynamicallyUpdatingMultipleDatasetsExample/>;
+};
+
+export default DynamicallyUpdatingMultipleDatasetsTest;
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/PanningExample.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/PanningExample.test.jsx
new file mode 100644
index 000000000..6751a8633
--- /dev/null
+++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/PanningExample.test.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import PanningExample from '../../../graph/CoreConcepts.b/examples/reflow/PanningExample';
+const PanningTest = () => {
+  return <PanningExample/>;
+};
+
+export default PanningTest;

From 59d90196eef5f57c707b3a89ced4c93070057a86 Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:10:57 -0500
Subject: [PATCH 05/11] moved files

---
 .../{graphs/General => general/reflow}/AllowCalibration.test.jsx  | 0
 .../test/{graphs/General => general/reflow}/BasicReflow.test.jsx  | 0
 .../General => general/reflow}/DynamicallyUpdatingData.test.jsx   | 0
 .../reflow}/DynamicallyUpdatingMultipleDatasets.test.jsx          | 0
 .../{graphs/General => general/reflow}/PanningExample.test.jsx    | 0
 5 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/terra-graphs-docs/src/terra-dev-site/test/{graphs/General => general/reflow}/AllowCalibration.test.jsx (100%)
 rename packages/terra-graphs-docs/src/terra-dev-site/test/{graphs/General => general/reflow}/BasicReflow.test.jsx (100%)
 rename packages/terra-graphs-docs/src/terra-dev-site/test/{graphs/General => general/reflow}/DynamicallyUpdatingData.test.jsx (100%)
 rename packages/terra-graphs-docs/src/terra-dev-site/test/{graphs/General => general/reflow}/DynamicallyUpdatingMultipleDatasets.test.jsx (100%)
 rename packages/terra-graphs-docs/src/terra-dev-site/test/{graphs/General => general/reflow}/PanningExample.test.jsx (100%)

diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/AllowCalibration.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/AllowCalibration.test.jsx
similarity index 100%
rename from packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/AllowCalibration.test.jsx
rename to packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/AllowCalibration.test.jsx
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/BasicReflow.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/BasicReflow.test.jsx
similarity index 100%
rename from packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/BasicReflow.test.jsx
rename to packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/BasicReflow.test.jsx
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingData.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingData.test.jsx
similarity index 100%
rename from packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingData.test.jsx
rename to packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingData.test.jsx
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingMultipleDatasets.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingMultipleDatasets.test.jsx
similarity index 100%
rename from packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/DynamicallyUpdatingMultipleDatasets.test.jsx
rename to packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingMultipleDatasets.test.jsx
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/PanningExample.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/PanningExample.test.jsx
similarity index 100%
rename from packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/PanningExample.test.jsx
rename to packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/PanningExample.test.jsx

From 9a875864e4b9763f35ef61d02ce169c1a622597c Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:13:13 -0500
Subject: [PATCH 06/11] moved file

---
 .../test/general/{reflow => }/AllowCalibration.test.jsx           | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/terra-graphs-docs/src/terra-dev-site/test/general/{reflow => }/AllowCalibration.test.jsx (100%)

diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/AllowCalibration.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/AllowCalibration.test.jsx
similarity index 100%
rename from packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/AllowCalibration.test.jsx
rename to packages/terra-graphs-docs/src/terra-dev-site/test/general/AllowCalibration.test.jsx

From ca8f5b0c22b7ef6c40a8204e241b051a4b41f64d Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:14:17 -0500
Subject: [PATCH 07/11] updated docs

---
 .../src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx
index 8b37df649..ac41e6bf1 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx
@@ -28,6 +28,7 @@ The original reflow method, `GraphInstance.reflow()`, is depreacted.
 ## Examples
 
 ### Panning
+
 <PanningExample/>
 
 ### Dynamic Data

From 6d528f8ba38ad00df77509f5147d485b25f5480a Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:18:22 -0500
Subject: [PATCH 08/11] linter fixes

---
 .../reflow/DynamicallyUpdatingData.jsx        |   8 +-
 .../DynamicallyUpdatingMultipleDatasets.jsx   | 106 +++++++++---------
 .../test/general/reflow/BasicReflow.test.jsx  |   5 +-
 .../reflow/DynamicallyUpdatingData.test.jsx   |   5 +-
 ...namicallyUpdatingMultipleDatasets.test.jsx |   5 +-
 .../general/reflow/PanningExample.test.jsx    |   5 +-
 6 files changed, 66 insertions(+), 68 deletions(-)

diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
index 91dddccfb..0913fa424 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx
@@ -93,11 +93,11 @@ const DynamicallyUpdatingDataExample = () => {
 
     graph.reflowMultipleDatasets();
   };
-  
+
   const handleClickUpdateData = () => {
-//    graph.config.axis.y.domain.lowerLimit = 0;
-//    graph.config.axis.y.domain.upperLimit = 20;
-    
+    //    graph.config.axis.y.domain.lowerLimit = 0;
+    //    graph.config.axis.y.domain.upperLimit = 20;
+
     graph.reflowMultipleDatasets({
       panData: [updatedDataset1],
     });
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets.jsx
index 72300fbb9..68d2e9bc8 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets.jsx
@@ -24,7 +24,7 @@ const graphConfig = {
   allowCalibration: true,
 };
 
-//  graph dataset
+//  graph datasets
 
 const dataset1 = {
   key: 'uid_1',
@@ -46,11 +46,38 @@ const dataset1 = {
     { x: 203, y: -21 },
     { x: 209, y: -3 },
     { x: 246, y: 3 },
-    ],
+  ],
+};
+
+const dataset2 = {
+  key: 'uid_2',
+  label: {
+    display: 'Dataset 2',
+  },
+  color: Carbon.helpers.COLORS.LAVENDER,
+  values: [
+    { x: 106, y: 19 },
+    { x: 111, y: 45 },
+    { x: 111, y: -1 },
+    { x: 113, y: 25 },
+    { x: 130, y: 12 },
+    { x: 133, y: 39 },
+    { x: 144, y: 45 },
+    { x: 155, y: 37 },
+    { x: 166, y: 20 },
+    { x: 181, y: 60 },
+    { x: 182, y: 29 },
+    { x: 187, y: -6 },
+    { x: 189, y: 54 },
+    { x: 195, y: 59 },
+    { x: 222, y: 32 },
+  ],
 };
 
-// Updated values for dataset 1
-// Color, shape & label of the original dataset is retained if it is not updated
+// updated datasets
+
+// updated values for dataset 1
+// color, shape & label of the original dataset is retained if it is not updated
 const updatedDataset1 = {
   key: 'uid_1',
   values: [
@@ -74,50 +101,25 @@ const updatedDataset1 = {
     { x: 191, y: -2 },
     { x: 193, y: 38 },
     { x: 198, y: 40 },
-    ],
-};
-
-const dataset2 = {
-  key: 'uid_2',
-  label: {
-    display: 'Dataset 2',
-  },
-  color: Carbon.helpers.COLORS.LAVENDER,
-  values: [
-    {x: 106, y: 19 },
-    {x: 111, y: 45 },
-    {x: 111, y: -1 },
-    {x: 113, y: 25 },
-    {x: 130, y: 12 },
-    {x: 133, y: 39 },
-    {x: 144, y: 45 },
-    {x: 155, y: 37 },
-    {x: 166, y: 20 },
-    {x: 181, y: 60 },
-    {x: 182, y: 29 },
-    {x: 187, y: -6 },
-    {x: 189, y: 54 },
-    {x: 195, y: 59 },
-    {x: 222, y: 32 },
   ],
 };
 
 const updatedDataset2 = {
   key: 'uid_2',
   values: [
-    {x: 101, y: 31 },
-    {x: 104, y: 7 },
-    {x: 107, y: 120 },
-    {x: 131, y: 19 },
-    {x: 141, y: -5 },
-    {x: 150, y: 27 },
-    {x: 150, y: -1 },
-    {x: 158, y: 28 },
-    {x: 192, y: 27 },
-    {x: 212, y: 13 },
-    {x: 212, y: 46 },
-    {x: 217, y: 3 },
-    {x: 224, y: 0 },
+    { x: 101, y: 31 },
+    { x: 104, y: 7 },
+    { x: 107, y: 120 },
+    { x: 131, y: 19 },
+    { x: 141, y: -5 },
+    { x: 150, y: 27 },
+    { x: 150, y: -1 },
+    { x: 158, y: 28 },
+    { x: 192, y: 27 },
+    { x: 212, y: 13 },
+    { x: 212, y: 46 },
+    { x: 217, y: 3 },
+    { x: 224, y: 0 },
   ],
 };
 
@@ -130,7 +132,7 @@ const DynamicallyUpdatingDataExample = () => {
     graph = Carbon.api.graph(graphConfig);
     graph.loadContent(Carbon.api.line(dataset1));
     graph.loadContent(Carbon.api.line(dataset2));
-    }, []);
+  }, []);
 
   const handleClickToggleCalibration = () => {
     graph.config.allowCalibration = !graph.config.allowCalibration;
@@ -154,16 +156,16 @@ const DynamicallyUpdatingDataExample = () => {
 
   return (
     <>
-    <Button text="Toggle Calibration" onClick={handleClickToggleCalibration} />
-    <Button text="Update Data" onClick={handleClickUpdateData} />
-    <Button text="Reset" onClick={handleClickReset} />
-    <div>
-      AllowCalibration:
-      {allowCalibrationStatus}
-    </div>
-    <div id="dynamic-data-update-multiple-datasets-example" />
+      <Button text="Toggle Calibration" onClick={handleClickToggleCalibration} />
+      <Button text="Update Data" onClick={handleClickUpdateData} />
+      <Button text="Reset" onClick={handleClickReset} />
+      <div>
+        AllowCalibration:
+        {allowCalibrationStatus}
+      </div>
+      <div id="dynamic-data-update-multiple-datasets-example" />
     </>
-    );
+  );
 };
 
 export default DynamicallyUpdatingDataExample;
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/BasicReflow.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/BasicReflow.test.jsx
index c3ba1703e..4be9f6dcb 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/BasicReflow.test.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/BasicReflow.test.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import BasicReflowExample from '../../../graph/CoreConcepts.b/examples/reflow/BasicReflowExample';
-const BasicReflowTest = () => {
-  return <BasicReflowExample/>;
-};
+
+const BasicReflowTest = () => <BasicReflowExample />;
 
 export default BasicReflowTest;
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingData.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingData.test.jsx
index 8165a55ef..c2024ba8e 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingData.test.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingData.test.jsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import DynamicallyUpdatingDataExample from '../../../graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData';
-const DynamicallyUpdatingDataTest = () => {
-  return <DynamicallyUpdatingDataExample/>;
-};
+
+const DynamicallyUpdatingDataTest = () => <DynamicallyUpdatingDataExample />;
 
 export default DynamicallyUpdatingDataTest;
 
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingMultipleDatasets.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingMultipleDatasets.test.jsx
index 025ef22ef..db41ed83c 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingMultipleDatasets.test.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/DynamicallyUpdatingMultipleDatasets.test.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import DynamicallyUpdatingMultipleDatasetsExample from '../../../graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets';
-const DynamicallyUpdatingMultipleDatasetsTest = () => {
-  return <DynamicallyUpdatingMultipleDatasetsExample/>;
-};
+
+const DynamicallyUpdatingMultipleDatasetsTest = () => <DynamicallyUpdatingMultipleDatasetsExample />;
 
 export default DynamicallyUpdatingMultipleDatasetsTest;
diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/PanningExample.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/PanningExample.test.jsx
index 6751a8633..acf2c22f4 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/PanningExample.test.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/test/general/reflow/PanningExample.test.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PanningExample from '../../../graph/CoreConcepts.b/examples/reflow/PanningExample';
-const PanningTest = () => {
-  return <PanningExample/>;
-};
+
+const PanningTest = () => <PanningExample />;
 
 export default PanningTest;

From fd38d9fd140d234036704443c19a6711eaa534d7 Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:33:04 -0500
Subject: [PATCH 09/11] fixed path

---
 .../src/terra-dev-site/test/general/AllowCalibration.test.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/general/AllowCalibration.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/general/AllowCalibration.test.jsx
index f330abaa3..b2644f5b3 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/test/general/AllowCalibration.test.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/test/general/AllowCalibration.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import AllowCalibrationDisabled from '../../../graph/CoreConcepts.b/examples/AllowCalibrationDisabled';
-import AllowCalibrationEnabled from '../../../graph/CoreConcepts.b/examples/AllowCalibrationEnabled';
+import AllowCalibrationDisabled from '../../graph/CoreConcepts.b/examples/AllowCalibrationDisabled';
+import AllowCalibrationEnabled from '../../graph/CoreConcepts.b/examples/AllowCalibrationEnabled';
 
 export default () => (
   <div id="allow-calibration-examples">

From 844a469228c16b2d18a9b9512d5f5a51a4cb772c Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 13:18:11 -0500
Subject: [PATCH 10/11] updated wdio tests

---
 .../carbon-graphs/tests/wdio/Graphs/General/general-spec.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js b/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js
index df31af013..d4f9ec7e6 100644
--- a/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js
+++ b/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js
@@ -71,7 +71,7 @@ Terra.describeViewports('General', ['tiny', 'medium', 'large'], () => {
       Terra.validates.screenshot('x-axis_allowcalibration_disabled', { selector: '.carbon-graph-container' });
     });
     it('validates y-axis allowCalibration disabled graph', () => {
-      browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/general/allow-calibration');
+      browser.url('/raw/tests/cerner-terra-graphs-docs/general/allow-calibration');
       Terra.validates.screenshot('y-axis_allowcalibration_disabled', { selector: '#allow-calibration-disabled-example' });
     });
 
@@ -90,7 +90,7 @@ Terra.describeViewports('General', ['tiny', 'medium', 'large'], () => {
       Terra.validates.screenshot('x-axis_allowcalibration_enabled', { selector: '.carbon-graph-container' });
     });
     it('validates y-axis allowCalibration enabled graph container', () => {
-      browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/general/allow-calibration');
+      browser.url('/raw/tests/cerner-terra-graphs-docs/general/allow-calibration');
       Terra.validates.screenshot('y-axis_allowcalibration_enabled', { selector: '#allow-calibration-enabled-example' });
     });
 

From ad12ceb43fd0d55196a5ed99dc7283966c3d674b Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Tue, 16 Apr 2024 13:55:17 -0500
Subject: [PATCH 11/11] fixed console warning

---
 .../graph/CoreConcepts.b/examples/reflow/PanningExample.jsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/PanningExample.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/PanningExample.jsx
index e61ba452f..4be6a0afb 100644
--- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/PanningExample.jsx
+++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/PanningExample.jsx
@@ -101,8 +101,8 @@ const PanningExample = () => {
 
   return (
     <>
-      <Button icon={<IconLeft />} isIconOnly onClick={() => dispatch({ type: 'panLeft' })} />
-      <Button icon={<IconRight />} isIconOnly onClick={() => dispatch({ type: 'panRight' })} />
+      <Button icon={<IconLeft />} text="pan left" isIconOnly onClick={() => dispatch({ type: 'panLeft' })} />
+      <Button icon={<IconRight />} text="pan right" isIconOnly onClick={() => dispatch({ type: 'panRight' })} />
       <div id="panning-example" />
     </>
   );