skyeye-connection-map

yarn install - yarn run build

Usage no npm install needed!

<script type="module">
  import skyeyeConnectionMap from 'https://cdn.skypack.dev/skyeye-connection-map';
</script>

README

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://git@github.com/financial-times/di2-connection-map.git#v0.3.0", -> "di2-connection-map": "git+ssh://git@github.com/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)