Repository: NovatecConsulting/novatec-service-dependency-graph-panel
Branch: master
Commit: bf97e1d64386
Files: 74
Total size: 190.4 KB

Directory structure:
gitextract_lgiult8p/

├── .circleci/
│   └── config.yml
├── .codeclimate.yml
├── .config/
│   ├── .eslintrc
│   ├── .prettierrc.js
│   ├── Dockerfile
│   ├── README.md
│   ├── jest/
│   │   ├── mocks/
│   │   │   └── react-inlinesvg.tsx
│   │   └── utils.js
│   ├── jest-setup.js
│   ├── jest.config.js
│   ├── tsconfig.json
│   ├── types/
│   │   └── custom.d.ts
│   └── webpack/
│       ├── constants.ts
│       ├── utils.ts
│       └── webpack.config.ts
├── .editorconfig
├── .eslintrc
├── .github/
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug_report.md
│   │   ├── feature_request.md
│   │   └── question.md
│   └── workflows/
│       └── build.yml
├── .gitignore
├── .nvmrc
├── .prettierrc.js
├── .release-it.json
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── appveyor.yml
├── docker-compose.yaml
├── docs/
│   └── README.md
├── jest-setup.js
├── jest.config.js
├── package.json
├── provisioning/
│   ├── dashboards/
│   │   └── dashboards.yml
│   └── home/
│       └── home.json
├── scripts/
│   └── create-signed-plugin.sh
├── src/
│   ├── assets/
│   │   └── icons/
│   │       └── icon_index.json
│   ├── css/
│   │   └── novatec-service-dependency-graph-panel.css
│   ├── dummy_data_frame.ts
│   ├── migration/
│   │   └── PanelMigration.tsx
│   ├── module.test.ts
│   ├── module.ts
│   ├── options/
│   │   ├── DefaultSettings.tsx
│   │   ├── TypeAheadTextfield/
│   │   │   ├── TypeaheadTextfield.css
│   │   │   └── TypeaheadTextfield.tsx
│   │   ├── dummyDataSwitch/
│   │   │   └── DummyDataSwitch.tsx
│   │   ├── iconMapping/
│   │   │   ├── IconMapping.css
│   │   │   └── IconMapping.tsx
│   │   └── options.tsx
│   ├── panel/
│   │   ├── PanelController.tsx
│   │   ├── asset_utils.tsx
│   │   ├── canvas/
│   │   │   ├── collision_detector.ts
│   │   │   ├── graph_canvas.ts
│   │   │   └── particle_engine.ts
│   │   ├── layout_options.ts
│   │   ├── serviceDependencyGraph/
│   │   │   ├── ServiceDependencyGraph.css
│   │   │   └── ServiceDependencyGraph.tsx
│   │   └── statistics/
│   │       ├── IncomingStatistics.tsx
│   │       ├── NodeStatistics.tsx
│   │       ├── SortableTable.tsx
│   │       ├── Statistics.css
│   │       ├── Statistics.tsx
│   │       └── utils/
│   │           └── Utils.ts
│   ├── plugin.json
│   ├── processing/
│   │   ├── graph_generator.ts
│   │   ├── node_substitutor.ts
│   │   ├── node_tree.ts
│   │   ├── pre_processor.ts
│   │   └── utils/
│   │       └── Utils.ts
│   ├── types.tsx
│   └── typings/
│       └── index.d.ts
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .circleci/config.yml
================================================
version: 2.1

parameters:
  ssh-fingerprint:
    type: string
    default: ${GITHUB_SSH_FINGERPRINT}

aliases:
  # Workflow filters
  - &filter-only-master
    branches:
      only: master
  - &filter-only-release
    branches:
      only: /^v[1-9]*[0-9]+\.[1-9]*[0-9]+\.x$/

workflows:
  plugin_workflow:
    jobs:
      - build

executors:
  default_exec: # declares a reusable executor
    docker:
      - image: srclosson/grafana-plugin-ci-alpine:latest
  e2e_exec:
    docker:
      - image: srclosson/grafana-plugin-ci-e2e:latest

