Update README.md

2021-09-11 13:27:58 +02:00 · 2021-05-02 18:07:16 +02:00 · 2021-05-02 18:02:51 +02:00 · 2021-04-27 19:22:55 +02:00 · 2021-04-27 19:20:40 +02:00 · 2021-03-23 17:51:46 +01:00
115 changed files with 1204 additions and 665 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,7 @@ node_modules

 # Build directories
 src/public/dist/local/bundle/
-src/public/dist/standalone-build/
+build/

 # example for dev
 # example-project
@@ -12,4 +12,4 @@ src/public/dist/standalone-build/
 .idea
 .DS_STORE

-yarn.lock
+yarn.lock
--- a/.npmignore
+++ b/.npmignore
@@ -1,4 +1,5 @@
 .idea
 example-project
 docs
-src/public/js
+src/public/js
+build
--- a/11
+++ b/11
@@ -0,0 +1,11 @@
+FROM node:14-slim
+
+WORKDIR /usr/src/codecrumbs
+
+COPY package*.json ./
+
+RUN yarn install
+
+COPY . .
+
+EXPOSE 2018 3018
--- a/README.md
+++ b/README.md
@@ -18,37 +18,51 @@
  <a href="#support">Support</a>
 </h3>

-## What
-> **Have you ever got lost in a big or unknown codebase?** This tool will help you to solve that. Also, it will increase your development speed and give more knowledge about your application architecture. 
->
->**How it works?** You run `codecrumbs` command for a codebase, it analyzes source code and builds its visual representation. Write down a codecrumb-comment and codebase state will be reflected by visual client in browser on the fly. 
->
-> Check out [my talk at React-Finland](https://www.youtube.com/watch?v=S_1-1jzLxm4) for more details.
->
->-[@bliashenko](https://twitter.com/bliashenko)    
+**Have you ever got lost in a big or unknown codebase?** This tool will help you to solve that. Also, it will increase your development speed and give more knowledge about your application architecture.
+> If you like this project, follow me on Twitter [@bliashenko](https://twitter.com/bliashenko) to hear about things I am building. 
+
+## Codecrumbs v2
+Check out new version of this project as [standalone application](https://codecrumbs.io). Just in a few clicks you can start exploring a codebase in more efficient way, create interactive visual guides and share them with others on your own blog! See [quick guide here](https://codecrumbs.io/guides/web-app-with-github/).
+
+<p align="center">
+  <a href="https://codecrumbs.io" target="_blank">
+   <img src="https://codecrumbs.io/external/img/common/app-ui-1.png" />
+  </a>
+</p>
+

 ## Demo
-Check out the example of [**standalone version running here**](https://codecrumbs.io/#showcase=todo-react-redux).
- 
+Check out prepared example for [**standalone version running here**](https://codecrumbs.io/app).
+
+## Codecrumbs v1
+
+>**How it works?** You run `codecrumbs` command for a codebase, it analyzes source code and builds its visual representation. Write down a codecrumb-comment and codebase state will be reflected by visual client in browser on the fly.
+>
+> Check out [my talk at React-Finland](https://www.youtube.com/watch?v=S_1-1jzLxm4) for more details.
+
+
 <img src="/docs/main-ui-3.png" width="100%"/>
- 
+
 ## Get started
 ### Install and run
->Pre-condition: update/install `NodeJS` version to be >= *8.11.1*  
- 
+>Pre-condition: update/install `NodeJS` version to be >= *8.11.1*
+
 1) Install ```codecrumbs``` globally (```yarn global add codecrumbs```)
 2) Run ```codecrumbs -d project-src-dir -e project-src-dir/index.js```. Change parameters to match your project:```-d``` is *directory with source code*, ```-e``` is *entry point file* .
 3) Go to [http://localhost:2018](http://localhost:2018/#) in the browser to check it out.

-### CLI
-Parameter | Description | Example
--- | --- | ---
-```-d```, ```--dir``` | Relative path to project source code directory | ```-d src```
-```-e```, ```--entry``` | Relative path to project source entry point file (must be inside ```dir```) | ```-e src/app.js```
-```-x```, ```--excludeDir``` | Relative path(or paths separated by ```,```) to directories for exclusion | ```-x src/doc,src/thirdparty```
-```-i```, ```--ideCmd``` | command to open file in IDE from bash (default 'webstorm') | ```-i code```
-```-p```, ```--port``` | Port for Codecrumbs client (optional, default *2018*) | ```-p 2019```
-```-n```, ```--projectName``` | Project name alias (optional, default same as ```-d``` value) | ```-n my-hello-world```
+### Configuration
+Run codecrumbs with CLI params or specify static config file `codecrumbs.config.js` (see example [here](/example-project/codecrumbs.config.js))
+
+CLI | Config file | Description | Example
+--- | --- | --- | ---
+```d``` | ```projectDir``` | Relative path to project source code directory | ```-d src```
+```e``` | ```entryPoint``` | Relative path to project source entry point file (must be inside ```dir```) | ```-e src/app.js```
+```x``` | ```excludeDir``` | Relative path(or paths separated by ```,```) to directories for exclusion | ```-x src/doc,src/thirdparty```
+```p``` | ```clientPort``` | Port for Codecrumbs client (optional, default *2018*) | ```-p 2019```
+```n``` | ```projectNameAlias``` | Project name alias (optional, default same as ```-d``` value) | ```-n my-hello-world```
+```C``` | - | Path to codecrumbs.config.js (optional, by default will try to find the file in PWD) | ```-C config/codecrumbs.config.js```
+```D``` | ```debugModeEnabled``` | Enable debug mode for logs (optional, default is ```false```) | ```-D```

 ## Features
 ### Breadcrumbs and trails
@@ -61,54 +75,51 @@ UI explained:
 - select connection between two steps (code for two codecrumbs will be opened in "Sidebar" under "Crumbs" tab)
 - set other options in dropdowns to configure behaviour of the diagram (show code blocks, details, etc.)

-**How to get there?** 
+**How to get there?**

 Leave breadcrumb in code by writing down a comment: ```//cc:[parameters;]```.

-```cc``` (stands for "CodeCrumb") is a prefix which used by the parser; check example of parameters in the table below:  
- 
+```cc``` (stands for "CodeCrumb") is a prefix which used by the parser; check example of parameters in the table below:
+
 Example | Description | Use case
 --- | --- | ---
 ```//cc:remember place``` | simple breadcrumb, ```remember place``` is a title of our first breadcrumb | Mark an important place to not forget where it was
 ```//cc:here is bug;well, seems like a bug in logic``` | simple breadcrumb, ```well, seems like a bug in logic``` is details for breadcrumb, separated by ```;``` | Add extra information, will be rendered in popups
 ```//cc:signin#3;enable route``` | trail of breadcrumbs,```signin``` is the **trail ID**, ```#3``` is order **number of step**, ```enable route``` is a title describing the step. | A sequence of codecrumbs, use to describe some data flow (e.g. user login, or form submit, etc.).
-```//cc:signin#1;firebase sign in;+2;do call to firebase with credentials``` | trail of breadcrumbs,```+2``` is number of lines to highlight, separated by ```;``` | Use number of lines to highlight the code related to breadcrumb 
+```//cc:signin#1;firebase sign in;+2;do call to firebase with credentials``` | trail of breadcrumbs,```+2``` is number of lines to highlight, separated by ```;``` | Use number of lines to highlight the code related to breadcrumb

-> Note: current version supports single line comments only. 
+> Note: current version supports single line comments only.
+
+> Hint: you can use trail id without step number (e.g. ```//cc:groupname#;test```) just to group breadcrumbs, you always can add step numbers later when you know the correct order. 

 ### Multi-codebase integration
 You might be interested to study connections between several codebases (sub-modules), codecrumbs supports that.
 Simply start codecrumbs multiple times (once for each codebase), it all **will be synced in one picture** inside the browser tab. To control a diagram UI - select it by clicking on it.

-E.g. for client-server application, go to the source directory for your server code and run `codecrumbs -e your-server-src/index.py -d your-server-src`, same for client `codecrumbs -e src-client/index.js -d src-client`. 
-> **Note:** codebases can be located wherever you want (**no** need to have them like mono-repo, etc.), simply run `codecrumbs` for directory you need.  
+E.g. for client-server application, go to the source directory for your server code and run `codecrumbs -e your-server-src/index.py -d your-server-src`, same for client `codecrumbs -e src-client/index.js -d src-client`.
+> **Note:** codebases can be located wherever you want (**no** need to have them like mono-repo, etc.), simply run `codecrumbs` for directory you need.

 <img src="/docs/multi-codebase-cc-2.png" width="100%"/>

 ### Multi-language support
-Current version supports next programming languages: 
+Current version supports next programming languages:
+- `C#`
+- `C++`
+- `Fortran`
+- `Go`
+- `Haskell`
+- `Java`
 - `JavaScript`
- `TypeScript`
+- `Kotlin`
+- `PHP`
 - `Python`
 - `Ruby`
- `PHP`
- `Java`
- `Kotlin`
- `C++`
- `C#`
- `Fortran`
- `Haskell`
+- `TypeScript`

 Please file an issue to support other language you would like to have.

-### Download & Upload (learn and share your knowledge)
-
-You can take a snapshot of application state at any point of time and share it with others. Simply download the json file of codecrumbs store (*top-right corner, "setup -> download"*). This json file can be then uploaded to codecrumbs (*top-right corner, "setup -> upload"*) to represent exactly same picture, even without having that project locally!
-
-<img src="/docs/upload-feature-2.gif" width="100%"/>
-
 ### Dependencies
-> Note: In current version only [JavaScript, TypeScript] offer this feature 
+> Note: In current version only [JavaScript, TypeScript] offer this feature

 <img src="/docs/dep-ui-2.png" width="100%"/>

@@ -118,24 +129,12 @@ UI explained:
 - select connection between modules (all involved files will be opened in "Sidebar", so you can see “what is imported” and “its implementation”)

 ### Flowchart
-> Note: In current version only JavaScript offers this feature 
+> Note: In current version only JavaScript offers this feature

 <img src="/docs/flow-ui.png" width="100%"/>

 [js2flowchart](https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart) is used in the sidebar to draw flowchart for the selected file code.

-### IDE integration
-> Check ```-i``` CLI param first to configure command.
-
-Navigate from browser to your code editor simply by clicking ```Command+click```(or ```Alt+click```) on a file or a codecrumb to open file in your IDE.
-
-<img src="/docs/ide-integration.gif" width="100%"/>
-
-## Case studies
-The tool (codecrumbs) allows us to learn, document and explain a codebase much faster. Also, with *Download & Upload* feature it becomes super easy to collect and share your "investigation results".
-
-The ultimate goal is to have many case studies hosting at [https://codecrumbs.io](https://codecrumbs.io/). **The library of projects "explained with codecrumbs", the place for collaborative learning**. More features around that coming soon, stay tuned. 
-
 ## Support
 Any support is very much appreciated! 👍 😘 ❤️
 If you like this project, please, **put a :star: and tweet about it**. Thanks!
@@ -144,7 +143,14 @@ Please, consider [making financial donation](https://opencollective.com/codecrum

 <a href="https://opencollective.com/codecrumbs/donate" target="_blank">
  <img src="https://opencollective.com/codecrumbs/donate/button@2x.png?color=blue" width=300 />
-</a>   
+</a>
+
+#### Sponsors
+Development supported by [0+X](https://0x.se)
+
+<a href="https://0x.se" target="_blank">
+  <img src="https://avatars0.githubusercontent.com/u/16350669?s=200&v=4" width=100 />
+</a>

 #### Backers
 <a href="https://opencollective.com/codecrumbs/backer/0/website" target="_blank"><img src="https://opencollective.com/codecrumbs/backer/0/avatar.svg"></a>
@@ -160,6 +166,4 @@ yarn && yarn start

 ## WIP
 Next features are developing:
- **eject codecrumbs** - ability to remove all "breadcrumbs" from source code in "one click"
- **data transferring between cc trail steps** 
- **VS Code extension** - some neat features right inside the code editor. Checkout [the repo here](https://github.com/Bogdan-Lyashenko/vs-code-codecrumbs). 
+- **VS Code extension** - some neat features right inside the code editor. Checkout [the repo here](https://github.com/Bogdan-Lyashenko/vs-code-codecrumbs).
--- a/cli/index.cli.js
+++ b/cli/index.cli.js
@@ -1,12 +1,17 @@
 #!/usr/bin/env node

+const path = require('path');
 const program = require('commander');
 const colors = require('colors');
+const _ = require('lodash');

+const showUpdatesInfo = require('./updatesInfo');
 const server = require('../src/server');

+showUpdatesInfo();
+
 program
-  .option('-e, --entry [entryFile]', 'Specify path to entry point file. E.g. `src/app.js`')
+  .option('-e, --entry [entryPoint]', 'Specify path to entry point file. E.g. `src/app.js`')
  .option('-d, --dir [projectDir]', 'Specify path to project source code directory. E.g. `src`', '')
  .option(
    '-w, --webpack [webpackConfigFile]',
@@ -20,27 +25,33 @@ program
  .option('-i, --ideCmd [ideCmd]', 'IDE command to open file')
  .option('-x, --excludeDir [excludeDirectories]', 'Exclude directories')
  .option('-n, --projectName [projectNameAlias]', 'Project name alias')
+  .option('-C, --configFile [pathToConfigFile]', 'Path to codecrumbs.config.js')
+  .option('-D, --debugModeEnabled [debugModeEnabled]', 'Enable debug mode for logs.')
  .parse(process.argv);

-if (!program.entry || !program.dir) {
+const pathToConfigFile = program.configFile || 'codecrumbs.config.js';
+const configFileExists = server.checkIfPathExists(pathToConfigFile);
+if ((!program.entry || !program.dir) && !configFileExists) {
  console.log(
    colors.magenta(
-      'Please specify `entry` and `dir` params. E.g. `codecrumbs -e src/app.js -d src`'
+      'Please specify `entryPoint` and `projectDir` params (e.g. `codecrumbs -e src/app.js -d src`). Or use `-C codecrumbs.config.js` instead.'
    )
  );
  process.exit();
 }

-server.setup(
-  {
-    projectNameAlias: program.projectName,
-    entryPoint: program.entry,
-    projectDir: program.dir,
-    webpackConfigPath: program.webpack,
-    tsConfigPath: program.tsconfig,
-    clientPort: program.port,
-    excludeDir: program.excludeDir,
-    ideCmd: program.ideCmd
-  },
-  { isDev: false }
-);
+const configFromFile = configFileExists ? require(path.resolve(pathToConfigFile)) : {};
+
+const configFromCLI = {
+  projectNameAlias: program.projectName,
+  entryPoint: program.entry,
+  projectDir: program.dir,
+  webpackConfigPath: program.webpack,
+  tsConfigPath: program.tsconfig,
+  clientPort: program.port,
+  excludeDir: program.excludeDir,
+  ideCmd: program.ideCmd,
+  debugModeEnabled: program.debugModeEnabled
+};
+
+server.setup(_.merge(configFromCLI, configFromFile), { isDev: false });
--- a/cli/updatesInfo.js
+++ b/cli/updatesInfo.js
@@ -0,0 +1,20 @@
+const colors = require('colors');
+const exec = require('child_process').exec;
+
+module.exports = () => {
+  try {
+    exec('npm outdated codecrumbs').stdout.on('data', function(data) {
+      const list = data
+        .split('  ')
+        .filter(v => !!v)
+        .map(v => v.trim());
+
+      const latestVersion = list[list.length - 2];
+      console.log(
+        colors.cyan.underline(
+          `There is new version of codecrumbs (${latestVersion}) available! Please update to have all latest features and improvements!`
+        )
+      );
+    });
+  } catch (e) {}
+};
--- a/docs/ide-integration.gif
+++ b/docs/ide-integration.gif
--- a/docs/upload-feature-2.gif
+++ b/docs/upload-feature-2.gif
--- a/example-project/codecrumbs.config.js
+++ b/example-project/codecrumbs.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  entryPoint: 'example-project/src-client/index.js',
+  projectDir: 'example-project/src-client',
+  clientPort: 1234,
+  projectNameAlias: 'example-project-for-client',
+  debugModeEnabled: true
+};
--- a/example-project/languages/go-lang.go
+++ b/example-project/languages/go-lang.go
@@ -0,0 +1,7 @@
+package main
+import "fmt"
+
+// cc:main function
+func main() {
+    fmt.Println("hello world")
+}
--- a/example-project/languages/lua-lang.lua
+++ b/example-project/languages/lua-lang.lua
@@ -0,0 +1,2 @@
+-- hello world program
+print ("Hello World!")
--- a/example-project/languages/ocaml.ml
+++ b/example-project/languages/ocaml.ml
@@ -0,0 +1,2 @@
+/* cc:main function */
+let hello = () => "Hello, World!";
--- a/example-project/languages/perl-lang.pl
+++ b/example-project/languages/perl-lang.pl
@@ -0,0 +1,7 @@
+#!/usr/bin/perl
+
+use strict;
+use warnings;
+
+# cc: main function.
+print "Hello, World!\n";
--- a/example-project/languages/ruby-lang.rb
+++ b/example-project/languages/ruby-lang.rb
@@ -1,3 +1,3 @@
 # cc:main function

-puts 'Hello, world!'
+puts 'Hello, world!'
--- a/example-project/src-php/Http/Controllers/CommentController.php
+++ b/example-project/src-php/Http/Controllers/CommentController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Http\Requests\CommentRequest;
+
+use App\Models\Post;
+use App\Models\Comment;
+use Auth;
+use Validator;
+
+class CommentController extends Controller
+{
+  function index()
+  {
+    // index
+  }
+}
--- a/example-project/src-php/Http/Controllers/PostController.php
+++ b/example-project/src-php/Http/Controllers/PostController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Http\Requests\PostRequest;
+use App\Models\Post;
+use App\Models\Category;
+use Hashids\Hashids;
+use Illuminate\Support\Facades\Auth;
+
+class PostController extends Controller
+{
+    public function index()
+    {
+      // index
+    }
+}
--- a/example-project/src-php/Http/Requests/PostRequest.php
+++ b/example-project/src-php/Http/Requests/PostRequest.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+use App\Rules\Category;
+
+
+class PostRequest extends FormRequest
+{
+    public function authorize()
+    {
+      // authorize
+    }
+}
--- a/example-project/src-php/Models/Category.php
+++ b/example-project/src-php/Models/Category.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Category extends Model
+{
+    public function posts()
+    {
+      // posts
+    }
+}
--- a/example-project/src-php/Models/Post.php
+++ b/example-project/src-php/Models/Post.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Post extends Model
+{
+    public function user()
+    {
+      // user
+    }
+}
--- a/example-project/src-php/index.php
+++ b/example-project/src-php/index.php
@@ -0,0 +1,7 @@
+<?php
+
+namespace App;
+
+use App\Http\Controllers\CommentController;
+use App\Http\Controllers\PostController;
+use App\Http\Requests\PostRequest;
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "codecrumbs",
-  "version": "1.6.2",
+  "version": "1.8.3",
  "author": "Bohdan Liashenko",
  "license": "BSD-3-Clause",
  "repository": {
@@ -13,11 +13,11 @@
    "server:two": "node src/index.dev.js two",
    "client-dev": "cd src/public && webpack --config webpack.dev.js --progress --colors --watch --env dev",
    "server-dev": "nodemon src/index.dev.js",
+    "server:cli": "node cli/index.cli.js -e example-project/src-client/index.js -d example-project/src-client/",
    "server-debug": "nodemon --inspect src/index.dev.js",
-    "clean": "rm -rf src/public/dist/standalone-build",
-    "babel-compile-standalone": "babel src/public/js -d src/public/dist/standalone-build --config-file ./src/public/babel.config.js --copy-files",
+    "clean": "rm -rf build",
    "webpack-compile-local": "cd src/public && webpack --config webpack.local.js --progress",
-    "build": "yarn clean && yarn babel-compile-standalone && yarn webpack-compile-local",
+    "build": "yarn clean && yarn webpack-compile-local",
    "pretty": "prettier  --write \"./src/public/js/**/*.js\""
  },
  "bin": {
@@ -35,14 +35,15 @@
    "d3-flextree": "^2.1.1",
    "directory-tree": "^2.1.0",
    "file-saver": "^2.0.0",
-    "http-server": "^0.11.1",
-    "js2flowchart": "^1.1.7",
+    "http-server": "0.9.0",
+    "js2flowchart": "1.3.2",
    "lodash": "^4.17.10",
    "lodash.debounce": "^4.0.8",
-    "madge": "^3.3.0",
+    "madge": "^3.4.4",
+    "php-parser": "^3.0.2",
    "portscanner": "^2.2.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
    "react-redux": "^5.0.7",
    "react-syntax-highlighter": "8.0.1",
    "redux": "^4.0.0",
@@ -56,6 +57,7 @@
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.1.0",
--- a/src/index.dev.js
+++ b/src/index.dev.js
@@ -5,7 +5,8 @@ const namespaceOne = {
  projectDir: `example-project/src-client`,
  entryPoint: `example-project/src-client/index.js`,
  webpackConfigPath: `example-project/webpack.config.js`,
-  clientPort: 2018
+  clientPort: 2018,
+  debugModeEnabled: true
 };

 const namespaceTwo = {
@@ -23,6 +24,13 @@ const namespaceTypeScriptExample = {
  clientPort: 2018
 };

+const namespacePhpExample = {
+  projectNameAlias: 'php-example-server',
+  projectDir: `example-project/src-php`,
+  entryPoint: `example-project/src-php/index.php`,
+  clientPort: 2018
+};
+
 const namespaceDebug = {
  projectNameAlias: 'debug',
  projectDir: `example-project/debug`,
@@ -40,7 +48,8 @@ const namespaceLanguageTest = {
 const args = process.argv.slice(2);
 const namespaces = {
  two: namespaceTwo,
-  ts: namespaceTypeScriptExample
+  ts: namespaceTypeScriptExample,
+  php: namespacePhpExample
 };
 const namespace = namespaces[args[0]] !== undefined ? namespaces[args[0]] : namespaceOne;
 server.setup(namespace, { isDev: true });
--- a/src/public/babel.config.js
+++ b/src/public/babel.config.js
@@ -20,6 +20,7 @@ module.exports = function(app) {
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-transform-runtime',
+    '@babel/plugin-proposal-class-properties',
    [
      'transform-define',
      {
--- a/src/public/js/App.js
+++ b/src/public/js/App.js
@@ -22,9 +22,7 @@ const ExplorerBar = React.lazy(() =>
  import(/* webpackChunkName: "explorer-bar" */ './components/explorerBar/ExplorerBarContainer')
 );

-const Footer = React.lazy(() =>
-  import(/* webpackChunkName: "explorer-bar" */ './components/footer')
-);
+const Footer = React.lazy(() => import(/* webpackChunkName: "footer" */ './components/footer'));

 import './App.less';

--- a/src/public/js/components/explorerBar/component/ExplorerBar.js
+++ b/src/public/js/components/explorerBar/component/ExplorerBar.js
@@ -1,7 +1,7 @@
 import React from 'react';

-import Tree from 'antd/es/tree'
-import 'antd/es/tree/style'
+import Tree from 'antd/es/tree';
+import 'antd/es/tree/style';

 import { FILE_NODE_TYPE } from '../../../core/constants';
 import './ExplorerBar.less';
--- a/src/public/js/components/sideBar/component/Code/index.js
+++ b/src/public/js/components/sideBar/component/Code/index.js
@@ -11,7 +11,7 @@ const PADDING_TOP = 5;
 //TODO: add select with several themes
 //TODO: scrool to/highlight crumbed lines
 //https://github.com/conorhastings/react-syntax-highlighter/blob/master/README.md
-export default class extends React.Component {
+export default class extends React.PureComponent {
  fixScroll() {
    const { dependenciesLines = [], crumbedLines = [], lineHeight } = this.props;
    if (!this.codeRef || !this.codeRef.scrollTo) {
@@ -28,6 +28,7 @@ export default class extends React.Component {
      this.codeRef.scrollTo(0, (lines[0][0] - 1) * (lineHeight || LINE_HEIGHT) + PADDING_TOP - 2);
  }
  componentDidUpdate(prevProps) {
+    // TODO: don\t do it each time (check real changes)
    this.fixScroll();
  }
  componentDidMount() {
--- a/src/public/js/components/sideBar/component/CrumbsTab/index.js
+++ b/src/public/js/components/sideBar/component/CrumbsTab/index.js
@@ -1,15 +1,14 @@
 import React from 'react';
 import { connect } from 'react-redux';

-import Collapse from 'antd/es/collapse'
-import 'antd/es/collapse/style'
-import Alert from 'antd/es/alert'
-import 'antd/es/alert/style'
+import Collapse from 'antd/es/collapse';
+import 'antd/es/collapse/style';
+import Alert from 'antd/es/alert';
+import 'antd/es/alert/style';

 import { NO_TRAIL_FLOW } from '../../../../shared-constants';
 import { getCodeCrumbsUserChoice } from '../../../../core/dataBus/selectors';
-import { getNamespacesList } from '../../../../core/dataBus/selectors';
-import { gatherFlowStepsData } from '../../../treeDiagram/component/Tree/CodeCrumbs/helpers';
+import { getSharedFlowStepsData } from '../../../../core/namespaceIntegration/selectors';

 import Code from '../Code';
 import './index.less';
@@ -34,7 +33,7 @@ const CrumbsTab = props => {
                header={`[${typeof stepFile.step !== 'undefined' ? stepFile.step : '*'}] ${
                  stepFile.file.path
                }`}
-                key={i}
+                key={stepFile.crumbNodeLines.join(',')}
              >
                <Code
                  language={language}
@@ -58,7 +57,6 @@ const CrumbsTab = props => {
 };

 const mapStateToProps = (state, props) => {
-  const namespacesList = getNamespacesList(state);
  const { namespace } = props;

  const {
@@ -69,10 +67,7 @@ const mapStateToProps = (state, props) => {
    namespace
  });

-  const { involvedNsData, sortedFlowSteps } = gatherFlowStepsData(state, {
-    currentSelectedCrumbedFlowKey,
-    namespacesList
-  });
+  const { involvedNsData, sortedFlowSteps } = getSharedFlowStepsData(state);

  if (currentSelectedCrumbedFlowKey === NO_TRAIL_FLOW) {
    return {
--- a/src/public/js/components/sideBar/component/DependenciesTab/index.js
+++ b/src/public/js/components/sideBar/component/DependenciesTab/index.js
@@ -1,12 +1,16 @@
 import React from 'react';
 import { connect } from 'react-redux';

-import Collapse from 'antd/es/collapse'
-import 'antd/es/collapse/style'
-import Alert from 'antd/es/alert'
-import 'antd/es/alert/style'
+import Collapse from 'antd/es/collapse';
+import 'antd/es/collapse/style';
+import Alert from 'antd/es/alert';
+import 'antd/es/alert/style';

-import { getSource, getSourceUserChoice, getDependenciesUserChoice } from '../../../../core/dataBus/selectors';
+import {
+  getSource,
+  getSourceUserChoice,
+  getDependenciesUserChoice
+} from '../../../../core/dataBus/selectors';

 import Code from '../Code';
 import {
--- a/src/public/js/components/sideBar/component/FlowChartTab/index.js
+++ b/src/public/js/components/sideBar/component/FlowChartTab/index.js
@@ -1,9 +1,9 @@
 import React from 'react';

-import Alert from 'antd/es/alert'
-import 'antd/es/alert/style'
-import Spin from 'antd/es/spin'
-import 'antd/es/spin/style'
+import Alert from 'antd/es/alert';
+import 'antd/es/alert/style';
+import Spin from 'antd/es/spin';
+import 'antd/es/spin/style';

 import './index.less';

--- a/src/public/js/components/sideBar/component/SideBar.js
+++ b/src/public/js/components/sideBar/component/SideBar.js
@@ -1,11 +1,11 @@
 import React, { Suspense } from 'react';

-import Tabs from 'antd/es/tabs'
-import 'antd/es/tabs/style'
-import Skeleton from 'antd/es/skeleton'
-import 'antd/es/skeleton/style'
-import Alert from 'antd/es/alert'
-import 'antd/es/alert/style'
+import Tabs from 'antd/es/tabs';
+import 'antd/es/tabs/style';
+import Skeleton from 'antd/es/skeleton';
+import 'antd/es/skeleton/style';
+import Alert from 'antd/es/alert';
+import 'antd/es/alert/style';

 import { Copy } from '../../topBar/controls/Copy';

--- a/src/public/js/components/topBar/controls/Copy/index.js
+++ b/src/public/js/components/topBar/controls/Copy/index.js
@@ -1,7 +1,7 @@
 import React from 'react';

-import Icon from 'antd/es/icon'
-import 'antd/es/icon/style'
+import Icon from 'antd/es/icon';
+import 'antd/es/icon/style';

 import copy from 'copy-text-to-clipboard';

--- a/src/public/js/components/topBar/controls/FlowSelect/index.js
+++ b/src/public/js/components/topBar/controls/FlowSelect/index.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { connect } from 'react-redux';

-import Menu from 'antd/es/menu'
-import 'antd/es/menu/style'
-import Dropdown from 'antd/es/dropdown'
-import 'antd/es/dropdown/style'
-import Button from 'antd/es/button'
-import 'antd/es/button/style'
+import Menu from 'antd/es/menu';
+import 'antd/es/menu/style';
+import Dropdown from 'antd/es/dropdown';
+import 'antd/es/dropdown/style';
+import Button from 'antd/es/button';
+import 'antd/es/button/style';

 import { NO_TRAIL_FLOW } from '../../../../core/constants';
 import { selectCodeCrumbedFlow } from '../../../../core/dataBus/actions';
--- a/src/public/js/components/topBar/controls/SettingsControl/index.js
+++ b/src/public/js/components/topBar/controls/SettingsControl/index.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import { connect } from 'react-redux';

-import Menu from 'antd/es/menu'
-import 'antd/es/menu/style'
-import Dropdown from 'antd/es/dropdown'
-import 'antd/es/dropdown/style'
-import Icon from 'antd/es/icon'
-import 'antd/es/icon/style'
-import Button from 'antd/es/button'
-import 'antd/es/button/style'
-import Upload from 'antd/es/upload'
-import 'antd/es/upload/style'
+import Menu from 'antd/es/menu';
+import 'antd/es/menu/style';
+import Dropdown from 'antd/es/dropdown';
+import 'antd/es/dropdown/style';
+import Icon from 'antd/es/icon';
+import 'antd/es/icon/style';
+import Button from 'antd/es/button';
+import 'antd/es/button/style';
+import Upload from 'antd/es/upload';
+import 'antd/es/upload/style';

 import { downloadStore, uploadStore } from '../../../../core/dataBus/actions';
 import './index.less';
--- a/src/public/js/components/topBar/controls/ViewSwitches/Item/ViewSwitch.js
+++ b/src/public/js/components/topBar/controls/ViewSwitches/Item/ViewSwitch.js
@@ -1,18 +1,18 @@
 import React from 'react';

-import Switch from 'antd/es/switch'
-import 'antd/es/switch/style'
-import Menu from 'antd/es/menu'
-import 'antd/es/menu/style'
-import Dropdown from 'antd/es/dropdown'
-import 'antd/es/dropdown/style'
-import Icon from 'antd/es/icon'
-import 'antd/es/icon/style'
+import Switch from 'antd/es/switch';
+import 'antd/es/switch/style';
+import Menu from 'antd/es/menu';
+import 'antd/es/menu/style';
+import Dropdown from 'antd/es/dropdown';
+import 'antd/es/dropdown/style';
+import Icon from 'antd/es/icon';
+import 'antd/es/icon/style';

 import { VIEW_TYPES } from '../../../../../core/controlsBus/constants';
 import './ViewSwitch.less';

-class ViewSwitch extends React.Component {
+class ViewSwitch extends React.PureComponent {
  renderMenu() {
    const {
      name,
@@ -78,7 +78,7 @@ class ViewSwitch extends React.Component {
  }

  render() {
-    const { name, itemKey, subMenuItems, checkedState, toggleSwitch } = this.props;
+    const { name, itemKey, subMenuItems, checkedState, disabledState, toggleSwitch } = this.props;

    return (
      <div className="ViewSwitchItem">
@@ -92,6 +92,7 @@ class ViewSwitch extends React.Component {
            size="small"
            checked={checkedState[itemKey]}
            onChange={v => toggleSwitch(itemKey, v)}
+            disabled={disabledState[itemKey]}
          />
        </div>
      </div>
--- a/src/public/js/components/topBar/controls/ViewSwitches/List/ViewSwitchList.less
+++ b/src/public/js/components/topBar/controls/ViewSwitches/List/ViewSwitchList.less
@@ -17,7 +17,7 @@
  }

  .settingContainer {
-    display: flex;
+    display: none;
    flex-direction: row;

    .spacer {
@@ -26,4 +26,4 @@
      border-left: 1px solid #d9d9d9;
    }
  }
-}
+}
--- a/src/public/js/components/topBar/controls/ViewSwitches/ViewSwitchesContainer.js
+++ b/src/public/js/components/topBar/controls/ViewSwitches/ViewSwitchesContainer.js
@@ -6,7 +6,11 @@ import { getProjectMetadata } from '../../../../core/dataBus/selectors';

 import { CONTROLS_KEYS } from '../../../../core/controlsBus/constants';
 import { toggleSwitch, fireButtonAction } from '../../../../core/controlsBus/actions';
-import { getSwitches, getCheckedState, getDisabledState } from '../../../../core/controlsBus/selectors';
+import {
+  getSwitches,
+  getCheckedState,
+  getDisabledState
+} from '../../../../core/controlsBus/selectors';

 import ViewSwitchList from './List/ViewSwitchList';

--- a/src/public/js/components/topBar/controls/ZoomControl/index.js
+++ b/src/public/js/components/topBar/controls/ZoomControl/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';

-import Button from 'antd/es/button'
-import 'antd/es/button/style'
+import Button from 'antd/es/button';
+import 'antd/es/button/style';

 const ButtonGroup = Button.Group;

--- a/src/public/js/components/topBar/subPanel/SubPanelContainer.js
+++ b/src/public/js/components/topBar/subPanel/SubPanelContainer.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';

-import Icon from 'antd/es/icon'
-import 'antd/es/icon/style'
-import Breadcrumb from 'antd/es/breadcrumb'
-import 'antd/es/breadcrumb/style'
+import Icon from 'antd/es/icon';
+import 'antd/es/icon/style';
+import Breadcrumb from 'antd/es/breadcrumb';
+import 'antd/es/breadcrumb/style';

 import { FILE_NODE_TYPE } from '../../../core/constants/index';
 import { Copy } from '../controls/Copy/index';
--- a/src/public/js/components/treeDiagram/TreeDiagamsContainer.less
+++ b/src/public/js/components/treeDiagram/TreeDiagamsContainer.less
@@ -1,6 +1,8 @@
 .TreeDiagramsContainer {
  overflow: auto;
  width: 100%;
+  margin-top: 20px;
+  margin-left: 10px;
 }

 .MainLoader {
@@ -10,4 +12,4 @@
  padding: 250px;
  margin-top: 60px;
  width: 100%;
-}
+}
--- a/src/public/js/components/treeDiagram/TreeDiagramsContainer.js
+++ b/src/public/js/components/treeDiagram/TreeDiagramsContainer.js
@@ -24,6 +24,7 @@ const TreeDiagramsContainer = ({ namespacesList, activeNamespace }) => {
    );
  }

+  // TODO: use ref for TreeDiagram container (on mount set it to store)
  return (
    <div className={'TreeDiagramsContainer'}>
      {namespacesList.map(namespace => (
--- a/src/public/js/components/treeDiagram/component/Edge/index.less
+++ b/src/public/js/components/treeDiagram/component/Edge/index.less
@@ -22,7 +22,7 @@
 }

 .Animation {
-  @extend .FadeIn;
+  &:extend(.FadeIn);
 }

 .DependenciesEdge {
@@ -35,7 +35,7 @@
 }

 .CodeCrumbEdge {
-  @extend .FadeIn;
+  &:extend(.FadeIn);

  fill: none;
  stroke: #8c8b8b;
--- a/src/public/js/components/treeDiagram/component/Icons/index.less
+++ b/src/public/js/components/treeDiagram/component/Icons/index.less
@@ -1,7 +1,7 @@
@import "../animcations.less";

 .Animation {
-  @extend .FadeIn;
+  &:extend(.FadeIn);
 }

 .CursorPointer {
--- a/src/public/js/components/treeDiagram/component/Node/CodeCrumb.js
+++ b/src/public/js/components/treeDiagram/component/Node/CodeCrumb.js
@@ -13,6 +13,7 @@ export const CodeCrumbName = props => {
    cover,
    flow,
    flowStep,
+    original,
    selected,
    onMouseOver,
    onClick
@@ -73,7 +74,7 @@ export const CodeCrumbName = props => {
            onClick={onClick}
            className={'CodeCrumbName-flow'}
          >
-            {flowStep}
+            {flowStep !== 0 ? flowStep : /#0/.test(original) ? 0 : '*'}
          </text>
        </React.Fragment>
      )) ||
--- a/src/public/js/components/treeDiagram/component/Node/Folder.js
+++ b/src/public/js/components/treeDiagram/component/Node/Folder.js
@@ -1,10 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { FOLDER_OPEN_STATE } from '../../../../core/constants';
-import {
-  OpenFolder as OpenFolderIcon,
-  CloseFolder as CloseFolderIcon
-} from '../Icons/Folder';
+import { OpenFolder as OpenFolderIcon, CloseFolder as CloseFolderIcon } from '../Icons/Folder';

 import './index.less';
 import { SYMBOL_WIDTH } from '../constants';
--- a/src/public/js/components/treeDiagram/component/Node/index.less
+++ b/src/public/js/components/treeDiagram/component/Node/index.less
@@ -1,11 +1,11 @@
@import "../animcations.less";

 .CodeCrumbNode {
-  @extend .FadeIn;
+  &:extend(.FadeIn);
 }

 .FileNode, .FolderNode {
-  @extend .FadeIn;
+  &:extend(.FadeIn);
  cursor: pointer;
 }

--- a/src/public/js/components/treeDiagram/component/StandalonePlaceholder/index.js
+++ b/src/public/js/components/treeDiagram/component/StandalonePlaceholder/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';

-import Upload from 'antd/es/upload'
-import 'antd/es/upload/style'
-import Icon from 'antd/es/icon'
-import 'antd/es/icon/style'
+import Upload from 'antd/es/upload';
+import 'antd/es/upload/style';
+import Icon from 'antd/es/icon';
+import 'antd/es/icon/style';

 import { uploadStore } from '../../../../core/dataBus/actions';
 import './index.less';
--- a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/ExtraInfo/index.js
+++ b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/ExtraInfo/index.js
@@ -34,31 +34,64 @@ const DetailsComponent = props => {
  );
 };

-const CodeComponent = props => {
-  const { position, crumbNodeLines, file, language, namespace } = props;
-  const { fileCode } = file.data;
+const ccUnderlayPaddingH = 20;
+class CodeComponent extends React.PureComponent {
+  state = {};

-  return (
-    <div
-      className={'CcCodeContainer'}
-      style={{
-        left: position.x,
-        top: position.y
-      }}
-    >
-      <Suspense fallback={null}>
-        <Code
-          namespace={namespace}
-          language={language}
-          code={fileCode}
-          fontSize={10}
-          lineHeight={15}
-          crumbedLines={[crumbNodeLines]}
+  onMouseEnter = () => {
+    this.setState({ isExpanded: true });
+  };
+
+  onMouseLeave = () => {
+    this.setState({ isExpanded: false });
+  };
+
+  render() {
+    const { position, crumbNodeLines, file, language, namespace } = this.props;
+    const { fileCode, path, name } = file.data;
+    const { isExpanded } = this.state;
+
+    return (
+      <React.Fragment>
+        <div
+          className={classNames('CcCodeContainer', { CcCodeContainerExpanded: isExpanded })}
+          style={{
+            left: position.x,
+            top: position.y
+          }}
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
+        >
+          <div className={'FilePath'}>
+            <span>{path.replace(name, '')}</span>
+            <span>
+              <b>{name}</b>
+            </span>
+          </div>
+          <Suspense fallback={null}>
+            <Code
+              namespace={namespace}
+              language={language}
+              code={fileCode}
+              fontSize={10}
+              lineHeight={15}
+              crumbedLines={[crumbNodeLines]}
+            />
+          </Suspense>
+        </div>
+        <div
+          style={{
+            left: position.x - ccUnderlayPaddingH,
+            top: position.y
+          }}
+          className={classNames('CcCodeContainerUnderlay', {
+            CcCodeContainerUnderlayExpanded: isExpanded
+          })}
        />
-      </Suspense>
-    </div>
-  );
-};
+      </React.Fragment>
+    );
+  }
+}

 const ExtraInfoSet = ({
  detailsEnabled,
@@ -73,7 +106,7 @@ const ExtraInfoSet = ({
  namespace,
  language
 }) => {
-  if (!detailsEnabled && !codePreviewEnabled) return null;
+  if ((!detailsEnabled && !codePreviewEnabled) || !sortedFlowSteps) return null;

  const crumbs = sortedFlowSteps.length ? sortedFlowSteps : flowSteps;
  return (
--- a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/ExtraInfo/index.less
+++ b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/ExtraInfo/index.less
@@ -12,10 +12,45 @@
  border-top: 1px solid #754BC3;
 }

+@CcCodeContainerWidth: 650px;
 .CcCodeContainer {
  position: absolute;
  border: 1px solid #e8e8e8;
-  width: 650px;
+  width: @CcCodeContainerWidth;
  background: rgba(255,255,255,0.9);
  height: 80px;
+  transition: height .1s;
+  overflow: hidden;
+  z-index: 1;
+
+  .FilePath {
+    border-bottom: 1px solid #ebedf0;
+    font-size: 11px;
+    padding: 1px 5px;
+  }
+}
+
+@CcCodeContainerExpandedHeight: 300px;
+.CcCodeContainerExpanded {
+  height: @CcCodeContainerExpandedHeight;
+  transition: height .1s;
+  z-index: 9;
+}
+
+@ccUnderlayPaddingH: 20px;
+.CcCodeContainerUnderlay {
+  width: (@CcCodeContainerWidth + 2 * @ccUnderlayPaddingH);
+  height: 0;
+  position: absolute;
+  background-color: rgba(255,255,255,0.3);
+  transition: height, background-color .1s;
+}
+
+@ccUnderlayPaddingV: 70px;
+.CcCodeContainerUnderlayExpanded {
+  background-color: rgba(251,251,251,0.85);
+  width: (@CcCodeContainerWidth + 2 * @ccUnderlayPaddingH);
+  height: (@CcCodeContainerExpandedHeight + @ccUnderlayPaddingV);
+  transition: height, background-color .1s;
+  z-index: 2;
 }
--- a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/FlowEdge.js
+++ b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/FlowEdge.js
@@ -1,9 +1,6 @@
 import React from 'react';

-import {
-  CodeCrumbedFlowEdge,
-  ExternalEdge
-} from '../../../component/Edge/CodeCrumbEdge';
+import { CodeCrumbedFlowEdge, ExternalEdge } from '../../../component/Edge/CodeCrumbEdge';
 import { isCodeCrumbsEqual, getCcPosition } from './helpers';

 export default props => {
@@ -20,6 +17,10 @@ export default props => {
    selectedCcFlowEdgeNodes
  } = props;

+  if (!involvedNsData || !involvedNsData[namespace]) {
+    return null;
+  }
+
  const { codecrumbsLayoutMap } = involvedNsData[namespace];
  const ccNamespacesKeys = Object.keys(involvedNsData || {});

@@ -30,7 +31,11 @@ export default props => {
          if (!i) return null;

          const fromItem = list[i - 1];
-          if (fromItem.namespace !== namespace && toItem.namespace !== namespace) {
+
+          if (
+            (fromItem.namespace !== namespace && toItem.namespace !== namespace) ||
+            fromItem.step === toItem.step
+          ) {
            return null;
          }

@@ -41,7 +46,7 @@ export default props => {
          });

          const edgeBaseProps = {
-            key: `cc-external-edge-${fromItem.name}-${toItem.name}`,
+            key: `cc-external-edge-${fromItem.name}-${toItem.name}-${edgePoints[0].y}`,
            sourcePosition: edgePoints[0],
            targetPosition: edgePoints[1],
            onClick: () => onFlowEdgeClick(fromItem, toItem, ccNamespacesKeys),
--- a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/Tree.js
+++ b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/Tree.js
@@ -7,6 +7,7 @@ import { isCodeCrumbSelected, getCcPosition } from './helpers';

 const Tree = props => {
  const {
+    sourceDiagramOn,
    ccAlightPoint,
    ccShiftIndexMap,
    shiftToCenterPoint,
@@ -19,6 +20,10 @@ const Tree = props => {
    selectedCcFlowEdgeNodes
  } = props;

+  if (!ccShiftIndexMap) {
+    return null;
+  }
+
  return (
    <React.Fragment>
      {Object.keys(codecrumbsLayoutMap).map(key => {
@@ -40,7 +45,7 @@ const Tree = props => {
          ).x;

        return (
-          <React.Fragment key={`code-crumb-${node.data.path}-${key}`}>
+          <React.Fragment key={`code-crumb-${key}-${nX}-${nY}`}>
            {!codeCrumbsMinimize &&
              node.children.map((crumb, i) => {
                const [_, cY] = [crumb.y, crumb.x];
@@ -55,22 +60,26 @@ const Tree = props => {
                const ccParams = crumbData.params;

                return (
-                  <React.Fragment key={`code-crumb-edge-${file.path}-${crumbData.name}`}>
-                    {!i && (
-                      <PartEdge
-                        sourcePosition={position}
-                        parentName={file.name}
-                        ccAlightPoint={crumbPosition.x}
-                        singleCrumb={singleCrumb}
-                      />
-                    )}
-                    {!singleCrumb && (
-                      <CodeCrumbMultiEdge
-                        sourcePosition={position}
-                        targetPosition={crumbPosition}
-                        ccAlightPoint={i && firstCrumbXPoint}
-                      />
-                    )}
+                  <React.Fragment
+                    key={`code-crumb-edge-${crumbData.name}-${crumbPosition.x}-${crumbPosition.y}`}
+                  >
+                    {!i &&
+                      sourceDiagramOn && (
+                        <PartEdge
+                          sourcePosition={position}
+                          parentName={file.name}
+                          ccAlightPoint={crumbPosition.x}
+                          singleCrumb={singleCrumb}
+                        />
+                      )}
+                    {!singleCrumb &&
+                      sourceDiagramOn && (
+                        <CodeCrumbMultiEdge
+                          sourcePosition={position}
+                          targetPosition={crumbPosition}
+                          ccAlightPoint={i && firstCrumbXPoint}
+                        />
+                      )}
                    <CodeCrumbName
                      position={crumbPosition}
                      loc={codeCrumbsLineNumbers ? crumbData.displayLoc : ''}
@@ -84,6 +93,7 @@ const Tree = props => {
                        currentSelectedCrumbedFlowKey !== NO_TRAIL_FLOW
                      }
                      flowStep={ccParams.flowStep}
+                      original={ccParams.original}
                      onClick={e => onCodeCrumbSelect(e, { fileNode: file, codeCrumb: crumbData })}
                    />
                  </React.Fragment>
--- a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/helpers.js
+++ b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/helpers.js
@@ -1,6 +1,3 @@
-import { getCodeCrumbsUserChoice, getSourceLayout } from '../../../../../core/dataBus/selectors';
-import { NO_TRAIL_FLOW } from '../../../../../core/constants';
-
 export const isCodeCrumbsEqual = (cc, currentCc) =>
  cc.name === currentCc.name && cc.flowStep === currentCc.flowStep;

@@ -13,100 +10,4 @@ export const isCodeCrumbSelected = (selectedCcFlowEdgeNodes, cc) => {
  );
 };

-const stepSorter = (a, b) => a.step - b.step;
-
-const getFlowSteps = ({
-  namespace,
-  codeCrumbedFlowsMap,
-  selectedCrumbedFlowKey,
-  codecrumbsLayoutMap
-}) => {
-  const currentFlow = codeCrumbedFlowsMap[selectedCrumbedFlowKey] || {};
-
-  return Object.keys(currentFlow).reduce((flowSteps, filePath) => {
-    const steps = ((codecrumbsLayoutMap[filePath] && codecrumbsLayoutMap[filePath].children) || [])
-      .filter(({ data }) => data.params.flow === selectedCrumbedFlowKey)
-      .map(({ data, x, y }) => ({
-        ...data,
-        namespace,
-        filePath,
-        step: data.params.flowStep,
-        flow: selectedCrumbedFlowKey,
-        x,
-        y
-      }));
-
-    return [...flowSteps, ...steps];
-  }, []);
-};
-
-const createCcShiftIndexMap = sortedFlowSteps => {
-  const ccMap = {};
-  let shiftOrderIndex = 0;
-
-  sortedFlowSteps.forEach((crumb, i, list) => {
-    if (!i) {
-      ccMap[crumb.id] = shiftOrderIndex;
-      return;
-    }
-
-    if (crumb.x < list[i - 1].x) {
-      shiftOrderIndex++;
-    }
-
-    ccMap[crumb.id] = shiftOrderIndex;
-  });
-
-  return ccMap;
-};
-
-export const gatherFlowStepsData = (state, { namespacesList, currentSelectedCrumbedFlowKey }) => {
-  const flowStepsData = namespacesList.reduce(
-    (acc, ns) => {
-      const namespaceProps = { namespace: ns };
-      const { selectedCrumbedFlowKey, codeCrumbedFlowsMap } = getCodeCrumbsUserChoice(
-        state,
-        namespaceProps
-      );
-
-      if (currentSelectedCrumbedFlowKey !== selectedCrumbedFlowKey) {
-        return acc;
-      }
-
-      const { codecrumbsLayoutMap, ccAlightPoint } = getSourceLayout(state, namespaceProps);
-
-      const flowSteps = getFlowSteps({
-        namespace: ns,
-        codeCrumbedFlowsMap,
-        selectedCrumbedFlowKey,
-        codecrumbsLayoutMap
-      });
-
-      return {
-        flowSteps,
-        sortedFlowSteps:
-          selectedCrumbedFlowKey !== NO_TRAIL_FLOW
-            ? [...acc.sortedFlowSteps, ...flowSteps].sort(stepSorter)
-            : [],
-        involvedNsData: {
-          ...acc.involvedNsData,
-          [ns]: { codecrumbsLayoutMap, ccAlightPoint }
-        }
-      };
-    },
-    { involvedNsData: {}, flowSteps: [], sortedFlowSteps: [] }
-  );
-
-  return {
-    ...flowStepsData,
-    ccShiftIndexMap: createCcShiftIndexMap(flowStepsData.sortedFlowSteps)
-  };
-};
-
 export const getCcPosition = (x, index = 0) => x + 70 * index;
-
-export const getMaxWidthForNs = (state, { namespacesList }) =>
-  namespacesList.reduce((maxWidth, namespace) => {
-    const { layoutSize } = getSourceLayout(state, { namespace });
-    return layoutSize && layoutSize.width > maxWidth ? layoutSize.width : maxWidth;
-  }, 0);
--- a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js
+++ b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js
@@ -7,14 +7,18 @@ import {
  getCodeCrumbsUserChoice,
  getNamespacesList
 } from '../../../../../core/dataBus/selectors';
-import { selectCodeCrumb, selectNodeToOpenInEditor, selectCcFlowEdge } from '../../../../../core/dataBus/actions';
+import {
+  selectCodeCrumb,
+  selectNodeToOpenInEditor,
+  selectCcFlowEdge
+} from '../../../../../core/dataBus/actions';
 import { getCheckedState } from '../../../../../core/controlsBus/selectors';

 import Tree from './Tree';
 import FlowEdges from './FlowEdge';

 const mapStateToProps = (state, props) => {
-  const { codeCrumbsMinimize, codeCrumbsLineNumbers } = getCheckedState(state);
+  const { codeCrumbsMinimize, codeCrumbsLineNumbers, sourceDiagramOn } = getCheckedState(state);

  const namespacesList = getNamespacesList(state);

@@ -31,6 +35,7 @@ const mapStateToProps = (state, props) => {
  });

  return {
+    sourceDiagramOn,
    codecrumbsLayoutMap,
    ccAlightPoint,
    filesMap,
--- a/src/public/js/components/treeDiagram/component/Tree/Dependencies/index.js
+++ b/src/public/js/components/treeDiagram/component/Tree/Dependencies/index.js
@@ -1,28 +1,21 @@
 import React from 'react';
 import { connect } from 'react-redux';

-import {
-  DependenciesEdge,
-  DependenciesArrow
-} from '../../Edge/DepenenciesEdge';
-import { FileName } from '../../../component/Node/File';
+import { DependenciesEdge, DependenciesArrow } from '../../Edge/DepenenciesEdge';
 import { selectDependencyEdge } from '../../../../../core/dataBus/actions';
 import {
  getSourceLayout,
  getSourceUserChoice,
  getDependenciesUserChoice
 } from '../../../../../core/dataBus/selectors';
-import { getCheckedState } from '../../../../../core/controlsBus/selectors';

 import { getGroupsAroundNode, checkIsEdgeSelected } from './utils';

 const DependenciesTree = props => {
  const {
-    language,
    selectedNode,
    filesLayoutMap,
    shiftToCenterPoint,
-    sourceDiagramOn,
    onDependencyEdgeClick,
    selectedDependencyEdgeNodes
  } = props;
@@ -36,28 +29,19 @@ const DependenciesTree = props => {
    <React.Fragment>
      {selectedNodeDependencies &&
        [selectedNodeDependencies].map(({ moduleName, importedModuleNames }) => {
-          const moduleNode = filesLayoutMap[moduleName];
+          const moduleNode = filesLayoutMap[selectedNode.path];
          if (!moduleNode) return null;

-          const { name, path } = moduleNode.data;
          const [mX, mY] = [moduleNode.y, moduleNode.x];
          const targetPosition = shiftToCenterPoint(mX, mY);
-          const sourceNodes = [];
-          if (!sourceDiagramOn) {
-            // TODO: un sync with FileName in SourceTree, duplication
-            sourceNodes.push(
-              <FileName
-                language={language}
-                key={path}
-                position={targetPosition}
-                name={name}
-                dependency={true}
-              />
-            );
-          }

          const importedNodes = importedModuleNames
-            .map(name => filesLayoutMap[name])
+            .map(moduleName => {
+              const key = Object.keys(selectedNode.dependencies).find(key => {
+                return selectedNode.dependencies[key].moduleName === moduleName
+              })
+              return filesLayoutMap[key]
+            })
            .filter(node => !!node);

          const edges = [];
@@ -75,15 +59,15 @@ const DependenciesTree = props => {
              groupNodes.forEach((importedNode, i) => {
                const [iX, iY] = [importedNode.y, importedNode.x];
                const sourcePosition = shiftToCenterPoint(iX, iY);
-                const { path: importedNodePath, name } = importedNode.data;
+                const { path: importedNodePath } = importedNode.data;

                const selected =
                  selectedDependencyEdgeNodes &&
-                  checkIsEdgeSelected(selectedDependencyEdgeNodes, moduleName, importedNodePath);
+                  checkIsEdgeSelected(selectedDependencyEdgeNodes, selectedNode.path, importedNodePath);

                const edge = (
                  <DependenciesEdge
-                    key={`dep-edge-${importedNodePath}`}
+                    key={`dep-edge-${importedNodePath}-${sourcePosition.x}-${targetPosition.x}`}
                    anyEdgeSelected={!!selectedDependencyEdgeNodes}
                    selected={selected}
                    groupName={groupName}
@@ -92,7 +76,7 @@ const DependenciesTree = props => {
                    firstSourcePosition={i ? firstSourcePosition : null}
                    onClick={() =>
                      onDependencyEdgeClick({
-                        target: moduleName,
+                        target: selectedNode.path,
                        sources: [importedNodePath],
                        groupName
                      })
@@ -109,7 +93,7 @@ const DependenciesTree = props => {

                  const arrow = (
                    <DependenciesArrow
-                      key={`dep-arrow-${importedNodePath}`}
+                      key={`dep-arrow-${importedNodePath}-${groupName}`}
                      selected={arrowSelected}
                      groupName={groupName}
                      targetPosition={targetPosition}
@@ -117,18 +101,6 @@ const DependenciesTree = props => {
                  );
                  arrowSelected ? selectedEdges.push(arrow) : edges.push(arrow);
                }
-
-                if (!sourceDiagramOn) {
-                  sourceNodes.push(
-                    <FileName
-                      key={importedNodePath}
-                      language={language}
-                      position={sourcePosition}
-                      name={name}
-                      dependency={true}
-                    />
-                  );
-                }
              });
            }
          );
@@ -137,7 +109,6 @@ const DependenciesTree = props => {
            <React.Fragment key={moduleName}>
              {edges}
              {selectedEdges}
-              {sourceNodes}
            </React.Fragment>
          );
        })}
@@ -146,8 +117,6 @@ const DependenciesTree = props => {
 };

 const mapStateToProps = (state, props) => {
-  const { sourceDiagramOn } = getCheckedState(state);
-
  const { namespace } = props;
  const namespaceProps = { namespace };
  const { filesLayoutMap } = getSourceLayout(state, namespaceProps);
@@ -155,7 +124,6 @@ const mapStateToProps = (state, props) => {
  const { selectedDependencyEdgeNodes } = getDependenciesUserChoice(state, namespaceProps);

  return {
-    sourceDiagramOn,
    filesLayoutMap,
    selectedNode,
    selectedDependencyEdgeNodes
--- a/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js
+++ b/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js
@@ -60,7 +60,7 @@ const SourceTree = props => {

        const edge = (
          <SourceEdge
-            key={`source-edge-${path}`}
+            key={`source-edge-${path}-${sourcePosition.x}-${sourcePosition.y}`}
            targetPosition={position}
            sourcePosition={sourcePosition}
            disabled={sourceDimFolders}
@@ -77,7 +77,13 @@ const SourceTree = props => {
        (type === FILE_NODE_TYPE &&
          !(dependenciesDiagramOn && selectedNode.dependencies && selectedNode.dependencies[path]))
      ) {
-        sourceDotes.push(<Dot key={`dot-${path}`} position={position} selected={selected} />);
+        sourceDotes.push(
+          <Dot
+            key={`dot-${path}-${position.x}-${position.y}`}
+            position={position}
+            selected={selected}
+          />
+        );
      }

      let nodeBasedOnType = null;
@@ -108,7 +114,7 @@ const SourceTree = props => {
              selectedNodeDependencies[path] &&
              !selectedNodeDependencies[path].importedModuleNames.length
            }
-            onNodeClick={e => onFileNodeClick(e, fileNode)}
+            onNodeClick={e => selectedNode !== fileNode && onFileNodeClick(e, fileNode)}
          />
        );
      } else if (type === DIR_NODE_TYPE) {
--- a/src/public/js/components/treeDiagram/component/Tree/Source/index.js
+++ b/src/public/js/components/treeDiagram/component/Tree/Source/index.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';

-import { selectNode, selectNodeToOpenInEditor, toggleFolder } from '../../../../../core/dataBus/actions';
+import {
+  selectNode,
+  selectNodeToOpenInEditor,
+  toggleFolder
+} from '../../../../../core/dataBus/actions';
 import {
  getSource,
  getSourceLayout,
--- a/src/public/js/components/treeDiagram/component/TreeDiagram.js
+++ b/src/public/js/components/treeDiagram/component/TreeDiagram.js
@@ -8,18 +8,23 @@ import { UnderLayer } from './UnderLayer';
 import './TreeDiagram.less';

 import { buildShiftToPoint } from '../../../core/dataBus/utils/geometry';
-import {
-  getProjectMetadata,
-  getSourceLayout,
-  getCodeCrumbsUserChoice,
-  getNamespacesList
-} from '../../../core/dataBus/selectors';
+import { getProjectMetadata, getSourceLayout } from '../../../core/dataBus/selectors';
 import { getCheckedState, getValuesState } from '../../../core/controlsBus/selectors';
-import { selectDependencyEdge, selectCcFlowEdge } from '../../../core/dataBus/actions';
+import {
+  selectDependencyEdge,
+  selectCcFlowEdge,
+  saveTreeDiagramContentId
+} from '../../../core/dataBus/actions';
 import { setActiveNamespace } from '../../../core/namespaceIntegration/actions';
-import { gatherFlowStepsData, getMaxWidthForNs } from './Tree/CodeCrumbs/helpers';
+import { getSharedFlowStepsData } from '../../../core/namespaceIntegration/selectors';
+
+class TreeDiagram extends React.PureComponent {
+  componentDidUpdate(prevProps) {
+    if (!prevProps.layoutSize && this.props.layoutSize) {
+      this.props.saveContentId(this.treeDiagramContent.getAttribute('id'));
+    }
+  }

-class TreeDiagram extends React.Component {
  render() {
    // TODO: fix diagramZoom
    const {
@@ -50,7 +55,7 @@ class TreeDiagram extends React.Component {
    });

    return (
-      <div className={'TreeDiagram'}>
+      <div className={classNames('TreeDiagram', { border: multiple })}>
        {multiple ? (
          <p
            className={classNames('namespaceTitle', {
@@ -60,35 +65,41 @@ class TreeDiagram extends React.Component {
            {projectName}
          </p>
        ) : null}
-        <svg
-          width={maxWidth || width}
-          height={height}
-          xmlns="http://www.w3.org/2000/svg"
-          shapeRendering="optimizeSpeed"
+        <div
+          id={`TreeDiagram-${namespace}-content`}
+          className={'content'}
+          ref={el => (this.treeDiagramContent = el)}
        >
-          {sourceLayoutTree && (
-            <React.Fragment>
-              <UnderLayer width={maxWidth || width} height={height} onClick={onUnderLayerClick} />
-              <SourceTree
-                namespace={namespace}
-                shiftToCenterPoint={shiftToCenterPoint}
-                areaHeight={height}
-                sortedFlowSteps={sortedFlowSteps}
-                involvedNsData={involvedNsData}
-                ccShiftIndexMap={ccShiftIndexMap}
-              />
-            </React.Fragment>
-          )}
-        </svg>
-        {codeCrumbsDiagramOn ? (
-          <CodeCrumbsExtraInfo
-            namespace={namespace}
-            shiftToCenterPoint={shiftToCenterPoint}
-            ccShiftIndexMap={ccShiftIndexMap}
-            sortedFlowSteps={sortedFlowSteps}
-            flowSteps={flowSteps}
-          />
-        ) : null}
+          <svg
+            width={maxWidth || width}
+            height={height}
+            xmlns="http://www.w3.org/2000/svg"
+            shapeRendering="optimizeSpeed"
+          >
+            {sourceLayoutTree && (
+              <React.Fragment>
+                <UnderLayer width={maxWidth || width} height={height} onClick={onUnderLayerClick} />
+                <SourceTree
+                  namespace={namespace}
+                  shiftToCenterPoint={shiftToCenterPoint}
+                  areaHeight={height}
+                  sortedFlowSteps={sortedFlowSteps}
+                  involvedNsData={involvedNsData}
+                  ccShiftIndexMap={ccShiftIndexMap}
+                />
+              </React.Fragment>
+            )}
+          </svg>
+          {codeCrumbsDiagramOn ? (
+            <CodeCrumbsExtraInfo
+              namespace={namespace}
+              shiftToCenterPoint={shiftToCenterPoint}
+              ccShiftIndexMap={ccShiftIndexMap}
+              sortedFlowSteps={sortedFlowSteps}
+              flowSteps={flowSteps}
+            />
+          ) : null}
+        </div>
      </div>
    );
  }
@@ -105,31 +116,7 @@ const mapStateToProps = (state, props) => {
  const { diagramZoom } = getValuesState(state);
  const { codeCrumbsDiagramOn } = getCheckedState(state);

-  let extendedCcProps = {};
-  if (codeCrumbsDiagramOn) {
-    const codeCrumbsUserChoice = getCodeCrumbsUserChoice(state, {
-      namespace
-    });
-
-    const namespacesList = getNamespacesList(state);
-    const { flowSteps, sortedFlowSteps, involvedNsData, ccShiftIndexMap } = gatherFlowStepsData(
-      state,
-      {
-        currentSelectedCrumbedFlowKey: codeCrumbsUserChoice.selectedCrumbedFlowKey,
-        namespacesList
-      }
-    );
-
-    const maxWidth = getMaxWidthForNs(state, { namespacesList });
-
-    extendedCcProps = {
-      flowSteps,
-      sortedFlowSteps,
-      involvedNsData,
-      ccShiftIndexMap,
-      maxWidth
-    };
-  }
+  const extendedCcProps = codeCrumbsDiagramOn ? getSharedFlowStepsData(state) : {};

  return {
    namespace,
@@ -149,7 +136,8 @@ const mapDispatchToProps = (dispatch, props) => {
      dispatch(setActiveNamespace(namespace));
      dispatch(selectDependencyEdge(undefined, namespace));
      dispatch(selectCcFlowEdge(undefined, namespace));
-    }
+    },
+    saveContentId: ref => dispatch(saveTreeDiagramContentId(ref, namespace))
  };
 };

--- a/src/public/js/components/treeDiagram/component/TreeDiagram.less
+++ b/src/public/js/components/treeDiagram/component/TreeDiagram.less
@@ -5,7 +5,10 @@
  margin: 0;
  padding: 0;
  overflow-y: hidden;
-  border-bottom: 1px solid #ebedf0;
+
+  &.border {
+    border-bottom: 1px solid #ebedf0;
+  }

  .namespaceTitle {
    position: absolute;
@@ -14,6 +17,7 @@
    left: 0;
    z-index: 2;
    border-left: 1px solid #ebedf0;
+    background: rgba(255,255,255,0.8);
    font-size: 11px;

    &.activeTreeDiagram {
@@ -22,7 +26,9 @@
    }
  }

-  svg {
-    display: block;
+  .content {
+    svg {
+      display: block;
+    }
  }
 }
--- a/src/public/js/core/constants/index.js
+++ b/src/public/js/core/constants/index.js
@@ -1,4 +1,5 @@
 export {
+  CC_NODE_TYPE,
  FILE_NODE_TYPE,
  DIR_NODE_TYPE,
  SOCKET_MESSAGE_TYPE,
--- a/src/public/js/core/controlsBus/actions.js
+++ b/src/public/js/core/controlsBus/actions.js
@@ -24,3 +24,8 @@ export const setZoom = payload => ({
  type: ACTIONS.SET_ZOOM,
  payload
 });
+
+export const setFullState = payload => ({
+  type: ACTIONS.SET_FULL_STATE,
+  payload
+});
--- a/src/public/js/core/dataBus/actions.js
+++ b/src/public/js/core/dataBus/actions.js
@@ -7,8 +7,11 @@ import { getFoldersForPaths, downloadObjectAsJsonFile, uploadFileAsObject } from
 import {
  getTreeLayout,
  getFilesForCurrentCcFlow,
-  getCodeCrumbsMapForCurrentCcFlow
+  getCodeCrumbsMapForCurrentCcFlow,
+  getFileNodesMap,
+  getCodecrumbNodesMap
 } from './utils/treeLayout';
+import { calculateLayoutProps } from './utils/geometry';

 import { ACTIONS } from './constants';
 import {
@@ -155,6 +158,7 @@ export const calcFilesTreeLayoutNodes = namespace => (dispatch, getState) => {
  );

  const {
+    sourceDiagramOn,
    codeCrumbsDiagramOn,
    codeCrumbsMinimize,
    codeCrumbsDetails,
@@ -172,16 +176,30 @@ export const calcFilesTreeLayoutNodes = namespace => (dispatch, getState) => {
    });
  }

+  const sourceLayoutTree = getTreeLayout(sourceTree, {
+    includeFileChildren: codeCrumbsDiagramOn && !codeCrumbsMinimize,
+    extraSpaceForDetails: codeCrumbsDetails,
+    extraSpaceForCodePreview: codeCrumbsCodePreview,
+    openedFolders,
+    activeItemsMap,
+    activeCodeCrumbs
+  });
+
+  const filesLayoutMap = getFileNodesMap(sourceLayoutTree);
+  const codecrumbsLayoutMap = getCodecrumbNodesMap(filesLayoutMap);
+  const { ccAlightPoint, ...layoutSize } = calculateLayoutProps(sourceLayoutTree, {
+    sourceDiagramOn
+  });
+
  return dispatch({
    type: ACTIONS.UPDATE_FILES_TREE_LAYOUT_NODES,
-    payload: getTreeLayout(sourceTree, {
-      includeFileChildren: codeCrumbsDiagramOn && !codeCrumbsMinimize,
-      extraSpaceForDetails: codeCrumbsDetails,
-      extraSpaceForCodePreview: codeCrumbsCodePreview,
-      openedFolders,
-      activeItemsMap,
-      activeCodeCrumbs
-    }),
+    payload: {
+      sourceLayoutTree,
+      filesLayoutMap,
+      codecrumbsLayoutMap,
+      ccAlightPoint,
+      layoutSize
+    },
    namespace
  });
 };
@@ -339,3 +357,19 @@ export const setPredefinedState = predefinedState => dispatch => {
    }, 100 * i);
  });
 };
+
+export const saveTreeDiagramContentId = (payload, namespace) => ({
+  type: ACTIONS.SAVE_TREE_DIAGRAM_CONTENT_ID,
+  payload,
+  namespace
+});
+
+export const setFullState = payload => ({
+  type: ACTIONS.SET_FULL_STATE,
+  payload
+});
+
+export const setNamespaceState = payload => ({
+  type: ACTIONS.SET_NAMESPACE_STATE,
+  payload
+});
--- a/src/public/js/core/dataBus/constants.js
+++ b/src/public/js/core/dataBus/constants.js
@@ -1,5 +1,7 @@
 export const ACTIONS = {
  SET_INITIAL_SOURCE_DATA: 'DATA_BUS.SET_INITIAL_SOURCE_DATA',
+  SET_FULL_STATE: 'DATA_BUS.SET_FULL_STATE',
+  SET_NAMESPACE_STATE: 'DATA_BUS.SET_NAMESPACE_STATE',
  RESET_ALL: 'DATA_BUS.RESET_ALL',
  SET_CHANGED_SOURCE_DATA: 'DATA_BUS.SET_CHANGED_SOURCE_DATA',
  UPDATE_FILES_TREE_LAYOUT_NODES: 'DATA_BUS.UPDATE_FILES_TREE_LAYOUT_NODES',
@@ -14,5 +16,6 @@ export const ACTIONS = {
  SET_DEPENDENCIES_ENTRY_POINT: 'DATA_BUS.SET_DEPENDENCIES_ENTRY_POINT',
  SELECT_DEPENDENCY_EDGE: 'DATA_BUS.SELECT_DEPENDENCY_EDGE',
  SELECT_CC_FLOW_EDGE: 'DATA_BUS.SELECT_CC_FLOW_EDGE',
-  UPDATE_FILES: 'DATA_BUS.UPDATE_FILES'
+  UPDATE_FILES: 'DATA_BUS.UPDATE_FILES',
+  SAVE_TREE_DIAGRAM_CONTENT_ID: 'DATA_BUS.SAVE_TREE_DIAGRAM_CONTENT_ID'
 };
--- a/src/public/js/core/dataBus/index.js
+++ b/src/public/js/core/dataBus/index.js
@@ -10,7 +10,7 @@ import {
  updateFiles
 } from './actions';

-class DataBusContainer extends React.Component {
+class DataBusContainer extends React.PureComponent {
  componentDidMount() {
    const { standalone } = this.props;

--- a/src/public/js/core/dataBus/reducer.js
+++ b/src/public/js/core/dataBus/reducer.js
@@ -1,8 +1,6 @@
 import { FOLDER_OPEN_STATE } from '../constants';

 import { ACTIONS } from './constants';
-import { getFileNodesMap, getCodecrumbNodesMap } from './utils/treeLayout';
-import { calculateLayoutProps } from './utils/geometry';

 const DefaultState = {};

@@ -36,7 +34,7 @@ export const getMergeState = (state, namespace) => namespaceStateUpdate => ({
  }
 });

-const FULL_FEATURES_LANG_LIST = ['javascript', 'typescript'];
+const FULL_FEATURES_LANG_LIST = ['javascript', 'typescript', 'php'];

 export default (state = DefaultState, action) => {
  const namespace = action.namespace;
@@ -65,18 +63,9 @@ export default (state = DefaultState, action) => {
      return mergeState(action.payload);

    case ACTIONS.UPDATE_FILES_TREE_LAYOUT_NODES: {
-      const { payload: sourceLayoutTree } = action;
-
-      const { ccAlightPoint, ...layoutSize } = calculateLayoutProps(sourceLayoutTree);
-      const filesLayoutMap = getFileNodesMap(sourceLayoutTree);
-      const codecrumbsLayoutMap = getCodecrumbNodesMap(filesLayoutMap);
-
+      const { payload } = action;
      return mergeState({
-        sourceLayoutTree,
-        layoutSize,
-        filesLayoutMap,
-        codecrumbsLayoutMap,
-        ccAlightPoint
+        ...payload
      });
    }

@@ -161,10 +150,9 @@ export default (state = DefaultState, action) => {
      const { fileNode } = action.payload;
      const dependenciesEntryName = fileNode ? fileNode.path : namespaceState.dependenciesEntryName;

-      // do some reducerr
+      // do some reducer
      return mergeState({
        dependenciesEntryName,
-        selectedDependencyEdgeNodes: null
      });
    }

@@ -195,6 +183,22 @@ export default (state = DefaultState, action) => {
        }
      });

+    case ACTIONS.SAVE_TREE_DIAGRAM_CONTENT_ID:
+      return mergeState({
+        treeDiagramContentId: action.payload
+      });
+
+    case ACTIONS.SET_FULL_STATE:
+      return {
+        ...state,
+        ...action.payload
+      };
+
+    case ACTIONS.SET_NAMESPACE_STATE:
+      return mergeState({
+        ...action.payload
+      });
+
    case ACTIONS.RESET_ALL:
      return DefaultState;

--- a/src/public/js/core/dataBus/selectors.js
+++ b/src/public/js/core/dataBus/selectors.js
@@ -13,6 +13,11 @@ export const getProjectMetadata = createSelector([getNamespaceState], namespaceS
  return { projectName, language, platformPathSeparator, fullFeaturesSupport };
 });

+export const getTreeDiagramContentId = createSelector([getNamespaceState], namespaceState => {
+  const { treeDiagramContentId } = namespaceState;
+  return { id: treeDiagramContentId };
+});
+
 export const getSource = createSelector([getNamespaceState], namespaceState => {
  const { sourceTree, filesMap, foldersMap } = namespaceState;

--- a/src/public/js/core/dataBus/utils/geometry.js
+++ b/src/public/js/core/dataBus/utils/geometry.js
@@ -1,6 +1,6 @@
-import { FILE_NODE_TYPE, DIR_NODE_TYPE } from '../../constants';
+import { CC_NODE_TYPE } from '../../constants';

-export const calculateLayoutProps = (list, padding = 100) => {
+export const calculateLayoutProps = (list, { sourceDiagramOn }) => {
  if (!list) {
    return {
      width: 0,
@@ -17,41 +17,47 @@ export const calculateLayoutProps = (list, padding = 100) => {
  let maxCcWidth = 0;

  list.each(node => {
-    const [x, nY] = [node.y, node.x];
-    const nX = x + node.ySize;
+    const [x, y] = [node.y, node.x];
+    const [xSize, ySize] = [node.ySize, node.xSize];

-    if (node.data.type !== FILE_NODE_TYPE && node.data.type !== DIR_NODE_TYPE) {
-      if (node.ySize > maxCcWidth) {
-        maxCcWidth = node.ySize;
+    // calc cc vertical line
+    if (node.data.type === CC_NODE_TYPE) {
+      if (xSize > maxCcWidth) {
+        maxCcWidth = xSize;
+      }
+    } else {
+      if (x + xSize > ccAlightPoint) {
+        ccAlightPoint = x + xSize;
      }
-
-      return;
    }

-    if (nX < minX) {
-      minX = nX;
+    if (x < minX) {
+      minX = x;
    }

-    if (nY - node.xSize < minY) {
-      minY = nY - node.xSize;
+    if (y < minY) {
+      minY = y;
    }

-    if (nX > maxX) {
-      maxX = nX;
-      ccAlightPoint = node.y + node.ySize;
+    if (x + xSize > maxX) {
+      maxX = x + xSize;
    }

-    if (nY + node.xSize > maxY) {
-      maxY = nY + node.xSize;
+    if (y + ySize > maxY) {
+      maxY = y + ySize;
    }
  });

+  const yShift = Math.abs(Math.round(minY)) + 20;
+  const height = Math.round(Math.abs(maxY) + Math.abs(yShift)) + 5;
+  const width = Math.round(Math.abs(maxX + maxCcWidth) + Math.abs(minX) + 2 * 20);
+
  return {
-    width: Math.round(Math.abs(maxX + maxCcWidth) + Math.abs(minX) + 2 * padding),
-    height: Math.round(Math.abs(maxY) + Math.abs(minY) + 3 * padding),
-    xShift: padding / 4,
-    yShift: Math.round(Math.abs(minY)) + padding,
-    ccAlightPoint
+    xShift: 5,
+    width,
+    height,
+    yShift,
+    ccAlightPoint: sourceDiagramOn ? ccAlightPoint : 50
  };
 };

--- a/src/public/js/core/dataBus/utils/treeLayout.js
+++ b/src/public/js/core/dataBus/utils/treeLayout.js
@@ -69,6 +69,8 @@ export const getTreeLayout = (
        }, 0);
      }

+      // TODO: calc properly, not 5000
+      // impossible to do in one loop
      const LARGE_WIDTH_CC = 5000;
      const widthSpace =
        node.data.type !== DIR_NODE_TYPE && node.data.type !== FILE_NODE_TYPE
--- a/src/public/js/core/namespaceIntegration/actions.js
+++ b/src/public/js/core/namespaceIntegration/actions.js
@@ -1,6 +1,32 @@
 import { ACTIONS } from './constants';
+import { gatherFlowStepsData } from './utils/sharedCcFlows';
+import { getCodeCrumbsUserChoice, getNamespacesList } from '../dataBus/selectors';
+import { getActiveNamespace } from './selectors';

 export const setActiveNamespace = payload => ({
  type: ACTIONS.SET_ACTIVE_NAMESPACE,
  payload
 });
+
+export const calcSharedFlowStepsData = () => (dispatch, getState) => {
+  const state = getState();
+
+  const namespace = getActiveNamespace(state);
+  const namespacesList = getNamespacesList(state);
+  const { selectedCrumbedFlowKey: currentSelectedCrumbedFlowKey } = getCodeCrumbsUserChoice(state, {
+    namespace
+  });
+
+  dispatch({
+    type: ACTIONS.CALC_SHARED_FLOW_STEPS_DATA,
+    payload: gatherFlowStepsData(state, {
+      currentSelectedCrumbedFlowKey,
+      namespacesList
+    })
+  });
+};
+
+export const setFullState = payload => ({
+  type: ACTIONS.SET_FULL_STATE,
+  payload
+});
--- a/src/public/js/core/namespaceIntegration/constants.js
+++ b/src/public/js/core/namespaceIntegration/constants.js
@@ -1,4 +1,6 @@
 export const ACTIONS = {
  SET_ACTIVE_NAMESPACE: 'NAMESPACE_INTEGRATION.SET_ACTIVE_NAMESPACE',
+  CALC_SHARED_FLOW_STEPS_DATA: 'NAMESPACE_INTEGRATION.CALC_SHARED_FLOW_STEPS_DATA',
+  SET_FULL_STATE: 'NAMESPACE_INTEGRATION.SET_FULL_STATE',
  RESET_ALL: 'NAMESPACE_INTEGRATION.RESET_ALL'
 };
--- a/src/public/js/core/namespaceIntegration/reducer.js
+++ b/src/public/js/core/namespaceIntegration/reducer.js
@@ -1,7 +1,8 @@
 import { ACTIONS } from './constants';

 const DefaultState = {
-  activeNamespace: undefined
+  activeNamespace: undefined,
+  sharedFlowStepsData: null
 };

 export default (state = DefaultState, action) => {
@@ -12,6 +13,18 @@ export default (state = DefaultState, action) => {
        activeNamespace: action.payload
      };

+    case ACTIONS.CALC_SHARED_FLOW_STEPS_DATA:
+      return {
+        ...state,
+        sharedFlowStepsData: action.payload
+      };
+
+    case ACTIONS.SET_FULL_STATE:
+      return {
+        ...state,
+        ...action.payload
+      };
+
    case ACTIONS.RESET_ALL:
      return DefaultState;

--- a/src/public/js/core/namespaceIntegration/selectors.js
+++ b/src/public/js/core/namespaceIntegration/selectors.js
@@ -1 +1,2 @@
 export const getActiveNamespace = state => state.namespaceIntegration.activeNamespace;
+export const getSharedFlowStepsData = state => state.namespaceIntegration.sharedFlowStepsData;
--- a/src/public/js/core/namespaceIntegration/utils/sharedCcFlows.js
+++ b/src/public/js/core/namespaceIntegration/utils/sharedCcFlows.js
@@ -0,0 +1,99 @@
+import { getCodeCrumbsUserChoice, getSourceLayout } from '../../dataBus/selectors';
+import { NO_TRAIL_FLOW } from '../../../shared-constants';
+
+export const gatherFlowStepsData = (state, { namespacesList, currentSelectedCrumbedFlowKey }) => {
+  const flowStepsData = namespacesList.reduce(
+    (acc, ns) => {
+      const namespaceProps = { namespace: ns };
+      const { selectedCrumbedFlowKey, codeCrumbedFlowsMap } = getCodeCrumbsUserChoice(
+        state,
+        namespaceProps
+      );
+
+      if (currentSelectedCrumbedFlowKey !== selectedCrumbedFlowKey) {
+        return acc;
+      }
+
+      const { codecrumbsLayoutMap, ccAlightPoint } = getSourceLayout(state, namespaceProps);
+
+      const flowSteps = getFlowSteps({
+        namespace: ns,
+        codeCrumbedFlowsMap,
+        selectedCrumbedFlowKey,
+        codecrumbsLayoutMap
+      });
+
+      return {
+        flowSteps,
+        sortedFlowSteps:
+          selectedCrumbedFlowKey !== NO_TRAIL_FLOW
+            ? [...acc.sortedFlowSteps, ...flowSteps].sort(stepSorter)
+            : [],
+        involvedNsData: {
+          ...acc.involvedNsData,
+          [ns]: { codecrumbsLayoutMap, ccAlightPoint }
+        }
+      };
+    },
+    { involvedNsData: {}, flowSteps: [], sortedFlowSteps: [] }
+  );
+
+  return {
+    ...flowStepsData,
+    ccShiftIndexMap: createCcShiftIndexMap(flowStepsData.sortedFlowSteps),
+    maxWidth: getMaxWidthForNs(state, { namespacesList })
+  };
+};
+
+const stepSorter = (a, b) => a.step - b.step;
+
+const getFlowSteps = ({
+  namespace,
+  codeCrumbedFlowsMap,
+  selectedCrumbedFlowKey,
+  codecrumbsLayoutMap
+}) => {
+  const currentFlow = codeCrumbedFlowsMap[selectedCrumbedFlowKey] || {};
+
+  return Object.keys(currentFlow).reduce((flowSteps, filePath) => {
+    const steps = ((codecrumbsLayoutMap[filePath] && codecrumbsLayoutMap[filePath].children) || [])
+      .filter(({ data }) => data.params.flow === selectedCrumbedFlowKey)
+      .map(({ data, x, y }) => ({
+        ...data,
+        namespace,
+        filePath,
+        step: data.params.flowStep,
+        flow: selectedCrumbedFlowKey,
+        x,
+        y
+      }));
+
+    return [...flowSteps, ...steps];
+  }, []);
+};
+
+const createCcShiftIndexMap = sortedFlowSteps => {
+  const ccMap = {};
+  let shiftOrderIndex = 0;
+
+  sortedFlowSteps.forEach((crumb, i, list) => {
+    if (!i) {
+      ccMap[crumb.id] = shiftOrderIndex;
+      return;
+    }
+
+    if (crumb.x < list[i - 1].x) {
+      shiftOrderIndex++;
+    }
+
+    ccMap[crumb.id] = shiftOrderIndex;
+  });
+
+  return ccMap;
+};
+
+const getMaxWidthForNs = (state, { namespacesList }) =>
+  namespacesList.reduce((maxWidth, namespace) => {
+    const { layoutSize } = getSourceLayout(state, { namespace }); // TODO: double select for getSourceLayout, use from above
+    return layoutSize && layoutSize.width > maxWidth ? layoutSize.width : maxWidth;
+  }, 0);
--- a/src/public/js/core/store/sagas.js
+++ b/src/public/js/core/store/sagas.js
@@ -17,7 +17,8 @@ import { ACTIONS as SWITCHES_ACTIONS, CONTROLS_KEYS } from '../controlsBus/const
 import { setDisabledControl, toggleSwitch } from '../controlsBus/actions';
 import { getCheckedState } from '../controlsBus/selectors';

-import { setActiveNamespace } from '../namespaceIntegration/actions';
+import { getActiveNamespace } from '../namespaceIntegration/selectors';
+import { setActiveNamespace, calcSharedFlowStepsData } from '../namespaceIntegration/actions';

 function* reactOnSwitchToggle(action) {
  const namespacesList = yield select(getNamespacesList);
@@ -29,6 +30,20 @@ function* reactOnSwitchToggle(action) {
 }

 function* applyReactionOnSwitchToggleToNamespace({ switchKey, checked, namespace }) {
+  if (switchKey === CONTROLS_KEYS.SOURCE_DIAGRAM_ON) {
+    if (!checked) {
+      yield all([
+        put(toggleSwitch(CONTROLS_KEYS.DEPENDENCIES_DIAGRAM_ON, false)),
+        put(setDisabledControl(CONTROLS_KEYS.DEPENDENCIES_DIAGRAM_ON, true))
+      ]);
+    } else {
+      yield all([
+        put(setDisabledControl(CONTROLS_KEYS.DEPENDENCIES_DIAGRAM_ON, false)),
+        reactByUpdatingFoldersState({ namespace })
+      ]);
+    }
+  }
+
  if (switchKey === CONTROLS_KEYS.SOURCE_KEEP_ONLY_ACTIVE_ITEMS) {
    if (checked) {
      yield reactByUpdatingFoldersState({ namespace });
@@ -102,14 +117,24 @@ function* applyReactionOnButtonActionToNamespace({ buttonKey, namespace }) {
  }
 }

+function* reactOnUpdateFiles({namespace}) {
+  const {dependenciesShowDirectOnly} = yield select(getCheckedState)
+  if (dependenciesShowDirectOnly) {
+    yield put(setDependenciesEntryPoint(undefined, namespace))
+  }
+}
+
 function* reactOnToggledFolder({ namespace }) {
  yield put(calcFilesTreeLayoutNodes(namespace));
 }

 function* reactOnSourceSet({ namespace }) {
  const { dependenciesDiagramOn, codeCrumbsDiagramOn } = yield select(getCheckedState);
+  const activeNamespace = yield select(getActiveNamespace);

-  yield put(setActiveNamespace(namespace));
+  if (activeNamespace !== namespace) {
+    yield put(setActiveNamespace(namespace));
+  }

  if (!dependenciesDiagramOn && !codeCrumbsDiagramOn) {
    yield reactByUpdatingFoldersState({ namespace });
@@ -129,6 +154,13 @@ function* reactByUpdatingFoldersState({ namespace }) {
  yield put(calcFilesTreeLayoutNodes(namespace));
 }

+function* reactByCalcSharedFlowStepsData() {
+  const { codeCrumbsDiagramOn } = yield select(getCheckedState);
+  if (codeCrumbsDiagramOn) {
+    yield put(calcSharedFlowStepsData());
+  }
+}
+
 // TODO: will work if switches per namespace as well
 /*function* reactByDisablingFeatures({ payload }) {
  const { fullFeaturesSupport } = yield select(state =>
@@ -147,8 +179,11 @@ function* reactOnCcFlowEdgeSelect({ payload, namespace }) {
  }
 }

-function* reactBySettingActiveNamespace({ payload, namespace }) {
-  yield put(setActiveNamespace(namespace));
+function* reactBySettingActiveNamespace({ namespace }) {
+  const activeNamespace = yield select(getActiveNamespace);
+  if (activeNamespace !== namespace) {
+    yield put(setActiveNamespace(namespace));
+  }
 }

 export default function* rootSaga() {
@@ -160,9 +195,10 @@ export default function* rootSaga() {
    takeLatest(DATA_BUS_ACTIONS.SET_CHANGED_SOURCE_DATA, reactOnSourceSet),
    takeLatest(DATA_BUS_ACTIONS.SET_DEPENDENCIES_ENTRY_POINT, reactByUpdatingFoldersState),
    takeLatest(DATA_BUS_ACTIONS.SELECT_CODE_CRUMBED_FLOW, reactByUpdatingFoldersState),
-    takeLatest(DATA_BUS_ACTIONS.UPDATE_FILES, reactByUpdatingFoldersState),
    takeLatest(DATA_BUS_ACTIONS.SELECT_CC_FLOW_EDGE, reactOnCcFlowEdgeSelect),
    takeLatest(DATA_BUS_ACTIONS.SELECT_NODE, reactBySettingActiveNamespace),
-    takeLatest(DATA_BUS_ACTIONS.SELECT_CODE_CRUMB, reactBySettingActiveNamespace)
+    takeLatest(DATA_BUS_ACTIONS.UPDATE_FILES, reactOnUpdateFiles),
+    takeLatest(DATA_BUS_ACTIONS.SELECT_CODE_CRUMB, reactBySettingActiveNamespace),
+    takeLatest(DATA_BUS_ACTIONS.UPDATE_FILES_TREE_LAYOUT_NODES, reactByCalcSharedFlowStepsData)
  ]);
 }
--- a/src/public/js/meta.js
+++ b/src/public/js/meta.js
@@ -1 +1 @@
-export default { version: process.env.CODECRUMBS_VERSION }
+export default { version: process.env.CODECRUMBS_VERSION };
--- a/src/public/webpack.dev.js
+++ b/src/public/webpack.dev.js
@@ -12,7 +12,8 @@ module.exports = merge(common, {
      openAnalyzer: false
    }),
    new webpack.DefinePlugin({
-      'process.env.LOCAL': JSON.stringify(true)
+      'process.env.LOCAL': JSON.stringify(true),
+      'process.env.DEV': JSON.stringify(true)
    })
  ]
 });
--- a/src/server/code-parse/index.js
+++ b/src/server/code-parse/index.js
@@ -4,12 +4,21 @@ const { getLanguageParsers } = require('./language');
 const parseFile = (
  itemPath,
  projectDir,
-  { parseCodeCrumbs, parseImports, parseDependencies, attachCode, language, webpackConfigPath, tsConfigPath } = {}
+  {
+    parseCodeCrumbs,
+    parseImports,
+    parseDependencies,
+    attachCode,
+    language,
+    webpackConfigPath,
+    tsConfigPath
+  } = {}
 ) => {
  const { codecrumbsParser, dependenciesParser } = getLanguageParsers(language);
-  
+
  return Promise.all([
-    parseDependencies && dependenciesParser.getDependencies(itemPath, projectDir, {webpackConfigPath, tsConfigPath}),
+    parseDependencies &&
+      dependenciesParser.getDependencies(itemPath, projectDir, { webpackConfigPath, tsConfigPath }),
    file.read(itemPath, 'utf8')
  ]).then(([dependencies, code]) => {
    const item = {
@@ -37,7 +46,7 @@ const parseFile = (
        item.flows = undefined;
      }
    }
-    
+
    if (parseImports) {
      const importedDependencies = dependenciesParser.getImports(code, itemPath);
      if (importedDependencies.length) {
--- a/src/server/code-parse/language/cpp/codecrumbs.js
+++ b/src/server/code-parse/language/cpp/codecrumbs.js
@@ -1,7 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const CPP_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(CPP_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');

 // replace with own implementation if needed
 module.exports = {
--- a/src/server/code-parse/language/cpp/extensions.js
+++ b/src/server/code-parse/language/cpp/extensions.js
@@ -0,0 +1 @@
+module.exports = /\.(cpp|c\+\+|cc|cp|cxx|h|h\+\+|hh|hpp|hxx|inc|inl|ino|ipp|re|tcc|tpp)$/;
--- a/src/server/code-parse/language/csharp/codecrumbs.js
+++ b/src/server/code-parse/language/csharp/codecrumbs.js
@@ -1,8 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const CSHARP_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(CSHARP_COMMENT_REGEX));
-
+const { getCrumbs } = require('../default/codecrumbs');
 // replace with own implementation if needed
 module.exports = {
  getCrumbs
--- a/src/server/code-parse/language/csharp/extensions.js
+++ b/src/server/code-parse/language/csharp/extensions.js
@@ -0,0 +1 @@
+module.exports = /\.(cs|cake|cshtml|csx)$/;
--- a/src/server/code-parse/language/default/extensions.js
+++ b/src/server/code-parse/language/default/extensions.js
@@ -0,0 +1 @@
+module.exports = /(.*?)/
--- a/src/server/code-parse/language/fortran/extensions.js
+++ b/src/server/code-parse/language/fortran/extensions.js
@@ -0,0 +1 @@
+module.exports = /\.(f90|f|f03|f08|f77|f95|for|fpp)$/;
--- a/src/server/code-parse/language/golang/codecrumbs.js
+++ b/src/server/code-parse/language/golang/codecrumbs.js
@@ -0,0 +1,6 @@
+const { getCrumbs } = require('../default/codecrumbs');
+
+// replace with own implementation if needed
+module.exports = {
+  getCrumbs
+};
--- a/src/server/code-parse/language/golang/dependencies.js
+++ b/src/server/code-parse/language/golang/dependencies.js
@@ -0,0 +1,7 @@
+const defaultDependencies = require('../default/dependencies');
+
+// replace with own implementation if needed
+module.exports = {
+  getImports: defaultDependencies.getImports,
+  getDependencies: defaultDependencies.getDependencies
+};
--- a/src/server/code-parse/language/golang/extensions.js
+++ b/src/server/code-parse/language/golang/extensions.js
@@ -0,0 +1 @@
+module.exports = /\.(go)$/;
--- a/src/server/code-parse/language/haskell/extensions.js
+++ b/src/server/code-parse/language/haskell/extensions.js
@@ -0,0 +1 @@
+module.exports = /\.(hs|hsc)$/;
--- a/src/server/code-parse/language/index.js
+++ b/src/server/code-parse/language/index.js
@@ -1,110 +1,64 @@
 // check extensions
 // https://github.com/blakeembrey/language-map/blob/master/languages.json
 // copy(`/\.(${extensions.map(i=>i.slice(1)).join('|')})$/`)
+
+const LANGUAGES = [
+  'cpp',
+  'csharp',
+  'fortran',
+  'golang',
+  'haskell',
+  'java',
+  'javascript',
+  'kotlin',
+  'lua',
+  'ocaml',
+  'perl',
+  'php',
+  'python',
+  'ruby',
+  'typescript'
+];
+
+const getExtensions = parserName => require(`./${parserName}/extensions`);
+
+const LANGUAGE_LIST = LANGUAGES.map(language => {
+  return {
+    language,
+    extensions: getExtensions(language)
+  };
+});
+
+const DEFAULT_PARSER = {
+  language: 'default',
+  extensions: getExtensions('default')
+};
+
 module.exports = {
-  detectLanguage: (entryPoint) => {
-    const list = [
-      {
-        language: 'cpp',
-        extensions: /\.(cpp|c\+\+|cc|cp|cxx|h|h\+\+|hh|hpp|hxx|inc|inl|ino|ipp|re|tcc|tpp)$/
-      },
-      {
-        language: 'csharp',
-        extensions: /\.(cs|cake|cshtml|csx)$/
-      },
-      {
-        language: 'fortran',
-        extensions: /\.(f90|f|f03|f08|f77|f95|for|fpp)$/
-      },
-      {
-        language: 'haskell',
-        extensions: /\.(hs|hsc)$/
-      },
-      {
-        language: 'java',
-        extensions: /\.(java|jsp)$/
-      },
-      {
-        language: 'javascript',
-        extensions: /\.(js|jsx|_js|bones|es|es6|frag|gs|jake|jsb|jscad|jsfl|jsm|jss|mjs|njs|pac|sjs|ssjs|vue|xsjs|xsjslib)$/
-      },
-      {
-        language: 'kotlin',
-        extensions: /\.(kt|ktm|kts)$/
-      },
-      {
-        language: 'php',
-        extensions: /\.(php|aw|ctp|fcgi|inc|php3|php4|php5|phps|phpt)$/
-      },
-      {
-        language: 'python',
-        extensions: /\.(py|bzl|cgi|fcgi|gyp|gypi|lmi|py3|pyde|pyi|pyp|pyt|pyw|rpy|spec|tac|wsgi|xpy)$/
-      },
-      {
-        language: 'ruby',
-        extensions: /\.(rb|builder|eye|fcgi|gemspec|god|jbuilder|mspec|pluginspec|podspec|rabl|rake|rbuild|rbw|rbx|ru|ruby|spec|thor|watchr)$/
-      },
-      {
-        language: 'typescript',
-        extensions: /\.(ts|tsx)$/
-      }
-    ];
+  detectLanguage: entryPoint => {
+    const detection = LANGUAGE_LIST.find(language => {
+      return language.extensions.test(entryPoint);
+    });

-    const detection = list.find(item => item.extensions.test(entryPoint));
-    return detection ? detection : { language: 'default', extensions: /(.*?)/ };
+    return detection ? detection : DEFAULT_PARSER;
  },
-  getLanguageParsers: (language = 'default') => {
-    const map = {
-      cpp: {
-        codecrumbsParser: require('./cpp/codecrumbs'),
-        dependenciesParser: require('./cpp/dependencies')
-      },
-      csharp: {
-        codecrumbsParser: require('./csharp/codecrumbs'),
-        dependenciesParser: require('./csharp/dependencies')
-      },
-      fortran: {
-        codecrumbsParser: require('./fortran/codecrumbs'),
-        dependenciesParser: require('./fortran/dependencies')
-      },
-      haskell: {
-        codecrumbsParser: require('./haskell/codecrumbs'),
-        dependenciesParser: require('./haskell/dependencies')
-      },
-      java: {
-        codecrumbsParser: require('./java/codecrumbs'),
-        dependenciesParser: require('./java/dependencies')
-      },
-      javascript: {
-        codecrumbsParser: require('./javascript/codecrumbs'),
-        dependenciesParser: require('./javascript/dependencies')
-      },
-      kotlin: {
-        codecrumbsParser: require('./kotlin/codecrumbs'),
-        dependenciesParser: require('./kotlin/dependencies')
-      },
-      php: {
-        codecrumbsParser: require('./php/codecrumbs'),
-        dependenciesParser: require('./php/dependencies')
-      },
-      python: {
-        codecrumbsParser: require('./python/codecrumbs'),
-        dependenciesParser: require('./python/dependencies')
-      },
-      ruby: {
-        codecrumbsParser: require('./ruby/codecrumbs'),
-        dependenciesParser: require('./ruby/dependencies')
-      },
-      typescript: {
-        codecrumbsParser: require('./typescript/codecrumbs'),
-        dependenciesParser: require('./typescript/dependencies')
-      },
-      default: {
-        codecrumbsParser: require('./default/codecrumbs'),
-        dependenciesParser: require('./default/dependencies')
-      }
-    };

-    return map[language] || map.default;
+  getLanguageParsers: (language = 'default') => {
+    return (
+      LANGUAGES.reduce((target, parser) => {
+        return target.set(parser, getPropertiesByParser(parser));
+      }, new Map()).get(language) || getPropertiesByParser('default')
+    );
+  }
+};
+
+const getPropertiesByParser = parser => {
+  if (typeof parser === 'string') {
+    return {
+      codecrumbsParser: require(`./${parser}/codecrumbs`),
+      dependenciesParser: require(`./${parser}/dependencies`)
+    };
+  } else {
+    throw 'Invalid parser name';
  }
 };
--- a/src/server/code-parse/language/java/codecrumbs.js
+++ b/src/server/code-parse/language/java/codecrumbs.js
@@ -1,7 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const JAVA_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(JAVA_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');

 // replace with own implementation if needed
 module.exports = {
--- a/src/server/code-parse/language/java/extensions.js
+++ b/src/server/code-parse/language/java/extensions.js
@@ -0,0 +1 @@
+module.exports = /\.(java|jsp)$/;
--- a/src/server/code-parse/language/javascript/codecrumbs.js
+++ b/src/server/code-parse/language/javascript/codecrumbs.js
@@ -23,11 +23,9 @@ const getCrumbs = (fileCode, path) => {
  }
 };*/

-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const JAVA_SCRIPT_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(JAVA_SCRIPT_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');

+// replace with own implementation if needed
 module.exports = {
  getCrumbs
 };
--- a/src/server/code-parse/language/javascript/extensions.js
+++ b/src/server/code-parse/language/javascript/extensions.js
@@ -0,0 +1 @@
+module.exports = /\.(js|jsx|_js|bones|es|es6|frag|gs|jake|jsb|jscad|jsfl|jsm|jss|mjs|njs|pac|sjs|ssjs|vue|xsjs|xsjslib)$/;
--- a/src/server/code-parse/language/kotlin/codecrumbs.js
+++ b/src/server/code-parse/language/kotlin/codecrumbs.js
@@ -1,7 +1,4 @@
-const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
-
-const KOTLIN_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/;
-const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(KOTLIN_COMMENT_REGEX));
+const { getCrumbs } = require('../default/codecrumbs');

 // replace with own implementation if needed
 module.exports = {
--- a/src/server/code-parse/language/kotlin/extensions.js
+++ b/src/server/code-parse/language/kotlin/extensions.js
@@ -0,0 +1 @@
+module.exports = /\.(kt|ktm|kts)$/;
--- a/src/server/code-parse/language/lua/codecrumbs.js
+++ b/src/server/code-parse/language/lua/codecrumbs.js
@@ -0,0 +1,9 @@
+const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
+
+const LUA_COMMENT_REGEX = /^([^--]*)--(.*)$/;
+const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(LUA_COMMENT_REGEX));
+
+// replace with own implementation if needed
+module.exports = {
+  getCrumbs
+};
--- a/src/server/code-parse/language/lua/dependencies.js
+++ b/src/server/code-parse/language/lua/dependencies.js
@@ -0,0 +1,7 @@
+const defaultDependencies = require('../default/dependencies');
+
+// replace with own implementation if needed
+module.exports = {
+  getImports: defaultDependencies.getImports,
+  getDependencies: defaultDependencies.getDependencies
+};
--- a/src/server/code-parse/language/lua/extensions.js
+++ b/src/server/code-parse/language/lua/extensions.js
@@ -0,0 +1 @@
+module.exports = /\.(lua|luac)$/;
--- a/src/server/code-parse/language/ocaml/codecrumbs.js
+++ b/src/server/code-parse/language/ocaml/codecrumbs.js
@@ -0,0 +1,10 @@
+const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
+
+const OCAML_COMMENT_REGEX = /\/\*(.*?)\*\//;
+
+const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(OCAML_COMMENT_REGEX));
+
+// replace with own implementation if needed
+module.exports = {
+  getCrumbs
+};
--- a/src/server/code-parse/language/ocaml/dependencies.js
+++ b/src/server/code-parse/language/ocaml/dependencies.js
@@ -0,0 +1,7 @@
+const defaultDependencies = require('../default/dependencies');
+
+// replace with own implementation if needed
+module.exports = {
+  getImports: defaultDependencies.getImports,
+  getDependencies: defaultDependencies.getDependencies
+};
--- a/src/server/code-parse/language/ocaml/extensions.js
+++ b/src/server/code-parse/language/ocaml/extensions.js
@@ -0,0 +1 @@
+module.exports = /\.(re|ml|rei|mli|cmxa)$/;
--- a/src/server/code-parse/language/perl/codecrumbs.js
+++ b/src/server/code-parse/language/perl/codecrumbs.js
@@ -0,0 +1,9 @@
+const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
+
+const PERL_COMMENT_REGEX = /^([^#]*)#(.*)$/;
+const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(PERL_COMMENT_REGEX));
+
+// replace with own implementation if needed
+module.exports = {
+  getCrumbs
+};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Bohdan Liashenko	31ca6f4a78	Update README.md	2021-09-11 13:27:58 +02:00
Bohdan Liashenko	1f9bc3a2d3	Update README.md	2021-05-02 18:07:16 +02:00
Bohdan Liashenko	aad81bedbd	Update README.md	2021-05-02 18:02:51 +02:00
Bohdan Liashenko	1158c5fc1d	Update README.md	2021-04-27 19:22:55 +02:00
Bohdan Liashenko	a9727b990d	Update README.md	2021-04-27 19:20:40 +02:00
Bogdan Lyashenko	a9f94a2cfa	chore: version bump	2021-03-23 17:51:46 +01:00
Bogdan Lyashenko	eb0b9bfc40	Merge branch 'syarig-code-parse-php-namespace'	2021-03-23 14:24:17 +01:00
Bogdan Lyashenko	b4e1a99add	fix: syntax changes	2021-03-23 14:23:58 +01:00
syarig	c21d3ff504	chore: remove npm scripts for docker	2021-01-03 19:55:02 +09:00
syarig	2957d95133	feat: changed to ran server-dev in Docker environment	2021-01-03 19:50:30 +09:00
syarig	d6ce727b0c	refactor: improved to use cache that parsed code	2020-12-15 23:33:56 +09:00
syarig	c18c9fadd1	refactor: parse in php namespaces	2020-12-13 23:12:50 +09:00
syarig	dce33716d9	refactor: change public function names in namespaces	2020-12-13 00:49:59 +09:00
syarig	cf8ba61943	chore: remove example project code in src-php	2020-12-12 23:29:49 +09:00
syarig	26383aa79d	feat: change behavior for dependency direct only	2020-12-12 12:53:32 +09:00
syarig	136bd77d5f	feat: add namespaces, parser for php in code parse	2020-12-11 01:26:13 +09:00
syarig	ba6620f040	feat: add code parse php namespace	2020-12-07 23:09:15 +09:00
Bohdan Liashenko	4a8e7b7dc8	Update README.md	2020-05-23 18:50:38 +02:00
Bogdan Lyashenko	6ca48eb537	fix: build	2019-08-17 11:53:52 +02:00
Bogdan Lyashenko	2864a098ab	1.7.3	2019-08-17 11:52:57 +02:00
Bogdan Lyashenko	fec0cceba6	fix: docs	2019-08-17 11:47:34 +02:00
Bogdan Lyashenko	3bf39ce1b0	fix: readme change	2019-08-17 11:43:46 +02:00
Bogdan Lyashenko	3a047b5bbe	chore: clean up	2019-08-17 11:39:39 +02:00
Bogdan Lyashenko	50145d4d1a	1.7.2	2019-08-12 20:55:38 +02:00
Bogdan Lyashenko	4df2e8a48b	fix: saga	2019-08-12 20:55:31 +02:00
Bogdan Lyashenko	3dae451776	feat: hide source tree	2019-08-12 20:53:44 +02:00
Bogdan Lyashenko	4d038f37b3	feat: add file path to code preview	2019-08-12 19:49:45 +02:00
Bogdan Lyashenko	a09ef4df65	feat: add file path to code preview	2019-08-12 19:46:46 +02:00
Bogdan Lyashenko	628862d024	fix: underlay styles for namespace title	2019-08-10 20:29:53 +02:00
Bogdan Lyashenko	af83be1fcc	1.7.1	2019-08-10 20:17:33 +02:00
Bogdan Lyashenko	05cb5527e3	fix: peformance for flow steps	2019-08-10 20:17:21 +02:00
Bogdan Lyashenko	7d910a0f75	1.7.0	2019-08-06 20:31:37 +02:00
Bogdan Lyashenko	ab74f6426e	1.6.18	2019-08-06 20:26:39 +02:00
Bogdan Lyashenko	390bb8ff67	fix: left margin for svg	2019-08-06 20:26:30 +02:00
Bogdan Lyashenko	fcd108f9e7	fix: readme	2019-08-06 20:10:33 +02:00
Bogdan Lyashenko	dd2c6ee3d2	1.6.17	2019-08-06 20:08:17 +02:00
Bogdan Lyashenko	9917425cc8	fix: config file support	2019-08-06 20:07:45 +02:00
Bohdan Liashenko	3f54ca11a1	Merge pull request #85 from idoo/feature/config WIP: feat: added codecrumbs.config	2019-08-06 19:05:41 +02:00
Bohdan Liashenko	e059f800d6	Merge branch 'master' into feature/config	2019-08-06 19:04:40 +02:00
Bogdan Lyashenko	f2dec10c05	feat: add extra persist list	2019-08-06 18:57:37 +02:00
Ivan Verevkin	d8117eac7d	feat: added codecrumbs.config	2019-08-06 15:26:09 +02:00
Ivan Verevkin	354514818c	feat: added codecrumbs.config	2019-08-06 13:48:29 +02:00
Ivan Verevkin	4ac814be93	feat: added codecrumbs.config	2019-08-06 12:20:52 +02:00
Ivan Verevkin	2f7387a67f	feat: added codecrumbs.config	2019-08-06 11:59:06 +02:00
Bogdan Lyashenko	1cf779c5a6	test: test	2019-08-04 12:43:03 +02:00
Bogdan Lyashenko	64c9a75d92	test: test	2019-08-04 12:37:05 +02:00
Bogdan Lyashenko	5a8c4e6a9b	1.6.16	2019-08-04 12:20:57 +02:00
Bogdan Lyashenko	2fd728b5e8	feat: add tree diagram content id	2019-08-04 12:20:51 +02:00
Bogdan Lyashenko	9bda1672d5	1.6.15	2019-08-03 21:15:48 +02:00
Bogdan Lyashenko	101eade38f	feat: v update info	2019-08-03 21:15:41 +02:00
Bogdan Lyashenko	6a1c8bcd75	1.6.14	2019-08-03 20:36:43 +02:00
Bogdan Lyashenko	c49a09e721	feat: add debug mode flag	2019-08-03 20:36:35 +02:00
Bogdan Lyashenko	d526ded04b	chore: add hint about cc group	2019-08-03 19:36:01 +02:00
Ivan Verevkin	06344bee72	feat: added codecrumbs.config	2019-08-02 18:18:08 +02:00
Bogdan Lyashenko	f9f67ff9ea	1.6.13	2019-08-01 20:16:49 +02:00
Bogdan Lyashenko	9e519166d5	fix: flow without steps	2019-08-01 20:16:43 +02:00
Bogdan Lyashenko	1b649bbe96	1.6.12	2019-08-01 19:50:40 +02:00
Bogdan Lyashenko	9ed305c08b	fix: unique keys for react lists	2019-08-01 19:50:32 +02:00
Bogdan Lyashenko	dfebfa20a2	fix: layout calc	2019-08-01 19:11:11 +02:00
Bogdan Lyashenko	564c81362e	fix: geometry calc	2019-07-30 21:16:40 +02:00
Bogdan Lyashenko	d938ea3ef1	1.6.11	2019-07-28 11:23:57 +02:00
Bogdan Lyashenko	beceb476d9	feat: extend store	2019-07-28 11:23:21 +02:00
Bogdan Lyashenko	ca882e4568	1.6.10	2019-07-27 20:04:13 +02:00
Bogdan Lyashenko	227c626c3a	fix: layout	2019-07-27 20:03:38 +02:00
Bogdan Lyashenko	c3606e3c3e	fix: border for single space	2019-07-27 19:22:36 +02:00
Bogdan Lyashenko	ae9ffccf65	chore: js2flowchart update	2019-07-27 10:44:09 +02:00
Ivan Verevkin	897dcb8c3b	feat: added codecrumbs.config	2019-07-26 14:18:51 +02:00
Bogdan Lyashenko	38e1fdeeda	1.6.9	2019-07-25 20:08:15 +02:00
Bogdan Lyashenko	c94e587675	fix: padding for geometry	2019-07-25 20:07:10 +02:00
Bohdan Liashenko	5354dad9fe	Merge pull request #80 from idoo/chore/refactor-codecrumbs chore: import only getCrumbs	2019-07-25 20:02:29 +02:00
Bohdan Liashenko	cbbab432e4	Merge pull request #81 from idoo/chore/upgrade-madge chore: upgraded madge	2019-07-25 19:58:05 +02:00
Bogdan Lyashenko	e21ab82729	1.6.8	2019-07-25 19:37:38 +02:00
Bogdan Lyashenko	987a98732a	fix: downgrade http-server to v0.9.0	2019-07-25 19:36:41 +02:00
Ivan Verevkin	3ddfda80ed	chore: upgraded madge	2019-07-23 17:29:03 +02:00
Ivan Verevkin	3e5da523ce	chore: import only getCrumbs	2019-07-23 14:00:05 +02:00
Bohdan Liashenko	6f6625d3db	Merge pull request #79 from idoo/feature/lua feat: added Lua support	2019-07-23 11:00:34 +02:00
Ivan Verevkin	e9b4331d60	Merge branch 'master' into feature/lua	2019-07-22 16:20:40 +02:00
Ivan Verevkin	b7e5b70df7	feat: added Lua support	2019-07-22 16:18:17 +02:00
Bogdan Lyashenko	ec04a20b8d	1.6.7	2019-07-20 11:15:27 +02:00
Bohdan Liashenko	7b51b8db72	Merge pull request #75 from idoo/feature/reason feat: added OCaml support	2019-07-20 11:05:24 +02:00
Bogdan Lyashenko	fddb08554d	fix: refactoring clean up	2019-07-20 10:52:55 +02:00
Ivan Verevkin	14116c24b8	Merge branch 'master' into feature/reason	2019-07-19 16:28:19 +02:00
Ivan Verevkin	9307cf6259	feat: added OCaml support	2019-07-19 16:24:29 +02:00
Bohdan Liashenko	39de752084	Merge pull request #72 from idoo/feature/perl feature: added perl language	2019-07-18 16:51:59 +02:00
Bohdan Liashenko	d50783bb7f	Merge pull request #74 from idoo/chore/refactor refactor project source files	2019-07-18 16:50:53 +02:00
Ivan Verevkin	2f22563d8d	chore: refactor project source	2019-07-18 15:36:04 +02:00
Bohdan Liashenko	a0c7c134d3	Update README.md	2019-07-17 16:29:02 +02:00
Ivan Verevkin	e8d08572c6	feature: added perl language	2019-07-17 14:52:30 +02:00
Bogdan Lyashenko	0191bde3e6	1.6.6	2019-07-16 21:07:55 +02:00
Bogdan Lyashenko	5c738d8f4d	chore: build	2019-07-16 21:07:51 +02:00
Bogdan Lyashenko	6ca8817108	chore: build	2019-07-16 21:07:27 +02:00
Bogdan Lyashenko	b9f5c0b40e	chore: add 0x to readme	2019-07-16 19:49:53 +02:00
Bogdan Lyashenko	c89cfec0c8	1.6.5	2019-07-16 19:41:54 +02:00
Bohdan Liashenko	85840a9fa6	Merge pull request #71 from idoo/chore/editorconfig Added basic editorconfig	2019-07-16 16:23:13 +02:00
Bohdan Liashenko	a9ff99d48e	Merge pull request #70 from idoo/feature/refactor chore: extracted languages extensions and refactor code	2019-07-16 16:21:26 +02:00
Ivan Verevkin	160fdaef88	chore: added basic editorconfig	2019-07-16 16:11:08 +02:00
Ivan Verevkin	c020a739c4	chore: extracted languages extensions and refactor code	2019-07-16 16:06:44 +02:00
Ivan Verevkin	3b6e34fed8	Merge branch 'master' into feature/refactor	2019-07-16 15:45:17 +02:00
Ivan Verevkin	e4d09f118d	chore: extracted languages extensions and refactor code	2019-07-16 15:42:35 +02:00
Bohdan Liashenko	662adb7bda	Merge pull request #69 from idoo/feature/go feat: added Go support	2019-07-15 15:37:59 +02:00
Ivan Verevkin	9c479f4462	feat: added Go support	2019-07-15 15:36:45 +02:00
Bogdan Lyashenko	447da26e16	1.6.4	2019-07-14 20:24:21 +02:00
Bogdan Lyashenko	9878e59a1b	feat: expand codeblock on hover	2019-07-14 20:24:11 +02:00
Bogdan Lyashenko	af0530c764	1.6.3	2019-07-14 13:31:31 +02:00
Bogdan Lyashenko	30067567ab	fix: layout geometry calc	2019-07-14 13:31:10 +02:00
Bogdan Lyashenko	501509f4df	fix: fade in animations	2019-07-14 11:03:31 +02:00
Bogdan Lyashenko	b0edfdc976	fix: readme	2019-07-09 20:44:22 +02:00
Bogdan Lyashenko	4745ed2242	fix: readme	2019-07-09 20:42:54 +02:00
				`@@ -0,0 +1 @@`
				`module.exports = /\.(cpp\|c\+\+\|cc\|cp\|cxx\|h\|h\+\+\|hh\|hpp\|hxx\|inc\|inl\|ino\|ipp\|re\|tcc\|tpp)$/;`
				`@@ -0,0 +1 @@`
				`module.exports = /\.(cs\|cake\|cshtml\|csx)$/;`
				`@@ -0,0 +1 @@`
				`module.exports = /\.(f90\|f\|f03\|f08\|f77\|f95\|for\|fpp)$/;`
				`@@ -0,0 +1 @@`
				`module.exports = /\.(js\|jsx\|_js\|bones\|es\|es6\|frag\|gs\|jake\|jsb\|jscad\|jsfl\|jsm\|jss\|mjs\|njs\|pac\|sjs\|ssjs\|vue\|xsjs\|xsjslib)$/;`
				`@@ -0,0 +1 @@`
				`module.exports = /\.(re\|ml\|rei\|mli\|cmxa)$/;`