skyeye-connection-map

di2-connection-map

Setup

• yarn install
• yarn run build

Development

Connection map can be run in standalone mode for development outside of host applications.

In order to have a successful build you first need to have bower installed globally. Then run bower install within the repo to generate the bower_components directory.

Development harness can be found in src/mount.tsx.

• yarn run watch
• yarn run dev

Deploy

Connection map is consumed as an npm package via the consuming projects package.json. Connection map must be built and tagged with a version before being pushed to github where it will be available under that version in consuming projects.

Rough deploy step-by-step:

1. Make changes to connection map and commit.
2. yarn run build and commit built files.
3. Tag as new version and push tags - easy way is npm version major|minor|patch > git push origin <BRANCH> --tags.
4. PR in to master.
5. In consuming project update version in package.json:

   "di2-connection-map": "git+ssh://[e-mail]/financial-times/di2-connection-map.git#v0.3.0", -> "di2-connection-map": "git+ssh://[e-mail]/financial-times/di2-connection-map.git#v0.4.0",

Structure

Connection map is a react component that wraps an svg and triggers drawing code using d3.js to create the visualisation.

There are 5 main elements to the code base.

• Wrapping react components
• connection-map class that triggers drawing from sub classes and manages zoom and navigation events
• Several small classes for various visual components of the visualisation that manage thier own drawing
• Several React SFC's used to render HTML strings for usage in the svg
• mini-map class for drawing and managing the mini-map navigation aid

Usage

// Pesudocode

import ConnectionMap, { IConnectionCompanyData } from 'di2-connection-map';

const connectionsData: IConnectionCompanyData = /* data from somewhere */
const connectionsId: string = /* entityId of the active company */

ReactDOM.render(
  <ConnectionMap
    connectionsData={connectionsData}
    requestId={connectionsId}
    onNavigate={scoutId => /* navigate fn */ }
    onNavigateToCompanyPage={scoutId => /* navigate fn */ }
  />,
document.body)