jobs:
  build:
    executor: default_exec
    steps:
      - checkout
      - restore_cache:
          name: restore node_modules
          keys:
          - build-cache-{.Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
      - run:
          name: Install dependencies
          command: |
            mkdir ci
            [ -f ~/project/node_modules/.bin/grafana-toolkit ] || yarn install --frozen-lockfile
      - save_cache:
          name: save node_modules
          paths:
            - ~/project/node_modules
          key: build-cache-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
      - run:
          name: Build and test frontend
          command: ./node_modules/.bin/grafana-toolkit plugin:ci-build
      - run:
          name: Move results to ci folder
          command: ./node_modules/.bin/grafana-toolkit plugin:ci-build --finish
      - run:
          name: Package distribution
          command: |
            ./node_modules/.bin/grafana-toolkit plugin:ci-package
      - persist_to_workspace:
          root: .
          paths:
          - ci/jobs/package
          - ci/packages
          - ci/dist
          - ci/grafana-test-env
      - store_artifacts:
          path: ci


================================================
FILE: .codeclimate.yml
================================================
exclude_patterns:
- "dist"
- "**/node_modules/"
- "**/*.d.ts"
- "src/libs/"
- "src/images/"
- "src/img/"
- "src/screenshots/"


================================================
FILE: .config/.eslintrc
================================================
/*
 * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 *
 * In order to extend the configuration follow the steps in
 * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-eslint-config
 */
{
  "extends": ["@grafana/eslint-config"],
  "root": true,
  "rules": {
    "react/prop-types": "off"
  }
}


================================================
FILE: .config/.prettierrc.js
================================================
/*
 * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 *
 * In order to extend the configuration follow the steps in .config/README.md
 */

module.exports = {
  "endOfLine": "auto",
  "printWidth": 120,
  "trailingComma": "es5",
  "semi": true,
  "jsxSingleQuote": false,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2
};

================================================
FILE: .config/Dockerfile
================================================
ARG grafana_version=latest
ARG grafana_image=grafana-enterprise

FROM grafana/${grafana_image}:${grafana_version}

# Make it as simple as possible to access the grafana instance for development purposes
# Do NOT enable these settings in a public facing / production grafana instance
ENV GF_AUTH_ANONYMOUS_ORG_ROLE "Admin"
ENV GF_AUTH_ANONYMOUS_ENABLED "true"
ENV GF_AUTH_BASIC_ENABLED "false"
# Set development mode so plugins can be loaded without the need to sign
ENV GF_DEFAULT_APP_MODE "development"

# Inject livereload script into grafana index.html
USER root
RUN sed -i 's/<\/body><\/html>/<script src=\"http:\/\/localhost:35729\/livereload.js\"><\/script><\/body><\/html>/g' /usr/share/grafana/public/views/index.html

================================================
FILE: .config/README.md
================================================
# Default build configuration by Grafana

**This is an auto-generated directory and is not intended to be changed! ⚠️**

The `.config/` directory holds basic configuration for the different tools
that are used to develop, test and build the project. In order to make it updates easier we ask you to
not edit files in this folder to extend configuration.

## How to extend the basic configs?

Bear in mind that you are doing it at your own risk, and that extending any of the basic configuration can lead
to issues around working with the project.

### Extending the ESLint config

Edit the `.eslintrc` file in the project root in order to extend the ESLint configuration.

**Example:**

```json
{
  "extends": "./.config/.eslintrc",
  "rules": {
    "react/prop-types": "off"
  }
}
```

---

### Extending the Prettier config

Edit the `.prettierrc.js` file in the project root in order to extend the Prettier configuration.

**Example:**

```javascript
module.exports = {
  // Prettier configuration provided by Grafana scaffolding
  ...require('./.config/.prettierrc.js'),

  semi: false,
};
```

---

### Extending the Jest config

There are two configuration in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`.

**`jest-setup.js`:** A file that is run before each test file in the suite is executed. We are using it to
set up the Jest DOM for the testing library and to apply some polyfills. ([link to Jest docs](https://jestjs.io/docs/configuration#setupfilesafterenv-array))

**`jest.config.js`:** The main Jest configuration file that extends the Grafana recommended setup. ([link to Jest docs](https://jestjs.io/docs/configuration))

#### ESM errors with Jest

A common issue found with the current jest config involves importing an npm package which only offers an ESM build. These packages cause jest to error with `SyntaxError: Cannot use import statement outside a module`. To work around this we provide a list of known packages to pass to the `[transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)` jest configuration property. If need be this can be extended in the following way:

```javascript
process.env.TZ = 'UTC';
const { grafanaESModules, nodeModulesToTransform } = require('./config/jest/utils');

module.exports = {
  // Jest configuration provided by Grafana
  ...require('./.config/jest.config'),
  // Inform jest to only transform specific node_module packages.
  transformIgnorePatterns: [nodeModulesToTransform([...grafanaESModules, 'packageName'])],
};
```

---

### Extending the TypeScript config

Edit the `tsconfig.json` file in the project root in order to extend the TypeScript configuration.

**Example:**

```json
{
  "extends": "./.config/tsconfig.json",
  "compilerOptions": {
    "preserveConstEnums": true
  }
}
```

---

### Extending the Webpack config

Follow these steps to extend the basic Webpack configuration that lives under `.config/`:

#### 1. Create a new Webpack configuration file

Create a new config file that is going to extend the basic one provided by Grafana.
It can live in the project root, e.g. `webpack.config.ts`.

#### 2. Merge the basic config provided by Grafana and your custom setup

We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge) for this.

```typescript
// webpack.config.ts
import type { Configuration } from 'webpack';
import { merge } from 'webpack-merge';
import grafanaConfig from './.config/webpack/webpack.config';

const config = async (env): Promise<Configuration> => {
  const baseConfig = await grafanaConfig(env);

  return merge(baseConfig, {
    // Add custom config here...
    output: {
      asyncChunks: true,
    },
  });
};

export default config;
```

#### 3. Update the `package.json` to use the new Webpack config

We need to update the `scripts` in the `package.json` to use the extended Webpack configuration.

**Update for `build`:**

```diff
-"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
+"build": "webpack -c ./webpack.config.ts --env production",
```

**Update for `dev`:**

```diff
-"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
+"dev": "webpack -w -c ./webpack.config.ts --env development",
```

### Configure grafana image to use when running docker

By default `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behaviour simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`. 

**Example:**

```yaml
version: '3.7'

services:
  grafana:
    container_name: 'myorg-basic-app'
    build:
      context: ./.config
      args:
        grafana_version: ${GRAFANA_VERSION:-9.1.2}
        grafana_image: ${GRAFANA_IMAGE:-grafana}
```

In this example we are assigning the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will give you the possibility to set the value while running the docker-compose commands which might be convinent in some scenarios.

---


================================================
FILE: .config/jest/mocks/react-inlinesvg.tsx
================================================
// Due to the grafana/ui Icon component making fetch requests to
// `/public/img/icon/<icon_name>.svg` we need to mock react-inlinesvg to prevent
// the failed fetch requests from displaying errors in console.

import React from 'react';

type Callback = (...args: any[]) => void;

export interface StorageItem {
  content: string;
  queue: Callback[];
  status: string;
}

export const cacheStore: { [key: string]: StorageItem } = Object.create(null);

const SVG_FILE_NAME_REGEX = /(.+)\/(.+)\.svg$/;

const InlineSVG = ({ src }: { src: string }) => {
  // testId will be the file name without extension (e.g. `public/img/icons/angle-double-down.svg` -> `angle-double-down`)
  const testId = src.replace(SVG_FILE_NAME_REGEX, '$2');
  return <svg xmlns="http://www.w3.org/2000/svg" data-testid={testId} viewBox="0 0 24 24" />;
};

export default InlineSVG;


================================================
FILE: .config/jest/utils.js
================================================
/*
 * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 *
 * In order to extend the configuration follow the steps in .config/README.md
 */

/*
 * This utility function is useful in combination with jest `transformIgnorePatterns` config
 * to transform specific packages (e.g.ES modules) in a projects node_modules folder.
 */
const nodeModulesToTransform = (moduleNames) => `node_modules\/(?!.*(${moduleNames.join('|')})\/.*)`;

// Array of known nested grafana package dependencies that only bundle an ESM version
const grafanaESModules = [
  '.pnpm', // Support using pnpm symlinked packages
  '@grafana/schema',
  'd3',
  'd3-color',
  'd3-force',
  'd3-interpolate',
  'd3-scale-chromatic',
  'ol',
  'react-colorful',
  'rxjs',
  'uuid',
];

module.exports = {
  nodeModulesToTransform,
  grafanaESModules,
};


================================================
FILE: .config/jest-setup.js
================================================
/*
 * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 *
 * In order to extend the configuration follow the steps in
 * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-jest-config
 */

import '@testing-library/jest-dom';

// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
Object.defineProperty(global, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
    removeListener: jest.fn(), // deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

HTMLCanvasElement.prototype.getContext = () => {};


================================================
FILE: .config/jest.config.js
================================================
/*
 * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 *
 * In order to extend the configuration follow the steps in
 * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-jest-config
 */

const path = require('path');
const { grafanaESModules, nodeModulesToTransform } = require('./jest/utils');

module.exports = {
  moduleNameMapper: {
    '\\.(css|scss|sass)$': 'identity-obj-proxy',
    'react-inlinesvg': path.resolve(__dirname, 'jest', 'mocks', 'react-inlinesvg.tsx'),
  },
  modulePaths: ['<rootDir>/src'],
  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
    '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
    '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
  ],
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        sourceMaps: 'inline',
        jsc: {
          parser: {
            syntax: 'typescript',
            tsx: true,
            decorators: false,
            dynamicImport: true,
          },
        },
      },
    ],
  },
  // Jest will throw `Cannot use import statement outside module` if it tries to load an
  // ES module without it being transformed first. ./config/README.md#esm-errors-with-jest
  transformIgnorePatterns: [nodeModulesToTransform(grafanaESModules)],
};


================================================
FILE: .config/tsconfig.json
================================================
/*
 * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 *
 * In order to extend the configuration follow the steps in
 * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-typescript-config
 */
 {
  "compilerOptions": {
    "alwaysStrict": true,
    "declaration": false,
    "rootDir": "../src",
    "baseUrl": "../src",
    "typeRoots": ["../node_modules/@types"],
    "resolveJsonModule": true
  },
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs",
      "target": "es5",
      "esModuleInterop": true
    },
    "transpileOnly": true
  },
  "include": ["../src", "./types"],
  "extends": "@grafana/tsconfig"
}


================================================
FILE: .config/types/custom.d.ts
================================================
// Image declarations
declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
  const src: string;
  export default src;
}

declare module '*.svg' {
  const content: string;
  export default content;
}

// Font declarations
declare module '*.woff';
declare module '*.woff2';
declare module '*.eot';
declare module '*.ttf';
declare module '*.otf';


================================================
FILE: .config/webpack/constants.ts
================================================
export const SOURCE_DIR = 'src';
export const DIST_DIR = 'dist';


================================================
FILE: .config/webpack/utils.ts
================================================
import fs from 'fs';
import process from 'process';
import os from 'os';
import path from 'path';
import util from 'util';
import { glob } from 'glob';
import { SOURCE_DIR } from './constants';


export function isWSL() {
  if (process.platform !== 'linux') {
    return false;
  }

  if (os.release().toLowerCase().includes('microsoft')) {
    return true;
  }

  try {
    return fs.readFileSync('/proc/version', 'utf8').toLowerCase().includes('microsoft');
  } catch {
    return false;
  }
} 

export function getPackageJson() {
  return require(path.resolve(process.cwd(), 'package.json'));
}

export function getPluginJson() {
  return require(path.resolve(process.cwd(), `${SOURCE_DIR}/plugin.json`));
}

export function hasReadme() {
  return fs.existsSync(path.resolve(process.cwd(), SOURCE_DIR, 'README.md'));
}

// Support bundling nested plugins by finding all plugin.json files in src directory
// then checking for a sibling module.[jt]sx? file.
export async function getEntries(): Promise<Record<string, string>> {
  const pluginsJson = await glob('**/src/**/plugin.json', { absolute: true });

  const plugins = await Promise.all(pluginsJson.map((pluginJson) => {
      const folder = path.dirname(pluginJson);
      return glob(`${folder}/module.{ts,tsx,js,jsx}`, { absolute: true });
    })
  );

  return plugins.reduce((result, modules) => {
    return modules.reduce((result, module) => {
      const pluginPath = path.dirname(module);
      const pluginName = path.relative(process.cwd(), pluginPath).replace(/src\/?/i, '');
      const entryName = pluginName === '' ? 'module' : `${pluginName}/module`;

      result[entryName] = module;
      return result;
    }, result);
  }, {});
}


================================================
FILE: .config/webpack/webpack.config.ts
================================================
/*
 * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 *
 * In order to extend the configuration follow the steps in
 * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-webpack-config
 */

import CopyWebpackPlugin from 'copy-webpack-plugin';
import ESLintPlugin from 'eslint-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import LiveReloadPlugin from 'webpack-livereload-plugin';
import path from 'path';
import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
import { Configuration } from 'webpack';

import { getPackageJson, getPluginJson, hasReadme, getEntries, isWSL } from './utils';
import { SOURCE_DIR, DIST_DIR } from './constants';

const pluginJson = getPluginJson();

const config = async (env): Promise<Configuration> => {
  const baseConfig: Configuration = {
    cache: {
      type: 'filesystem',
      buildDependencies: {
        config: [__filename],
      },
    },

    context: path.join(process.cwd(), SOURCE_DIR),

    devtool: env.production ? 'source-map' : 'eval-source-map',

    entry: await getEntries(),

    externals: [
      'lodash',
      'jquery',
      'moment',
      'slate',
      'emotion',
      '@emotion/react',
      '@emotion/css',
      'prismjs',
      'slate-plain-serializer',
      '@grafana/slate-react',
      'react',
      'react-dom',
      'react-redux',
      'redux',
      'rxjs',
      'react-router',
      'react-router-dom',
      'd3',
      'angular',
      '@grafana/ui',
      '@grafana/runtime',
      '@grafana/data',

      // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
      ({ request }, callback) => {
        const prefix = 'grafana/';
        const hasPrefix = (request) => request.indexOf(prefix) === 0;
        const stripPrefix = (request) => request.substr(prefix.length);

        if (hasPrefix(request)) {
          return callback(undefined, stripPrefix(request));
        }

        callback();
      },
    ],

    mode: env.production ? 'production' : 'development',

    module: {
      rules: [
        {
          exclude: /(node_modules)/,
          test: /\.[tj]sx?$/,
          use: {
            loader: 'swc-loader',
            options: {
              jsc: {
                baseUrl: './src',
                target: 'es2015',
                loose: false,
                parser: {
                  syntax: 'typescript',
                  tsx: true,
                  decorators: false,
                  dynamicImport: true,
                },
              },
            },
          },
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
        },
        {
          test: /\.s[ac]ss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/,
          type: 'asset/resource',
          generator: {
            // Keep publicPath relative for host.com/grafana/ deployments
            publicPath: `public/plugins/${pluginJson.id}/img/`,
            outputPath: 'img/',
            filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
          },
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
          type: 'asset/resource',
          generator: {
            // Keep publicPath relative for host.com/grafana/ deployments
            publicPath: `public/plugins/${pluginJson.id}/fonts/`,
            outputPath: 'fonts/',
            filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
          },
        },
      ],
    },

    output: {
      clean: {
        keep: new RegExp(`(.*?_(amd64|arm(64)?)(.exe)?|go_plugin_build_manifest)`),
      },
      filename: '[name].js',
      library: {
        type: 'amd',
      },
      path: path.resolve(process.cwd(), DIST_DIR),
      publicPath: '/',
    },

    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          // If src/README.md exists use it; otherwise the root README
          // To `compiler.options.output`
          { from: hasReadme() ? 'README.md' : '../README.md', to: '.', force: true },
          { from: 'plugin.json', to: '.' },
          { from: '../LICENSE', to: '.' },
          { from: '../CHANGELOG.md', to: '.', force: true },
          { from: '**/*.json', to: '.' }, // TODO<Add an error for checking the basic structure of the repo>
          { from: '**/*.svg', to: '.', noErrorOnMissing: true }, // Optional
          { from: '**/*.png', to: '.', noErrorOnMissing: true }, // Optional
          { from: '**/*.html', to: '.', noErrorOnMissing: true }, // Optional
          { from: 'img/**/*', to: '.', noErrorOnMissing: true }, // Optional
          { from: 'libs/**/*', to: '.', noErrorOnMissing: true }, // Optional
          { from: 'static/**/*', to: '.', noErrorOnMissing: true }, // Optional
        ],
      }),
      // Replace certain template-variables in the README and plugin.json
      new ReplaceInFileWebpackPlugin([
        {
          dir: DIST_DIR,
          files: ['plugin.json', 'README.md'],
          rules: [
            {
              search: /\%VERSION\%/g,
              replace: getPackageJson().version,
            },
            {
              search: /\%TODAY\%/g,
              replace: new Date().toISOString().substring(0, 10),
            },
            {
              search: /\%PLUGIN_ID\%/g,
              replace: pluginJson.id,
            },
          ],
        },
      ]),
      new ForkTsCheckerWebpackPlugin({
        async: Boolean(env.development),
        issue: {
          include: [{ file: '**/*.{ts,tsx}' }],
        },
        typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
      }),
      new ESLintPlugin({
        extensions: ['.ts', '.tsx'],
        lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
      }),
      ...(env.development ? [new LiveReloadPlugin()] : []),
    ],

    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      // handle resolving "rootDir" paths
      modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],
      unsafeCache: true,
    },
  }

  if(isWSL()) {
    baseConfig.watchOptions = {
      poll: 3000,
      ignored: /node_modules/,
    }}


  return baseConfig;

};

export default config;


================================================
FILE: .editorconfig
================================================
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120

[*.{js,ts,tsx,scss}]
quote_type = single

[*.md]
trim_trailing_whitespace = false


================================================
FILE: .eslintrc
================================================
{
  "extends": "./.config/.eslintrc"
}

================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: "[BUG] - *ENTER TITLE*"
labels: bug
assignees: ''

---

Please provide as much and as detailed information as possible as it will make it easier for us to reproduce and fix the bug!

**Describe the bug**
A clear and concise description of what the bug is.

**To Reproduce**
A clear and concise description of how to reproduce the bug.

**Expected behavior**
A clear and concise description of what you expected to happen.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Your Setup:**
- OS Grafana is running on:
- OS & Browser from which Grafana is accessed:
- Plugin-Version:
- Grafana-Version:
- Datasource & Version:
- Other: 

**Additional context**
Add any other context about the problem here.


================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: "[Feature] - *ENTER TITLE*"
labels: enhancement
assignees: ''

---

**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

**Describe the solution you'd like**
A clear and concise description of what you want to happen.

**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.

**Additional context**
Add any other context or screenshots about the feature request here.


================================================
FILE: .github/ISSUE_TEMPLATE/question.md
================================================
---
name: Question
about: Ask a question about the project.
title: "[Question] - *ENTER TITLE*"
labels: question
assignees: ''

---

**Write your question here**

**Screenshots**

**Where and how could we improve the readme?**


================================================
FILE: .github/workflows/build.yml
================================================
name: Build plugin

on:
  push:

jobs:
  build:
    runs-on: ubuntu-latest
    container:
      image: node:20.19
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Build plugin
        run: |
          yarn install && yarn build


================================================
FILE: .gitignore
================================================
node_modules
npm-debug.log
*.log
.vscode
dist
coverage

================================================
FILE: .nvmrc
================================================
16

================================================
FILE: .prettierrc.js
================================================
module.exports = {
  // Prettier configuration provided by Grafana scaffolding
  ...require("./.config/.prettierrc.js")
};

================================================
FILE: .release-it.json
================================================
{
    "github": {
      "release": false
    },
    "npm": {
      "publish": false
    },
    "hooks": {
      "after:bump":
        "rm -r dist; yarn build; npx @grafana/toolkit plugin:sign; cp -r dist novatec-sdg-panel; mkdir -p releases; zip -r releases/novatec-sdg-panel.zip novatec-sdg-panel; rm -r novatec-sdg-panel"
    }
  }

================================================
FILE: CHANGELOG.md
================================================
# Change Log

All notable changes to this project will be documented in this file.

## v4.2.0

Update dependencies

## v4.1.2

Add layering mechanism
Add collision between edge-labels
Update dependencies

## v4.0.2

Bug fix in icon path


## v4.0.1

SumTimings now working as expected
Response Time Health now displayed in node statistics
External Icons now use the correct path


## v4.0.0

Ported project to react.
aggregationType is not needed as template variable anymore.
Unit type of data now can be chosen.
Tables of Incoming/Outgoing Statistics are now sortable.
Settings needed for the dummy data to be displayed is now filled in automatically when dummy data is activated.
Service Icons can now be customized for both Internal and External Services.


================================================
FILE: CONTRIBUTING.md
================================================
# Contributing

## Releasing

To create a new release of the plugin, follow these steps.

You may also read the [official documentation](https://grafana.com/developers/plugin-tools/publish-a-plugin/publish-a-plugin).

### 1. Push a new tag

Push the current state of the plugin to the remote GitHub repository.

  `git tag <version>`

  `git tag push origin -tag <version>`

### 2. Create a release

Create a new release from the pushed tag manually in GitHub. 
Add appropriate release notes.

### 3. Add the signed plugin to the release

To sign a plugin, you will need a **plugin signing token**, 
which has been created in our Grafana Cloud account.

Set the environment variable `GRAFANA_ACCESS_POLICY_TOKEN` via

`export GRAFANA_ACCESS_POLICY_TOKEN=<token>` 

or in Windows 

`set GRAFANA_ACCESS_POLICY_TOKEN=<token>`

Then run the release script to create a signed plugin:

`./scripts/create-signed-plugin.sh`

Add the created zip file in the `/release` directory to the GitHub release.

### 4. Submit the plugin in Grafana

If you want to publish the release in the Grafana marketplace, you will have to submit the
release in our Grafana Cloud account.

You will need to provide:

- URL of the plugin (link to the zip file of the release)
- SHA1 of the plugin (SHA1 hash of the zip file)
- Source code URL (URL of the repository for the release tag)
- Test description (use the `docker-compose.yml` to run the plugin with dummy data)


================================================
FILE: LICENSE
================================================
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   Copyright 2025 Novatec Consulting GmbH

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.


================================================
FILE: README.md
================================================
## Novatec Service Dependency Graph Panel

![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fgrafana.com%2Fapi%2Fplugins%2Fnovatec-sdg-panel&query=%24.downloads&color=orange&label=downloads)
[![License](https://img.shields.io/github/license/NovatecConsulting/novatec-service-dependency-graph-panel)](LICENSE)


![SDG_PRESENTATION](https://user-images.githubusercontent.com/53812669/173822816-da6791ec-c785-435b-a235-21ead3ebd4e1.gif)


**Version 4.2.0 is only compatible with Grafana from version 10.4.0!**

**Version 4.0.0 is only compatible with Grafana from version 7.1.0!**



The Service Dependency Graph Panel by [Novatec](https://www.novatec-gmbh.de/en/) provides you with many features such as monitoring 
your latencies, errors and requests of your desired service. This interactive panel for [Grafana](https://grafana.com/) will help you
visualize the processes of your application much better. 


### Updating the Service Dependency Graph Panel
The file structure for the icon mapping has changed for version 4.0.0. **Icons are now located in the path 'plugins/novatec-sdg-panel/assets/icons/'.** This also applies to custom icons!

___

## Configuration of the Data Source

### Using Static Dummy Data

If you want to get a first impression of this panel without having your own data source yet, the panels provides you some dummy data to play around with.

The dummy data is basically a snapshot of multiple query results in the table format. You'll find its source [here](https://github.com/NovatecConsulting/novatec-service-dependency-graph-panel/blob/master/src/dummy_data_frame.ts), in the panel's GitHub repository.

Depending on the query result, the data provides the following tags:
* **service**: The service (application) the data is related to.
* **namespace**: The namespace of a service. Every literal divided by "." corresponds to one level of a namespace. For instance **demo.infrastructure**.
* **protocol**: The communication type (e.g. HTTP, JMS, ...).
* **origin_service**: In case of an incoming communication, this is the origin service.
* **target_service**: In case of an outgoing communication, this is the target service.
* **origin_external**: The origin of an incoming communication, which cannot be correlated to a known service (e.g. HTTP request of a third party application).
* **target_external**: The target of an outgoing communication, which cannot be correlated to a known service (e.g. third party HTTP endpoint).

Depending on the query result, the data provides the following fields:
* **in_timesum**: The total sum of all incoming request response times. (Prometheus style)
* **in_count**: The total amount of incoming requests.
* **error_in**: The amount of incoming requests which produced an error.
* **out_timesum**: The total sum of all outgoing request response times. (Prometheus style)
* **out_count**: The total amount of outgoing requests.
* **error_out**: The amount of outgoing requests which produced an error.
* **threshold**: The critical threshold in milliseconds for the response times of incoming requests.


In order to use this data you simply have to activate the Dummy Data Switch you can find in the General Settings. All necessary options will be applied.
After activating the Dummy Data your Data Mapping should look like this:

| key | value |
| --- | --- |
| Response Time | in_timesum |
| Request Rate  | in_count |
| Error Rate    | error_in |
| Response Time (Outgoing) | out_timesum |
| Request Rate (Outgoing) | out_count |
| Error Rate (Outgoing) | error_out |
| Response Time Baseline (Upper) | threshold |


_Note that you may have to refresh the dashboard or reload the page in order for it to work._

##### Live example dummy data

Downloading and launching the [inspectIT Ocelot demo #1](https://inspectit.github.io/inspectit-ocelot/docs/getting-started/docker-examples) will provide you with live dummy data rather than static one. 
Just open the docker images' Grafana and choose the dashboard `Service Graph` to see the fully functional Service Dependency Graph.
___

### Use your own Data Source

If you now want to use your own data source you have make sure, that the data received is in the `TABLE` format and is structured as follows:

* The table requires at least one column which specifies the connection's source or target. The settings `Source Component Column` and `Target Component Column` need to be set to the exact namings of the respective fields.
 
* The data can contain multiple value columns. These columns have to be mapped on specific attributes using the panel's `Data Mappings` options. 
**Example**: Assuming the data table contains a column named `req_rate` which values represents a request rate for the related connection in the current time window. In order to correctly visualize these values as a request rate, the `Request Rate Column` option has to be set to `req_rate` - the column's name.

#### Examples

##### Example 1

If the previously described requirements are respected, a minimal table can be as follows:

| app | target_app | req_rate |
| --- | --- | --- | 
| service a | service b | 50 | 
| service a | service c | 75 |
| service c | service d | 25 |

Assuming the panel's settings are specified as seen in the screenshot, the panel will visualize the data as following:

![Visualization of the minimal data table.](https://raw.githubusercontent.com/NovatecConsulting/novatec-service-dependency-graph-panel/master/src/img/data-example-1.png)

> Note: It is important to know that connections can only be generated if at least one request-rate column (incoming or outgoing) is defined.

##### Example 2

In this example, we extend the data table of example 1 by another column, representing the total sum of all request response times of a specific connection (e.g. sum of all HTTP request response times).

| app | target_app | req_rate | resp_time |
| --- | --- | --- | --- | 
| service a | service b | 50 | 4000 |
| service a | service c | 75 | 13650 |
| service c | service d | 25 | 750 |

Now, the panel's `Data Mappings` option `Response Time Column` is set to `resp_time`. This specifies that the value in the `resp_time` column should be handled as the response time for a connection. By default, the values in this column will be handled as a sum of all response times - kind of a Prometheus style metric. This behavior can be changed by using the `Handle Timings as Sums` option. This table will result in the following visualization.

![Visualization of a data table including request rate and response times.](https://raw.githubusercontent.com/NovatecConsulting/novatec-service-dependency-graph-panel/master/src/img/data-example-2.png)

___

## Service Icons

The service dependency graph plugin allows you to display your own symbols in the drawn nodes.
For this purpose the option 'Service Icon Mapping' can be used.
Here you can specify an assignment of icons to certain name patterns.
All nodes that match the specified pattern (regular expression) will get the icon.

![Custom service icons in the graph.](https://raw.githubusercontent.com/NovatecConsulting/novatec-service-dependency-graph-panel/master/src/img/service-icons.png)

##### Example

A sample assignment is included by default: `Pattern: java // Icon: java`.
This means that all nodes which have `java` in their name get the `java` icon.

#### Custom Service Icons

You can add custom icons, by putting them into the plugin's `/assets/icons/` directory.
The file type **has to be `PNG`** and the icon itself and **has to be square**.
In order to be able to use the icon, its name (without its ending) has to be put into the array contained in the `icon_index.json` file located in the `/assets/icons/` directory.

##### Example

If the `icon_index.json` has the following content:

```
["java", "star_trek"]
```

it is assumed that the files `java.png` and `star_trek.png` is existing in the `/assets/icons/` directory.
___

### Tracing Drilldown

The service dependency graph plugin allows you to specify a backend URL for each drawn node.
For this purpose the option 'Tracing Drilldown' can be used.
Here you can specify a backend URL. An open and closed curly bracket `{}` is the placeholder for the selected node.
Each node will get an arrow icon in the details view. This icon is a link to your backend, specified in the options.
The curly brackets `{}` will be replaced with the selected node.

#### Example

`http://{}/my/awesome/path` will end up to `http://customers-service/my/awesome/path` when you select the `customers-service`.

___

### Layering

From version 4.1.0, the Service Dependency Graph Panel supports layering service nodes by their respective namespace. 

####  Setup
To use this feature, add a tag containing the namespace of your service to your data. Then set the corresponding option `Namespace Column` in the panel's options to the name of this tag. If you have more than one namespace layer you want to be represented by the panel, you can separate multiple namespaces within your namespace tag by a certain character. This character must be set as the `Namespace Delimiter` in the panel's options. The default delimiter is `.`. Hence, if the content of a namespace column would be `my.awesome.namespace`, the graph would be built with `my` as layer 0, `awesome` as layer 1, and `namespace` as layer 2. Your respective service would then be on layer 3. 

#### Usage
You can control the layer of your panel by using the (+) and (-) buttons on the panel's top-right. (+) increases the layer currently displayed, (-) decreases the layer. 
___

## Create a Release

To create a release bundle, ensure `release-it` is installed:
```
npm install --global release-it
```
To build a release bundle:
```
release-it [--no-git.requireCleanWorkingDir]
```

### Found a bug? Have a question? Wanting to contribute?

Feel free to open up an issue. We will take care of you and provide as much help as needed. Any suggestions/contributions are being very much appreciated.


================================================
FILE: appveyor.yml
================================================
# Test against the latest version of this Node.js version
environment:
  nodejs_version: "12"

# Local NPM Modules
cache:
  - node_modules

# Install scripts. (runs after repo cloning)
install:
  # Get the latest stable version of Node.js or io.js
  - ps: Install-Product node $env:nodejs_version
  # install modules
  - npm install -g yarn --quiet
  - yarn install --pure-lockfile

# Post-install test scripts.
test_script:
  # Output useful info for debugging.
  - node --version
  - npm --version

# Run the build
build_script:
  - yarn dev   # This will also run prettier!
  - yarn build # make sure both scripts work


================================================
FILE: docker-compose.yaml
================================================
services:
  grafana:
    container_name: 'novatec-sdg-panel'
    platform: "linux/amd64"
    build:
      context: ./.config
      args:
        grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
        grafana_version: ${GRAFANA_VERSION:-11.6.0}
    environment:
      - GF_PATHS_PROVISIONING=/usr/share/grafana/custom/
    ports:
      - 3000:3000/tcp
    volumes:
      - ./dist:/var/lib/grafana/plugins/novatec-sdg-panel
      - ./provisioning:/usr/share/grafana/custom/
      - ./provisioning/home/home.json:/usr/share/grafana/public/dashboards/home.json


================================================
FILE: docs/README.md
================================================
TODO: add example docs structure


================================================
FILE: jest-setup.js
================================================
// Jest setup provided by Grafana scaffolding
import './.config/jest-setup';


================================================
FILE: jest.config.js
================================================
// force timezone to UTC to allow tests to work regardless of local timezone
// generally used by snapshots, but can affect specific tests
process.env.TZ = 'UTC';

module.exports = {
  // Jest configuration provided by Grafana scaffolding
  ...require('./.config/jest.config'),
};


================================================
FILE: package.json
================================================
{
  "name": "novatec-service-dependency-graph-panel",
  "version": "4.2.0",
  "description": "Service Dependency Graph panel for Grafana",
  "main": "src/module.js",
  "scripts": {
    "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
    "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
    "e2e": "yarn exec cypress install && yarn exec grafana-e2e run",
    "e2e:update": "yarn exec cypress install && yarn exec grafana-e2e run --update-screenshots",
    "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
    "lint:fix": "yarn run lint --fix",
    "server": "docker-compose up --build",
    "sign": "npx --yes @grafana/sign-plugin@latest",
    "test": "jest --watch --onlyChanged",
    "test:ci": "jest --passWithNoTests --maxWorkers 4",
    "typecheck": "tsc --noEmit"
  },
  "keywords": [
    "grafana",
    "plugin",
    "service-dependency-graph",
    "topology"
  ],
  "repository": "github:grafana/NovatecConsulting/novatec-service-dependency-graph-panel",
  "author": "Novatec",
  "license": "Apache-2.0",
  "bugs": {
    "url": "https://github.com/NovatecConsulting/novatec-service-dependency-graph-panel/issues",
    "email": "plugins@grafana.com"
  },
  "devDependencies": {
    "@babel/core": "^7.26.10",
    "@babel/preset-env": "^7.23.9",
    "@grafana/e2e": "^10.1.8",
    "@grafana/e2e-selectors": "^10.4.0",
    "@grafana/eslint-config": "^6.0.0",
    "@grafana/tsconfig": "^1.2.0-rc1",
    "@swc/core": "1.3.75",
    "@swc/helpers": "^0.5.15",
    "@swc/jest": "^0.2.37",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^16.2.0",
    "@types/jest": "^29.5.14",
    "@types/lodash": "^4.17.16",
    "@types/node": "^20.11.17",
    "@types/react-cytoscapejs": "^1.2.5",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "emotion": "10.0.27",
    "eslint-webpack-plugin": "^4.2.0",
    "fork-ts-checker-webpack-plugin": "^8.0.0",
    "glob": "^10.4.5",
    "identity-obj-proxy": "3.0.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "prettier": "^3.5.3",
    "replace-in-file-webpack-plugin": "^1.0.6",
    "sass": "1.63.2",
    "sass-loader": "13.3.1",
    "style-loader": "3.3.3",
    "swc-loader": "^0.2.6",
    "ts-jest": "^28.0.4",
    "ts-node": "^10.9.2",
    "tsconfig-paths": "^4.2.0",
    "typescript": "^5.3.3",
    "webpack": "^5.94.0",
    "webpack-cli": "^6.0.1",
    "webpack-livereload-plugin": "^3.0.2"
  },
  "engines": {
    "node": ">=20"
  },
  "dependencies": {
    "@emotion/css": "^11.13.5",
    "@grafana/data": "^10.4.0",
    "@grafana/runtime": "^10.4.0",
    "@grafana/ui": "^10.4.0",
    "@types/react-autosuggest": "^10.1.11",
    "@types/react-bootstrap-table-next": "^4.0.26",
    "babel-preset-react": "^6.24.1",
    "cytoscape": "^3.31.1",
    "cytoscape-canvas": "^3.0.1",
    "cytoscape-cola": "^2.5.1",
    "human-format": "^0.11.0",
    "react": "^18.3.1",
    "react-autosuggest": "^10.1.0",
    "react-bootstrap-table-next": "^4.0.3",
    "react-cytoscapejs": "^2.0.0",
    "react-dom": "^18.3.1",
    "react-native": "^0.78.1"
  },
  "packageManager": "yarn@1.22.22",
  "resolutions": {
    "underscore": "^1.12.1",
    "semver": "^6.3.1"
  }
}


================================================
FILE: provisioning/dashboards/dashboards.yml
================================================
apiVersion: 1

providers:
  - name: 'default'
    orgId: 1
    folder: ''
    type: file
    disableDeletion: true
    allowUiUpdates: true
    updateIntervalSeconds: 10 #how often Grafana will scan for changed dashboards
    options:
      path: /usr/share/grafana/custom/dashboards


================================================
FILE: provisioning/home/home.json
================================================
{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 1,
  "links": [],
  "panels": [
    {
      "datasource": {
        "type": "datasource",
        "uid": "grafana"
      },
      "gridPos": {
        "h": 17,
        "w": 24,
        "x": 0,
        "y": 0
      },
      "id": 1,
      "options": {
        "dataMapping": {
          "aggregationType": "service",
          "baselineRtUpper": "threshold",
          "errorRateColumn": "error_in",
          "errorRateOutgoingColumn": "error_out",
          "extOrigin": "origin_external",
          "extTarget": "target_external",
          "requestRateColumn": "in_count",
          "requestRateOutgoingColumn": "out_count",
          "responseTimeColumn": "in_timesum",
          "responseTimeOutgoingColumn": "out_timesum",
          "showDummyData": true,
          "sourceColumn": "origin_service",
          "targetColumn": "target_service",
          "type": "protocol"
        },
        "drillDownLink": "",
        "externalIcons": [
          {
            "filename": "web",
            "pattern": "web"
          },
          {
            "filename": "message",
            "pattern": "jms"
          },
          {
            "filename": "database",
            "pattern": "jdbc"
          },
          {
            "filename": "http",
            "pattern": "http"
          }
        ],
        "filterEmptyConnections": true,
        "icons": [
          {
            "filename": "java",
            "pattern": "java"
          },
          {
            "filename": "star_trek",
            "pattern": "spok|star trek"
          }
        ],
        "showBaselines": false,
        "showConnectionStats": true,
        "showDebugInformation": false,
        "style": {
          "dangerColor": "rgb(196, 22, 42)",
          "healthyColor": "rgb(87, 148, 242)",
          "noDataColor": "rgb(123, 123, 138)"
        },
        "sumTimings": true,
        "timeFormat": "m"
      },
      "pluginVersion": "4.2.0",
      "title": "SDG",
      "type": "novatec-sdg-panel"
    },
    {
      "gridPos": {
        "h": 9,
        "w": 24,
        "x": 0,
        "y": 17
      },
      "id": 123125,
      "type": "gettingstarted"
    },
    {
      "gridPos": {
        "h": 9,
        "w": 24,
        "x": 0,
        "y": 26
      },
      "id": 123124,
      "type": "gettingstarted"
    },
    {
      "gridPos": {
        "h": 9,
        "w": 24,
        "x": 0,
        "y": 35
      },
      "id": 123123,
      "type": "gettingstarted"
    }
  ],
  "schemaVersion": 39,
  "tags": [],
  "templating": {
    "list": []
  },
  "time": {
    "from": "now-1h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "browser",
  "title": "Dummy Dashboard",
  "version": 1,
  "weekStart": ""
}


================================================
FILE: scripts/create-signed-plugin.sh
================================================
#!/bin/bash

echo Building plugin...
yarn install && yarn build

echo Signing plugin...
yarn sign

echo Creating zip file...
cp -r dist novatec-sdg-panel
mkdir -p release && zip -r release/novatec-sdg-panel.zip novatec-sdg-panel
rm -r novatec-sdg-panel


================================================
FILE: src/assets/icons/icon_index.json
================================================
["java", "star_trek", "balancer", "database", "default", "ftp", "http", "ldap", "mainframe", "message", "smtp", "web"]


================================================
FILE: src/css/novatec-service-dependency-graph-panel.css
================================================
.service-dependency-graph-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.service-dependency-graph-panel .graph-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.service-dependency-graph-panel .service-dependency-graph {
  position: relative;
  flex-grow: 1;
  min-width: 0;
}

.service-dependency-graph-panel .canvas-container {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.service-dependency-graph-panel .zoom-button-container {
  position: absolute;
  top: 0;
  right: 1rem;
  z-index: 99;
  width: 35px;
}

.service-dependency-graph-panel .statistics {
  flex-basis: 0;
  transition: flex-basis 250ms ease-in-out;
  overflow-y: scroll;

}

.service-dependency-graph-panel .statistics.show {
  flex-basis: 30rem;
  padding-left: 0.5%;
}

.service-dependency-graph-panel .header--selection {
  font-size: 1.25em;
  text-align: center;
  border-bottom: 2px solid #161719;
  font-weight: 500;
  color: rgb(216, 217, 218);
}

.service-dependency-graph-panel .secondHeader--selection {
  font-size: 1.2em;
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.service-dependency-graph-panel .no-data--selection{
  color: #888888;
  text-align: center;
}

.service-dependency-graph-panel .table--selection {
  width: 99%;
  table-layout: fixed;
}

.service-dependency-graph-panel .table--selection th, .table--selection td {
  padding: 3px 5px;
}

.service-dependency-graph-panel .table--selection tr {
  border-bottom: 2px solid #161719;
}

.service-dependency-graph-panel .table--td--selection {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-dependency-graph-panel .threshold--bad {
  color:#f2495c;
}

.service-dependency-graph-panel .threshold--good {
  color: #73bf69;
}

.service-dependency-graph-panel .table--th--selectionSmall {
  width: 5.5rem;
}

.service-dependency-graph-panel .table--th--selectionMedium {
  width: 8rem;
}

.service-dependency-graph-panel .table--selection--head {
  background-color: #28282a;
  border-top: 2px solid #161719;
  color: #33b5e5;
}

.service-dependency-graph-panel .width-100 {
  width: 100%;
}


================================================
FILE: src/dummy_data_frame.ts
================================================
import { ArrayVector, DataFrame, FieldType } from '@grafana/data';

const data: DataFrame[] = [
  {
    refId: 'A',
    name: undefined,
    meta: undefined,
    fields: [
      {
        name: 'time',
        type: FieldType.time,
        config: {},
        values: new ArrayVector([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]),
      },
      {
        name: 'origin_external',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          '',
          '',
          '',
          '',
          '',
          '',
          '',
          '',
          '',
          '',
          '',
          'tcp://localhost:61616',
          'tcp://10.10.10.10:61616',
        ]),
      },
      {
        name: 'origin_service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          '',
          '',
          '',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'customers-service',
          'vets-service',
          'visits-service',
          'vets-service',
          '',
        ]),
      },
      {
        name: 'protocol',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'jms',
          'jms',
        ]),
      },
      {
        name: 'service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'api-gateway',
          'config-server',
          'discovery-server',
          'api-gateway',
          'customers-service',
          'discovery-server',
          'vets-service',
          'visits-service',
          'discovery-server',
          'discovery-server',
          'discovery-server',
          'visits-service',
          'api-gateway',
        ]),
      },
      {
        name: 'namespace',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'demo.infrastructure',
          'demo.infrastructure',
          'demo.infrastructure',
          'demo.infrastructure',
          'demo.domain-logic',
          'demo.infrastructure',
          'demo.domain-logic',
          'demo.domain-logic',
          'demo.infrastructure',
          'demo.infrastructure',
          'demo.infrastructure',
          'demo.domain-logic',
          'demo.infrastructure',
        ]),
      },
      {
        name: 'in_count',
        type: FieldType.number,
        config: {},
        values: new ArrayVector([508, 0, 0, 100, 347, 20, 63, 100, 20, 20, 20, 300, 300]),
      },
    ],
    length: 13,
  },
  {
    refId: 'B',
    name: undefined,
    meta: undefined,
    fields: [
      {
        name: 'time',
        type: FieldType.time,
        config: {},
        values: new ArrayVector([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]),
      },
      {
        name: 'protocol',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'jms',
          'http',
          'jdbc',
          'jdbc',
          'jdbc',
        ]),
      },
      {
        name: 'service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'config-server',
          'customers-service',
          'vets-service',
          'vets-service',
          'visits-service',
          'customers-service',
          'vets-service',
          'visits-service',
        ]),
      },
      {
        name: 'namespace',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          '',
          '',
          '',
          '',
          '',
          'web',
          'web',
          '',
          '',
          '',
          '',
          'demo.database',
          'demo.database',
          'demo.database',
        ]),
      },
      {
        name: 'target_external',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          '',
          '',
          '',
          '',
          '',
          '7a8dce897616:8080',
          'github.com',
          '',
          '',
          'tcp://localhost:61616',
          '',
          'jdbc:hsqldb:mem:testdb',
          'jdbc:hsqldb:mem:testdb',
          'jdbc:hsqldb:mem:testdb',
        ]),
      },
      {
        name: 'target_service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'api-gateway',
          'customers-service',
          'discovery-server',
          'vets-service',
          'visits-service',
          '',
          '',
          'discovery-server',
          'discovery-server',
          'visits-service',
          'discovery-server',
          '',
          '',
          '',
        ]),
      },
      {
        name: 'out_count',
        type: FieldType.number,
        config: {},
        values: new ArrayVector([100, 347, 20, 62, 100, 0, 0, 20, 20, 300, 20, 1847, 441, 100]),
      },
    ],
    length: 14,
  },
  {
    refId: 'C',
    name: undefined,
    meta: undefined,
    fields: [
      { name: 'time', type: FieldType.time, config: {}, values: new ArrayVector([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]) },
      {
        name: 'origin_service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          '',
          '',
          '',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'customers-service',
          'vets-service',
          'visits-service',
        ]),
      },
      {
        name: 'protocol',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
        ]),
      },
      {
        name: 'service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'api-gateway',
          'config-server',
          'discovery-server',
          'api-gateway',
          'customers-service',
          'discovery-server',
          'vets-service',
          'visits-service',
          'discovery-server',
          'discovery-server',
          'discovery-server',
        ]),
      },
      {
        name: 'namespace',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'demo.infrastructure',
          'demo.infrastructure',
          'demo.infrastructure',
          'demo.infrastructure',
          'demo.domain-logic',
          'demo.infrastructure',
          'demo.domain-logic',
          'demo.domain-logic',
          'demo.domain-logic',
          'demo.domain-logic',
          'demo.infrastructure',
          'demo.infrastructure',
          'demo.infrastructure',
        ]),
      },
      {
        name: 'target_external',
        type: FieldType.string,
        config: {},
        values: new ArrayVector(['', '', '', '', '', '', '', '', '', '', '']),
      },
      {
        name: 'in_timesum',
        type: FieldType.number,
        config: {},
        values: new ArrayVector([
          45140.008427999986, 0, 0, 1511.9842349999872, 819.3634589999965, 21.881731999999943, 281.0465210000002,
          325.85070300000007, 21.53124399999996, 21.40604300000001, 20.813048000000038,
        ]),
      },
    ],
    length: 11,
  },
  {
    refId: 'D',
    name: undefined,
    meta: undefined,
    fields: [
      {
        name: 'time',
        type: FieldType.time,
        config: {},
        values: new ArrayVector([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]),
      },
      {
        name: 'protocol',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'http',
          'jdbc',
          'jdbc',
          'jdbc',
        ]),
      },
      {
        name: 'service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'api-gateway',
          'config-server',
          'customers-service',
          'vets-service',
          'visits-service',
          'customers-service',
          'vets-service',
          'visits-service',
        ]),
      },
      {
        name: 'namespace',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          '',
          '',
          '',
          '',
          '',
          'web',
          'web',
          '',
          '',
          '',
          'demo.database',
          'demo.database',
          'demo.database',
        ]),
      },
      {
        name: 'target_external',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          '',
          '',
          '',
          '',
          '',
          '7a8dce897616:8080',
          'github.com',
          '',
          '',
          '',
          'jdbc:hsqldb:mem:testdb',
          'jdbc:hsqldb:mem:testdb',
          'jdbc:hsqldb:mem:testdb',
        ]),
      },
      {
        name: 'target_service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'api-gateway',
          'customers-service',
          'discovery-server',
          'vets-service',
          'visits-service',
          '',
          '',
          'discovery-server',
          'discovery-server',
          'discovery-server',
          '',
          '',
          '',
        ]),
      },
      {
        name: 'out_timesum',
        type: FieldType.number,
        config: {},
        values: new ArrayVector([
          1700.468872999987, 1481.533606999972, 540.746261, 501.65547400000014, 394.81158100000175, 0, 0,
          84.59527999999978, 381.87400800000023, 225.65933600000017, 35.9093940000007, 13.000189000000091,
          12.258137999999946,
        ]),
      },
    ],
    length: 13,
  },
  {
    refId: 'E',
    name: undefined,
    meta: undefined,
    fields: [
      { name: 'time', type: FieldType.time, config: {}, values: new ArrayVector([0, 0, 0, 0]) },
      { name: 'origin_service', type: FieldType.string, config: {}, values: new ArrayVector(['', '', '', '']) },
      {
        name: 'protocol',
        type: FieldType.string,
        config: {},
        values: new ArrayVector(['http', 'http', 'http', 'http']),
      },
      {
        name: 'service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector(['api-gateway', 'discovery-server', 'customers-service', 'vets-service']),
      },
      {
        name: 'namespace',
        type: FieldType.string,
        config: {},
        values: new ArrayVector([
          'demo.infrastructure',
          'demo.infrastructure',
          'demo.domain-logic',
          'demo.domain-logic',
        ]),
      },
      { name: 'target_external', type: FieldType.string, config: {}, values: new ArrayVector(['', '', '', '']) },
      { name: 'error_in', type: FieldType.number, config: {}, values: new ArrayVector([14, 20, 20, 0]) },
    ],
    length: 4,
  },
  {
    refId: 'F',
    name: undefined,
    meta: undefined,
    fields: [
      { name: 'time', type: FieldType.time, config: {}, values: new ArrayVector([0, 0, 0, 0]) },
      {
        name: 'origin_service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector(['api-gateway', 'api-gateway', 'api-gateway', 'customers-service']),
      },
      {
        name: 'namespace',
        type: FieldType.string,
        config: {},
        values: new ArrayVector(['demo.domain-logic', 'demo.domain-logic', 'demo.domain-logic', 'demo.infrastructure']),
      },
      {
        name: 'protocol',
        type: FieldType.string,
        config: {},
        values: new ArrayVector(['http', 'http', 'http', 'http']),
      },
      {
        name: 'service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector(['customers-service', 'vets-service', 'visits-service', 'discovery-server']),
      },
      { name: 'target_external', type: FieldType.string, config: {}, values: new ArrayVector(['', '', '', '']) },
      { name: 'error_out', type: FieldType.number, config: {}, values: new ArrayVector([14, 0, 0, 20]) },
    ],
    length: 4,
  },
  {
    refId: 'G',
    name: undefined,
    meta: undefined,
    fields: [
      { name: 'time', type: FieldType.time, config: {}, values: new ArrayVector([0, 0]) },
      {
        name: 'service',
        type: FieldType.string,
        config: {},
        values: new ArrayVector(['api-gateway', 'customers-service']),
      },
      {
        name: 'namespace',
        type: FieldType.string,
        config: {},
        values: new ArrayVector(['demo.infrastructure', 'demo.domain-logic']),
      },
      { name: 'threshold', type: FieldType.number, config: {}, values: new ArrayVector([40.40604300000001, 10]) },
    ],
    length: 2,
  },
];

