NodeGraph: Fix empty state to display 'No Data' message (#43633)

* Fix "0" when no nodes present in NodeGraph

* Show no data message in NodeGraph

* Fix tests

public/app/plugins/panel/nodeGraph/NodeGraph.test.tsx

@@ -14,12 +14,14 @@ jest.mock('react-use/lib/useMeasure', () => {
 });
 
 describe('NodeGraph', () => {
-  it('doesnt fail without any data', async () => {
+  it('shows no data message without any data', async () => {
     render(<NodeGraph dataFrames={[]} getLinks={() => []} />);
+
+    await screen.findByText('No data');
   });
 
   it('can zoom in and out', async () => {
-    render(<NodeGraph dataFrames={[]} getLinks={() => []} />);
+    render(<NodeGraph dataFrames={[makeNodesDataFrame(2), makeEdgesDataFrame([[0, 1]])]} getLinks={() => []} />);
     const zoomIn = await screen.findByTitle(/Zoom in/);
     const zoomOut = await screen.findByTitle(/Zoom out/);
 

public/app/plugins/panel/nodeGraph/NodeGraph.tsx

@@ -44,6 +44,15 @@ const getStyles = (theme: GrafanaTheme2) => ({
     user-select: none;
   `,
 
+  noDataMsg: css`
+    height: 100%;
+    width: 100%;
+    display: grid;
+    place-items: center;
+    font-size: ${theme.typography.h4.fontSize};
+    color: ${theme.colors.text.secondary};
+  `,
+
   mainGroup: css`
     label: mainGroup;
     will-change: transform;
@@ -67,6 +76,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
     padding-bottom: 5px;
     margin-right: 10px;
   `,
+  viewControlsWrapper: css`
+    margin-left: auto;
+  `,
   alert: css`
     label: alert;
     padding: 5px 8px;
@@ -177,6 +189,7 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
         </div>
       ) : null}
 
+      {dataFrames.length ? (
         <svg
           ref={panRef}
           viewBox={`${-(width / 2)} ${-(height / 2)} ${width} ${height}`}
@@ -210,9 +223,12 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
             {!config.gridLayout && <EdgeLabels edges={edges} nodeHoveringId={nodeHover} edgeHoveringId={edgeHover} />}
           </g>
         </svg>
+      ) : (
+        <div className={styles.noDataMsg}>No data</div>
+      )}
 
       <div className={styles.viewControls}>
-        {nodes.length && (
+        {nodes.length ? (
           <div className={styles.legend}>
             <Legend
               sortable={config.gridLayout}
@@ -226,8 +242,9 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
               }}
             />
           </div>
-        )}
+        ) : null}
 
+        <div className={styles.viewControlsWrapper}>
           <ViewControls<Config>
             config={config}
             onConfigChange={(cfg) => {
@@ -243,6 +260,7 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
             disableZoomOut={isMinZoom}
           />
         </div>
+      </div>
 
       {hiddenNodesCount > 0 && (
         <div className={styles.alert} aria-label={'Nodes hidden warning'}>