From 0a5a0d8408c8af7fb3346e187b220dde379f1327 Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <pshenoy36@gmail.com>
Date: Fri, 12 Nov 2021 10:22:26 -0800
Subject: [PATCH] moved loading viz after panel update (#232)

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 .../custom_panels/custom_panel_view.tsx       | 35 ++++++-------
 .../custom_panels/helpers/utils.tsx           |  1 +
 .../panel_modules/panel_grid/panel_grid.tsx   | 49 ++++++++++++-------
 .../visualization_container.tsx               |  2 +-
 4 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
index 900bd9c9b..dddd0a820 100644
--- a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
+++ b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
@@ -593,28 +593,29 @@ export const CustomPanelView = ({
               </EuiFlexItem>
             </EuiFlexGroup>
             <EuiSpacer size="l" />
-            {panelVisualizations.length === 0 && (
+            {panelVisualizations.length > 0 ? (
+              <PanelGrid
+                http={http}
+                panelId={panelId}
+                chrome={chrome}
+                panelVisualizations={panelVisualizations}
+                setPanelVisualizations={setPanelVisualizations}
+                editMode={editMode}
+                pplService={pplService}
+                startTime={start}
+                endTime={end}
+                onRefresh={onRefresh}
+                cloneVisualization={cloneVisualization}
+                pplFilterValue={pplFilterValue}
+                showFlyout={showFlyout}
+                editActionType={editActionType}
+              />
+            ) : (
               <EmptyPanelView
                 addVizDisabled={addVizDisabled}
                 getVizContextPanels={getVizContextPanels}
               />
             )}
-            <PanelGrid
-              http={http}
-              panelId={panelId}
-              chrome={chrome}
-              panelVisualizations={panelVisualizations}
-              setPanelVisualizations={setPanelVisualizations}
-              editMode={editMode}
-              pplService={pplService}
-              startTime={start}
-              endTime={end}
-              onRefresh={onRefresh}
-              cloneVisualization={cloneVisualization}
-              pplFilterValue={pplFilterValue}
-              showFlyout={showFlyout}
-              editActionType={editActionType}
-            />
           </EuiPageContentBody>
         </EuiPageBody>
       </EuiPage>
diff --git a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
index be8615968..c401c332e 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
+++ b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
@@ -320,3 +320,4 @@ export const displayVisualization = (data: any, type: string, editMode?: boolean
   }
   return vizComponent;
 };
+
diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
index 7ffbe22db..2246cb820 100644
--- a/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
+++ b/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
@@ -73,6 +73,7 @@ export const PanelGrid = ({
 }: Props) => {
   const [currentLayout, setCurrentLayout] = useState<Layout[]>([]);
   const [postEditLayout, setPostEditLayout] = useState<Layout[]>([]);
+  const [gridData, setGridData] = useState(panelVisualizations.map(() => <></>));
   const isLocked = useObservable(chrome.getIsNavDrawerLocked$());
 
   // Reset Size of Visualizations when layout is changed
@@ -81,6 +82,29 @@ export const PanelGrid = ({
     setPostEditLayout(currentLayout);
   };
 
+  const loadVizComponents = () => {
+    const gridDataComps = panelVisualizations.map(
+      (panelVisualization: VisualizationType, index) => (
+        <VisualizationContainer
+          key={panelVisualization.id}
+          http={http}
+          editMode={editMode}
+          visualizationId={panelVisualization.id}
+          savedVisualizationId={panelVisualization.savedVisualizationId}
+          pplService={pplService}
+          fromTime={startTime}
+          toTime={endTime}
+          onRefresh={onRefresh}
+          cloneVisualization={cloneVisualization}
+          pplFilterValue={pplFilterValue}
+          showFlyout={showFlyout}
+          removeVisualization={removeVisualization}
+        />
+      )
+    );
+    setGridData(gridDataComps);
+  };
+
   // Reload the Layout
   const reloadLayout = () => {
     const tempLayout: Layout[] = panelVisualizations.map((panelVisualization) => {
@@ -125,6 +149,7 @@ export const PanelGrid = ({
   useEffect(() => {
     if (editMode) {
       reloadLayout();
+      loadVizComponents();
     } else {
       if (editActionType === 'save') {
         const visualizationParams = postEditLayout.map((layout) =>
@@ -138,6 +163,7 @@ export const PanelGrid = ({
   // Update layout whenever visualizations are updated
   useEffect(() => {
     reloadLayout();
+    loadVizComponents();
   }, [panelVisualizations]);
 
   // Reset Size of Panel Grid when Nav Dock is Locked
@@ -147,6 +173,10 @@ export const PanelGrid = ({
     }, 300);
   }, [isLocked]);
 
+  useEffect(() => {
+    loadVizComponents();
+  }, []);
+
   return (
     <ResponsiveGridLayout
       layouts={{ lg: currentLayout, md: currentLayout, sm: currentLayout }}
@@ -155,23 +185,8 @@ export const PanelGrid = ({
       cols={{ lg: 12, md: 12, sm: 12, xs: 1, xxs: 1 }}
       onLayoutChange={layoutChanged}
     >
-      {panelVisualizations.map((panelVisualization: VisualizationType) => (
-        <div key={panelVisualization.id}>
-          <VisualizationContainer
-            http={http}
-            editMode={editMode}
-            visualizationId={panelVisualization.id}
-            savedVisualizationId={panelVisualization.savedVisualizationId}
-            pplService={pplService}
-            fromTime={startTime}
-            toTime={endTime}
-            onRefresh={onRefresh}
-            cloneVisualization={cloneVisualization}
-            pplFilterValue={pplFilterValue}
-            showFlyout={showFlyout}
-            removeVisualization={removeVisualization}
-          />
-        </div>
+      {panelVisualizations.map((panelVisualization: VisualizationType, index) => (
+        <div key={panelVisualization.id}>{gridData[index]}</div>
       ))}
     </ResponsiveGridLayout>
   );
diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
index 2400f9781..d9ab33c83 100644
--- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
+++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
@@ -139,7 +139,7 @@ export const VisualizationContainer = ({
           <div className="visualization-error-div">
             <EuiIcon type="alert" color="danger" size="s" />
             <EuiSpacer size="s" />
-            <EuiText size='s'>
+            <EuiText size="s">
               <p>{isError}</p>
             </EuiText>
           </div>