export default data;


================================================
FILE: src/migration/PanelMigration.tsx
================================================
import { PanelModel } from '@grafana/data';
import { DefaultSettings } from 'options/DefaultSettings';
import { PanelSettings } from 'types';

/**
 * Checks if the given options are in the format of version < 4.0.0.
 * @param options The options object which should be checked.
 */
function isLegacyFormat(options: any) {
  return options && !('showDummyData' in options['dataMapping']);
}

/**
 * Migrates the legacy iconMapping format to the iconMapping format of version > 4.0.0.
 * @param iconMappings The iconMappings object to be migrated.
 */
function migrateIconMapping(iconMappings: any) {
  const migratedIconMapping = [];
  for (const iconMapping of iconMappings) {
    migratedIconMapping.push({
      pattern: iconMapping.name,
      filename: iconMapping.filename,
    });
  }
  return migratedIconMapping;
}

/**
 * Migrates the legacy panel settings from version < 4.0.0 to the new format introduced in version 4.0.0
 * The newly introduced variable aggregationType will be set to $aggregationTyoe in order to ensure functionality with
 * the legacy setup of the panel.
 * All other newly added options will be set to their respective default values.
 * @param panel The panel object which should be migrated.
 */
export const PanelMigrationHandler = (panel: PanelModel<Partial<PanelSettings>> | any) => {
  const { settings } = panel;
  if (isLegacyFormat(settings)) {
    return {
      animate: settings.animate,
      sumTimings: settings.sumTimings,
      filterEmptyConnections: settings.filterEmptyConnections,
      style: {
        healthyColor: settings.style.healthyColor,
        dangerColor: settings.style.dangerColor,
        noDataColor: settings.style.unknownColor,
      },
      showDebugInformation: settings.showDebugInformation,
      showConnectionStats: settings.showConnectionStats,
      externalIcons: migrateIconMapping(settings.externalIcons),
      icons: settings.serviceIcons,
      dataMapping: {
        aggregationType: '$aggregationType',
        sourceColumn: settings.dataMapping.sourceComponentPrefix + '$aggregationType',
        targetColumn: settings.dataMapping.targetComponentPrefix + '$aggregationType',

        responseTimeColumn: settings.dataMapping.responseTimeColumn,
        requestRateColumn: settings.dataMapping.requestRateColumn,
        errorRateColumn: settings.dataMapping.errorRateColumn,
        responseTimeOutgoingColumn: settings.dataMapping.responseTimeOutgoingColumn,
        requestRateOutgoingColumn: settings.dataMapping.requestRateOutgoingColumn,
        errorRateOutgoingColumn: settings.dataMapping.errorRateOutgoingColumn,

        extOrigin: settings.dataMapping.extOrigin,
        extTarget: settings.dataMapping.extTarget,
        type: settings.dataMapping.type,
        showDummyData: settings.showDummyData,

        baselineRtUpper: settings.dataMapping.baselineRtUpper,
      },
      drillDownLink: settings.drillDownLink,
      showBaselines: settings.showBaselines,
      timeFormat: DefaultSettings.timeFormat,
    };
  }
  return settings;
};


================================================
FILE: src/module.test.ts
================================================
// Just a stub test
describe('placeholder test', () => {
  it('should return true', () => {
    expect(true).toBeTruthy();
  });
});


================================================
FILE: src/module.ts
================================================
import { PanelPlugin } from '@grafana/data';
import { PanelSettings } from './types';

import { PanelController } from './panel/PanelController';
import { optionsBuilder } from './options/options';
import { PanelMigrationHandler } from './migration/PanelMigration';

export const plugin = new PanelPlugin<PanelSettings>(PanelController)
  .setPanelOptions(optionsBuilder)
  .setMigrationHandler(PanelMigrationHandler);


================================================
FILE: src/options/DefaultSettings.tsx
================================================
import { PanelSettings } from '../types';

export const DefaultSettings: PanelSettings = {
  animate: true,

  dataMapping: {
    aggregationType: 'service',
    sourceColumn: 'origin_service',
    targetColumn: 'target_service',
    namespaceColumn: 'namespace',
    namespaceDelimiter: '.',

    responseTimeColumn: 'response-time',
    requestRateColumn: 'request-rate',
    errorRateColumn: 'error-rate',
    responseTimeOutgoingColumn: 'response-time-out',
    requestRateOutgoingColumn: 'request-rate-out',
    errorRateOutgoingColumn: 'error-rate-out',

    extOrigin: 'external_origin',
    extTarget: 'external_target',
    type: 'type',

    baselineRtUpper: 'threshold',

    showDummyData: false,
  },

  sumTimings: true,
  filterEmptyConnections: true,
  showDebugInformation: false,
  showConnectionStats: true,
  showBaselines: false,

  style: {
    healthyColor: 'rgb(87, 148, 242)',
    dangerColor: 'rgb(196, 22, 42)',
    noDataColor: 'rgb(123, 123, 138)',
  },

  icons: [
    {
      pattern: 'java',
      filename: 'java',
    },
    {
      pattern: 'spok|star trek',
      filename: 'star_trek',
    },
  ],

  externalIcons: [
    {
      pattern: 'web',
      filename: 'web',
    },
    {
      pattern: 'jms',
      filename: 'message',
    },
    {
      pattern: 'jdbc',
      filename: 'database',
    },
    {
      pattern: 'http',
      filename: 'http',
    },
  ],

  drillDownLink: '',
  timeFormat: 'm',
};


================================================
FILE: src/options/TypeAheadTextfield/TypeaheadTextfield.css
================================================
.service-dependency-graph-panel .suggestion {
    width: 100%;
    border-right: 1px solid #3865AB ;
    border-left: 1px solid #3865AB ;
    background-color: #0B0C0E;
    padding-left: 10px;
}

.service-dependency-graph-panel ul {
    list-style-type: none;
}

.service-dependency-graph-panel ul:last-child {
    border-bottom: 1px solid #3865AB ;
}


================================================
FILE: src/options/TypeAheadTextfield/TypeaheadTextfield.tsx
================================================
import React from 'react';
import Autosuggest, { InputProps } from 'react-autosuggest';
import { StandardEditorContext, StandardEditorProps } from '@grafana/data';
import './TypeaheadTextfield.css';
import { PanelSettings } from '../../types';
interface Props extends StandardEditorProps<string, PanelSettings> {
  item: any;
  value: string;
  onChange: (value?: string) => void;
  context: StandardEditorContext<any>;
}
interface State {
  item: any;
  value: string;
  onChange: (value?: string) => void;
  context: StandardEditorContext<any>;
  suggestions: string[];
}
export class TypeaheadTextField extends React.PureComponent<Props, State> {
  constructor(props: Props | Readonly<Props>) {
    super(props);
    let { value } = props;
    if (value === undefined) {
      value = props.item.defaultValue;
    }
    this.state = {
      ...props,
      value: value,
      suggestions: [],
    };
  }
  renderSuggestion(suggestion: string) {
    return <div>{suggestion}</div>;
  }
  getColumnNames() {
    let { data } = this.props.context;
    let series;
    let columnNames = [];
    if (data !== undefined && data.length > 0) {
      series = data[0].fields;
      for (const index in series) {
        const field = series[index];
        const { config, name } = field;
        if (config !== undefined && config.displayName !== undefined) {
          columnNames.push(config.displayName);
        } else {
          columnNames.push(name);
        }
      }
    }
    return columnNames;
  }
  onChange = (event: React.FormEvent<HTMLElement>, { newValue }: { newValue: string }) => {
    //TODO make this type nicer!
    const { path } = this.props.item;
    const { value } = event.currentTarget as HTMLInputElement;
    this.setState({
      value: value,
    });
    this.props.onChange.call(path, newValue);
  };
  getSuggestions = (value: string) => {
    let inputValue = '';
    if (value !== undefined) {
      return [];
    }
    if (value !== undefined && value !== null && value !== '') {
      inputValue = value.trim().toLowerCase();
    }
    const inputLength = inputValue.length;
    if (inputLength === 0 || inputValue === undefined) {
      return [];
    }
    return this.getColumnNames().filter((columnName) => columnName.toLowerCase().startsWith(inputValue));
  };
  onSuggestionsFetchRequested = (value: any) => {
    this.setState({
      suggestions: this.getSuggestions(value),
    });
  };
  getSuggestionValue = (suggestion: string) => {
    return suggestion;
  };
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: [],
    });
  };
  render() {
    let { value } = this.props;
    if (value === undefined) {
      value = this.props.item.defaultValue;
    }
    const suggestions = this.getSuggestions(value);
    const inputProps: InputProps<string> = {
      placeholder: 'Enter column name...',
      value,
      onChange: this.onChange,
    };
    return (
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={this.getSuggestionValue}
        renderSuggestion={this.renderSuggestion}
        inputProps={inputProps}
        theme={{
          input: 'input-small gf-form-input width-100',
          suggestion: 'suggestion',
        }}
      />
    );
  }
}


================================================
FILE: src/options/dummyDataSwitch/DummyDataSwitch.tsx
================================================
import React from 'react';
import { StandardEditorContext, StandardEditorProps } from '@grafana/data';
import { PanelSettings, DataMapping } from '../../types';
import { Switch } from '@grafana/ui';

interface Props extends StandardEditorProps<boolean, PanelSettings> {
  item: any;
  value: boolean;
  onChange: (value?: boolean) => void;
  context: StandardEditorContext<any>;
}

interface State {
  item: any;
  value: boolean;
  dataMapping: DataMapping | undefined;
  onChange: (value?: boolean) => void;
  context: StandardEditorContext<any>;
}

export class DummyDataSwitch extends React.PureComponent<Props, State> {
  constructor(props: Props | Readonly<Props>) {
    super(props);

    let { dataMapping } = props.context.options;
    if (dataMapping === undefined) {
      dataMapping = props.item.defaultValue;
    }
    this.state = {
      dataMapping: dataMapping,
      ...props,
    };
  }

  getDummyDataMapping = () => {
    return {
      aggregationType: 'service',
      sourceColumn: 'origin_service',
      targetColumn: 'target_service',
      responseTimeColumn: 'in_timesum',
      requestRateColumn: 'in_count',
      errorRateColumn: 'error_in',
      responseTimeOutgoingColumn: 'out_timesum',
      requestRateOutgoingColumn: 'out_count',
      errorRateOutgoingColumn: 'error_out',
      extOrigin: 'origin_external',
      extTarget: 'target_external',
      type: 'protocol',
      showDummyData: true,
      baselineRtUpper: 'threshold',
    };
  };

  onChange = () => {
    let { dataMapping } = this.props.context.options;
    const { item } = this.state;
    const { onChange } = this.props;
    const newValue = !dataMapping.showDummyData;

    if (newValue) {
      this.setState({ dataMapping: dataMapping });
      dataMapping = this.getDummyDataMapping();
    }
    dataMapping.showDummyData = newValue;
    onChange.call(item.path, dataMapping);
  };

  render() {
    let { dataMapping } = this.props.context.options;
    if (dataMapping === undefined) {
      dataMapping = this.props.item.defaultValue;
      this.props.context.options.dataMapping = this.props.item.defaultValue;
    }

    return (
      <div>
        <Switch value={dataMapping.showDummyData} onChange={() => this.onChange()} />
      </div>
    );
  }
}


================================================
FILE: src/options/iconMapping/IconMapping.css
================================================
.service-dependency-graph-panel .no-background {
    background-color: transparent;
}

.service-dependency-graph-panel .no-padding-left {
    padding-left: 0;
}

.service-dependency-graph-panel .icon-mapping-button {
    width: 46.5%;
    margin-left: 0;
}

.service-dependency-graph-panel .width-100 {
    width: 100%;
}

.service-dependency-graph-panel .width-half {
    width: 47%;
    text-overflow: ellipsis;
}


