1.6.7

feat: added OCaml support

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.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

README.md

@@ -19,23 +19,23 @@
 </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. 
+> **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. 
+>**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)    
+>-[@bliashenko](https://twitter.com/bliashenko)
 
 ## Demo
 Check out the example of [**standalone version running here**](https://codecrumbs.io/#showcase=todo-react-redux).
- 
+
 <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.
@@ -61,43 +61,44 @@ 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.
 
 ### 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.
 
@@ -108,7 +109,7 @@ You can take a snapshot of application state at any point of time and share it w
 <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,7 +119,7 @@ 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%"/>
 
@@ -134,7 +135,7 @@ Navigate from browser to your code editor simply by clicking ```Command+click```
 ## 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. 
+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! 👍 😘 ❤️
@@ -144,7 +145,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>
@@ -161,5 +169,5 @@ 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). 
+- **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).

example-project/languages/go-lang.go

@@ -0,0 +1,7 @@
+package main
+import "fmt"
+
+// cc:main function
+func main() {
+    fmt.Println("hello world")
+}

example-project/languages/ocaml.ml

@@ -0,0 +1,2 @@
+/* cc:main function */
+let hello = () => "Hello, World!";

example-project/languages/perl-lang.pl

@@ -0,0 +1,7 @@
+#!/usr/bin/perl
+
+use strict;
+use warnings;
+
+# cc: main function.
+print "Hello, World!\n";

example-project/languages/ruby-lang.rb

@@ -1,3 +1,3 @@
 # cc:main function
 
-puts 'Hello, world!'
+puts 'Hello, world!'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codecrumbs",
-  "version": "1.6.2",
+  "version": "1.6.7",
   "author": "Bohdan Liashenko",
   "license": "BSD-3-Clause",
   "repository": {
@@ -14,8 +14,8 @@
     "client-dev": "cd src/public && webpack --config webpack.dev.js --progress --colors --watch --env dev",
     "server-dev": "nodemon src/index.dev.js",
     "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",
+    "babel-compile-standalone": "babel src/public/js -d build --config-file ./src/public/babel.config.js --copy-files",
     "webpack-compile-local": "cd src/public && webpack --config webpack.local.js --progress",
     "build": "yarn clean && yarn babel-compile-standalone && yarn webpack-compile-local",
     "pretty": "prettier  --write \"./src/public/js/**/*.js\""
@@ -56,6 +56,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",

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',
       {

src/public/js/App.js

@@ -23,7 +23,7 @@ const ExplorerBar = React.lazy(() =>
 );
 
 const Footer = React.lazy(() =>
-  import(/* webpackChunkName: "explorer-bar" */ './components/footer')
+  import(/* webpackChunkName: "footer" */ './components/footer')
 );
 
 import './App.less';

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';

src/public/js/components/sideBar/component/CrumbsTab/index.js

@@ -1,10 +1,10 @@
 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';

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 {

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';
 

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';
 

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';
 

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';

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';

src/public/js/components/topBar/controls/ViewSwitches/Item/ViewSwitch.js

@@ -1,13 +1,13 @@
 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';

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';
 

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;
 

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';

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;

src/public/js/components/treeDiagram/component/Icons/index.less

@@ -1,7 +1,7 @@
 @import "../animcations.less";
 
 .Animation {
-  @extend .FadeIn;
+  &:extend(.FadeIn);
 }
 
 .CursorPointer {

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';

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;
 }
 

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';

src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/ExtraInfo/index.js

@@ -34,31 +34,59 @@ const DetailsComponent = props => {
   );
 };
 
-const CodeComponent = props => {
-  const { position, crumbNodeLines, file, language, namespace } = props;
-  const { fileCode } = file.data;
+const ccUnderlayPaddingH = 20;
+class CodeComponent extends React.Component {
+  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 } = 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}
+        >
+          <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,

src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/ExtraInfo/index.less

@@ -12,10 +12,39 @@
   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;
 }
+
+@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;
+}

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 => {

src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js

@@ -7,7 +7,11 @@ 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';

src/public/js/components/treeDiagram/component/Tree/Dependencies/index.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import {
-  DependenciesEdge,
-  DependenciesArrow
-} from '../../Edge/DepenenciesEdge';
+import { DependenciesEdge, DependenciesArrow } from '../../Edge/DepenenciesEdge';
 import { FileName } from '../../../component/Node/File';
 import { selectDependencyEdge } from '../../../../../core/dataBus/actions';
 import {

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,

src/public/js/core/constants/index.js

@@ -1,4 +1,5 @@
 export {
+  CC_NODE_TYPE,
   FILE_NODE_TYPE,
   DIR_NODE_TYPE,
   SOCKET_MESSAGE_TYPE,

src/public/js/core/dataBus/utils/geometry.js

@@ -1,4 +1,4 @@
-import { FILE_NODE_TYPE, DIR_NODE_TYPE } from '../../constants';
+import { CC_NODE_TYPE } from '../../constants';
 
 export const calculateLayoutProps = (list, padding = 100) => {
   if (!list) {
@@ -17,40 +17,42 @@ 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 - ySize / 2 < minY) {
+      minY = y - ySize / 2;
     }
 
-    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 / 2 > maxY) {
+      maxY = y + ySize / 2;
     }
   });
 
   return {
     width: Math.round(Math.abs(maxX + maxCcWidth) + Math.abs(minX) + 2 * padding),
-    height: Math.round(Math.abs(maxY) + Math.abs(minY) + 3 * padding),
+    height: Math.round(Math.abs(maxY) + Math.abs(minY) + 2 * padding),
     xShift: padding / 4,
-    yShift: Math.round(Math.abs(minY)) + padding,
+    yShift: Math.abs(Math.round(minY)) > 2 * padding ? Math.abs(Math.round(minY)) : 2 * padding,
     ccAlightPoint
   };
 };

