# 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`](https://github.com/Financial-Times/di2-connection-map/blob/master/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

```typescript
// 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)

```