================================================
FILE: src/options/iconMapping/IconMapping.tsx
================================================
import React, { ChangeEvent } from 'react';
import { StandardEditorContext, StandardEditorProps } from '@grafana/data';
import { IconResource, PanelSettings } from '../../types';
import assetUtils from '../../panel/asset_utils';
import './IconMapping.css';

interface Props extends StandardEditorProps<string, PanelSettings> {
  item: any;
  value: any;
  onChange: (value?: string) => void;
  context: StandardEditorContext<any>;
}

interface State {
  item: any;
  value: string;
  onChange: (value?: string) => void;
  context: StandardEditorContext<any>;
  icons: string[];
}

export class IconMapping extends React.PureComponent<Props, State> {
  constructor(props: Props | Readonly<Props>) {
    super(props);
    this.state = {
      ...props,
      icons: [],
    };
    fetch(assetUtils.getAssetUrl('icon_index.json'))
      .then((response) => response.json())
      .then((data) => {
        data.sort();
        this.setState({
          icons: data,
        });
      })
      .catch(() => {
        console.error(
          'Could not load service icons mapping index. Please verify the "icon_index.json" in the plugin\'s asset directory.'
        );
      });
  }

  addMapping() {
    const { path } = this.state.item;
    const icons = this.state.context.options[path];
    icons.push({ pattern: 'my-type', filename: 'default' });
    this.state.onChange.call(path, icons);
  }

  removeMapping(index: number) {
    const { path } = this.state.item;
    const icons = this.state.context.options[path];
    icons.splice(index, 1);
    this.state.onChange.call(path, icons);
  }

  setPatternValue(event: React.ChangeEvent<HTMLInputElement>, index: number) {
    const { path } = this.state.item;
    const icons = this.state.context.options[path];
    icons[index].pattern = event.currentTarget.value;
    this.state.onChange.call(path, icons);
  }

  setFileNameValue(event: ChangeEvent<HTMLSelectElement>, index: number) {
    const { path } = this.state.item;
    const icons = this.state.context.options[path];
    icons[index].filename = event.currentTarget.value.toString();
    this.props.onChange.call(path, icons);
  }

  render() {
    const { path } = this.state.item;
    const { icons: iconNames } = this.state;
    let icons = this.state.context.options[path];
    if (icons === undefined) {
      icons = this.state.item.defaultValue;
      const context = this.state.context;
      context.options[path] = this.state.item.defaultValue;
      this.setState({
        context: context,
      });
    }

    return (
      <div>
        <div className="gf-form-inline">
          <div className="gf-form width-100">
            <label className="gf-form-label no-background no-padding-left width-half">Target Name (RegEx)</label>
            <label className="gf-form-label no-background no-padding-left width-half">Icon</label>
          </div>
        </div>
        <div>
          {icons.map((icon: IconResource, index: number) => (
            <>
              <div className="gf-form">
                <input
                  type="text"
                  className="input-small gf-form-input"
                  value={icon.pattern}
                  onChange={(e) => this.setPatternValue(e, index)}
                />

                <select
                  className="input-small gf-form-input"
                  value={icon.filename}
                  onChange={(e) => this.setFileNameValue(e, index)}
                >
                  {iconNames.map((iconName: string, index: number) => (
                    <option key={iconName + '-' + index} value={iconName}>
                      {iconName}
                    </option>
                  ))}
                </select>

                <a className="gf-form-label tight-form-func no-background" onClick={() => this.removeMapping(index)}>
                  <i className="fa fa-trash"></i>
                </a>
              </div>
            </>
          ))}
        </div>
        <button
          className="btn navbar-button navbar-button--primary icon-mapping-button"
          onClick={() => this.addMapping()}
        >
          Add Icon Mapping
        </button>
      </div>
    );
  }
}


================================================
FILE: src/options/options.tsx
================================================
import { PanelOptionsEditorBuilder } from '@grafana/data';
import { PanelSettings } from '../types';
import { TypeaheadTextField } from './TypeAheadTextfield/TypeaheadTextfield';
import { IconMapping } from './iconMapping/IconMapping';
import { DummyDataSwitch } from './dummyDataSwitch/DummyDataSwitch';
import { DefaultSettings } from './DefaultSettings';

export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>) => {
  return (
    builder

      //Connection Mapping
      .addCustomEditor({
        path: 'dataMapping.aggregationType',
        id: 'aggregationType',
        editor: TypeaheadTextField,
        name: 'Component Column',
        category: ['Connection Mapping'],
        defaultValue: DefaultSettings.dataMapping.aggregationType,
      })

      .addCustomEditor({
        path: 'dataMapping.sourceColumn',
        id: 'sourceComponentPrefix',
        editor: TypeaheadTextField,
        name: 'Source Component Column',
        category: ['Connection Mapping'],
        defaultValue: DefaultSettings.dataMapping.sourceColumn,
      })

      .addCustomEditor({
        path: 'dataMapping.targetColumn',
        id: 'targetComponentPrefix',
        name: 'Target Component Column',
        category: ['Connection Mapping'],
        editor: TypeaheadTextField,
        defaultValue: DefaultSettings.dataMapping.targetColumn,
      })

      .addCustomEditor({
        path: 'dataMapping.namespaceColumn',
        id: 'namespaceColumn',
        name: 'Namespace Column',
        category: ['Connection Mapping'],
        editor: TypeaheadTextField,
        defaultValue: DefaultSettings.dataMapping.namespaceColumn,
      })

      .addCustomEditor({
        path: 'dataMapping.nameSpaceDelimiter',
        id: 'nameSpaceDelimiter',
        name: 'Namespace Delimiter',
        category: ['Connection Mapping'],
        editor: TypeaheadTextField,
        defaultValue: DefaultSettings.dataMapping.namespaceDelimiter,
      })

      .addCustomEditor({
        path: 'dataMapping.type',
        id: 'type',
        name: 'Type',
        category: ['Connection Mapping'],
        editor: TypeaheadTextField,
        defaultValue: DefaultSettings.dataMapping.type,
      })

      .addCustomEditor({
        path: 'dataMapping.extOrigin',
        id: 'externalOrigin',
        name: 'External Origin',
        category: ['Connection Mapping'],
        editor: TypeaheadTextField,
        defaultValue: DefaultSettings.dataMapping.extOrigin,
      })

      .addCustomEditor({
        path: 'dataMapping.extTarget',
        id: 'externalTarget',
        name: 'External Target',
        category: ['Connection Mapping'],
        editor: TypeaheadTextField,
        defaultValue: DefaultSettings.dataMapping.extTarget,
      })

      //Data Mapping
      .addCustomEditor({
        id: 'responseTime',
        path: 'dataMapping.responseTimeColumn',
        name: 'Response Time Column',
        editor: TypeaheadTextField,
        category: ['Data Mapping'],
        defaultValue: DefaultSettings.dataMapping.responseTimeColumn,
      })

      .addCustomEditor({
        id: 'requestRateColumn',
        path: 'dataMapping.requestRateColumn',
        name: 'Request Rate Column',
        editor: TypeaheadTextField,
        category: ['Data Mapping'],
        defaultValue: DefaultSettings.dataMapping.requestRateColumn,
      })

      .addCustomEditor({
        id: 'errorRateColumn',
        path: 'dataMapping.errorRateColumn',
        name: 'Error Rate Column',
        editor: TypeaheadTextField,
        category: ['Data Mapping'],
        defaultValue: DefaultSettings.dataMapping.errorRateColumn,
      })

      .addCustomEditor({
        id: 'responseTimeOutgoingColumn',
        path: 'dataMapping.responseTimeOutgoingColumn',
        name: 'Response Time Column (Outgoing)',
        editor: TypeaheadTextField,
        category: ['Data Mapping'],
        defaultValue: DefaultSettings.dataMapping.responseTimeOutgoingColumn,
      })

      .addCustomEditor({
        id: 'requestRateOutgoingColumn',
        path: 'dataMapping.requestRateOutgoingColumn',
        name: 'Request Rate Column (Outgoing)',
        editor: TypeaheadTextField,
        category: ['Data Mapping'],
        defaultValue: DefaultSettings.dataMapping.requestRateOutgoingColumn,
      })

      .addCustomEditor({
        id: 'errorRateOutgoingColumn',
        path: 'dataMapping.errorRateOutgoingColumn',
        name: 'Error Rate Column (Outgoing)',
        editor: TypeaheadTextField,
        category: ['Data Mapping'],
        defaultValue: DefaultSettings.dataMapping.errorRateOutgoingColumn,
      })

      .addCustomEditor({
        id: 'baselineRtUpper',
        path: 'dataMapping.baselineRtUpper',
        name: 'Response Time Baseline (Upper)',
        editor: TypeaheadTextField,
        category: ['Data Mapping'],
        defaultValue: DefaultSettings.dataMapping.baselineRtUpper,
      })

      //General Settings
      .addBooleanSwitch({
        path: 'showConnectionStats',
        name: 'Show Connection Statistics',
        category: ['General Settings'],
        defaultValue: DefaultSettings.showConnectionStats,
      })

      .addBooleanSwitch({
        path: 'sumTimings',
        name: 'Handle Timings as Sums',
        description:
          'If this setting is active, the timings provided' +
          'by the mapped response time columns are considered as a ' +
          'continually increasing sum of response times. When ' +
          'deactivated, it is considered that the timings provided ' +
          'by columns are the actual average response times.',
        category: ['General Settings'],
        defaultValue: DefaultSettings.sumTimings,
      })

      .addBooleanSwitch({
        path: 'filterEmptyConnections',
        name: 'Filter Empty Data',
        description:
          'If this setting is active, the timings provided by ' +
          'the mapped response time columns are considered as a continually ' +
          'increasing sum of response times. When deactivated, it is considered ' +
          'that the timings provided by columns are the actual average response times.',
        category: ['General Settings'],
        defaultValue: DefaultSettings.filterEmptyConnections,
      })

      .addBooleanSwitch({
        path: 'showDebugInformation',
        name: 'Show Debug Information',
        category: ['General Settings'],
        defaultValue: DefaultSettings.showDebugInformation,
      })

      .addCustomEditor({
        path: 'dataMapping',
        id: 'dummyDataSwitch',
        name: 'Show Dummy Data',
        editor: DummyDataSwitch,
        category: ['General Settings'],
        defaultValue: DefaultSettings.dataMapping,
      })

      .addBooleanSwitch({
        path: 'showBaselines',
        name: 'Show Baselines',
        category: ['General Settings'],
        defaultValue: DefaultSettings.showBaselines,
      })

      .addSelect({
        path: 'timeFormat',
        name: 'Maximum Time Unit to Resolve',
        description:
          'This setting controls to which time unit time values will be resolved to. ' +
          'Each value always includes the smaller units.',
        category: ['General Settings'],
        settings: {
          options: [
            { value: 'ms', label: 'ms' },
            { value: 's', label: 's' },
            { value: 'm', label: 'm' },
          ],
        },
        defaultValue: DefaultSettings.timeFormat,
      })

      //Appearance
      .addColorPicker({
        path: 'style.healthyColor',
        name: 'Healthy Color',
        category: ['Appearance'],
        defaultValue: DefaultSettings.style.healthyColor,
      })

      .addColorPicker({
        path: 'style.dangerColor',
        name: 'Danger Color',
        category: ['Appearance'],
        defaultValue: DefaultSettings.style.dangerColor,
      })

      .addColorPicker({
        path: 'style.noDataColor',
        name: 'No Data Color',
        category: ['Appearance'],
        defaultValue: DefaultSettings.style.noDataColor,
      })

      //Icon Mapping
      .addCustomEditor({
        path: 'icons',
        id: 'iconMapping',
        editor: IconMapping,
        name: '',
        description:
          'This setting controls which images should be mapped to your directly monitored nodes. ' +
          'The node names are matched by the regex pattern provided in the "Target Name(Regex) column.',
        category: ['Icon Mapping'],
        defaultValue: DefaultSettings.icons,
      })

      //External Icon Mapping
      .addCustomEditor({
        path: 'externalIcons',
        id: 'externalIconMapping',
        editor: IconMapping,
        name: '',
        description:
          'This setting controls which images should be mapped to the external nodes. ' +
          'The given type column is matched by the regex pattern provided in the "Target Name(Regex) column.',
        category: ['External Icon Mapping'],
        defaultValue: DefaultSettings.externalIcons,
      })

      //Tracing Drilldown
      .addTextInput({
        path: 'drillDownLink',
        name: 'Backend URL',
        category: ['Tracing Drilldown'],
        defaultValue: DefaultSettings.drillDownLink,
      })
  );
};


================================================
FILE: src/panel/PanelController.tsx
================================================
import React, { LegacyRef, PureComponent } from 'react';
import {
  AbsoluteTimeRange,
  DataFrame,
  FieldConfigSource,
  InterpolateFunction,
  PanelProps,
  TimeRange,
} from '@grafana/data';
import { ServiceDependencyGraph } from './serviceDependencyGraph/ServiceDependencyGraph';
import _ from 'lodash';
import { CurrentData, CyData, IntGraph, IntGraphEdge, IntGraphNode, PanelSettings } from '../types';
import cytoscape, { EdgeSingular, NodeSingular } from 'cytoscape';
import '../css/novatec-service-dependency-graph-panel.css';
import GraphGenerator from 'processing/graph_generator';
import PreProcessor from 'processing/pre_processor';
import data from '../dummy_data_frame';
import { getTemplateSrv } from '@grafana/runtime';

interface Props extends PanelProps<PanelSettings> {}

interface PanelState {
  id: string | number;
  fieldConfig: FieldConfigSource<any>;
  height: number;
  width: number;
  onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
  onFieldConfigChange: (config: FieldConfigSource<any>) => void;
  onOptionsChange: (options: PanelSettings) => void;
  renderCounter: number;
  replaceVariables: InterpolateFunction;
  timeRange: TimeRange;
  timeZone: string;
  title: string;
  transparent: boolean;
  options: PanelSettings;
  currentLayer: number;
}

export class PanelController extends PureComponent<Props, PanelState> {
  cy: cytoscape.Core | undefined;

  ref: LegacyRef<HTMLDivElement>;

  validQueryTypes: boolean;

  graphGenerator: GraphGenerator;

  preProcessor: PreProcessor;

  currentData: CurrentData;

  maxLayer = 0;

  constructor(props: Props) {
    super(props);
    this.state = {
      currentLayer: 0,
      ...props,
    };
    this.ref = React.createRef();
    this.graphGenerator = new GraphGenerator(this);
    this.preProcessor = new PreProcessor(this);
  }

  getSettings(resolveVariables: boolean): PanelSettings {
    if (resolveVariables) {
      return this.resolveVariables(this.props.options);
    }
    return this.props.options;
  }

  resolveVariables(element: any) {
    if (element instanceof Object) {
      const newObject: any = {};
      for (const key of Object.keys(element)) {
        newObject[key] = this.resolveVariables(element[key]);
      }
      return newObject;
    }

    if (element instanceof String || typeof element === 'string') {
      return getTemplateSrv().replace(element.toString());
    }
    return element;
  }

  resolveTemplateVars(input: any, copy: boolean) {
    let value = input;
    if (copy) {
      value = _.cloneDeep(value);
    }

    if (typeof value === 'string' || value instanceof String) {
      value = getTemplateSrv().replace(value.toString());
    }
    if (value instanceof Object) {
      for (const key of Object.keys(value)) {
        value[key] = this.resolveTemplateVars(value[key], false);
      }
    }
    return value;
  }

  componentDidUpdate() {
    this.processData();
  }

  processQueryData(data: DataFrame[]) {
    this.validQueryTypes = this.hasOnlyTableQueries(data);
    const graphData = this.preProcessor.processData(data);

    this.currentData = graphData;
  }

  hasOnlyTableQueries(inputData: DataFrame[]) {
    let result = true;

    _.each(inputData, (dataElement) => {
      if (!_.has(dataElement, 'columns')) {
        result = false;
      }
    });

    return result;
  }

  processData() {
    let inputData: DataFrame[] = this.props.data.series;
    if (this.getSettings(true).dataMapping.showDummyData) {
      inputData = data;
    }
    this.processQueryData(inputData);
    const graph: IntGraph = this.graphGenerator.generateGraph(this.currentData.graph);
    return graph;
  }

  _transformEdges(edges: IntGraphEdge[]): CyData[] {
    const cyEdges = _.map(edges, (edge) => {
      const cyEdge = {
        group: 'edges',
        data: {
          id: edge.source + ':' + edge.target,
          source: edge.source,
          target: edge.target,
          metrics: {
            ...edge.metrics,
          },
        },
      };
      return cyEdge;
    });

    return cyEdges;
  }

  _transformNodes(nodes: IntGraphNode[]): CyData[] {
    const cyNodes = _.map(nodes, (node) => {
      const result: CyData = {
        group: 'nodes',
        data: {
          id: node.data.id,
          type: node.data.type,
          external_type: node.data.external_type,
          namespace: node.data.namespace,
          layer: node.data.layer,
          parent: node.data.parent,
          metrics: {
            ...node.data.metrics,
          },
        },
      };
      return result;
    });

    return cyNodes;
  }

  _updateOrRemove(dataArray: Array<NodeSingular | EdgeSingular>, inputArray: CyData[]) {
    const elements: Array<NodeSingular | EdgeSingular> = [];
    for (let i = 0; i < dataArray.length; i++) {
      const element = dataArray[i];

      const cyNode = _.find(inputArray, { data: { id: element.id() } });

      if (cyNode) {
        element.data(cyNode.data);
        _.remove(inputArray, (n) => n.data.id === cyNode.data.id);
        elements.push(element);
      } else {
        element.remove();
      }
    }
    return elements;
  }

  getError(): string | null {
    if (!this.isDataAvailable()) {
      return 'No data to show - the query returned no data.';
    }
    return null;
  }

  isDataAvailable() {
    const dataExist =
      !_.isUndefined(this.currentData) && !_.isUndefined(this.currentData.graph) && this.currentData.graph.length > 0;
    return dataExist;
  }

  layer(layerIncrease: number) {
    const that = this;
    const currentLayer = that.state ? that.state.currentLayer : 0;
    let layer = Math.max(0, currentLayer + layerIncrease);
    if (layerIncrease > 0) {
      layer = Math.min(that.maxLayer, currentLayer + layerIncrease);
    }
    that.setState({
      currentLayer: layer,
    });
  }

  render() {
    const data = this.processData();
    const error = this.getError();
    if (error === null) {
      // This is our root DOM
      return (
        <div>
          <div
            // The className is also used to scope all of our css rules
            className="service-dependency-graph-panel"
            style={{ height: this.props.height, width: this.props.width }}
            ref={this.ref}
            id="cy"
          >
            <ServiceDependencyGraph
              data={data}
              zoom={1}
              maxLayer={this.maxLayer}
              controller={this}
              animate={false}
              showStatistics={false}
              settings={this.props.options}
              layerIncreaseFunction={() => this.layer(+1)}
              layerDecreaseFunction={() => this.layer(-1)}
              layer={0}
            />
          </div>
        </div>
      );
    } else {
      return <div>{error}</div>;
    }
  }
}


================================================
FILE: src/panel/asset_utils.tsx
================================================
import { find } from 'lodash';
import { IconResource } from 'types';

export default {
  getAssetUrl(assetName: string) {
    let baseUrl = 'public/plugins/novatec-sdg-panel';
    return baseUrl + '/assets/icons/' + assetName;
  },

  getTypeSymbol(type: string, externalIcons: IconResource[], resolveName = true) {
    if (!type) {
      return this.getAssetUrl('default.png');
    }

    if (!resolveName) {
      return this.getAssetUrl(type);
    }

    const icon = find(externalIcons, (icon) => icon.pattern.toLowerCase() === type.toLowerCase());

    if (icon !== undefined) {
      return this.getAssetUrl(icon.filename + '.png');
    } else {
      return this.getAssetUrl('default.png');
    }
  },
};


================================================
FILE: src/panel/canvas/collision_detector.ts
================================================
import _ from 'lodash';
import { Point, Rectangle } from 'types';

export default class CollisionDetector {
  blockedArea: Rectangle[];

  constructor() {
    this.blockedArea = [];
  }

  reset() {
    this.blockedArea = [];
  }

  addRectangle(x: number, y: number, width: number, height: number) {
    const rectangle: Rectangle = {
      coordinates: {
        x: x,
        y: y,
      },
      height: height,
      width: width,
    };
    this.blockedArea.push(rectangle);
  }

  isColliding(shape: Rectangle) {
    const collidingShape = this.blockedArea.find((blockingShape) => {
      if (this._intersects(shape, blockingShape)) {
        return true;
      }
      return false;
    });
    return collidingShape !== undefined;
  }

  _intersects(a: Rectangle, b: Rectangle) {
    const topLeft1: Point = a.coordinates;
    const topLeft2: Point = b.coordinates;
    const bottomRight1 = this._getBottomRightCorner(a);
    const bottomRight2 = this._getBottomRightCorner(b);

    if (topLeft1.x > bottomRight2.x || topLeft2.x > bottomRight1.x) {
      return false;
    }
    if (topLeft1.y > bottomRight2.y || topLeft2.y > bottomRight1.y) {
      return false;
    }
    return true;
  }

  _getBottomRightCorner(rectangle: Rectangle) {
    const cornerPoint: Point = {
      x: rectangle.coordinates.x + rectangle.width,
      y: rectangle.coordinates.y + rectangle.height,
    };
    return cornerPoint;
  }
}


================================================
FILE: src/panel/canvas/graph_canvas.ts
================================================
import _ from 'lodash';
import cytoscape from 'cytoscape';
import { ServiceDependencyGraph } from '../serviceDependencyGraph/ServiceDependencyGraph';
import ParticleEngine from './particle_engine';
import {
  CyCanvas,
  Particle,
  EnGraphNodeType,
  Particles,
  IntGraphMetrics,
  ScaleValue,
  DrawContext,
  Rectangle,
  Point,
} from '../../types';
import humanFormat from 'human-format';
import assetUtils from '../asset_utils';
import CollisionDetector from './collision_detector';

const scaleValues: ScaleValue[] = [
  { unit: 'ms', factor: 1 },
  { unit: 's', factor: 1000 },
  { unit: 'm', factor: 60000 },
];

export default class CanvasDrawer {
  readonly colors = {
    default: '#bad5ed',
    background: '#212121',
    edge: '#505050',
    status: {
      warning: 'orange',
    },
  };