src/public/js/meta.js

@@ -1 +1 @@
-export default { version: process.env.CODECRUMBS_VERSION }
+export default { version: process.env.CODECRUMBS_VERSION };

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)$/;

src/server/code-parse/language/csharp/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(cs|cake|cshtml|csx)$/;

src/server/code-parse/language/default/extensions.js

@@ -0,0 +1 @@
+module.exports = /(.*?)/

src/server/code-parse/language/fortran/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(f90|f|f03|f08|f77|f95|for|fpp)$/;

src/server/code-parse/language/golang/codecrumbs.js

@@ -0,0 +1,9 @@
+const { setupGetCrumbs, setupGetCommentsFromCode } = require('../default/codecrumbs');
+
+const GOLANG_COMMENT_REGEX = /^([^\/\/]*)\/\/(.*)$/
+const getCrumbs = setupGetCrumbs(setupGetCommentsFromCode(GOLANG_COMMENT_REGEX));
+
+// replace with own implementation if needed
+module.exports = {
+  getCrumbs
+};

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
+};

src/server/code-parse/language/golang/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(go)$/;

src/server/code-parse/language/haskell/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(hs|hsc)$/;

src/server/code-parse/language/index.js

@@ -1,110 +1,63 @@
 // 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',
+  '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';
   }
 };

src/server/code-parse/language/java/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(java|jsp)$/;

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)$/;

src/server/code-parse/language/kotlin/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(kt|ktm|kts)$/;

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
+};

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
+};

src/server/code-parse/language/ocaml/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(re|ml|rei|mli|cmxa)$/;

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
+};

src/server/code-parse/language/perl/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
+};

src/server/code-parse/language/perl/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(pl|al|cgi|fcgi|perl|ph|plx|pm|psgi|t|6pl|6pm|nqp|p6|p6l|p6m|pl|pl6|pm|pm6)$/;

src/server/code-parse/language/php/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(php|aw|ctp|fcgi|inc|php3|php4|php5|phps|phpt)$/;

src/server/code-parse/language/python/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(py|bzl|cgi|fcgi|gyp|gypi|lmi|py3|pyde|pyi|pyp|pyt|pyw|rpy|spec|tac|wsgi|xpy)$/;

src/server/code-parse/language/ruby/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(rb|builder|eye|fcgi|gemspec|god|jbuilder|mspec|pluginspec|podspec|rabl|rake|rbuild|rbw|rbx|ru|ruby|spec|thor|watchr)$/;

src/server/code-parse/language/typescript/extensions.js

@@ -0,0 +1 @@
+module.exports = /\.(ts|tsx)$/;

src/server/mediator.js

@@ -5,6 +5,10 @@ const { SOCKET_MSG_MAX_SIZE } = require('./config');
 const logger = require('./utils/logger');
 const { SOCKET_MESSAGE_TYPE } = require('./shared-constants');
 
+const connectedJSON = JSON.stringify({
+  type: SOCKET_MESSAGE_TYPE.CLIENT_CONNECTED
+})
+
 // instances should run on many ports but then send data to mediator and mediator to client
 const run = ({ port, clientPort }) => {
   const httpServer = http.createServer();
@@ -29,22 +33,10 @@ const run = ({ port, clientPort }) => {
     if (isClient) {
       clientInstance = connection;
       logger.info('> browser client connected');
-      sendToSourceWatchers(
-        JSON.stringify({
-          type: SOCKET_MESSAGE_TYPE.CLIENT_CONNECTED
-        })
-      );
+      sendToSourceWatchers(connectedJSON);
     } else {
       sourceWatcherInstances.push(connection);
-
-      // if client already there just init watcher
-      if (clientInstance) {
-        connection.sendUTF(
-          JSON.stringify({
-            type: SOCKET_MESSAGE_TYPE.CLIENT_CONNECTED
-          })
-        );
-      }
+      initWatcherIfClientExist(clientInstance, connection)
     }
 
     connection.on('message', ({ utf8Data }) => {
@@ -61,6 +53,12 @@ const run = ({ port, clientPort }) => {
   });
 };
 
+function initWatcherIfClientExist (client, connection) {
+  if (client) {
+    connection.sendUTF(connectedJSON)
+  }
+}
+
 module.exports = {
   run
 };

src/server/project-source/file-system.js

@@ -3,7 +3,11 @@ const directoryTree = require('directory-tree');
 const { traversal: treeTraversal } = require('../utils/tree');
 const { DIR_NODE_TYPE } = require('../shared-constants');
 
-const getProjectFiles = (projectDir, config = { extensions: /(.*?)/ }) => {
+const DEFAULT_EXTENSION_REGEX = require('../code-parse/language/default/extensions')
+const DEFAULT_CONFIG = { extensions: DEFAULT_EXTENSION_REGEX }
+const NO_FILES_ERROR = 'There is not files found. Please check source dir and entry point configs.';
+
+const getProjectFiles = (projectDir, config = DEFAULT_CONFIG) => {
   const filesMap = {};
   const foldersMap = {};
 
@@ -12,7 +16,7 @@ const getProjectFiles = (projectDir, config = { extensions: /(.*?)/ }) => {
   });
 
   if (!Object.keys(filesMap).length) {
-    throw new Error('There is not files found. Please check source dir and entry point configs.');
+    throw new Error(NO_FILES_ERROR);
   }
 
   treeTraversal(sourceTree, node => {