NodeGraph: Don't check for preferredVisualisationType (#35116) (#35163)

* Don't check for preferredVisualisationType inside the NodeGraph

* Fix layout worker mocking

(cherry picked from commit 0b94f33813)

Co-authored-by: Andrej Ocenas <mr.ocenas@gmail.com>

public/app/features/explore/NodeGraphContainer.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { UnconnectedNodeGraphContainer } from './NodeGraphContainer';
 import { getDefaultTimeRange, MutableDataFrame } from '@grafana/data';
 import { ExploreId } from '../../types';
+jest.mock('../../plugins/panel/nodeGraph/layout.worker.js');
 
 describe('NodeGraphContainer', () => {
   it('is collapsed if shown with traces', () => {
@@ -20,7 +21,7 @@ describe('NodeGraphContainer', () => {
     expect(container.firstChild?.childNodes.length).toBe(1);
   });
 
-  it('shows the graph if not with trace view', () => {
+  it('shows the graph if not with trace view', async () => {
     const { container } = render(
       <UnconnectedNodeGraphContainer
         dataFrames={[nodes]}
@@ -32,6 +33,7 @@ describe('NodeGraphContainer', () => {
 
     expect(container.firstChild?.childNodes.length).toBe(2);
     expect(container.querySelector('svg')).toBeInTheDocument();
+    await screen.findByLabelText(/Node: tempo-querier/);
   });
 });
 

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

@@ -3,25 +3,7 @@ import { render, screen, fireEvent, waitFor, getByText } from '@testing-library/
 import userEvent from '@testing-library/user-event';
 import { NodeGraph } from './NodeGraph';
 import { makeEdgesDataFrame, makeNodesDataFrame } from './utils';
-
+jest.mock('./layout.worker.js');
-jest.mock('./layout.worker.js', () => {
-  const { layout } = jest.requireActual('./layout.worker.js');
-  class TestWorker {
-    constructor() {}
-    postMessage(data: any) {
-      const { nodes, edges, config } = data;
-      setTimeout(() => {
-        layout(nodes, edges, config);
-        // @ts-ignore
-        this.onmessage({ data: { nodes, edges } });
-      }, 1);
-    }
-  }
-  return {
-    __esModule: true,
-    default: TestWorker,
-  };
-});
 
 describe('NodeGraph', () => {
   it('doesnt fail without any data', async () => {

public/app/plugins/panel/nodeGraph/__mocks__/layout.worker.js

@@ -0,0 +1,12 @@
+const { layout } = jest.requireActual('../layout.worker.js');
+
+export default class TestWorker {
+  constructor() {}
+  postMessage(data) {
+    const { nodes, edges, config } = data;
+    setTimeout(() => {
+      layout(nodes, edges, config);
+      this.onmessage({ data: { nodes, edges } });
+    }, 1);
+  }
+}

public/app/plugins/panel/nodeGraph/useCategorizeFrames.ts

@@ -8,8 +8,7 @@ import { DataFrame } from '@grafana/data';
  */
 export function useCategorizeFrames(series: DataFrame[]) {
   return useMemo(() => {
-    const serviceMapFrames = series.filter((frame) => frame.meta?.preferredVisualisationType === 'nodeGraph');
+    return series.reduce(
-    return serviceMapFrames.reduce(
       (acc, frame) => {
         const sourceField = frame.fields.filter((f) => f.name === 'source');
         if (sourceField.length) {

public/app/plugins/panel/nodeGraph/utils.ts

@@ -227,7 +227,6 @@ function nodesFrame() {
       ...fields[key],
       name: key,
     })),
-    meta: { preferredVisualisationType: 'nodeGraph' },
   });
 }
 
@@ -266,7 +265,6 @@ function edgesFrame() {
       ...fields[key],
       name: key,
     })),
-    meta: { preferredVisualisationType: 'nodeGraph' },
   });
 }