  readonly donutRadius: number = 15;

  controller: ServiceDependencyGraph;

  cytoscape: cytoscape.Core;

  context: CanvasRenderingContext2D;

  cyCanvas: CyCanvas;

  canvas: HTMLCanvasElement;

  offscreenCanvas: HTMLCanvasElement;

  offscreenContext: CanvasRenderingContext2D;

  frameCounter = 0;

  fpsCounter = 0;

  particleImage: HTMLImageElement;

  pixelRatio: number;

  imageAssets: any = {};

  selectionNeighborhood: cytoscape.Collection;

  particleEngine: ParticleEngine;

  collisionDetector: CollisionDetector;

  lastRenderTime = 0;

  dashAnimationOffset = 0;

  constructor(ctrl: ServiceDependencyGraph, cy: cytoscape.Core, cyCanvas: CyCanvas) {
    this.cytoscape = cy;
    this.cyCanvas = cyCanvas;
    this.controller = ctrl;
    this.particleEngine = new ParticleEngine(this);
    this.collisionDetector = new CollisionDetector();

    this.pixelRatio = window.devicePixelRatio || 1;

    this.canvas = cyCanvas.getCanvas();
    const ctx = this.canvas.getContext('2d');
    if (ctx) {
      this.context = ctx;
    } else {
      console.error('Could not get 2d canvas context.');
    }

    this.offscreenCanvas = document.createElement('canvas');
    this.offscreenContext = this.offscreenCanvas.getContext('2d');

    this.repaint(true);
  }

  _getTimeScale(timeUnit: string) {
    const scale: any = {};
    for (const scaleValue of scaleValues) {
      scale[scaleValue.unit] = scaleValue.factor;
      if (scaleValue.unit === timeUnit) {
        return scale;
      }
    }
    return scale;
  }

  resetAssets() {
    this.imageAssets = {};
  }

  _loadImage(imageUrl: string, assetName: string) {
    const that = this;

    const loadImage = (url: string, asset: keyof typeof that.imageAssets) => {
      const image = new Image();
      that.imageAssets[asset] = {
        image,
        loaded: false,
      };

      return new Promise((resolve, reject) => {
        image.onload = () => resolve(asset);
        image.onerror = () => reject(new Error(`load ${url} fail`));
        image.src = url;
      });
    };
    loadImage(imageUrl, assetName).then((asset: any) => {
      that.imageAssets[asset].loaded = true;
    });
  }

  _isImageLoaded(assetName: string) {
    if (_.has(this.imageAssets, assetName) && this.imageAssets[assetName].loaded) {
      return true;
    } else {
      return false;
    }
  }

  _getImageAsset(assetName: string, resolveName = true) {
    if (!_.has(this.imageAssets, assetName)) {
      const { externalIcons } = this.controller.getSettings(true);
      const assetUrl = assetUtils.getTypeSymbol(assetName, externalIcons, resolveName);
      this._loadImage(assetUrl, assetName);
    }

    if (this._isImageLoaded(assetName)) {
      return this.imageAssets[assetName].image;
    } else {
      return null;
    }
  }

  _getAsset(assetName: string, relativeUrl: string) {
    if (!_.has(this.imageAssets, assetName)) {
      const assetUrl = assetUtils.getAssetUrl(relativeUrl);
      this._loadImage(assetUrl, assetName);
    }

    if (this._isImageLoaded(assetName)) {
      return this.imageAssets[assetName].image;
    } else {
      return null;
    }
  }

  start() {
    const that = this;
    const repaintWrapper = () => {
      that.repaint();
      window.requestAnimationFrame(repaintWrapper);
    };

    window.requestAnimationFrame(repaintWrapper);

    setInterval(() => {
      that.fpsCounter = that.frameCounter;
      that.frameCounter = 0;
    }, 1000);
  }

  startAnimation() {
    this.particleEngine.start();
  }

  stopAnimation() {
    this.particleEngine.stop();
    this.repaint();
  }

  _skipFrame() {
    const now = Date.now();
    const elapsedTime = now - this.lastRenderTime;

    if (this.particleEngine.count() > 0) {
      return false;
    }

    if (!this.controller.getSettings(true).animate && elapsedTime < 1000) {
      return true;
    }
    return false;
  }

  repaint(forceRepaint = false) {
    if (!forceRepaint && this._skipFrame()) {
      return;
    }
    this.lastRenderTime = Date.now();

    const ctx = this.context;
    const cyCanvas = this.cyCanvas;
    const offscreenCanvas = this.offscreenCanvas;
    const offscreenContext = this.offscreenContext;
    this.collisionDetector.reset();

    offscreenCanvas.width = this.canvas.width;
    offscreenCanvas.height = this.canvas.height;

    // offscreen rendering
    this._setTransformation(offscreenContext);

    this.selectionNeighborhood = this.cytoscape.collection();
    const selection = this.cytoscape.$(':selected');
    selection.forEach((element: cytoscape.SingularElementArgument) => {
      this.selectionNeighborhood.merge(element);

      if (element.isNode()) {
        const neighborhood = element.neighborhood();
        this.selectionNeighborhood.merge(neighborhood);
      } else {
        const source = element.source();
        const target = element.target();
        this.selectionNeighborhood.merge(source);
        this.selectionNeighborhood.merge(target);
      }
    });

    this._drawEdgeAnimation(offscreenContext);
    this._drawNodes(offscreenContext);

    // static element rendering
    // cyCanvas.resetTransform(ctx);
    cyCanvas.clear(ctx);
    if (this.controller.getSettings(true).showDebugInformation) {
      this._drawDebugInformation();
    }

    if (offscreenCanvas.width > 0 && offscreenCanvas.height > 0) {
      ctx.drawImage(offscreenCanvas, 0, 0);
    }

    // baseline animation
    this.dashAnimationOffset = (Date.now() % 60000) / 250;
  }

  _setTransformation(ctx: CanvasRenderingContext2D) {
    const pan = this.cytoscape.pan();
    const zoom = this.cytoscape.zoom();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.translate(pan.x * this.pixelRatio, pan.y * this.pixelRatio);
    ctx.scale(zoom * this.pixelRatio, zoom * this.pixelRatio);
  }

  _drawEdgeAnimation(ctx: CanvasRenderingContext2D) {
    const now = Date.now();

    ctx.save();

    const edges = this.cytoscape.edges().toArray();
    const hasSelection = this.selectionNeighborhood.size() > 0;

    const transparentEdges = edges.filter((edge) => hasSelection && !this.selectionNeighborhood.has(edge));
    const opaqueEdges = edges.filter((edge) => !hasSelection || this.selectionNeighborhood.has(edge));

    ctx.globalAlpha = 0.25;
    this._drawEdges(ctx, transparentEdges, now);
    ctx.globalAlpha = 1;
    this._drawEdges(ctx, opaqueEdges, now);
    ctx.restore();
  }

  _drawEdges(ctx: CanvasRenderingContext2D, edges: cytoscape.EdgeSingular[], now: number) {
    const cy = this.cytoscape;

    for (const edge of edges) {
      const sourcePoint = edge.sourceEndpoint();
      const targetPoint = edge.targetEndpoint();
      this._drawEdgeLine(ctx, edge, sourcePoint, targetPoint);
      this._drawEdgeParticles(ctx, edge, sourcePoint, targetPoint, now);
    }

    const { showConnectionStats } = this.controller.getSettings(true);
    if (showConnectionStats && cy.zoom() > 1) {
      for (const edge of edges) {
        this._drawEdgeLabel(ctx, edge);
      }
    }
  }

  _drawEdgeLine(
    ctx: CanvasRenderingContext2D,
    edge: cytoscape.EdgeSingular,
    sourcePoint: cytoscape.Position,
    targetPoint: cytoscape.Position
  ) {
    ctx.beginPath();

    ctx.moveTo(sourcePoint.x, sourcePoint.y);
    ctx.lineTo(targetPoint.x, targetPoint.y);

    const metrics = edge.data('metrics');
    const requestCount = _.get(metrics, 'normal', -1);
    const errorCount = _.get(metrics, 'danger', -1);

    let base;
    if (!this.selectionNeighborhood.empty() && this.selectionNeighborhood.has(edge)) {
      ctx.lineWidth = 3;
      base = 140;
    } else {
      ctx.lineWidth = 1;
      base = 80;
    }

    if (requestCount >= 0 && errorCount >= 0) {
      const range = 255;

      const factor = errorCount / requestCount;
      const color = Math.min(255, base + range * Math.log2(factor + 1));

      ctx.strokeStyle = 'rgb(' + color + ',' + base + ',' + base + ')';
    } else {
      ctx.strokeStyle = 'rgb(' + base + ',' + base + ',' + base + ')';
    }

    ctx.stroke();
  }

  _drawEdgeLabel(ctx: CanvasRenderingContext2D, edge: cytoscape.EdgeSingular) {
    const { timeFormat } = this.controller.getSettings(true);

    const midpoint = edge.midpoint();
    const xMid = midpoint.x;
    const yMid = midpoint.y;

    let statistics: string[] = [];
    const metrics: IntGraphMetrics = edge.data('metrics');
    const duration = _.defaultTo(metrics.response_time, -1);
    const requestCount = _.defaultTo(metrics.rate, -1);
    const errorCount = _.defaultTo(metrics.error_rate, -1);

    const timeScale = new humanFormat.Scale(this._getTimeScale(timeFormat));

    if (duration >= 0) {
      const decimals = duration >= 1000 ? 1 : 0;
      statistics.push(humanFormat(duration, { scale: timeScale, decimals }));
    }
    if (requestCount >= 0) {
      const decimals = requestCount >= 1000 ? 1 : 0;
      statistics.push(humanFormat(parseFloat(requestCount.toString()), { decimals }) + ' Req.');
    }
    if (errorCount >= 0) {
      const decimals = errorCount >= 1000 ? 1 : 0;
      statistics.push(humanFormat(errorCount, { decimals }) + ' Err.');
    }

    if (statistics.length > 0) {
      const edgeLabel = statistics.join(', ');
      this._drawLabel(ctx, edgeLabel, xMid, yMid, edge);
    }
  }

  _drawEdgeParticles(
    ctx: CanvasRenderingContext2D,
    edge: cytoscape.EdgeSingular,
    sourcePoint: cytoscape.Position,
    targetPoint: cytoscape.Position,
    now: number
  ) {
    const particles: Particles = edge.data('particles');

    if (particles === undefined) {
      return;
    }

    const xVector = targetPoint.x - sourcePoint.x;
    const yVector = targetPoint.y - sourcePoint.y;

    const angle = Math.atan2(yVector, xVector);
    const xDirection = Math.cos(angle);
    const yDirection = Math.sin(angle);

    const xMinLimit = Math.min(sourcePoint.x, targetPoint.x);
    const xMaxLimit = Math.max(sourcePoint.x, targetPoint.x);
    const yMinLimit = Math.min(sourcePoint.y, targetPoint.y);
    const yMaxLimit = Math.max(sourcePoint.y, targetPoint.y);

    const drawContext: DrawContext = {
      ctx,
      now,
      xDirection,
      yDirection,
      xMinLimit,
      xMaxLimit,
      yMinLimit,
      yMaxLimit,
      sourcePoint,
    };

    // normal particles
    ctx.beginPath();

    let index = particles.normal.length - 1;
    while (index >= 0) {
      this._drawParticle(drawContext, particles.normal, index);
      index--;
    }

    ctx.fillStyle = '#d1e2f2';
    ctx.fill();

    // danger particles
    ctx.beginPath();

    index = particles.danger.length - 1;
    while (index >= 0) {
      this._drawParticle(drawContext, particles.danger, index);
      index--;
    }

    const dangerColor = this.controller.getSettings(true).style.dangerColor;
    ctx.fillStyle = dangerColor;
    ctx.fill();
  }

  _drawLabel(ctx: CanvasRenderingContext2D, label: string, cX: number, cY: number, edge: cytoscape.EdgeSingular) {
    const labelPadding = 1;
    ctx.font = '6px Arial';

    const labelWidth = ctx.measureText(label).width;
    let xPos = cX - labelWidth / 2;
    let yPos = cY + 3;
    let labelArea: Rectangle = {
      coordinates: {
        x: xPos - labelPadding + 4,
        y: yPos - 6 - labelPadding + 4,
      },
      width: labelWidth,
      height: 6,
    };

    if (!isNaN(labelArea.coordinates.x) || !isNaN(labelArea.coordinates.y) || !isNaN(xPos) || !isNaN(yPos)) {
      // TODO: Rather than using a fixed number here, we should find a way to compute a second boundary condition smarter.
      // This is for the case when all nodes are so close together the labels need to overlap each other.
      const maxRepeats = 1000;
      let repeats = 0;
      while (this.collisionDetector.isColliding(labelArea) && repeats < maxRepeats) {
        const nextPoint = this._getNextPointOnVector(xPos, yPos, edge, 0.999);
        labelArea.coordinates = nextPoint;
        yPos = nextPoint.y;
        xPos = nextPoint.x;
        repeats++;
      }
      this.collisionDetector.addRectangle(xPos - 4, yPos - 4, labelWidth + 12, 12);
    }

    ctx.fillStyle = this.colors.default;
    ctx.fillRect(xPos - labelPadding, yPos - 6 - labelPadding, labelWidth + 2 * labelPadding, 6 + 2 * labelPadding);
    ctx.fillStyle = this.colors.background;
    ctx.fillText(label, xPos, yPos);
  }

  _getNextPointOnVector(x: number, y: number, edge: cytoscape.EdgeSingular, step: number) {
    let yTarget = edge.sourceEndpoint().y;
    let xTarget = edge.sourceEndpoint().x;

    const newPoint: Point = {
      x: xTarget * (1.0 - step) + x * step,
      y: yTarget * (1.0 - step) + y * step,
    };

    return newPoint;
  }

  _drawParticle(drawCtx: DrawContext, particles: Particle[], index: number) {
    const { ctx, now, xDirection, yDirection, xMinLimit, xMaxLimit, yMinLimit, yMaxLimit, sourcePoint } = drawCtx;

    const particle = particles[index];

    const timeDelta = now - particle.startTime;
    const xPos = sourcePoint.x + xDirection * timeDelta * particle.velocity;
    const yPos = sourcePoint.y + yDirection * timeDelta * particle.velocity;

    if (xPos > xMaxLimit || xPos < xMinLimit || yPos > yMaxLimit || yPos < yMinLimit) {
      // remove particle
      particles.splice(index, 1);
    } else {
      // draw particle
      ctx.moveTo(xPos, yPos);
      ctx.arc(xPos, yPos, 1, 0, 2 * Math.PI, false);
    }
  }

  _drawNodes(ctx: CanvasRenderingContext2D) {
    const that = this;
    const cy = this.cytoscape;

    // Draw model elements
    const nodes = cy.nodes().toArray();
    for (let i = 0; i < nodes.length; i++) {
      const node = nodes[i];
      if (that.selectionNeighborhood.empty() || that.selectionNeighborhood.has(node)) {
        ctx.globalAlpha = 1;
      } else {
        ctx.globalAlpha = 0.25;
      }

      // draw the node
      if (node.data().type === 'PARENT') {
        if (
          node.data().layer >= this.controller.state.controller.state.currentLayer ||
          node.data().layer === undefined
        ) {
          that._drawNode(ctx, node);
        }
      } else {
        that._drawNode(ctx, node);
      }

      // drawing the node label in case we are not zoomed out
      if (cy.zoom() > 1) {
        that._drawNodeLabel(ctx, node);
      }
    }
  }

  _drawNode(ctx: CanvasRenderingContext2D, node: cytoscape.NodeSingular) {
    const cy = this.cytoscape;
    const type = node.data('type');
    const metrics: IntGraphMetrics = node.data('metrics');

    if (type === EnGraphNodeType.INTERNAL) {
      const requestCount = _.defaultTo(metrics.rate, -1);
      const errorCount = _.defaultTo(metrics.error_rate, 0);
      const responseTime = _.defaultTo(metrics.response_time, -1);
      const threshold = _.defaultTo(metrics.threshold, -1);

      let unknownPct;
      let errorPct;
      let healthyPct;
      if (requestCount < 0) {
        healthyPct = 0;
        errorPct = 0;
        unknownPct = 1;
      } else {
        if (errorCount <= 0) {
          errorPct = 0.0;
        } else {
          errorPct = (1.0 / requestCount) * errorCount;
        }
        healthyPct = 1.0 - errorPct;
        unknownPct = 0;
      }

      // drawing the donut
      this._drawDonut(ctx, node, 15, 5, 0.5, [errorPct, unknownPct, healthyPct]);

      // drawing the baseline status
      const { showBaselines } = this.controller.getSettings(true);
      if (showBaselines && responseTime >= 0 && threshold >= 0) {
        const thresholdViolation = threshold < responseTime;

        this._drawThresholdStroke(ctx, node, thresholdViolation, 15, 5, 0.5);
      }
      this._drawServiceIcon(ctx, node);
    } else {
      this._drawExternalService(ctx, node);
    }

    // draw statistics
    if (cy.zoom() > 1) {
      this._drawNodeStatistics(ctx, node);
    }
  }

  _drawServiceIcon(ctx: CanvasRenderingContext2D, node: cytoscape.NodeSingular) {
    const nodeId: string = node.id();
    const iconMappings = this.controller.getSettings(true).icons;

    const mapping = _.find(iconMappings, ({ pattern }) => {
      try {
        return new RegExp(pattern).test(nodeId);
      } catch (error) {
        return false;
      }
    });

    if (mapping) {
      const image = this._getAsset(mapping.filename, mapping.filename + '.png');
      if (image != null) {
        const cX = node.position().x;
        const cY = node.position().y;
        const iconSize = 16;

        ctx.drawImage(image, cX - iconSize / 2, cY - iconSize / 2, iconSize, iconSize);
      }
    }
  }

  _drawNodeStatistics(ctx: CanvasRenderingContext2D, node: cytoscape.NodeSingular) {
    const { timeFormat } = this.controller.getSettings(true);
    const lines: string[] = [];

    const metrics: IntGraphMetrics = node.data('metrics');
    const requestCount = _.defaultTo(metrics.rate, -1);
    const errorCount = _.defaultTo(metrics.error_rate, -1);
    const responseTime = _.defaultTo(metrics.response_time, -1);

    const timeScale = new humanFormat.Scale(this._getTimeScale(timeFormat));

    if (requestCount >= 0) {
      const decimals = requestCount >= 1000 ? 1 : 0;
      lines.push('Requests: ' + humanFormat(parseFloat(requestCount.toString()), { decimals }));
    }
    if (errorCount >= 0) {
      const decimals = errorCount >= 1000 ? 1 : 0;
      lines.push('Errors: ' + humanFormat(errorCount, { decimals }));
    }
    if (responseTime >= 0) {
      const decimals = responseTime >= 1000 ? 1 : 0;

      lines.push('Avg. Resp. Time: ' + humanFormat(responseTime, { scale: timeScale, decimals }));
    }

    const pos = node.position();
    const fontSize = 6;
    const cX = pos.x + this.donutRadius * 1.25;
    const cY = pos.y + fontSize / 2 - (fontSize / 2) * (lines.length - 1);

    ctx.font = '6px Arial';
    ctx.fillStyle = this.colors.default;
    for (let i = 0; i < lines.length; i++) {
      ctx.fillText(lines[i], cX, cY + i * fontSize);
    }
  }

  _drawThresholdStroke(
    ctx: CanvasRenderingContext2D,
    node: cytoscape.NodeSingular,
    violation: boolean,
    radius: number,
    width: number,
    baseStrokeWidth: number
  ) {
    const pos = node.position();
    const cX = pos.x;
    const cY = pos.y;

    const strokeWidth = baseStrokeWidth * 2 * (violation ? 1.5 : 1);
    const offset = strokeWidth * 0.2;

    ctx.beginPath();
    ctx.arc(cX, cY, radius + strokeWidth - offset, 0, 2 * Math.PI, false);
    ctx.closePath();
    ctx.setLineDash([]);
    ctx.lineWidth = strokeWidth * 1;
    ctx.strokeStyle = 'white';
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(cX, cY, radius + strokeWidth - offset, 0, 2 * Math.PI, false);
    ctx.closePath();

    ctx.setLineDash([10, 2]);
    if (violation && this.controller.getSettings(true).animate) {
      ctx.lineDashOffset = this.dashAnimationOffset;
    } else {
      ctx.lineDashOffset = 0;
    }
    ctx.lineWidth = strokeWidth;
    ctx.strokeStyle = violation ? 'rgb(184, 36, 36)' : '#37872d';

    ctx.stroke();

    // inner
    ctx.beginPath();
    ctx.arc(cX, cY, radius - width - baseStrokeWidth, 0, 2 * Math.PI, false);
    ctx.closePath();
    ctx.fillStyle = violation ? 'rgb(184, 36, 36)' : '#37872d';
    ctx.fill();
  }

