[KED-2328] Add code panel

package.json

@@ -51,6 +51,7 @@
     "dagre": "git+https://github.com/richardwestenra/dagre.git#manual-ranking",
     "deepmerge": "^4.2.2",
     "fetch-mock": "^9.11.0",
+    "highlight.js": "^10.5.0",
     "kiwi.js": "^1.1.2",
     "konami-code": "^0.2.1",
     "react-custom-scrollbars": "^4.2.1",

src/actions/index.js

@@ -155,3 +155,16 @@ export function changeFlag(name, value) {
     value,
   };
 }
+
+export const TOGGLE_CODE = 'TOGGLE_CODE';
+
+/**
+ * Toggle code panel
+ * @param {string} visible Visibility status
+ */
+export function toggleCode(visible) {
+  return {
+    type: TOGGLE_CODE,
+    visible,
+  };
+}

src/components/flowchart/flowchart.test.js

@@ -2,14 +2,39 @@ import React from 'react';
 import $ from 'cheerio';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import FlowChart, { mapStateToProps, mapDispatchToProps } from './index';
+import FlowChart, {
+  mapStateToProps,
+  mapDispatchToProps,
+  chartSizeTestFallback,
+} from './index';
 import { mockState, setup } from '../../utils/state.mock';
-import { getViewTransform, origin } from '../../utils/view';
+import { getViewTransform, getViewExtents, origin } from '../../utils/view';
 
 const getNodeIDs = (state) => state.node.ids;
 const getNodeName = (state) => state.node.name;
 const getLayerIDs = (state) => state.layer.ids;
 
+const chartWidth = chartSizeTestFallback.width;
+const chartHeight = chartSizeTestFallback.height;
+
+const mockChartSize = (
+  chartSize,
+  width = chartWidth,
+  height = chartHeight
+) => ({
+  left: 0,
+  top: 0,
+  outerWidth: width,
+  outerHeight: height,
+  height,
+  width,
+  minWidthScale: 1,
+  sidebarWidth: 0,
+  metaSidebarWidth: 0,
+  codeSidebarWidth: 0,
+  ...chartSize,
+});
+
 describe('FlowChart', () => {
   it('renders without crashing', () => {
     const svg = setup.mount(<FlowChart />).find('svg');
@@ -49,6 +74,46 @@ describe('FlowChart', () => {
     expect(viewTransform.k).toBeGreaterThan(0);
   });
 
+  it('applies expected view extents when all sidebars closed', () => {
+    const wrapper = setup.mount(
+      <FlowChart
+        chartSize={mockChartSize({
+          sidebarWidth: 0,
+          metaSidebarWidth: 0,
+          codeSidebarWidth: 0,
+        })}
+      />
+    );
+
+    const instance = wrapper.find('FlowChart').instance();
+    const viewExtents = getViewExtents(instance.view);
+
+    expect(viewExtents).toEqual({
+      translate: { minX: -500, minY: -500, maxX: 1044, maxY: 1553 },
+      scale: { minK: 0.8, maxK: 2 },
+    });
+  });
+
+  it('applies expected view extents when all sidebars open', () => {
+    const wrapper = setup.mount(
+      <FlowChart
+        chartSize={mockChartSize({
+          sidebarWidth: 150,
+          metaSidebarWidth: 180,
+          codeSidebarWidth: 255,
+        })}
+      />
+    );
+
+    const instance = wrapper.find('FlowChart').instance();
+    const viewExtents = getViewExtents(instance.view);
+
+    expect(viewExtents).toEqual({
+      translate: { minX: -650, minY: -500, maxX: 1479, maxY: 1553 },
+      scale: { minK: 0.8, maxK: 2 },
+    });
+  });
+
   it('resizes the chart if the window resizes', () => {
     const map = {};
     window.addEventListener = jest.fn((event, cb) => {
@@ -185,6 +250,8 @@ describe('FlowChart', () => {
       nodes: expect.any(Array),
       visibleGraph: expect.any(Boolean),
       visibleSidebar: expect.any(Boolean),
+      visibleCode: expect.any(Boolean),
+      visibleMetaSidebar: expect.any(Boolean),
     };
     expect(mapStateToProps(mockState.animals)).toEqual(expectedResult);
   });

src/components/flowchart/index.js

@@ -8,6 +8,7 @@ import { getNodeActive, getNodeSelected } from '../../selectors/nodes';
 import { getChartSize, getChartZoom } from '../../selectors/layout';
 import { getLayers } from '../../selectors/layers';
 import { getCentralNode, getLinkedNodes } from '../../selectors/linked-nodes';
+import { getVisibleMetaSidebar } from '../../selectors/metadata';
 import { drawNodes, drawEdges, drawLayers, drawLayerNames } from './draw';
 import {
   viewing,
@@ -64,6 +65,7 @@ export class FlowChart extends Component {
       onViewEnd: this.onViewChangeEnd,
     });
 
+    this.updateViewExtents();
     this.addGlobalEventListeners();
     this.update();
 
@@ -89,7 +91,7 @@ export class FlowChart extends Component {
     const { chartZoom } = this.props;
     const changed = (...names) => this.changed(names, prevProps, this.props);
 
-    if (changed('visibleSidebar')) {
+    if (changed('visibleSidebar', 'visibleCode', 'visibleMetaSidebar')) {
       this.updateChartSize();
     }
 
@@ -273,19 +275,29 @@ export class FlowChart extends Component {
   }
 
   /**
-   * Updates view extents based on the current view transform
+   * Updates view extents based on the current view transform.
+   * Offsets the extents considering any open sidebars.
+   * Allows additional margin for user panning within limits.
+   * Zoom scale is limited to a practical range for usability.
    * @param {?Object} transform Current transform override
    */
   updateViewExtents(transform) {
     const { k: scale } = transform || getViewTransform(this.view);
-    const { sidebarWidth, metaSidebarWidth } = this.props.chartSize;
+    const {
+      sidebarWidth = 0,
+      metaSidebarWidth = 0,
+      codeSidebarWidth = 0,
+    } = this.props.chartSize;
     const { width = 0, height = 0 } = this.props.graphSize;
+
+    const leftSidebarOffset = sidebarWidth / scale;
+    const rightSidebarOffset = (metaSidebarWidth + codeSidebarWidth) / scale;
     const margin = this.MARGIN;
 
     setViewExtents(this.view, {
       translate: {
-        minX: -sidebarWidth / scale - margin,
-        maxX: width + margin + metaSidebarWidth / scale,
+        minX: -leftSidebarOffset - margin,
+        maxX: width + margin + rightSidebarOffset,
         minY: -margin,
         maxY: height + margin,
       },
@@ -538,6 +550,8 @@ export const mapStateToProps = (state, ownProps) => ({
   nodeSelected: getNodeSelected(state),
   visibleGraph: state.visible.graph,
   visibleSidebar: state.visible.sidebar,
+  visibleCode: state.visible.code,
+  visibleMetaSidebar: getVisibleMetaSidebar(state),
   ...ownProps,
 });