Add sample graph data when in dev mode

package.json

@@ -52,6 +52,7 @@
     "tsc-lint": "tsc --build",
     "tsc-lint-debug": "tsc --listFiles",
     "start": "cd packages/jaeger-ui && npm run start",
+    "start:with-data": "cd packages/jaeger-ui && npm run start:with-data",
     "update-snapshots": "cd packages/jaeger-ui && npm test -- -u"
   },
   "prettier": {

packages/jaeger-ui/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     __REACT_APP_GA_DEBUG__: false,
     __REACT_APP_VSN_STATE__: false,
     __APP_ENVIRONMENT__: false,
+    __REACT_APP_USE_SAMPLE_DATA__: false,
   },
   overrides: [
     {

packages/jaeger-ui/package.json

@@ -93,6 +93,7 @@
     "coverage": "npm run test-ci -- --coverage",
     "start:ga-debug": "REACT_APP_GA_DEBUG=1 REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) vite",
     "start": "vite",
+    "start:with-data": "REACT_APP_USE_SAMPLE_DATA=true vite",
     "test": "jest --maxWorkers=50%",
     "test-ci": "CI=1 jest --silent --color --maxWorkers=4"
   },

packages/jaeger-ui/src/components/DependencyGraph/index.jsx

@@ -30,6 +30,7 @@
 
 import './index.css';
 import withRouteProps from '../../utils/withRouteProps';
+import { shouldUseSampleDAGData } from '../../utils/constants';
 
 // export for tests
 export const GRAPH_TYPES = {
@@ -38,6 +39,16 @@
 
 const dagMaxNumServices = getConfigValue('dependencies.dagMaxNumServices') || FALLBACK_DAG_MAX_NUM_SERVICES;
 
+let sampleDAGDataset = [];
+export async function loadSampleData() {
+  if (shouldUseSampleDAGData() === 'true') {
+    const module = await import('./sample_dag_dataset.json');
+    sampleDAGDataset = module.default;
+    return sampleDAGDataset;
+  }
+  return [];
+}
+
 // export for tests
 export class DependencyGraphPageImpl extends Component {
   static propTypes = {
@@ -73,6 +84,10 @@
 
   componentDidMount() {
     this.props.fetchDependencies();
+    loadSampleData().then(data => {
+      const selectedLayout = data.length > dagMaxNumServices ? 'sfdp' : 'dot';
+      this.setState({ selectedLayout });
+    });
   }
 
   handleServiceSelect = service => {
@@ -212,7 +227,13 @@
     links = formatted.links;
     nodes = formatted.nodes;
   }
-  return { loading, error, nodes, links, dependencies };
+  return {
+    loading,
+    error,
+    nodes,
+    links,
+    dependencies: shouldUseSampleDAGData() === 'true' ? sampleDAGDataset : dependencies,
+  };
 }
 
 // export for tests

packages/jaeger-ui/src/components/DependencyGraph/index.test.js

@@ -15,12 +15,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import {
-  DependencyGraphPageImpl as DependencyGraph,
-  GRAPH_TYPES,
-  mapDispatchToProps,
-  mapStateToProps,
-} from './index';
+import { DependencyGraphPageImpl as DependencyGraph, mapDispatchToProps, mapStateToProps } from './index';
 import LoadingIndicator from '../common/LoadingIndicator';
 
 const childId = 'boomya';