  _drawExternalService(ctx: CanvasRenderingContext2D, node: cytoscape.NodeSingular) {
    const pos = node.position();
    const cX = pos.x;
    const cY = pos.y;
    const size = 12;

    ctx.beginPath();
    ctx.arc(cX, cY, 12, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'white';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(cX, cY, 11.5, 0, 2 * Math.PI, false);
    ctx.fillStyle = this.colors.background;
    ctx.fill();

    const nodeType = node.data('external_type');

    const image = this._getImageAsset(nodeType);
    if (image != null) {
      ctx.drawImage(image, cX - size / 2, cY - size / 2, size, size);
    }
  }

  _drawNodeLabel(ctx: CanvasRenderingContext2D, node: cytoscape.NodeSingular) {
    const pos = node.position();
    let label: string = node.id();
    const labelPadding = 1;

    if (this.selectionNeighborhood.empty() || !this.selectionNeighborhood.has(node)) {
      if (label.length > 20) {
        label = label.substr(0, 7) + '...' + label.slice(-7);
      }
    }

    ctx.font = '6px Arial';

    const labelWidth = ctx.measureText(label).width;
    const xPos = pos.x - labelWidth / 2;
    let yPos = pos.y + node.height() * 0.8;

    if (node.data().type === 'PARENT') {
      if (node.data().layer >= this.controller.state.controller.state.currentLayer || node.data().layer === undefined) {
      } else {
        yPos = pos.y + node.height() * 0.5 + 30;
      }
    }

    const { showBaselines } = this.controller.getSettings(true);
    const metrics: IntGraphMetrics = node.data('metrics');
    const responseTime = _.defaultTo(metrics.response_time, -1);
    const threshold = _.defaultTo(metrics.threshold, -1);

    if (!showBaselines || threshold < 0 || responseTime < 0 || responseTime <= threshold) {
      ctx.fillStyle = this.colors.default;
    } else {
      ctx.fillStyle = '#FF7383';
    }

    ctx.fillRect(xPos - labelPadding, yPos - 6 - labelPadding, labelWidth + 2 * labelPadding, 6 + 2 * labelPadding);

    ctx.fillStyle = this.colors.background;
    ctx.fillText(label, xPos, yPos);
  }

  _drawDebugInformation() {
    const ctx = this.context;

    this.frameCounter++;

    ctx.font = '12px monospace';
    ctx.fillStyle = 'white';
    ctx.fillText('Frames per Second: ' + this.fpsCounter, 10, 12);
    ctx.fillText('Particles: ' + this.particleEngine.count(), 10, 24);
  }

  _drawDonut(
    ctx: CanvasRenderingContext2D,
    node: cytoscape.NodeSingular,
    radius: number,
    width: number,
    strokeWidth: number,
    percentages: number[]
  ) {
    const cX = node.position().x;
    const cY = node.position().y;
    let currentArc = -Math.PI / 2; // offset

    ctx.beginPath();
    ctx.arc(cX, cY, radius + strokeWidth, 0, 2 * Math.PI, false);
    ctx.closePath();
    ctx.fillStyle = 'white';
    ctx.fill();

    const { healthyColor, dangerColor, noDataColor } = this.controller.getSettings(true).style;
    const colors = [dangerColor, noDataColor, healthyColor];
    for (let i = 0; i < percentages.length; i++) {
      let arc = this._drawArc(ctx, currentArc, cX, cY, radius, percentages[i], colors[i]);
      currentArc += arc;
    }

    ctx.beginPath();
    ctx.arc(cX, cY, radius - width, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'white';
    ctx.fill();

    // cut out an inner-circle == donut
    ctx.beginPath();
    ctx.arc(cX, cY, radius - width - strokeWidth, 0, 2 * Math.PI, false);
    if (node.selected()) {
      ctx.fillStyle = 'white';
    } else {
      ctx.fillStyle = this.colors.background;
    }
    ctx.fill();
  }

  _drawArc(
    ctx: CanvasRenderingContext2D,
    currentArc: number,
    cX: number,
    cY: number,
    radius: number,
    percent: number,
    color: string
  ) {
    // calc size of our wedge in radians
    let WedgeInRadians = (percent * 360 * Math.PI) / 180;
    // draw the wedge
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(cX, cY);
    ctx.arc(cX, cY, radius, currentArc, currentArc + WedgeInRadians, false);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
    ctx.restore();
    // sum the size of all wedges so far
    // We will begin our next wedge at this sum
    return WedgeInRadians;
  }
}


================================================
FILE: src/panel/canvas/particle_engine.ts
================================================
import CanvasDrawer from './graph_canvas';
import _ from 'lodash';
import { Particles, Particle, IntGraphMetrics } from '../../types';

export default class ParticleEngine {
  drawer: CanvasDrawer;

  maxVolume = 800;

  minSpawnPropability = 0.004;

  spawnInterval: NodeJS.Timeout;

  animating: boolean;

  constructor(canvasDrawer: CanvasDrawer) {
    this.drawer = canvasDrawer;
    this.animating = false;
  }

  start() {
    this.animating = true;
    if (!this.spawnInterval) {
      const that = this;
      this.spawnInterval = setInterval(() => that.animate(), 60);
    }
  }

  stop() {
    this.animating = false;
  }

  animate() {
    const that = this;
    if (!that.animating) {
      if (!this.hasParticles()) {
        clearInterval(this.spawnInterval);
        this.spawnInterval = null;
      }
    } else {
      that._spawnParticles();
    }
    that.drawer.repaint();
  }

  hasParticles() {
    for (const edge of this.drawer.cytoscape.edges().toArray()) {
      if (
        edge.data('particles') !== undefined &&
        (edge.data('particles').normal.length > 0 || edge.data('particles').danger.length > 0)
      ) {
        return true;
      }
    }
    return false;
  }

  _spawnParticles() {
    const cy = this.drawer.cytoscape;

    const now = Date.now();
    cy.edges().forEach((edge) => {
      let particles: Particles = edge.data('particles');
      const metrics: IntGraphMetrics = edge.data('metrics');

      if (!metrics) {
        return;
      }

      const rate = _.defaultTo(metrics.rate, 0);
      const error_rate = _.defaultTo(metrics.error_rate, 0);
      const volume = rate + error_rate;

      let errorRate;
      if (rate >= 0 && error_rate >= 0) {
        errorRate = error_rate / rate;
      } else {
        errorRate = 0;
      }

      if (particles === undefined) {
        particles = {
          normal: [],
          danger: [],
        };
        edge.data('particles', particles);
      }

      if (metrics && volume > 0) {
        const spawnPropability = Math.min(volume / this.maxVolume, 1.0);
        for (let i = 0; i < 5; i++) {
          if (Math.random() <= spawnPropability + this.minSpawnPropability) {
            const particle: Particle = {
              velocity: 0.05 + Math.random() * 0.05,
              startTime: now,
            };
            if (Math.random() < errorRate) {
              particles.danger.push(particle);
            } else {
              particles.normal.push(particle);
            }
          }
        }
      }
    });
  }

  count() {
    const cy = this.drawer.cytoscape;

    const count = _(cy.edges())
      .map((edge) => edge.data('particles'))
      .filter()
      .map((particleArray) => particleArray.normal.length + particleArray.danger.length)
      .sum();

    return count;
  }
}


================================================
FILE: src/panel/layout_options.ts
================================================
const options = {
  name: 'cola',
  animate: true, // whether to show the layout as it's running
  refresh: 1, // number of ticks per frame; higher is faster but more jerky
  maxSimulationTime: 3000, // max length in ms to run the layout
  ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
  fit: true, // set by controller // on every layout reposition of nodes, fit the viewport
  padding: 90, // padding around the simulation
  boundingBox: undefined as undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
  nodeDimensionsIncludeLabels: false, // whether labels should be included in determining the space used by a node

  // layout event callbacks
  ready: function () {}, // on layoutready
  stop: function () {}, // on layoutstop

  // positioning options
  randomize: false, // use random node positions at beginning of layout
  avoidOverlap: true, // if true, prevents overlap of node bounding boxes
  handleDisconnected: true, // if true, avoids disconnected components from overlapping
  convergenceThreshold: 0.01, // when the alpha value (system energy) falls below this value, the layout stops
  nodeSpacing: function (node: any) {
    return 50;
  }, // extra spacing around nodes
  flow: undefined as undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
  alignment: undefined as undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
  gapInequalities: undefined as undefined, // list of inequality constraints for the gap between the nodes, e.g. [{"axis":"y", "left":node1, "right":node2, "gap":25}]

  // different methods of specifying edge length
  // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
  edgeLength: undefined as undefined, // sets edge length directly in simulation
  edgeSymDiffLength: undefined as undefined, // symmetric diff edge length in simulation
  edgeJaccardLength: undefined as undefined, // jaccard edge length in simulation

  // iterations of cola algorithm; uses default values on undefined
  unconstrIter: 50, // set by controller // unconstrained initial layout iterations
  userConstIter: undefined as undefined, // initial layout iterations with user-specified constraints
  allConstIter: undefined as undefined, // initial layout iterations with all constraints including non-overlap

  // infinite layout options
  infinite: false, // overrides all other options for a forces-all-the-time mode
};

export default options;


================================================
FILE: src/panel/serviceDependencyGraph/ServiceDependencyGraph.css
================================================
.service-dependency-graph-panel .graph-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.service-dependency-graph-panel .canvas-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.service-dependency-graph-panel .zoom-button-container {
    position: absolute;
    top: 0;
    right: 1rem;
    z-index: 99;
}


================================================
FILE: src/panel/serviceDependencyGraph/ServiceDependencyGraph.tsx
================================================
import CanvasDrawer from 'panel/canvas/graph_canvas';
import cytoscape, { EdgeCollection, EdgeSingular, ElementDefinition, NodeSingular } from 'cytoscape';
import React, { PureComponent } from 'react';
import { PanelController } from '../PanelController';
import cyCanvas from 'cytoscape-canvas';
import cola from 'cytoscape-cola';
import layoutOptions from '../layout_options';
import { Statistics } from '../statistics/Statistics';
import _ from 'lodash';
import {
  TableContent,
  IntGraphMetrics,
  IntGraph,
  IntGraphNode,
  IntGraphEdge,
  PanelSettings,
  IntSelectionStatistics,
} from 'types';
import { TemplateSrv, getTemplateSrv } from '@grafana/runtime';
import './ServiceDependencyGraph.css';

interface PanelState {
  zoom: number | undefined;
  animate: boolean | undefined;
  controller: PanelController;
  cy?: cytoscape.Core | undefined;
  graphCanvas?: CanvasDrawer | undefined;
  animateButtonClass?: string;
  showStatistics: boolean;
  data: IntGraph;
  settings: PanelSettings;
  layer: number | undefined;
  maxLayer: number;
  layerIncreaseFunction: any;
  layerDecreaseFunction: any;
}

cyCanvas(cytoscape);
cytoscape.use(cola);

export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState> {
  ref: any;

  selectionId: string;

  currentType: string;

  selectionStatistics: IntSelectionStatistics;

  receiving: TableContent[];

  sending: TableContent[];

  resolvedDrillDownLink: string;

  templateSrv: TemplateSrv;

  initResize = true;

  constructor(props: PanelState) {
    super(props);

    let animateButtonClass = 'fa fa-play-circle';
    if (props.animate) {
      animateButtonClass = 'fa fa-pause-circle';
    }

    this.state = {
      ...props,
      showStatistics: false,
      animateButtonClass: animateButtonClass,
      animate: false,
    };

    this.ref = React.createRef();
    this.templateSrv = getTemplateSrv();
  }

  componentDidMount() {
    const cy: any = cytoscape({
      container: this.ref,
      zoom: this.state.zoom,
      elements: this.props.data,
      layout: {
        name: 'cola',
      },
      style: [
        {
          selector: 'node',
          css: {
            'background-color': '#fbfbfb',
            'background-opacity': 0,
          },
        },

        {
          selector: 'node:parent',
          css: {
            'background-opacity': 0.05,
            shape: 'barrel',
          },
        },

        {
          selector: 'edge',
          style: {
            'curve-style': 'bezier',
            'control-point-step-size': 100,
            visibility: 'hidden',
          },
        },
      ],
      wheelSensitivity: 0.125,
    });

    let graphCanvas = new CanvasDrawer(
      this,
      cy,
      cy.cyCanvas({
        zIndex: 1,
      })
    );

    cy.on('render cyCanvas.resize', () => {
      graphCanvas.repaint(true);
    });
    cy.on('select', 'node', () => this.onSelectionChange());
    cy.on('unselect', 'node', () => this.onSelectionChange());
    this.setState({
      cy: cy,
      graphCanvas: graphCanvas,
    });
    graphCanvas.start();
  }

  componentDidUpdate() {
    this._updateGraph(this.props.data);
  }

  _updateGraph(graph: IntGraph) {
    const cyNodes = this._transformNodes(graph.nodes);
    const cyEdges = this._transformEdges(graph.edges);

    const nodes = this.state.cy.nodes().toArray();
    const updatedNodes = this._updateOrRemove(nodes, cyNodes);

    // add new nodes
    this.state.cy.add(cyNodes);

    const edges = this.state.cy.edges().toArray();
    this._updateOrRemove(edges, cyEdges);

    // add new edges
    this.state.cy.add(cyEdges);

    if (this.initResize) {
      this.initResize = false;
      this.state.cy.resize();
      this.state.cy.reset();
      this.runLayout();
    } else {
      if (cyNodes.length > 0) {
        _.each(updatedNodes, (node) => {
          node.lock();
        });
        this.runLayout(true);
      }
    }
    this.state.graphCanvas.repaint(true);
  }

  _transformNodes(nodes: IntGraphNode[]): ElementDefinition[] {
    const cyNodes: ElementDefinition[] = _.map(nodes, (node) => {
      const result: ElementDefinition = {
        group: 'nodes',
        data: {
          id: node.data.id,
          type: node.data.type,
          external_type: node.data.external_type,
          parent: node.data.parent,
          layer: node.data.layer,
          metrics: {
            ...node.data.metrics,
          },
        },
      };
      return result;
    });

    return cyNodes;
  }

  _transformEdges(edges: IntGraphEdge[]): ElementDefinition[] {
    const cyEdges: ElementDefinition[] = _.map(edges, (edge) => {
      const cyEdge: ElementDefinition = {
        group: 'edges',
        data: {
          id: edge.data.source + ':' + edge.data.target,
          source: edge.data.source,
          target: edge.data.target,
          metrics: {
            ...edge.data.metrics,
          },
        },
      };

      return cyEdge;
    });

    return cyEdges;
  }

  _updateOrRemove(dataArray: Array<NodeSingular | EdgeSingular>, inputArray: ElementDefinition[]) {
    const elements: any[] = []; //(NodeSingular | EdgeSingular)[]
    for (let i = 0; i < dataArray.length; i++) {
      const element = dataArray[i];

      const cyNode = _.find(inputArray, { data: { id: element.id() } });

      if (cyNode) {
        element.data(cyNode.data);
        _.remove(inputArray, (n) => n.data.id === cyNode.data.id);
        elements.push(element);
      } else {
        element.remove();
      }
    }
    return elements;
  }

  onSelectionChange() {
    const selection = this.state.cy.$(':selected');

    if (selection.length === 1) {
      this.updateStatisticTable();
      this.setState({
        showStatistics: true,
      });
    } else {
      this.setState({
        showStatistics: false,
      });
    }
  }

  getSettings(resolveVariables: boolean): PanelSettings {
    return this.state.controller.getSettings(resolveVariables);
  }

  toggleAnimation() {
    let newValue = !this.state.animate;
    let animateButtonClass = 'fa fa-play-circle';
    if (newValue) {
      this.state.graphCanvas.startAnimation();
      animateButtonClass = 'fa fa-pause-circle';
    } else {
      this.state.graphCanvas.stopAnimation();
    }
    this.setState({
      animate: newValue,
      animateButtonClass: animateButtonClass,
    });
  }

  runLayout(unlockNodes = false) {
    const that = this;
    const options = {
      ...layoutOptions,

      stop: function () {
        if (unlockNodes) {
          that.unlockNodes();
        }
        that.setState({
          zoom: that.state.cy.zoom(),
        });
      },
    };

    this.state.cy.layout(options).run();
  }

  unlockNodes() {
    this.state.cy.nodes().forEach((node: { unlock: () => void }) => {
      node.unlock();
    });
  }

  fit() {
    const selection = this.state.graphCanvas.selectionNeighborhood;
    if (selection && !selection.empty()) {
      this.state.cy.fit(selection, 30);
    } else {
      this.state.cy.fit();
    }
    this.setState({
      zoom: this.state.cy.zoom(),
    });
  }

  zoom(zoom: number) {
    const zoomStep = 0.25 * zoom;
    const zoomLevel = Math.max(0.1, this.state.zoom + zoomStep);
    this.setState({
      zoom: zoomLevel,
    });
    this.state.cy.zoom(zoomLevel);
    this.state.cy.center();
  }

  updateStatisticTable() {
    const selection = this.state.cy.$(':selected');

    if (selection.length === 1) {
      const currentNode: NodeSingular = selection[0];
      this.selectionId = currentNode.id().toString();
      this.currentType = currentNode.data('type');
      const receiving: TableContent[] = [];
      const sending: TableContent[] = [];
      const edges: EdgeCollection = selection.connectedEdges();

      const metrics: IntGraphMetrics = selection.nodes()[0].data('metrics');

      const requestCount = _.defaultTo(metrics.rate, -1);
      const errorCount = _.defaultTo(metrics.error_rate, -1);
      const duration = _.defaultTo(metrics.response_time, -1);
      const threshold = _.defaultTo(metrics.threshold, -1);

      this.selectionStatistics = {};

      if (requestCount >= 0) {
        this.selectionStatistics.requests = Math.floor(requestCount);
      }
      if (errorCount >= 0) {
        this.selectionStatistics.errors = Math.floor(errorCount);
      }
      if (duration >= 0) {
        this.selectionStatistics.responseTime = Math.floor(duration);

        if (threshold >= 0) {
          this.selectionStatistics.threshold = Math.floor(threshold);
          this.selectionStatistics.thresholdViolation = duration > threshold;
        }
      }

      for (let i = 0; i < edges.length; i++) {
        const actualEdge: EdgeSingular = edges[i];
        const sendingCheck: boolean = actualEdge.source().id() === this.selectionId;
        let node: NodeSingular;

        if (sendingCheck) {
          node = actualEdge.target();
        } else {
          node = actualEdge.source();
        }

        const sendingObject: TableContent = {
          name: node.id(),
          responseTime: '-',
          rate: '-',
          error: '-',
        };

        const edgeMetrics: IntGraphMetrics = actualEdge.data('metrics');

        if (edgeMetrics !== undefined) {
          const { response_time, rate, error_rate } = edgeMetrics;

          if (rate !== undefined) {
            sendingObject.rate = Math.floor(rate).toString();
          }
          if (response_time !== undefined) {
            sendingObject.responseTime = Math.floor(response_time) + ' ms';
          }
          if (error_rate !== undefined && rate !== undefined) {
            sendingObject.error = Math.floor(error_rate / (rate / 100)) + '%';
          }
        }

        if (sendingCheck) {
          sending.push(sendingObject);
        } else {
          receiving.push(sendingObject);
        }
      }
      this.receiving = receiving;
      this.sending = sending;

      this.generateDrillDownLink();
    }
  }

  generateDrillDownLink() {
    const { drillDownLink } = this.getSettings(false);
    if (drillDownLink !== undefined) {
      const link = drillDownLink.replace('{}', this.selectionId);
      this.resolvedDrillDownLink = this.templateSrv.replace(link);
    }
  }

  render() {
    if (this.state.cy !== undefined) {
      this._updateGraph(this.props.data);
    }
    return (
      <div className="graph-container">
        <div className="service-dependency-graph">
          <div className="canvas-container" ref={(ref) => (this.ref = ref)}></div>
          <div className="zoom-button-container">
            <button className="btn navbar-button width-100" onClick={() => this.toggleAnimation()}>
              <i className={this.state.animateButtonClass}></i>
            </button>
            <button className="btn navbar-button width-100" onClick={() => this.runLayout()}>
              <i className="fa fa-sitemap"></i>
            </button>
            <button className="btn navbar-button width-100" onClick={() => this.fit()}>
              <i className="fa fa-dot-circle-o"></i>
            </button>
            <button className="btn navbar-button width-100" onClick={() => this.props.layerIncreaseFunction()}>
              <i className="fa fa-plus"></i>
            </button>
            <button className="btn navbar-button width-100" onClick={() => this.props.layerDecreaseFunction()}>
              <i className="fa fa-minus"></i>
            </button>
            <span>
              Layer {this.state.controller.state.currentLayer}/{this.state.maxLayer}
            </span>
          </div>
        </div>
        <Statistics
          show={this.state.showStatistics}
          selectionId={this.selectionId}
          resolvedDrillDownLink={this.resolvedDrillDownLink}
          selectionStatistics={this.selectionStatistics}
          currentType={this.currentType}
          showBaselines={this.getSettings(true).showBaselines}
          receiving={this.receiving}
          sending={this.sending}
        />
      </div>
    );
  }
}


================================================
FILE: src/panel/statistics/IncomingStatistics.tsx
================================================
import React from 'react';
import { TableContent } from 'types';

export const NodeStatistics = (receiving: TableContent[]) => {
  return (
    <>
      <div className="secondHeader--selection">Incoming Statistics</div>
      {() => {
        if (receiving.length > 0) {
          return (
            <table className="table--selection">
              <tr className="table--selection--head">
                <th>Name</th>
                <th className="table--th--selectionSmall">Time</th>
                <th className="table--th--selectionSmall">Requests</th>
                <th className="table--th--selectionSmall">Error Rate</th>
              </tr>
              {receiving.map((node: TableContent, index: number) => (
                <tr key={'row-' + index}>
                  <td className="table--td--selection" title="{{node.name}}">
                    {node.name}
                  </td>
                  <td className="table--td--selection">{node.responseTime}</td>
                  <td className="table--td--selection">{node.rate}</td>
                  <td className="table--td--selection">{node.error}</td>
                </tr>
              ))}
            </table>
          );
        }
        return <div className="no-data--selection">No incoming statistics available.</div>;
      }}
    </>
  );
};


================================================
FILE: src/panel/statistics/NodeStatistics.tsx
================================================
import React from 'react';
import { IntTableHeader } from '../../types';
import { TableContent } from 'types';
import SortableTable from './SortableTable';
import roundPercentageToDecimal from './utils/Utils';

interface NodeStatisticsProps {
  nodeList: TableContent[];
  noDataText: string;
  title: string;
}

const tableHeaders: IntTableHeader[] = [
  { text: 'Name', dataField: 'name', sort: true, isKey: true },
  { text: 'Time', dataField: 'time', sort: true, ignoreLiteral: ' ms' },
  { text: 'Requests', dataField: 'requests', sort: true, ignoreLiteral: '' },
  { text: 'Error Rate', dataField: 'error_rate', sort: true, ignoreLiteral: '%' },
];

function getStatisticsTable(noDataText: string, nodeList: TableContent[]) {
  if (nodeList.length > 0) {
    return (
      <SortableTable
        tableHeaders={tableHeaders}
        data={nodeList.map((node: TableContent) => {
          return {
            name: node.name,
            time: node.responseTime,
            requests: node.rate,
            error_rate: roundPercentageToDecimal(2, node.error),
          };
        })}
      />
    );
  } else {
    return <div className="no-data--selection">{noDataText}</div>;
  }
}

export const NodeStatistics: React.FC<NodeStatisticsProps> = ({ nodeList, noDataText, title }) => {
  return (
    <div>
      <div className="secondHeader--selection">{title}</div>
      {getStatisticsTable(noDataText, nodeList)}
    </div>
  );
};


================================================
FILE: src/panel/statistics/SortableTable.tsx
================================================
import React from 'react';
import { IntTableHeader, NodeData } from '../../types';
import BootstrapTable from 'react-bootstrap-table-next';

interface SortableTableProps {
  tableHeaders: IntTableHeader[];
  data: NodeData[];
}

function sort(a: string, b: string, order: string, ignoreLiteral: string) {
  let cleanA = a.replace(ignoreLiteral, '');
  let cleanB = b.replace(ignoreLiteral, '');
  if ((order === 'asc' && cleanA === '-') || (order !== 'asc' && cleanB === '-')) {
    return -1;
  }
  if ((order === 'asc' && cleanB === '-') || (order !== 'asc' && cleanA === '-')) {
    return 1;
  }
  if (order === 'asc') {
    return Number(cleanA) - Number(cleanB);
  }
  return Number(cleanB) - Number(cleanA);
}

export const SortableTable: React.FC<SortableTableProps> = ({ tableHeaders, data }) => {
  tableHeaders.forEach(function (value, i) {
    value.classes = 'table--td--selection';
    if (i !== 0) {
      value.sortFunc = (a: string, b: string, order: string, _dataField: any, _rowA: any) => {
        return sort(a, b, order, value.ignoreLiteral);
      };
    }
  });

  return (
    <BootstrapTable
      keyField="name"
      data={data}
      columns={tableHeaders}
      classes="table--selection"
      headerClasses="table--selection table--selection--head"
    />
  );
};

export default SortableTable;


================================================
FILE: src/panel/statistics/Statistics.css
================================================
.service-dependency-graph-panel .margin {
    margin: 10px;
}

.service-dependency-graph-panel .statistics {
    flex-basis: 0;
    transition: flex-basis 500ms ease-in-out;
    overflow-y: scroll;
}

.service-dependency-graph-panel .statistics.show {
  flex-basis: 30rem;
  padding-left: 0.5%;
}


================================================
FILE: src/panel/statistics/Statistics.tsx
================================================
import React from 'react';
import { NodeStatistics } from './NodeStatistics';
import '../../css/novatec-service-dependency-graph-panel.css';
import './Statistics.css';
import { IntSelectionStatistics, TableContent } from 'types';
import roundPercentageToDecimal from './utils/Utils';

interface StatisticsProps {
  show: boolean;
  selectionId: string | number;
  resolvedDrillDownLink: string;
  selectionStatistics: IntSelectionStatistics;
  currentType: string;
  showBaselines: boolean;
  receiving: TableContent[];
  sending: TableContent[];
}

export const Statistics: React.FC<StatisticsProps> = ({
  show,
  selectionId,
  resolvedDrillDownLink,
  selectionStatistics,
  currentType,
  showBaselines,
  receiving,
  sending,
}) => {
  let statisticsClass = 'statistics';
  let statistics = <div></div>;
  if (show) {
    statisticsClass = 'statistics show ';
    let drilldownLink = <div></div>;
    if (resolvedDrillDownLink && resolvedDrillDownLink.length > 0 && currentType === 'INTERNAL') {
      drilldownLink = (
        <a target="_blank" rel="noreferrer" href={resolvedDrillDownLink}>
          <i className="fa fa-paper-plane-o margin"></i>
        </a>
      );
    }

    const requests =
      selectionStatistics.requests >= 0 ? (
        <tr>
          <td className="table--td--selection">Requests</td>
          <td className="table--td--selection">{selectionStatistics.requests}</td>
        </tr>
      ) : null;

    const errors =
      selectionStatistics.errors >= 0 ? (
        <tr>
          <td className="table--td--selection">Errors</td>
          <td className="table--td--selection">{selectionStatistics.errors}</td>
        </tr>
      ) : null;

    let errorRate =
      selectionStatistics.requests > 0 && selectionStatistics.errors >= 0 ? (
        <tr>
          <td className="table--td--selection">Error Rate</td>
          <td className="table--td--selection">
            {roundPercentageToDecimal(
              2,
              ((100 / selectionStatistics.requests) * selectionStatistics.errors).toString()
            )}
          </td>
        </tr>
      ) : null;

    let avgResponseTime =
      selectionStatistics.responseTime >= 0 ? (
        <tr>
          <td className="table--td--selection">Avg. Response Time</td>
          <td className="table--td--selection">{selectionStatistics.responseTime} ms</td>
        </tr>
      ) : null;
    let threshold = selectionStatistics.thresholdViolation ? (
      <td className="table--td--selection threshold--bad">
        Bad ({'>'} {selectionStatistics.threshold}ms)
      </td>
    ) : (
      <td className="table--td--selection threshold--good"> Good (&lt;= {selectionStatistics.threshold}ms) </td>
    );
    let baseline =
      showBaselines && selectionStatistics.threshold ? (
        <tr>
          <td className="table--td--selection">Response Time Health (Upper Baseline)</td>
          {threshold}
        </tr>
      ) : null;

    statistics = (
      <div className="statistics">
        <div className="header--selection">
          {selectionId}
          {drilldownLink}
        </div>

        <div className="secondHeader--selection">Statistics</div>
        <table className="table--selection">
          <tr className="table--selection--head">
            <th>Name</th>
            <th className="table--th--selectionMedium">Value</th>
          </tr>
          {requests}
          {errors}
          {errorRate}
          {avgResponseTime}
          {baseline}
        </table>

        <NodeStatistics
          nodeList={receiving}
          noDataText="No incoming statistics available."
          title="Incoming Statistics"
        />
        <NodeStatistics nodeList={sending} noDataText="No outgoing statistics available." title="Outgoing Statistics" />
      </div>
    );
  }
  return <div className={statisticsClass}>{statistics}</div>;
};


================================================
FILE: src/panel/statistics/utils/Utils.ts
================================================
function roundPercentageToDecimal(decimal: number, value: string) {
  if (value !== '-') {
    let valueDecimals = _getDecimalsOf(parseFloat(value));
    if (valueDecimals > decimal) {
      value = parseFloat(value).toFixed(decimal) + '%';
    }
  }
  return value;
}

function _getDecimalsOf(value: number) {
  if (Math.floor(value) !== value) {
    return value.toString().split('.')[1].length || 0;
  }
  return 0;
}

export default roundPercentageToDecimal;


================================================
FILE: src/plugin.json
================================================
{
  "type": "panel",
  "name": "Service Dependency Graph",
  "id": "novatec-sdg-panel",
  "info": {
    "version": "4.2.0",
    "updated": "2025-03-26",
    "description": "Service Dependency Graph panel for Grafana. Shows metric-based, dynamic dependency graph between services, indicates responsetime, load and error rate statistic for individual services and communication edges. Shows communication to external services, such as Web calls, database calls, message queues, LDAP calls, etc. Provides a details dialog for each selected service that shows statistics about incoming and outgoing traffic.",
    "author": {
      "name": "Novatec Consulting GmbH",
      "url": "https://www.novatec-gmbh.de/"
    },
    "keywords": [
      "grafana",
      "plugin",
      "service-dependency-graph",
      "topology"
    ],
    "logos": {
      "small": "img/novatec_sdg_panel_logo.svg",
      "large": "img/novatec_sdg_panel_logo.svg"
    },
    "links": [
      {
        "name": "Project site",
        "url": "https://github.com/NovatecConsulting/novatec-service-dependency-graph-panel.git"
      },
      {
        "name": "Apache License",
        "url": "https://github.com/NovatecConsulting/novatec-service-dependency-graph-panel/blob/master/LICENSE"
      }
    ],
    "screenshots": [
      {
        "name": "Showcase",
        "path": "img/data-example-1.png"
      }
    ]
  },
  "dependencies": {
    "grafanaDependency": ">=10.4.0",
    "plugins": []
  }
}


================================================
FILE: src/processing/graph_generator.ts
================================================
import _ from 'lodash';
import { isPresent } from './utils/Utils';
import { PanelController } from '../panel/PanelController';
import {
  GraphDataElement,
  IntGraph,
  IntGraphEdge,
  IntGraphMetrics,
  IntGraphNode,
  EnGraphNodeType,
  GraphDataType,
} from '../types';
import NodeTree from './node_tree';
import NodeSubstitutor from './node_substitutor';

class GraphGenerator {
  controller: PanelController;
  nodeSubstitutor: NodeSubstitutor;

  constructor(controller: PanelController) {
    this.controller = controller;
    this.nodeSubstitutor = new NodeSubstitutor();
  }

  _createNode(dataElements: GraphDataElement[], nodeTree: NodeTree): IntGraphNode | undefined {
    if (!dataElements || dataElements.length <= 0) {
      return undefined;
    }

    const sumMetrics = this.controller.getSettings(true).sumTimings;

    let nodeName = dataElements[0].target;
    if (nodeName === '' || nodeName === undefined || nodeName === null) {
      nodeName = 'undefined';
    }

    const internalNode =
      _.some(dataElements, ['type', GraphDataType.INTERNAL]) ||
      _.some(dataElements, ['type', GraphDataType.EXTERNAL_IN]);
    const nodeType = internalNode ? EnGraphNodeType.INTERNAL : EnGraphNodeType.EXTERNAL;

    const metrics: IntGraphMetrics = {};

    const node: IntGraphNode = {
      data: {
        id: nodeName,
        label: nodeName,
        external_type: nodeType,
        type: nodeType,
        layer: 0,
        metrics,
        namespace: [],
      },
    };

    //get first element where namespace is defined.
    const namespaceElement = dataElements.find((el) => el.namespace !== undefined);
    if (namespaceElement) {
      const namespace = namespaceElement.namespace;
      node.data.namespace = namespace;
      node.data.layer = namespace.length;
      node.data.parent = namespace[namespace.length - 1];
      this._updateMaxLayer(node.data.layer);
    }

    const aggregationFunction = sumMetrics ? _.sum : _.mean;

    if (internalNode) {
      metrics.rate = _.sum(_.map(dataElements, (element) => element.data.rate_in));
      metrics.error_rate = _.sum(_.map(dataElements, (element) => element.data.error_rate_in));

      const response_timings = _.map(dataElements, (element) => element.data.response_time_in).filter(isPresent);
      if (response_timings.length > 0) {
        metrics.response_time = aggregationFunction(response_timings);
      }
    } else {
      metrics.rate = _.sum(_.map(dataElements, (element) => element.data.rate_out));
      metrics.error_rate = _.sum(_.map(dataElements, (element) => element.data.error_rate_out));

      const response_timings = _.map(dataElements, (element) => element.data.response_time_out).filter(isPresent);
      if (response_timings.length > 0) {
        metrics.response_time = aggregationFunction(response_timings);
      }

      const externalType = _(dataElements)
        .map((element) => element.data.type)
        .uniq()
        .value();

      if (externalType.length === 1) {
        node.data.external_type = externalType[0];
      }
    }

    // metrics which are same for internal and external nodes
    metrics.threshold = _(dataElements)
      .map((element) => element.data.threshold)
      .filter()
      .mean();

    if (sumMetrics) {
      const requestCount = _.defaultTo(metrics.rate, 0) + _.defaultTo(metrics.error_rate, 0);
      const response_time = _.defaultTo(metrics.response_time, -1);
      if (requestCount > 0 && response_time >= 0) {
        metrics.response_time = response_time / requestCount;
      }
    }

    const { rate, error_rate } = metrics;
    if (rate + error_rate > 0) {
      metrics.success_rate = (1.0 / (rate + error_rate)) * rate;
    } else {
      metrics.success_rate = 1.0;
    }

    nodeTree.addNode(node);
    this.nodeSubstitutor.add(node);
    return node;
  }

  _createMissingNodes(data: GraphDataElement[], nodes: IntGraphNode[]): IntGraphNode[] {
    const existingNodeNames = _.map(nodes, (node) => node.data.id);
    const expectedNodeNames = _.uniq(_.flatMap(data, (dataElement) => [dataElement.source, dataElement.target])).filter(
      isPresent
    );
    const missingNodeNames = _.difference(expectedNodeNames, existingNodeNames);
    const missingNodes = _.map(missingNodeNames, (name) => {
      let nodeType: EnGraphNodeType;
      let external_type: string | undefined;

      // derive node type
      let elementSrc = _.find(data, { source: name });
      let elementTrgt = _.find(data, { target: name });
      if (elementSrc && elementSrc.type === GraphDataType.EXTERNAL_IN) {
        nodeType = EnGraphNodeType.EXTERNAL;
        external_type = elementSrc.data.type;
      } else if (elementTrgt && elementTrgt.type === GraphDataType.EXTERNAL_OUT) {
        nodeType = EnGraphNodeType.EXTERNAL;
        external_type = elementTrgt.data.type;
      } else {
        nodeType = EnGraphNodeType.INTERNAL;
      }
      let value: IntGraphNode = {
        data: {
          id: name,
          type: nodeType,
          external_type: external_type,
          metrics: {},
          layer: 0,
        },
      };
      this.nodeSubstitutor.add(value);
      return value;
    });
    return missingNodes;
  }

  _createNodes(data: GraphDataElement[]): IntGraphNode[] {
    let tree = new NodeTree();
    const filteredData = _.filter(
      data,
      (dataElement) =>
        dataElement.source !== dataElement.target ||
        (_.has(dataElement, 'target') && !_.has(dataElement, 'target')) ||
        (!_.has(dataElement, 'target') && _.has(dataElement, 'target'))
    );

    const targetGroups = _.groupBy(filteredData, 'target');

    const explicitlyNamedNodes = _.map(targetGroups, (group) => this._createNode(group, tree)).filter(isPresent);

    // ensure that all nodes exist, even we have no data for them
    const missingNodes = this._createMissingNodes(filteredData, explicitlyNamedNodes);
    missingNodes.forEach((node) => tree.addNode(node));
    const allNodes = tree.getNodesFromLayer(this.controller.state.currentLayer);
    return allNodes;
  }

  _resolveSubstitute(name: string): string {
    return this.nodeSubstitutor.substituteUntilLayer(
      name,
      this.controller.state.currentLayer,
      this.controller.maxLayer
    );
  }

  _createEdge(dataElement: GraphDataElement): IntGraphEdge | undefined {
    let { source, target } = dataElement;
    if (source === undefined || target === undefined) {
      console.error('source and target are necessary to create an edge', dataElement);
      return undefined;
    }

    const metrics: IntGraphMetrics = {};

    source = this._resolveSubstitute(source);
    target = this._resolveSubstitute(target);
    if (source === target) {
      return undefined;
    }

    const edge: IntGraphEdge = {
      source: source,
      target: target,
      data: {
        source,
        target,
        metrics,
      },
    };

    const { rate_out, rate_in, error_rate_out, response_time_out } = dataElement.data;
    if (!_.isUndefined(rate_out)) {
      metrics.rate = rate_out;
    } else if (!_.isUndefined(rate_in)) {
      metrics.rate = rate_in;
    }
    if (!_.isUndefined(error_rate_out)) {
      metrics.error_rate = error_rate_out;
    }
    if (!_.isUndefined(response_time_out)) {
      const { sumTimings } = this.controller.getSettings(true);

      if (sumTimings && metrics.rate) {
        metrics.response_time = response_time_out / metrics.rate;
      } else {
        metrics.response_time = response_time_out;
      }
    }

    return edge;
  }

  _resolveEdgeMap(edges: IntGraphEdge[]) {
    let edgeMap: Map<string, IntGraphEdge[]> = new Map();
    edges.forEach((edge) => {
      if (edgeMap.get(edge.source + '-' + edge.target)) {
        edgeMap.get(edge.source + '-' + edge.target).push(edge);
      } else {
        edgeMap.set(edge.source + '-' + edge.target, [edge]);
      }
    });
    return edgeMap;
  }

  _mergeArrayOfEdges(edges: IntGraphEdge[]) {
    let errorRateCounter = 0;
    let rateCounter = 0;
    let responseTimeCounter = 0;
    let successRateCounter = 0;
    let thresholdCounter = 0;

    const mergedEdge: IntGraphEdge = {
      target: '',
      source: '',
      data: {
        source: '',
        target: '',
        metrics: {},
      },
    };
    edges.forEach((edge) => {
      if (mergedEdge.source === '') {
        mergedEdge.source = edge.source;
        mergedEdge.data.source = edge.data.source;
      }
      if (mergedEdge.target === '') {
        mergedEdge.target = edge.target;
        mergedEdge.data.target = edge.data.target;
      }
      if (edge.data.metrics.error_rate) {
        mergedEdge.data.metrics.error_rate = mergedEdge.data.metrics.error_rate
          ? mergedEdge.data.metrics.error_rate + edge.data.metrics.error_rate
          : (mergedEdge.data.metrics.error_rate = edge.data.metrics.error_rate);
        errorRateCounter++;
      }
      if (edge.data.metrics.rate) {
        mergedEdge.data.metrics.rate = mergedEdge.data.metrics.rate
          ? mergedEdge.data.metrics.rate + edge.data.metrics.rate
          : (mergedEdge.data.metrics.rate = edge.data.metrics.rate);
        rateCounter++;
      }
      if (edge.data.metrics.response_time) {
        mergedEdge.data.metrics.response_time = mergedEdge.data.metrics.response_time
          ? mergedEdge.data.metrics.response_time + edge.data.metrics.response_time
          : (mergedEdge.data.metrics.response_time = edge.data.metrics.response_time);
        responseTimeCounter++;
      }
      if (edge.data.metrics.success_rate) {
        mergedEdge.data.metrics.success_rate = mergedEdge.data.metrics.success_rate
          ? mergedEdge.data.metrics.success_rate + edge.data.metrics.success_rate
          : (mergedEdge.data.metrics.success_rate = edge.data.metrics.success_rate);
        successRateCounter++;
      }
      if (edge.data.metrics.threshold) {
        mergedEdge.data.metrics.threshold = mergedEdge.data.metrics.threshold
          ? mergedEdge.data.metrics.threshold + edge.data.metrics.threshold
          : (mergedEdge.data.metrics.threshold = edge.data.metrics.threshold);
        thresholdCounter++;
      }
    });

    if (mergedEdge.data.metrics.error_rate) {
      mergedEdge.data.metrics.error_rate = mergedEdge.data.metrics.error_rate / errorRateCounter;
    }
    if (mergedEdge.data.metrics.rate) {
      mergedEdge.data.metrics.rate = mergedEdge.data.metrics.rate / rateCounter;
    }
    if (mergedEdge.data.metrics.response_time) {
      mergedEdge.data.metrics.response_time = mergedEdge.data.metrics.response_time / responseTimeCounter;
    }
    if (mergedEdge.data.metrics.success_rate) {
      mergedEdge.data.metrics.success_rate = mergedEdge.data.metrics.success_rate / successRateCounter;
    }
    if (mergedEdge.data.metrics.threshold) {
      mergedEdge.data.metrics.threshold = mergedEdge.data.metrics.threshold / thresholdCounter;
    }

    return mergedEdge;
  }

  _edgeMapToMergedEdges(edgeMap: Map<string, IntGraphEdge[]>) {
    let edges: IntGraphEdge[] = [];
    for (const entry of edgeMap.values()) {
      edges.push(this._mergeArrayOfEdges(entry));
    }
    return edges;
  }

  _mergeEdges(edges: IntGraphEdge[]) {
    const edgeMap = this._resolveEdgeMap(edges);
    this._edgeMapToMergedEdges(edgeMap);

    return edges;
  }

  _createEdges(data: GraphDataElement[]): IntGraphEdge[] {
    const filteredData = _(data)
      .filter((e) => !!e.source)
      .filter((e) => e.source !== e.target)
      .filter((e) => e.target !== null || e.source !== null)
      .value();

    const edges = _.map(filteredData, (element) => this._createEdge(element));
    const filteredEdges = edges.filter(isPresent);
    return this._mergeEdges(filteredEdges);
  }

  _filterData(graph: IntGraph): IntGraph {
    const { filterEmptyConnections: filterData } = this.controller.getSettings(true);

    if (filterData) {
      const filteredGraph: IntGraph = {
        nodes: [],
        edges: [],
      };

      // filter empty connections
      filteredGraph.edges = _.filter(graph.edges, (edge) => _.size(edge.data.metrics) > 0);

      filteredGraph.nodes = _.filter(graph.nodes, (node) => {
        const id = node.data.id;

        // don't filter connected elements and parents
        if (
          _.some(graph.edges, { source: id }) ||
          _.some(graph.edges, { target: id }) ||
          node.data.type === EnGraphNodeType.PARENT
        ) {
          return true;
        }

        const metrics = node.data.metrics;
        if (!metrics) {
          return false; // no metrics
        }

        // only if rate, error rate or response time is available
        return (
          _.defaultTo(metrics.rate, -1) >= 0 ||
          _.defaultTo(metrics.error_rate, -1) >= 0 ||
          _.defaultTo(metrics.response_time, -1) >= 0
        );
      });

      return filteredGraph;
    } else {
      return graph;
    }
  }

  generateGraph(graphData: GraphDataElement[]): IntGraph {
    const nodes = this._createNodes(graphData);

    const edges = this._createEdges(graphData);
    const graph: IntGraph = {
      nodes,
      edges,
    };

    const filteredGraph = this._filterData(graph);
    return filteredGraph;
  }

  _updateMaxLayer(layer: number) {
    if (layer > this.controller.maxLayer) {
      this.controller.maxLayer = layer;
    }
  }
}

export default GraphGenerator;


================================================
FILE: src/processing/node_substitutor.ts
================================================
import _ from 'lodash';
import { IntGraphNode } from '../types';

class NodeSubstitutor {
  private _substitutionMap: any;

  constructor() {
    this._substitutionMap = new Map();
  }

  add(node: IntGraphNode) {
    const nameSpace = node.data.namespace;
    if (nameSpace && nameSpace.length > 0) {
      let currentValue = nameSpace;
      let currentKey = node.data.label;
      this._substitutionMap.set(currentKey, currentValue);
    }
  }

  substituteUntilLayer(nodeName: string, layer: number, maxLayer: number) {
    if (!this._substitutionMap.has(nodeName)) {
      return nodeName;
    }
    const nameSpace = this._substitutionMap.get(nodeName);
    const nsLeng = nameSpace.length;
    if (nsLeng - 1 < layer) {
      return nodeName;
    }

    return nameSpace[layer];
  }
}

export default NodeSubstitutor;


================================================
FILE: src/processing/node_tree.ts
================================================
import _ from 'lodash';
import { EnGraphNodeType, IntGraphMetrics, IntGraphNode, NodeTreeElement } from '../types';

class NodeTree {
  private _root: NodeTreeElement;
  private _metricMap: any;

  constructor() {
    this._root = { id: 'root', children: [] };
    this._metricMap = {};
  }

  addNode(node: IntGraphNode) {
    if (node.data.id !== 'undefined') {
      this._addNode({ id: node.data.id, node: node, children: [] }, this._root, 0);
    }
  }

  getNodesFromLayer(layer: number) {
    let nodes = this._getNodesFromLayer(this._root, layer, 0);
    nodes.forEach((element) => {
      if (this._metricMap[element.data.id]) {
        (Object.keys(element.data.metrics) as Array<keyof typeof element.data.metrics>).forEach(
          (key) => (element.data.metrics[key] = element.data.metrics[key] / this._metricMap[element.data.id][key])
        );
      }
    });
    return this._getNodesFromLayer(this._root, layer, 0);
  }

  getNamePath(namePath: string[]) {
    let currentLayer = this._root;
    namePath.forEach((element) => {
      currentLayer = this._getObjectFromArray(currentLayer.children, element);
    });
    return currentLayer;
  }

  private _getNodesFromLayer(currentNode: NodeTreeElement, layer: number, layerCounter: number): IntGraphNode[] {
    let children;
    if (layer === layerCounter) {
      children = currentNode.children.map((element) => element.node);
      if (currentNode !== this._root) {
        children.push(currentNode.node);
      }
      return children;
    }
    layerCounter++;
    children = _.flatten(currentNode.children.map((element) => this._getNodesFromLayer(element, layer, layerCounter)));
    if (currentNode !== this._root) {
      children.push(currentNode.node);
    }
    return children;
  }

  private _getNameSpaceFromCurrentLevel(namespace: string[], currentLevel: number) {
    let nameSpaces = [];
    for (let i = 0; i < currentLevel; i++) {
      nameSpaces.push(namespace[i]);
    }
    return nameSpaces;
  }

  private _sumMetrics(sourceNode: IntGraphNode, targetNode: IntGraphNode): IntGraphMetrics {
    const source = sourceNode.data.metrics;
    const target = targetNode.data.metrics;
    let metrics: IntGraphMetrics = {};
    if (!this._metricMap[targetNode.data.id]) {
      this._metricMap[targetNode.data.id] = {};
    }
    if (target.rate || source.rate) {
      metrics.rate = (target.rate ? target.rate : 0) + (source.rate ? source.rate : 0);
      if (target.rate && source.rate && !isNaN(target.rate) && !isNaN(source.rate)) {
        this._metricMap[targetNode.data.id].rate
          ? (this._metricMap[targetNode.data.id].rate = this._metricMap[targetNode.data.id].rate + 1)
          : (this._metricMap[targetNode.data.id].rate = 1);
      } else {
        if (!this._metricMap[targetNode.data.id].rate) {
          this._metricMap[targetNode.data.id].rate = 1;
        }
      }
    }

    if (target.response_time || source.response_time) {
      metrics.response_time =
        (target.response_time ? target.response_time : 0) + (source.response_time ? source.response_time : 0);
      if (
        target.response_time &&
        source.response_time &&
        !isNaN(target.response_time) &&
        !isNaN(source.response_time)
      ) {
        this._metricMap[targetNode.data.id].response_time
          ? (this._metricMap[targetNode.data.id].response_time = this._metricMap[targetNode.data.id].response_time + 1)
          : (this._metricMap[targetNode.data.id].response_time = 1);
      } else {
        if (!this._metricMap[targetNode.data.id].response_time) {
          this._metricMap[targetNode.data.id].response_time = 1;
        }
      }
    }

    if (target.success_rate || source.success_rate) {
      metrics.success_rate =
        (target.success_rate ? target.success_rate : 0) + (source.success_rate ? source.success_rate : 0);
      if (target.success_rate && source.success_rate && !isNaN(target.success_rate) && !isNaN(source.success_rate)) {
        this._metricMap[targetNode.data.id].success_rate
          ? (this._metricMap[targetNode.data.id].success_rate = this._metricMap[targetNode.data.id].success_rate + 1)
          : (this._metricMap[targetNode.data.id].success_rate = 1);
      } else {
        if (!this._metricMap[targetNode.data.id].success_rate) {
          this._metricMap[targetNode.data.id].success_rate = 1;
        }
      }
    }
    return metrics;
  }

  private _getObjectFromArray(array: NodeTreeElement[], id: string) {
    for (let i = 0; i < array.length; i++) {
      if (array[i].node.data.label === id) {
        return array[i];
      }
    }
    return undefined;
  }

  private _addNode(nodeToAdd: NodeTreeElement, currentLayerNode: NodeTreeElement, currentLevel: number) {
    const namespace = nodeToAdd.node.data.namespace;
    const namespaceLength = namespace ? namespace.length : 0;
    if (namespaceLength === currentLevel) {
      const possibleDuplicate = _.find(currentLayerNode.children, function (o) {
        return o.id === nodeToAdd.id;
      });
      if (possibleDuplicate) {
        //Object.assign(possibleDuplicate.node.data.metrics, nodeToAdd.node.data.metrics);
        //TODO: Copy/merge metrics
      } else {
        currentLayerNode.children.push(nodeToAdd);
      }
    } else {
      const nextLayerNode = this._getObjectFromArray(
        currentLayerNode.children,
        nodeToAdd.node.data.namespace[currentLevel]
      );
      if (nextLayerNode === undefined) {
        const children: NodeTreeElement[] = [];
        const newNode = {
          id: nodeToAdd.node.data.namespace[currentLevel],
          children: children,
          node: {
            data: {
              id: nodeToAdd.node.data.namespace[currentLevel],
              type: EnGraphNodeType.PARENT,
              label: nodeToAdd.node.data.namespace[currentLevel],
              parent: nodeToAdd.node.data.namespace[currentLevel - 1],
              namespace: this._getNameSpaceFromCurrentLevel(nodeToAdd.node.data.namespace, currentLevel),
              layer: currentLevel,
              metrics: {},
            },
          },
        };
        currentLayerNode.children.push(newNode);
        currentLevel++;
        newNode.node.data.metrics = this._sumMetrics(nodeToAdd.node, newNode.node);
        this._addNode(nodeToAdd, newNode, currentLevel);
      } else {
        const nextTopLayerNode = this._getObjectFromArray(
          currentLayerNode.children,
          nodeToAdd.node.data.namespace[currentLevel]
        );
        nextTopLayerNode.node.data.type = EnGraphNodeType.PARENT;
        nextTopLayerNode.node.data.metrics = this._sumMetrics(nodeToAdd.node, nextTopLayerNode.node);
        currentLevel++;
        this._addNode(nodeToAdd, nextTopLayerNode, currentLevel);
      }
    }
  }
}

export default NodeTree;


================================================
FILE: src/processing/pre_processor.ts
================================================
import { DataFrame } from '@grafana/data';
import _ from 'lodash';
import { PanelController } from '../panel/PanelController';
import { GraphDataElement, GraphDataType, CurrentData } from '../types';

class PreProcessor {
  controller: PanelController;

  constructor(controller: PanelController) {
    this.controller = controller;
  }

  _transformObjects(data: any[]): GraphDataElement[] {
    const {
      aggregationType,
      sourceColumn,
      targetColumn,
      extOrigin: externalSource,
      extTarget: externalTarget,
      namespaceDelimiter,
    } = this.controller.getSettings(true).dataMapping;

    const result = _.map(data, (dataObject) => {
      let source = _.has(dataObject, sourceColumn) && dataObject[sourceColumn] !== '';
      let target = _.has(dataObject, targetColumn) && dataObject[targetColumn] !== '';
      const extSource = _.has(dataObject, externalSource) && dataObject[externalSource] !== '';
      const extTarget = _.has(dataObject, externalTarget) && dataObject[externalTarget] !== '';

      let trueCount = [source, target, extSource, extTarget].filter((e) => e).length;

      if (trueCount > 1) {
        if (target && extTarget) {
          target = false;
        } else if (source && extSource) {
          source = false;
        } else {
          console.error('source-target conflict for data element', dataObject);
          return undefined;
        }
      }

      const result: GraphDataElement = {
        target: '',
        data: dataObject,
        type: GraphDataType.INTERNAL,
      };

      if (_.has(dataObject, 'namespace')) {
        const nameSpace = _.get(dataObject, 'namespace');
        if (nameSpace) {
          const namespaceResolved = nameSpace.split(namespaceDelimiter);
          result.namespace = namespaceResolved;
        }
      }

      if (trueCount === 0) {
        result.target = dataObject[aggregationType];
        result.type = GraphDataType.EXTERNAL_IN;
      } else {
        if (source || target) {
          if (source) {
            result.source = dataObject[sourceColumn];
            result.target = dataObject[aggregationType];
          } else {
            result.source = dataObject[aggregationType];
            result.target = dataObject[targetColumn];
          }

          if (result.source === result.target) {
            result.type = GraphDataType.SELF;
          }
        } else if (extSource) {
          result.source = dataObject[externalSource];
          result.target = dataObject[aggregationType];
          result.type = GraphDataType.EXTERNAL_IN;
        } else if (extTarget) {
          result.source = dataObject[aggregationType];
          result.target = dataObject[externalTarget];
          result.type = GraphDataType.EXTERNAL_OUT;
        }
      }
      return result;
    });

    const filteredResult: GraphDataElement[] = result.filter(
      (element): element is GraphDataElement => element !== null
    );
    return filteredResult;
  }

  _mergeGraphData(data: GraphDataElement[]): GraphDataElement[] {
    const groupedData = _.values(_.groupBy(data, (element) => element.source + '<--->' + element.target));

    const mergedData = _.map(groupedData, (group) => {
      return _.reduce(group, (result, next) => {
        return _.merge(result, next);
      });
    });

    return mergedData;
  }

  _cleanMetaData(columnMapping: any, metaData: any) {
    const result: any = {};

    _.forOwn(columnMapping, (value, key) => {
      if (_.has(metaData, value)) {
        result[key] = metaData[value];
      }
    });

    return result;
  }

  _extractColumnNames(data: GraphDataElement[]): string[] {
    const columnNames: string[] = _(data)
      .flatMap((dataElement) => _.keys(dataElement.data))
      .uniq()
      .sort()
      .value();

    return columnNames;
  }

  _getField(fieldName: string, fields: any[]) {
    for (const field of fields) {
      if (field.name === fieldName) {
        return field;
      }
    }
    return undefined;
  }

  _mergeSeries(series: any[]) {
    let mergedSeries: any = undefined;
    for (const seriesElement of series) {
      if (mergedSeries === undefined) {
        mergedSeries = seriesElement;
      } else {
        for (const field of seriesElement.fields) {
          const mergedField = this._getField(field.name, mergedSeries.fields);
          if (mergedField === undefined) {
            mergedSeries.fields.push(field);
          } else {
            mergedField.values = _.concat(field.values, mergedField.values);
          }
        }
      }
    }
    return mergedSeries;
  }

  _dataToRows(inputDataSets: any) {
    let rows: any[] = [];

    const {
      aggregationType,
      sourceColumn,
      targetColumn,
      namespaceColumn,
      extOrigin,
      extTarget,
      type,
      errorRateColumn,
      errorRateOutgoingColumn,
      responseTimeColumn,
      responseTimeOutgoingColumn,
      requestRateColumn,
      requestRateOutgoingColumn,
      baselineRtUpper,
    } = this.controller.getSettings(true).dataMapping;

    for (const inputData of inputDataSets) {
      const { fields } = inputData;
      const externalSourceField = _.find(fields, ['name', extOrigin]);
      const externalTargetField = _.find(fields, ['name', extTarget]);
      const aggregationSuffixField = _.find(fields, ['name', aggregationType]);

      const typeField = _.find(fields, ['name', type]);

      const sourceColumnField = _.find(fields, ['name', sourceColumn]);
      const targetColumnField = _.find(fields, ['name', targetColumn]);
      const namespaceColumnField = _.find(fields, ['name', namespaceColumn]);

      const errorRateColumnField = _.find(fields, ['name', errorRateColumn]);
      const errorRateOutgoingColumnField = _.find(fields, ['name', errorRateOutgoingColumn]);
      const responseTimeColumnField = _.find(fields, ['name', responseTimeColumn]);
      const responseTimeOutgoingColumnField = _.find(fields, ['name', responseTimeOutgoingColumn]);
      const requestRateColumnField = _.find(fields, ['name', requestRateColumn]);
      const requestRateOutgoingColumnField = _.find(fields, ['name', requestRateOutgoingColumn]);
      const responseTimeBaselineField = _.find(fields, ['name', baselineRtUpper]);

      for (let i = 0; i < inputData.length; i++) {
        const row: any = {};
        row[extOrigin] = externalSourceField?.values.get(i);
        row[extTarget] = externalTargetField?.values.get(i);
        row[aggregationType] = aggregationSuffixField?.values.get(i);
        row[sourceColumn] = sourceColumnField?.values.get(i);
        row[targetColumn] = targetColumnField?.values.get(i);
        row['namespace'] = namespaceColumnField?.values.get(i);
        row['error_rate_in'] = errorRateColumnField?.values.get(i);
        row['error_rate_out'] = errorRateOutgoingColumnField?.values.get(i);
        row['response_time_in'] = responseTimeColumnField?.values.get(i);
        row['response_time_out'] = responseTimeOutgoingColumnField?.values.get(i);
        row['rate_in'] = requestRateColumnField?.values.get(i);
        row['rate_out'] = requestRateOutgoingColumnField?.values.get(i);
        row['threshold'] = responseTimeBaselineField?.values.get(i);
        row['type'] = typeField?.values.get(i);
        // The above code returns { "": undefined } for values that do not exist.
        // These values are filtered by this line.
        Object.keys(row).forEach((key) => (row[key] === undefined || row[key] === '') && delete row[key]);
        rows.push(row);
      }
    }
    return rows;
  }

  _resolveData(row: any) {
    let source = _.has(row, 'sourceColumn') && row['sourceColumn'] !== '';
    let target = _.has(row, 'targetColumn') && row['targetColumn'] !== '';
    const extSource = _.has(row, 'extOrigin') && row['extOrigin'] !== '';
    const extTarget = _.has(row, 'extTarget') && row['extTarget'] !== '';
    let trueCount = [source, target, extSource, extTarget].filter((e) => e).length;

    if (trueCount > 1) {
      if (target && extTarget) {
        target = false;
      } else if (source && extSource) {
        source = false;
      } else {
        console.error('source-target conflict for data element', row);
        return;
      }
    }
    let resolvedObject: any = {
      data: row.data,
    };
    if (trueCount === 0) {
      resolvedObject.target = row['aggregationSuffix'];
      resolvedObject.type = GraphDataType.EXTERNAL_IN;
    } else {
      if (source || target) {
        if (source) {
          resolvedObject.source = row['sourceColumn'];
          resolvedObject.target = row['aggregationSuffix'];
          resolvedObject.type = GraphDataType.INTERNAL;
        } else {
          resolvedObject.source = row['aggregationSuffix'];
          resolvedObject.target = row['targetColumn'];
          resolvedObject.type = GraphDataType.INTERNAL;
        }

        if (resolvedObject.source === resolvedObject.target) {
          resolvedObject.type = GraphDataType.SELF;
        }
      } else if (extSource) {
        resolvedObject.source = row['externalSource'];
        resolvedObject.target = row['aggregationSuffix'];
        resolvedObject.type = GraphDataType.EXTERNAL_IN;
      } else if (extTarget) {
        resolvedObject.source = row['aggregationSuffix'];
        resolvedObject.target = row['externalTarget'];
        resolvedObject.type = GraphDataType.EXTERNAL_OUT;
      }
    }
    return resolvedObject;
  }

  _mergeObjects(rows: any[]) {
    let mergedObjects: any[] = [];

    for (const row of rows) {
      mergedObjects.push(row);
    }
    return mergedObjects;
  }

  processData(inputData: DataFrame[]): CurrentData {
    const rows = this._dataToRows(inputData);

    const flattenData = this._mergeObjects(rows);

    const graphElements = this._transformObjects(flattenData);

    const columnNames = this._extractColumnNames(graphElements);

    const mergedData = this._mergeGraphData(graphElements);

    return {
      graph: mergedData,
      raw: inputData,
      columnNames: columnNames,
    };
  }
}

export default PreProcessor;


================================================
FILE: src/processing/utils/Utils.ts
================================================
import _ from 'lodash';
import { DataMapping } from '../../types';
import { ServiceDependencyGraph } from 'panel/serviceDependencyGraph/ServiceDependencyGraph';

export function isPresent<T>(t: T | undefined | null | void): t is T {
  return t !== undefined && t !== null;
}

export default {
  getConfig: function (graph: ServiceDependencyGraph, configName: keyof DataMapping) {
    return graph.getSettings(true).dataMapping[configName];
  },
};


================================================
FILE: src/types.tsx
================================================
import { DataFrame } from '@grafana/data';

export interface PanelSettings {
  animate: boolean;
  sumTimings: boolean;
  filterEmptyConnections: boolean;
  style: PanelStyleSettings;
  showDebugInformation: boolean;
  showConnectionStats: boolean;
  icons: IconResource[];
  externalIcons: IconResource[];
  dataMapping: DataMapping;
  drillDownLink: string;
  showBaselines: boolean;
  timeFormat: string;
}

export interface DataMapping {
  aggregationType: string;
  sourceColumn: string;
  targetColumn: string;
  namespaceColumn: string;
  namespaceDelimiter: string;

  responseTimeColumn: string;
  requestRateColumn: string;
  errorRateColumn: string;
  responseTimeOutgoingColumn: string;
  requestRateOutgoingColumn: string;
  errorRateOutgoingColumn: string;

  extOrigin: string;
  extTarget: string;
  type: string;
  showDummyData: boolean;

  baselineRtUpper: string;
}

export interface PanelStyleSettings {
  healthyColor: string;
  dangerColor: string;
  noDataColor: string;
}

export interface IconResource {
  pattern: string;
  filename: string;
}

export interface QueryResponseColumn {
  type?: string;
  text: string;
}

export interface CyData {
  group: string;
  data: {
    id: string;
    source?: string;
    target?: string;
    metrics: IntGraphMetrics;
    type?: string;
    external_type?: string;
    layer?: number;
    namespace?: string[];
    parent?: string;
  };
}

export interface CurrentData {
  graph: GraphDataElement[];
  raw: DataFrame[];
  columnNames: string[];
}

export interface GraphDataElement {
  source?: string;
  target: string;
  data: DataElement;
  type: GraphDataType;
  namespace?: string[];
}

export interface DataElement {
  rate_in?: number;
  rate_out?: number;
  response_time_in?: number;
  response_time_out?: number;
  error_rate_in?: number;
  error_rate_out?: number;
  type?: string;
  threshold?: number;
}

export enum GraphDataType {
  SELF = 'SELF',
  INTERNAL = 'INTERNAL',
  EXTERNAL_OUT = 'EXTERNAL_OUT',
  EXTERNAL_IN = 'EXTERNAL_IN',
}

export interface IntGraph {
  nodes: IntGraphNode[];
  edges: IntGraphEdge[];
}

export interface IntGraphNode {
  data: IntGraphNodeData;
}

export interface IntGraphNodeData {
  id: string;
  type: EnGraphNodeType;
  metrics?: IntGraphMetrics;
  external_type?: string;
  label?: string;
  layer: number;
  namespace?: string[];
  parent?: string;
}

export interface IntGraphMetrics {
  rate?: number;
  error_rate?: number;
  response_time?: number;
  success_rate?: number;
  threshold?: number;
}

export enum EnGraphNodeType {
  INTERNAL = 'INTERNAL',
  EXTERNAL = 'EXTERNAL',
  PARENT = 'PARENT',
}

export interface IntGraphEdge {
  source: string;
  target: string;
  data: IntGraphEdgeData;
  metrics?: IntGraphMetrics;
}

export interface IntGraphEdgeData {
  source: string;
  target: string;
  metrics?: IntGraphMetrics;
}

export interface NodeTreeElement {
  id: string;
  node?: IntGraphNode;
  children: NodeTreeElement[];
}

export interface Particle {
  velocity: number;
  startTime: number;
}

export interface Particles {
  normal: Particle[];
  danger: Particle[];
}

export interface TableContent {
  name: string;
  responseTime: string;
  rate: string;
  error: string;
}

export interface IntSelectionStatistics {
  requests?: number;
  errors?: number;
  responseTime?: number;
  threshold?: number;
  thresholdViolation?: boolean;
}

export interface CyCanvas {
  getCanvas: () => HTMLCanvasElement;
  clear: (arg0: CanvasRenderingContext2D) => void;
  resetTransform: (arg0: CanvasRenderingContext2D) => void;
  setTransform: (arg0: CanvasRenderingContext2D) => void;
}

export interface IntTableHeader {
  text: string;
  dataField: string;
  isKey?: boolean;
  sort: boolean;
  headerClasses?: string;
  footerClasses?: string;
  classes?: string;
  sortFunc?: (a: string, b: string, order: string, _dataField: any, _rowA: any) => number;
  ignoreLiteral?: string;
}

export interface NodeData {
  name: string;
  time: string;
  requests: string;
  error_rate: string;
}

export interface ScaleValue {
  unit: string;
  factor: number;
}

export interface DrawContext {
  ctx: CanvasRenderingContext2D;
  now: number;
  xDirection: number;
  yDirection: number;
  xMinLimit: number;
  xMaxLimit: number;
  yMinLimit: number;
  yMaxLimit: number;
  sourcePoint: cytoscape.Position;
}

export interface Rectangle {
  coordinates: Point;
  height: number;
  width: number;
}

export interface Point {
  x: number;
  y: number;
}


================================================
FILE: src/typings/index.d.ts
================================================
declare module 'cytoscape-canvas';
declare module 'cytoscape-cola';
declare module 'human-format';
declare module 'react-bootstrap-table-next';
declare module 'react-icon-picker';


================================================
FILE: tsconfig.json
================================================
{
  "extends": "./.config/tsconfig.json",
  "include": ["src", "types"],
  "jsx": "react",
  "compilerOptions": {
    "strictNullChecks": false,
    "rootDir": "./src",
    "baseUrl": "./src",
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ]
  }
}