chore: Rename renderHelper > renderDataPanel and move logic to smaller functions

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -94,6 +94,25 @@ export class PanelChrome extends PureComponent<Props, State> {
     return !this.props.dashboard.otherPanelInFullscreen(this.props.panel);
     return !this.props.dashboard.otherPanelInFullscreen(this.props.panel);
   }
   }
 
 
+  get hasPanelSnapshot() {
+    const { panel } = this.props;
+    return panel.snapshotData && panel.snapshotData.length;
+  }
+
+  get hasDataPanel() {
+    return !this.props.plugin.noQueries && !this.hasPanelSnapshot;
+  }
+
+  get getDataForPanel() {
+    const { panel, plugin } = this.props;
+
+    if (plugin.noQueries) {
+      return null;
+    }
+
+    return this.hasPanelSnapshot ? snapshotDataToPanelData(panel) : null;
+  }
+
   renderPanelPlugin(loading: LoadingState, panelData: PanelData, width: number, height: number): JSX.Element {
   renderPanelPlugin(loading: LoadingState, panelData: PanelData, width: number, height: number): JSX.Element {
     const { panel, plugin } = this.props;
     const { panel, plugin } = this.props;
     const { timeRange, renderCounter } = this.state;
     const { timeRange, renderCounter } = this.state;
@@ -121,20 +140,14 @@ export class PanelChrome extends PureComponent<Props, State> {
     );
     );
   }
   }
 
 
-  renderHelper = (width: number, height: number): JSX.Element => {
-    const { panel, plugin } = this.props;
+  renderDataPanel = (width: number, height: number): JSX.Element => {
+    const { panel } = this.props;
     const { refreshCounter, timeRange } = this.state;
     const { refreshCounter, timeRange } = this.state;
     const { datasource, targets } = panel;
     const { datasource, targets } = panel;
     return (
     return (
       <>
       <>
-      {panel.snapshotData && panel.snapshotData.length > 0 ? (
-        this.renderPanelPlugin(LoadingState.Done, snapshotDataToPanelData(panel), width, height)
-      ) : (
-        <>
-        {plugin.noQueries ?
-            this.renderPanelPlugin(LoadingState.Done, null, width, height)
-          : (
-            <DataPanel
+        {this.hasDataPanel ? (
+          <DataPanel
             panelId={panel.id}
             panelId={panel.id}
             datasource={datasource}
             datasource={datasource}
             queries={targets}
             queries={targets}
@@ -142,20 +155,18 @@ export class PanelChrome extends PureComponent<Props, State> {
             isVisible={this.isVisible}
             isVisible={this.isVisible}
             widthPixels={width}
             widthPixels={width}
             refreshCounter={refreshCounter}
             refreshCounter={refreshCounter}
-            onDataResponse={this.onDataResponse}
-          >
+            onDataResponse={this.onDataResponse} >
             {({ loading, panelData }) => {
             {({ loading, panelData }) => {
               return this.renderPanelPlugin(loading, panelData, width, height);
               return this.renderPanelPlugin(loading, panelData, width, height);
             }}
             }}
           </DataPanel>
           </DataPanel>
-          )}
-        </>
-      )}
+        ) : (
+          this.renderPanelPlugin(LoadingState.Done, this.getDataForPanel, width, height)
+        )}
       </>
       </>
     );
     );
   }
   }
 
 
-
   render() {
   render() {
     const { dashboard, panel } = this.props;
     const { dashboard, panel } = this.props;
     const { timeInfo } = this.state;
     const { timeInfo } = this.state;
@@ -180,7 +191,7 @@ export class PanelChrome extends PureComponent<Props, State> {
                 scopedVars={panel.scopedVars}
                 scopedVars={panel.scopedVars}
                 links={panel.links}
                 links={panel.links}
               />
               />
-              {this.renderHelper(width, height)}
+              {this.renderDataPanel(width, height)}
             </div>
             </div>
           );
           );
         }}
         }}