Resolving ocnflict

2017-01-13 18:17:27 +00:00 · 2017-01-13 18:17:27 +00:00 · 55be4bbaa8
parent 54524d23df 1af66477d3
commit 55be4bbaa8
46 changed files with 1326 additions and 277 deletions
--- a/circle.yml
+++ b/circle.yml
@ -4,7 +4,6 @@ machine:
      - git config --global user.email "circleci@joyent.zone"
      - git config --global user.name "circlebot"
      - curl -sSL https://s3.amazonaws.com/circle-downloads/install-circleci-docker.sh | bash -s -- 1.10.0
-      - curl -o- -L https://yarnpkg.com/install.sh | bash

  services:
      - docker
--- a/frontend/Makefile
+++ b/frontend/Makefile
@ -7,11 +7,11 @@ UI := $(shell pwd)/../ui

 .PHONY: install-production
 install-production: compile
-	yarn install --production --prefer-offline
+	yarn install --production --no-lockfile

 .PHONY: install
 install:
-	NODE_ENV=development yarn install --prefer-offline
+	NODE_ENV=development yarn install --no-lockfile

 .PHONY: clean
 clean:
--- a/frontend/src/components/header/index.js
+++ b/frontend/src/components/header/index.js
@ -23,10 +23,15 @@ const {
 const {
  remcalc
 } = fns;
+
 const {
  pseudoEl
 } = composers;

+const borderSide = props => props.toggled
+  ? 'bottom'
+  : 'top';
+
 const StyledHeader = styled.header`
  background-color: #ffffff;
  padding-top: ${remcalc(21)};
@ -34,7 +39,7 @@ const StyledHeader = styled.header`
 `;

 const StyledLogo = styled.img`
-  padding-top: ${remcalc(10)}
+  padding-top: ${remcalc(10)};
 `;

 const StyledProfileWrapper = styled.div`
@ -43,26 +48,26 @@ const StyledProfileWrapper = styled.div`

 const StyledAvatarWrapper = styled.div`
  &:after {
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-${props => props.toggled ? 'bottom' : 'top'}: 5px solid black;
+    border-left: ${remcalc(5)} solid transparent;
+    border-right: ${remcalc(5)} solid transparent;
+    border-${borderSide}: ${remcalc(5)} solid black;

    ${pseudoEl({
      top: '50%',
-      right: '10px'
+      right: remcalc(10)
    })}
  }
 `;

 const StyledTooltipWrapper = styled.div`
  position: absolute;
-  left: -40px;
-  bottom: -180px;
+  left: ${remcalc(-40)};
+  bottom: ${remcalc(-180)};
 `;

 const StyledName = styled.span`
  position: relative;
-  top: -12px;
+  top: ${remcalc(-12)};
 `;

 const EmptyButton = styled.button`
@ -71,7 +76,7 @@ const EmptyButton = styled.button`
 `;

 const StyledAvatar = styled(Avatar)`
-  marginLeft: 12px;
+  marginLeft: ${remcalc(12)};
 `;

 const arrowPosition = {
--- a/frontend/src/components/instance-item/index.js
+++ b/frontend/src/components/instance-item/index.js
@ -0,0 +1,37 @@
+const React = require('react');
+
+const MetricsOutlet = require('@components/metrics-outlet');
+const PropTypes = require('@root/prop-types');
+const List = require('@ui/components/list');
+
+const {
+  ListItem,
+  ListItemView,
+  ListItemMeta,
+  ListItemTitle,
+  ListItemOptions
+} = List;
+
+const InstanceItem = ({
+  instance = {},
+  toggleCollapsed = () => null
+}) => (
+  <ListItem collapsed={!instance.collapsed} key={instance.uuid} >
+    <ListItemView>
+      <ListItemMeta onClick={toggleCollapsed}>
+        <ListItemTitle>{instance.name}</ListItemTitle>
+      </ListItemMeta>
+      <MetricsOutlet datasets={instance.metrics} />
+    </ListItemView>
+    <ListItemOptions>
+      …
+    </ListItemOptions>
+  </ListItem>
+);
+
+InstanceItem.propTypes = {
+  instance: PropTypes.instance,
+  toggleCollapsed: React.PropTypes.func
+};
+
+module.exports = InstanceItem;
--- a/frontend/src/components/instance-list/index.js
+++ b/frontend/src/components/instance-list/index.js
@ -0,0 +1,32 @@
+const React = require('react');
+
+const InstanceItem = require('@components/instance-item');
+const PropTypes = require('@root/prop-types');
+
+const InstanceList = ({
+  instances = [],
+  toggleCollapsed = () => null
+}) => {
+  const onClick = (uuid) => () => toggleCollapsed(uuid);
+
+  const instanceList = instances.map((instance) => (
+    <InstanceItem
+      instance={instance}
+      key={instance.uuid}
+      toggleCollapsed={onClick(instance.uuid)}
+    />
+  ));
+
+  return (
+    <div>
+      {instanceList}
+    </div>
+  );
+};
+
+InstanceList.propTypes = {
+  instances: React.PropTypes.arrayOf(PropTypes.instance),
+  toggleCollapsed: React.PropTypes.func
+};
+
+module.exports = InstanceList;
--- a/frontend/src/components/metrics-outlet/index.js
+++ b/frontend/src/components/metrics-outlet/index.js
@ -2,6 +2,7 @@ const React = require('react');
 const Styled = require('styled-components');

 const Column = require('@ui/components/column');
+const List = require('@ui/components/list');
 const MiniMetric = require('@ui/components/mini-metric');
 const PropTypes = require('@root/prop-types');
 const Row = require('@ui/components/row');
@ -18,6 +19,15 @@ const {
  MiniMetricView
 } = MiniMetric;

+const {
+  ListItemOutlet
+} = List;
+
+const StyledOutlet = styled(ListItemOutlet)`
+  padding-left: 0;
+  padding-right: 0;
+`;
+
 const StyledRow = styled(Row)`
  margin: 0;

@ -27,9 +37,11 @@ const StyledRow = styled(Row)`
  }
 `;

-const MetricsRow = ({
-  datasets = []
-}) => {
+const MetricsOutlet = (props) => {
+  const {
+    datasets = []
+  } = props;
+
  const _datasets = datasets.map((metric, i) => (
    <Column key={i} xs={4}>
      <MiniMetricView borderless>
@ -43,14 +55,16 @@ const MetricsRow = ({
  ));

  return (
-    <StyledRow>
-      {_datasets}
-    </StyledRow>
+    <StyledOutlet {...props}>
+      <StyledRow>
+        {_datasets}
+      </StyledRow>
+    </StyledOutlet>
  );
 };

-MetricsRow.propTypes = {
+MetricsOutlet.propTypes = {
  datasets: React.PropTypes.arrayOf(PropTypes.dataset)
 };

-module.exports = MetricsRow;
+module.exports = MetricsOutlet;
--- a/frontend/src/components/service-item/index.js
+++ b/frontend/src/components/service-item/index.js
@ -4,7 +4,7 @@ const ReactRouter = require('react-router');

 const Anchor = require('@ui/components/anchor');
 const List = require('@ui/components/list');
-const MetricsRow = require('@components/metrics-row');
+const MetricsOutlet = require('@components/metrics-outlet');
 const PropTypes = require('@root/prop-types');

 const {
@ -19,7 +19,6 @@ const {
  ListItemSubTitle,
  ListItemDescription,
  ListItemGroupView,
-  ListItemOutlet,
  ListItemOptions,
  ListItemHeader
 } = List;
@ -86,9 +85,7 @@ const ServiceItem = ({
        {isChild && subtitle}
        {description}
      </ListItemMeta>
-      <ListItemOutlet>
-        <MetricsRow metrics={service.metrics} />
-      </ListItemOutlet>
+      <MetricsOutlet datasets={service.metrics} />
    </ListItemView>
  );

--- a/frontend/src/containers/project/instances.js
+++ b/frontend/src/containers/project/instances.js
@ -1,9 +1,63 @@
 const React = require('react');
+const ReactRedux = require('react-redux');

+const actions = require('@state/actions');
+const EmptyInstances = require('@components/empty/instances');
+const PropTypes = require('@root/prop-types');
 const Section = require('./section');
+const InstanceList = require('@components/instance-list');
+const selectors = require('@state/selectors');
+
+const {
+  toggleInstanceCollapsed
+} = actions;
+
+const {
+  connect
+} = ReactRedux;
+
+const {
+  instancesByProjectIdSelector
+} = selectors;
+
+const Instances = (props) => {
+  const {
+    instances = [],
+    toggleCollapsed = () => null
+  } = props;
+
+  const empty = instances.length ? null : (
+    <EmptyInstances />
+  );
+
+  return (
+    <Section {...props}>
+      {empty}
+      <InstanceList
+        instances={instances}
+        toggleCollapsed={toggleCollapsed}
+      />
+    </Section>
+  );
+};
+
+Instances.propTypes = {
+  instances: React.PropTypes.arrayOf(PropTypes.instance),
+  toggleCollapsed: React.PropTypes.func
+};
+
+const mapStateToProps = (state, {
+  params = {}
+}) => ({
+  instances: instancesByProjectIdSelector(params.projectId)(state)
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
+});
+
+module.exports = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Instances);

-module.exports = (props) => (
-  <Section {...props}>
-    <p>instances</p>
-  </Section>
-);
--- a/frontend/src/containers/service/instances.js
+++ b/frontend/src/containers/service/instances.js
@ -4,8 +4,7 @@ const ReactRedux = require('react-redux');
 const actions = require('@state/actions');
 const EmptyInstances = require('@components/empty/instances');
 const PropTypes = require('@root/prop-types');
-const List = require('@ui/components/list');
-const DatasetsRow = require('@components/metrics-row');
+const InstanceList = require('@components/instance-list');
 const selectors = require('@state/selectors');

 const {
@ -20,45 +19,23 @@ const {
  instancesByServiceIdSelector
 } = selectors;

-const {
-  ListItem,
-  ListItemView,
-  ListItemMeta,
-  ListItemTitle,
-  ListItemOptions,
-  ListItemOutlet
-} = List;
-
-const Instances = ({
-  instances = [],
-  toggleCollapsed = () => null
-}) => {
-  const onClick = (uuid) => () => toggleCollapsed(uuid);
+const Instances = (props) => {
+  const {
+    instances = [],
+    toggleCollapsed = () => null
+  } = props;

  const empty = instances.length ? null : (
    <EmptyInstances />
  );

-  const instanceList = instances.map((instance) => (
-    <ListItem collapsed={!instance.collapsed} key={instance.uuid} >
-      <ListItemView>
-        <ListItemMeta onClick={onClick(instance.uuid)}>
-          <ListItemTitle>{instance.name}</ListItemTitle>
-        </ListItemMeta>
-        <ListItemOutlet>
-          <DatasetsRow metrics={instance.metrics} />
-        </ListItemOutlet>
-      </ListItemView>
-      <ListItemOptions>
-        …
-      </ListItemOptions>
-    </ListItem>
-  ));
-
  return (
    <div>
      {empty}
-      {instanceList}
+      <InstanceList
+        instances={instances}
+        toggleCollapsed={toggleCollapsed}
+      />
    </div>
  );
 };
--- a/frontend/src/prop-types.js
+++ b/frontend/src/prop-types.js
@ -44,11 +44,11 @@ const Dataset = React.PropTypes.shape({
  type: React.PropTypes.string,
  data: React.PropTypes.arrayOf(
    React.PropTypes.shape({
-      firstQuartile: React.PropTypes.string,
-      thirdQuartile: React.PropTypes.string,
-      median: React.PropTypes.string,
-      max: React.PropTypes.string,
-      min: React.PropTypes.string
+      firstQuartile: React.PropTypes.number,
+      thirdQuartile: React.PropTypes.number,
+      median: React.PropTypes.number,
+      max: React.PropTypes.number,
+      min: React.PropTypes.number
    })
  )
 });
--- a/frontend/src/state/selectors.js
+++ b/frontend/src/state/selectors.js
@ -93,6 +93,16 @@ const metricsByServiceId = (serviceId) => createSelector(
    metricTypes.filter((i) => i.service === service.uuid)
 );

+const instancesByProjectId = (projectId) => createSelector(
+  [instances, projectById(projectId), collapsedInstances, metricDatasets],
+  (instances, project, collapsed, metrics) =>
+    instances.filter((i) => i.project === project.uuid)
+    .map((instance) => ({
+      ...instance,
+      metrics: datasets(metrics, instance.metrics),
+      collapsed: isCollapsed(collapsed, instance.uuid)
+    }))
+);

 module.exports = {
  accountSelector: account,
@ -108,5 +118,6 @@ module.exports = {
  projectByIdSelector: projectById,
  servicesByProjectIdSelector: servicesByProjectId,
  instancesByServiceIdSelector: instancesByServiceId,
-  metricsByServiceIdSelector: metricsByServiceId
+  metricsByServiceIdSelector: metricsByServiceId,
+  instancesByProjectIdSelector: instancesByProjectId
 };
--- a/ui/.storybook/config.js
+++ b/ui/.storybook/config.js
@ -6,11 +6,11 @@ function loadStories() {
  let stories = req.keys();
      stories = stories.sort();

-  stories.forEach( story => req(story));
+  stories.forEach(story => req(story));

  // Fallback to stories/index.js file for anything that
  // hasn't been moved
  require('../stories');
 }

-configure(loadStories, module);
+configure(loadStories, module);
--- a/ui/package.json
+++ b/ui/package.json
@ -14,8 +14,9 @@
  "dependencies": {
    "build-array": "^1.0.0",
    "chart.js": "^2.4.0",
-    "chartjs-chart-box-plot": "^1.0.0-9",
+    "chartjs-chart-box-plot": "prerelease",
    "color": "^1.0.3",
+    "d3": "^4.4.1",
    "lodash.find": "^4.6.0",
    "lodash.first": "^3.0.0",
    "lodash.flatten": "^4.4.0",
--- a/ui/src/components/add-metric/tile.js
+++ b/ui/src/components/add-metric/tile.js
@ -28,7 +28,7 @@ const StyledTile = styled.div`
  width: ${remcalc(300)};
  height: ${remcalc(247)};
  box-shadow: ${boxes.bottomShaddow};
-  border: 1px solid ${colors.borderSecondary};
+  border: ${remcalc(1)} solid ${colors.borderSecondary};
  background-color: ${colors.brandSecondary};

  ${breakpoints.small`
--- a/ui/src/components/base/index.js
+++ b/ui/src/components/base/index.js
@ -15,10 +15,10 @@ const {
 } = Styled;

 const {
-  generateFonts
+  generateFonts,
+  remcalc
 } = fncs;

-
 // The name that will be used in the 'font-family' property
 const fontFamilies = [
  'LibreFranklin'
@ -156,7 +156,7 @@ module.exports = styled.div`
  }

  & figure {
-    margin: 1em 40px;
+    margin: 1em ${remcalc(40)};
  }

  & hr {
@ -208,12 +208,12 @@ module.exports = styled.div`
  & [type="button"]:-moz-focusring,
  & [type="reset"]:-moz-focusring,
  & [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
+    outline: ${remcalc(1)} dotted ButtonText;
  }

  & fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
+    border: ${remcalc(1)} solid #c0c0c0;
+    margin: 0 ${remcalc(2)};
    padding: 0.35em 0.625em 0.75em;
  }

@ -245,7 +245,7 @@ module.exports = styled.div`

  & [type="search"] {
    -webkit-appearance: textfield;
-    outline-offset: -2px;
+    outline-offset: ${remcalc(-2)};
  }

  & [type="search"]::-webkit-search-cancel-button,
@ -302,7 +302,7 @@ module.exports = styled.div`
  & abbr[title],
  & abbr[data-original-title] {
    cursor: help;
-    border-bottom: 1px dotted ${typography.abbrBorderColor};
+    border-bottom: ${remcalc(1)} dotted ${typography.abbrBorderColor};
  }

  & address {
@ -352,8 +352,8 @@ module.exports = styled.div`
    }

    &:focus {
-      outline: 5px auto -webkit-focus-ring-color;
-      outline-offset: -2px;
+      outline: ${remcalc(5)} auto -webkit-focus-ring-color;
+      outline-offset: ${remcalc(-2)};
    }
  }

@ -444,8 +444,8 @@ module.exports = styled.div`
  }

  & button:focus {
-    outline: 1px dotted;
-    outline: 5px auto -webkit-focus-ring-color;
+    outline: ${remcalc(1)} dotted;
+    outline: ${remcalc(5)} auto -webkit-focus-ring-color;
  }

  & input,
--- a/ui/src/components/button/index.js
+++ b/ui/src/components/button/index.js
@ -56,7 +56,7 @@ const color = match({

 const borderRadius = match({
  rect: 0
-}, remcalc(boxes.borderRadius));
+}, boxes.borderRadius);

 // based on bootstrap 4
 const style = css`
@ -96,7 +96,7 @@ const style = css`
  background-image: none;
  background-color: ${background};
  border-radius: ${borderRadius};
-  border: solid 1px ${border};
+  border: solid ${remcalc(1)} ${border};

  box-shadow: ${boxes.bottomShaddow};

@ -104,12 +104,12 @@ const style = css`
    outline: 0;
    text-decoration: none;
    background-color: ${background};
-    border: solid 1px ${border};
+    border: solid ${remcalc(1)} ${border};
  }

  &:hover {
    background-color: ${backgroundHover};
-    border: solid 1px ${borderHover};
+    border: solid ${remcalc(1)} ${borderHover};
  }

  &:active,
@ -119,7 +119,7 @@ const style = css`
    outline: 0;

    background-color: ${backgroundActive};
-    border: solid 1px ${borderActive};
+    border: solid ${remcalc(1)} ${borderActive};
  }

  &[disabled] {
--- a/ui/src/components/checkbox/index.js
+++ b/ui/src/components/checkbox/index.js
@ -1,11 +1,16 @@
-const React = require('react');
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
 const Styled = require('styled-components');

 const {
  boxes
 } = constants;

+const {
+  remcalc
+} = fns;
+
 const {
  default: styled,
 } = Styled;
@ -26,8 +31,8 @@ const StyledInput = styled.input`
 const StyledLabel = styled.label`
  color: rgb(100, 100, 100);
  position: absolute;
-  width: 24px;
-  height: 24px;
+  width: ${remcalc(24)};
+  height: ${remcalc(24)};
  top: 0;
  border-radius: ${boxes.borderRadius};
  background-color: rgb(255, 255, 255);
@ -38,12 +43,12 @@ const StyledLabel = styled.label`
    opacity: 0;
    content: '';
    position: absolute;
-    width: 9px;
-    height: 4px;
+    width: ${remcalc(9)};
+    height: ${remcalc(4)};
    background: transparent;
-    top: 7px;
-    left: 7px;
-    border: 3px solid #333;
+    top: ${remcalc(7)};
+    left: ${remcalc(7)};
+    border: ${remcalc(3)} solid #333;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
@ -57,8 +62,8 @@ const StyledLabel = styled.label`
 `;

 const StyledDiv = styled.div`
-  width: 24px;
-  height: 24px;
+  width: ${remcalc(24)};
+  height: ${remcalc(24)};
  position: relative;
 `;

--- a/ui/src/components/close/index.js
+++ b/ui/src/components/close/index.js
@ -17,14 +17,18 @@ const StyledButton = styled.button`
  position: absolute;
  top: ${remcalc(16)};
  right: ${remcalc(16)};
+  
+  ${props => props.customStyles ? props.customStyles : null}
 `;

 const Close = ({
  style,
-  onClick
+  onClick,
+  customStyles = ''
 }) => {
  return (
    <StyledButton
+      customStyles={customStyles}
      onClick={onClick}
      style={style}
    >
@ -37,6 +41,7 @@ const Close = ({
 };

 Close.propTypes = {
+  customStyles: React.PropTypes.string,
  onClick: React.PropTypes.func,
  style: React.PropTypes.object
 };
--- a/ui/src/components/h1/index.js
+++ b/ui/src/components/h1/index.js
@ -15,5 +15,5 @@ module.exports = styled.h1`
  font-style: normal;
  font-stretch: normal;
  color: #364acd;
-  border-bottom: 1px solid #d8d8d8;
+  border-bottom: ${remcalc(1)} solid #d8d8d8;
 `;
--- a/ui/src/components/input/index.js
+++ b/ui/src/components/input/index.js
@ -25,9 +25,9 @@ const {

 const successBakcground = css`
  background-color: ${colors.brandSecondary};
-  background-image: url("./input-confirm.svg");
+  background-image: url('./input-confirm.svg');
  background-repeat: no-repeat;
-  background-position: 98% 20px;
+  background-position: 98% ${remcalc(20)};
 `;

 const defaultBackground = css`
@ -40,17 +40,17 @@ const Label = styled.label`

 const InputField = styled.input`
  ${baseBox()};
-  
+
  ${props => props.success ? successBakcground : defaultBackground }
-  
+
  border-color: ${props => props.error ? colors.alert : 'auto'}
  color: ${props => props.error ? colors.alert : colors.fonts.semibold}
  display: block;
-  font-size: 16px;
+  font-size: ${remcalc(16)};
  padding: ${remcalc('15 18')};
  visibility: visible;
  width: 100%;
-  
+
  &:focus {
    border-color: ${boxes.border.checked};
    outline: none;
--- a/ui/src/components/list/header.js
+++ b/ui/src/components/list/header.js
@ -20,7 +20,7 @@ const StyledItem = styled(Item)`
  position: absolute;

  background-color: ${colors.brandPrimary};
-  border: solid 1px ${colors.borderPrimary};
+  border: solid ${remcalc(1)} ${colors.borderPrimary};
  box-shadow: none;

  width: calc(100% + ${remcalc(2)});
--- a/ui/src/components/list/item.js
+++ b/ui/src/components/list/item.js
@ -19,10 +19,10 @@ const {
 } = Styled;

 const paper = `
-  0 8px 0 -5px #fafafa,
-  0 8px 1px -4px ${colors.borderSecondary},
-  0 16px 0 -10px #fafafa,
-  0 16px 1px -9px ${colors.borderSecondary};
+  0 ${remcalc(8)} 0 ${remcalc(-5)} #fafafa,
+  0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.borderSecondary},
+  0 ${remcalc(16)} 0 ${remcalc(-10)} #fafafa,
+  0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.borderSecondary};
 `;

 const height = (props) => props.collapsed
@ -52,7 +52,7 @@ const Item = styled(Row)`
  height: ${height};
  min-height: ${minHeight};
  box-shadow: ${shadow};
-  border: 1px solid ${colors.borderSecondary};
+  border: ${remcalc(1)} solid ${colors.borderSecondary};
  background-color: ${colors.brandSecondary};
  margin-bottom: ${marginBottom};
 `;
--- a/ui/src/components/list/options.js
+++ b/ui/src/components/list/options.js
@ -27,7 +27,7 @@ const borderLeftColor = (props) => !props.fromHeader

 const Nav = styled.nav`
  flex: 0 0 ${remcalc(47)};
-  border-left: 1px solid ${borderLeftColor};
+  border-left: ${remcalc(1)} solid ${borderLeftColor};
 `;

 const StyledButton = styled(Button)`
--- a/ui/src/components/list/subtitle.js
+++ b/ui/src/components/list/subtitle.js
@ -35,7 +35,7 @@ const Span = styled.span`
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
-  font-size: 14px;
+  font-size: ${remcalc(14)};
  color: ${color};

  justify-content: flex-end;
--- a/ui/src/components/modal/index.js
+++ b/ui/src/components/modal/index.js
@ -1,11 +1,19 @@
+const fns = require('../../shared/functions');
+
 const constants = require('../../shared/constants');
 const React = require('react');
 const Styled = require('styled-components');

+const Close = require('../close');
+
 const {
  colors
 } = constants;

+const {
+  remcalc
+} = fns;
+
 const {
  default: styled
 } = Styled;
@ -15,31 +23,17 @@ const StyledModal = styled.div`
  display: block;
  left: 50%;
  margin: 0 auto;
-  padding: 20px;
+  padding: ${remcalc(20)};
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
-`;
-
-const StyledClose = styled.button`
-  background-color: #FFFFFF;
-  border: solid 1px #D8D8D8;
-  border-radius: 4px;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
-  color: black;
-  cursor: #000000;
-  font-size: 20px;
-  padding: 0 10px;
-  position: absolute;
-  right: -20px;
-  text-align: center;
-  text-decoration: none;
-  top: -15px;
+  max-width: 80%;
+  min-width: 50%;
 `;

 const StyledOverlay = styled.div`
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(74, 73, 74, 0.46);
  height: 100%;
  left: 0;
  position: absolute;
@ -52,6 +46,7 @@ const Modal = ({
  active = true,
  children,
  className,
+  customCloseStyle,
  handleDismiss,
  name,
  style
@ -68,11 +63,10 @@ const Modal = ({
        tabIndex={-2}
      />
      <StyledModal aria-label={name}>
-        <StyledClose
+        <Close
+          customStyles={customCloseStyle}
          onClick={handleDismiss}
-          role='dialog'
-          tabIndex={-1}
-        >X</StyledClose>
+        />
        {children}
      </StyledModal>
    </div>
@ -83,6 +77,7 @@ Modal.propTypes = {
  active: React.PropTypes.bool,
  children: React.PropTypes.node,
  className: React.PropTypes.string,
+  customCloseStyle: React.PropTypes.string,
  handleDismiss: React.PropTypes.func,
  name: React.PropTypes.string,
  style: React.PropTypes.object
--- a/ui/src/components/modal/story.js
+++ b/ui/src/components/modal/story.js
@ -1,5 +1,15 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const React = require('react');

+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
 const {
  storiesOf
 } = require('@kadira/storybook');
@ -7,6 +17,11 @@ const {
 const Base= require('../base');
 const Modal = require('./');

+const _customCloseStyle = `
+  border: solid ${colors.alert} ${remcalc(5)};
+  border-radius: 50%;
+`;
+
 storiesOf('Modal', module)
  .add('Default', () => (
    <Base>
@ -14,4 +29,18 @@ storiesOf('Modal', module)
        <h2>This is the Modal</h2>
      </Modal>
    </Base>
+  ))
+  .add('Custom Styles on Close', () => (
+    <Base>
+      <Modal customCloseStyle={_customCloseStyle}>
+        <h2>This is the Modal</h2>
+      </Modal>
+    </Base>
+  ))
+  .add('Dismiss Function', () => (
+    <Base>
+      <Modal handleDismiss={function noop() {}}>
+        <p>This has a handleDismiss (noop) function</p>
+      </Modal>
+    </Base>
  ));
--- a/ui/src/components/pagination/index.js
+++ b/ui/src/components/pagination/index.js
@ -13,7 +13,8 @@ const {
 } = constants;

 const {
-  rndId
+  rndId,
+  remcalc
 } = fns;

 const {
@ -36,12 +37,12 @@ const StyledLi = styled.li`
  cursor: pointer;
  display: flex;
  float: left;
-  height: 50px;
+  height: ${remcalc(50)};
  justify-content: center;
-  margin-right: 10px;
-  min-width: 50px;
-  padding-left: 15px;
-  padding-right: 15px;
+  margin-right: ${remcalc(10)};
+  min-width: ${remcalc(50)};
+  padding-left: ${remcalc(15)};
+  padding-right: ${remcalc(15)};
  position: relative;

  ${baseBox()}
--- a/ui/src/components/radio-group/item.js
+++ b/ui/src/components/radio-group/item.js
@ -35,7 +35,7 @@ const RadioItem = styled.div`

  &[aria-checked="true"] {
    border: ${boxes.border.checked};
-    box-shadow: ${remcalc(boxes.borderRadius)};
+    box-shadow: ${boxes.borderRadius};
  }

  &.disabled {
--- a/ui/src/components/radio/index.js
+++ b/ui/src/components/radio/index.js
@ -46,12 +46,12 @@ const StyledSpan = styled.span`
  &::before {
    content: '';
    position: absolute;
-    width: 10px;
-    height: 10px;
-    box-shadow: 0 0 0 1px #646464;
-    border: 8px solid ${colors.brandInactive};
-    top: 5px;
-    left: 5px;
+    width: ${remcalc(10)};
+    height: ${remcalc(10)};
+    box-shadow: 0 0 0 ${remcalc(1)} #646464;
+    border: ${remcalc(8)} solid ${colors.brandInactive};
+    top: ${remcalc(5)};
+    left: ${remcalc(5)};
    border-radius: 100%;
  }

--- a/ui/src/components/range-slider/index.js
+++ b/ui/src/components/range-slider/index.js
@ -38,7 +38,7 @@ const rangeThumb = css`
  cursor: pointer;
  height: ${remcalc(24)};
  position: relative;
-  top: -10px;
+  top: ${remcalc(-10)};
  width: ${remcalc(36)};

  ${baseBox()}
@ -46,7 +46,7 @@ const rangeThumb = css`

 const rangeLower = css`
  background: ${colors.brandPrimary};
-  height: 6px;
+  height: ${remcalc(6)};

  ${baseBox({
    radius: remcalc(50),
@ -56,7 +56,7 @@ const rangeLower = css`

 const rangeUpper = css`
  background: #E6E6E6;
-  height: 6px;
+  height: ${remcalc(6)};

  ${baseBox({
    radius: remcalc(50)
--- a/ui/src/components/select/index.js
+++ b/ui/src/components/select/index.js
@ -26,27 +26,27 @@ const SelectWrapper = styled.div`
  display: inline-block;

  &:after {
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-bottom: 5px solid black;
+    border-left: ${remcalc(5)} solid transparent;
+    border-right: ${remcalc(5)} solid transparent;
+    border-bottom: ${remcalc(5)} solid black;

    ${pseudoEl({
-      top: '25px',
-      right: '20px'
+      top: remcalc(25),
+      right: remcalc(20)
    })}
  }
 `;


 const StyledSelect = styled.select`
-  font-size:16px;
+  font-size: ${remcalc(16)};
  min-width: ${remcalc(288)};
  min-height: ${remcalc(54)};
-  border-radius: 4px;
+  border-radius: ${remcalc(4)};
  padding-left: ${remcalc(20)};
  background-color: #FFFFFF;
-  box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
-  border: solid 1px #D8D8D8;
+  box-shadow: inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05);
+  border: solid ${remcalc(1)} #D8D8D8;
  -webkit-appearance: none;

  &:before {
--- a/ui/src/components/tabs/tab/index.js
+++ b/ui/src/components/tabs/tab/index.js
@ -34,9 +34,9 @@ const StyledTab = styled.div`

 const StyledRadio = styled.input`
  clip: rect(0 0 0 0);
-  height: 1px;
+  height: ${remcalc(1)};
  opacity: 0;
-  width: 1px;
+  width: ${remcalc(1)};

  ${moveZ({
    position: 'fixed',
@ -61,7 +61,7 @@ const StyledRadio = styled.input`

 const StyledLabel = styled.label`
  background: transparent;
-  border: 1px solid #D8D8D8;
+  border: ${remcalc(1)} solid #D8D8D8;
  display: inline-block;
  font-size: ${remcalc(20)};
  padding: ${remcalc('12 25')};
@ -81,7 +81,7 @@ const StyledContent = styled.div`
  background: ${colors.brandInactive};
  border: ${boxes.border.unchecked};
  box-sizing: border-box;
-  box-shadow: 0 -1px 26px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2);
  display: block;
  float: left;
  font-size: ${remcalc(16)};
--- a/ui/src/components/textarea/index.js
+++ b/ui/src/components/textarea/index.js
@ -30,14 +30,14 @@ const InputField = styled.textarea`
  background: ${colors.brandSecondary};
  color: ${props => props.error ? colors.alert : colors.fonts.semibold}
  display: block;
-  font-size: 16px;
+  font-size: ${remcalc(16)};
  padding: ${remcalc('15 18')};
  visibility: visible;
  width: 100%;
  min-height: ${remcalc(96)};
  ${baseBox()};
  border-color: ${props => props.error ? colors.alert : ''};
-  
+
  &:focus {
    border-color: ${boxes.border.checked};
    outline: none;
--- a/ui/src/components/toggle/index.js
+++ b/ui/src/components/toggle/index.js
@ -30,7 +30,7 @@ const StyledText = styled.span`
 const StyledDiv = styled.div`
  display: inline-block;
  background-color: ${colors.brandInactive};
-  
+
  ${baseBox()}
 `;

@ -46,17 +46,18 @@ const StyledInput0 = styled.input`
  display: none;

  & + span {
-    background: linear-gradient(to right, 
-                transparent 50%, 
+    background: linear-gradient(to right,
+                transparent 50%,
                ${colors.brandSecondary} 50%);
    background-position: left bottom;
-    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
-    
+    box-shadow: inset
+                ${remcalc(-7)} 0 ${remcalc(9)} ${remcalc(-7)}
+                rgba(0,0,0,0.4);
+
    ${inputStyled}
  }
-  
+
  &:checked {
-      
    & + span {
      background-position: right bottom;
    }
@ -66,17 +67,16 @@ const StyledInput0 = styled.input`
 const StyledInput1 = styled.input`
  display: none;

-  & + span { 
-    background: linear-gradient(to right, 
-                ${colors.brandSecondary} 50%, 
+  & + span {
+    background: linear-gradient(to right,
+                ${colors.brandSecondary} 50%,
                transparent 50%);
    background-position: right bottom;
-    
+
    ${inputStyled}
  }
-  
+
  &:checked {
-      
    & + span {
      background-position: left bottom;
    }
--- a/ui/src/components/tooltip/index.js
+++ b/ui/src/components/tooltip/index.js
@ -56,14 +56,14 @@ const StyledList = styled.ul`
  &:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
-    border-width: 10px;
-    margin-left: -10px;
+    border-width: ${remcalc(10)};
+    margin-left: ${remcalc(-10)};
  }
  &:before {
    border-color: rgba(216, 216, 216, 0);
    border-bottom-color: #d8d8d8;
-    border-width: 12px;
-    margin-left: -12px;
+    border-width: ${remcalc(12)};
+    margin-left: ${remcalc(-12)};
  }
 `;
 module.exports = ({
--- a/ui/src/components/topology/index.js
+++ b/ui/src/components/topology/index.js
@ -0,0 +1,425 @@
+const constants = require('../../shared/constants');
+const d3 = require('d3');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+/* eslint-disable */
+function rightRoundedRect(x, y, width, height, radius) {
+  return 'M' + x + ',' + y // Move to top left (absolute)
+       + 'h ' + (width - 2 * radius) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
+       + 'v ' + (height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch
+       + 'h ' + (2 * radius - width) // Horizontal lint to (relative)
+       + 'z '; // path back to start
+}
+/* eslint-enable */
+
+/* eslint-disable */
+function leftRoundedRect(x, y, width, height, radius) {
+  return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right
+       + 'v ' + height // Vertical line to (relative)
+       + 'h ' + (2 * radius - width) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
+       + 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch
+       + 'z '; // path back to start
+}
+/* eslint-enable */
+
+function topRoundedRect(x, y, width, height, radius) {
+  return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-left
+       + 'v ' + -(height - radius) // Vertical line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arc
+       + 'h ' + -(2 * radius  - width) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
+       + 'v ' + (height - radius) // Vertical line to (relative)
+       + 'h ' + (2 * radius - width) // Horizontal line to (relative)
+       + 'z '; // path back to start
+}
+
+function bottomRoundedRect(x, y, width, height, radius) {
+  return 'M' + x + ',' + -(y - (height - 2 * radius)) // Move to (absolute) start at bottom-right
+       + 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+       + 'h ' + (width) // Horizontal line to (relative)
+       + 'v ' + (height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + -radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arc
+       + 'h ' + (2 * radius - width) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
+       + 'z '; // path back to start
+}
+
+/* eslint-disable */
+function rect(x, y, width, height) {
+  return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-right
+       + 'v ' + -(height) // Vertical line to (relative)
+       + 'h ' + width // Horizontal line to (relative)
+       + 'v ' + height // Vertical line to (relative)
+       + 'h ' + -(width) // Horizontal line to (relative)
+       + 'z '; // path back to start
+}
+/* eslint-enable */
+
+const StyledSVGContainer = styled.svg`
+  & {
+    .links line {
+      stroke: #343434;
+      stroke-opacity: 1;
+    }
+
+    .health, .health_warn {
+      font-family: "Libre Franklin";
+      font-size: ${remcalc(12)};
+      font-weight: bold;
+      font-style: normal;
+      font-stretch: normal;
+      text-align: center;
+    }
+
+    .health_warn {
+      font-size: ${remcalc(15)};
+    }
+
+    .stat {
+      font-family: "Libre Franklin";
+      font-size: ${remcalc(12)};
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.5;
+    }
+
+    .node_statistics {
+      font-family: "Libre Franklin";
+      font-size: ${remcalc(12)};
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.5;
+    }
+
+    .node_statistics p {
+      margin: 0 0 0 0;
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .primary, .secondary {
+      font-family: "Libre Franklin";
+      font-size: ${remcalc(12)};
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.5;
+    }
+
+    .info_text {
+      font-family: "Libre Franklin";
+      font-size: ${remcalc(16)};
+      font-weight: 600;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.5;
+    }
+  }
+`;
+
+class TopologyGraph extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.svg = null;
+
+    const {
+      width,
+      height,
+    } = props;
+
+    this.simulation = d3.forceSimulation()
+      .force('charge', d3.forceManyBody()
+        .strength(() => -50)
+        .distanceMin(() => 30))
+      .force('link', d3.forceLink().distance(() => 200).id((d) => d.id))
+      // TODO manually handle looking for collisions in the tick, we then get the BBox
+      // and keep moving things for a while to try to get a fit.
+      .force('collide',
+        d3.forceCollide().radius((d) => 220 + 0.5).iterations(15))
+      .force('center', d3.forceCenter(width * 1/3, height * 1/3));
+  }
+
+  componentDidMount() {
+    const component = this;
+
+    const {
+      simulation,
+    } = this;
+
+    const svg = d3.select(this._refs.svg);
+    const {
+      width,
+      height,
+      graph = {
+        nodes: [],
+        links: []
+      },
+    } = this.props;
+
+    // Drawing the links between nodes
+    const link = svg.append('g')
+      .attr('class', 'links')
+      .selectAll('line')
+      .data(graph.links)
+      .enter().append('line')
+        .attr('stroke-width', remcalc(12));
+
+    // And svg group, to contain all of the attributes in @antonas' first prototype
+    svg.selectAll('.node')
+      .data(graph.nodes)
+      .enter()
+      .append('g')
+      .attr('class', 'node_group');
+
+    svg.selectAll('.node_group').each(function(d) {
+      // Create different type of node for services with Primaries + Secondaries
+      // We could extend this further to allow us to have as many nested services
+      // as wanted.
+      // TODO handle this per prop
+      // if (d.id === 'Percona') {
+      //   createExtendedNode(d3.select(this));
+      // } else {
+      component.createServiceNodes(d, d3.select(this));
+      // }
+    });
+
+    simulation
+        .nodes(graph.nodes)
+        .on('tick', ticked);
+
+    simulation.force('link')
+        .links(graph.links);
+
+    function contrain(dimension, r, z) {
+      return Math.max(0, Math.min(dimension - r, z));
+    }
+
+    function ticked() {
+      // TODO: Think of a common way of extracting the bounding boxes for each
+      // item and to grab the x{1,2} and y{1,2} values.
+      link
+        .attr('x1', function(d) {
+          let x;
+          svg.selectAll('.node_group').each(function(_, i) {
+            if (i !== d.source.index) return;
+            x = d3.select(this).node().getBBox().width;
+          });
+          return contrain(width, x, d.source.x) + 80;
+        })
+        .attr('y1', function(d) {
+          let y;
+          svg.selectAll('.node_group').each(function(_, i) {
+            if (i !== d.source.index) return;
+            y = d3.select(this).node().getBBox().height;
+          });
+          return contrain(height, y, d.source.y) + 24;
+        })
+        .attr('x2', function(d) {
+          let x;
+          svg.selectAll('.node_group').each(function(_, i) {
+            if (i !== d.target.index) return;
+            x = d3.select(this).node().getBBox().width;
+          });
+          return contrain(width, x, d.target.x) + 80;
+        })
+        .attr('y2', function(d) {
+          let y;
+          svg.selectAll('.node_group').each(function(_, i) {
+            if (i !== d.target.index) return;
+            y = d3.select(this).node().getBBox().height;
+          });
+          return contrain(height, y, d.target.y) + 24;
+        });
+
+      svg.selectAll('.node_group')
+         .attr('transform', function(d) {
+           const x = d3.select(this).node().getBBox().width;
+           const y = d3.select(this).node().getBBox().height;
+           return 'translate(' + contrain(width, x, d.x) + ','
+             + contrain(height, y, d.y) + ')';
+         });
+    }
+  }
+
+  createHealthCheckBadge(element, x, y) {
+    const paddingLeft = 30;
+    const health = element.append('g');
+
+    // TODO: replace these element with the designed SVG elements from
+    // @antonasdeduchovas' designs with full svg elements.
+
+    health.append('circle')
+      .attr('class', 'alert')
+      .attr('cx',  function() {
+        return element
+          .node()
+          .getBBox()
+          .width + paddingLeft;
+      })
+      .attr('cy', '24')
+      .attr('stroke-width', 0)
+      .attr('fill', (d) =>
+        d.id === 'Memcached' ? 'rgb(217, 77, 68)' : 'rgb(0,175,102)')
+      .attr('r', remcalc(9));
+
+    // An icon or label that exists within the circle, inside the infobox
+    health.append('text')
+    .attr('class', 'health')
+      .attr('x', function() {
+        return element
+          .node()
+          .getBBox()
+          .width + 3;
+      })
+      .attr('y', '29')
+      .attr('text-anchor', 'middle')
+      .attr('fill', colors.brandPrimaryColor)
+      .text((d) => d.id === 'Memcached' ? '!' : '❤');
+  }
+
+  createServiceNodeBody(data, element, d) {
+    const stats = element.append('g');
+    stats.append('path')
+    .attr('class', 'node')
+      .attr('d', d)
+      .attr('stroke', '#343434')
+      .attr('stroke-width', remcalc(1))
+      .attr('fill', '#464646');
+
+    const html = stats
+      .append('switch')
+      .append('foreignObject')
+        .attr('requiredFeatures',
+          'http://www.w3.org/TR/SVG11/feature#Extensibility')
+        .attr('x', 12)
+        .attr('y', 57)
+        .attr('width', 160)
+        .attr('height', 70)
+        // From here everything will be rendered with react using a ref.
+        // However for now these values are hard-coded.
+      .append('xhtml:div')
+        .attr('class', 'node_statistics');
+        // Remove with react + dyanmic data.
+
+    html.selectAll('.node_statistics').data(data.metrics).enter()
+      .append('p')
+        .text((d) => `${d.name}: ${d.stat}`);
+  }
+
+  createServiceNodes(data, elm) {
+    const component = this;
+
+    const {
+      dragged,
+      dragstarted,
+      dragended,
+    } = this;
+
+    const width = 170;
+    const topHeight = 47;
+    const radius = 4;
+
+    // Box where label will live
+    elm.append('path')
+    .attr('class', 'node')
+      .attr('d', topRoundedRect('0', '0', width, topHeight, radius))
+      .attr('stroke', colors.topologyBackground)
+      .attr('stroke-width', remcalc(1))
+      .attr('fill', colors.brandSecondaryColor);
+
+    const text = elm.append('g');
+
+    text.append('text')
+    .attr('class', 'info_text')
+      .attr('x', '12')
+      .attr('y', '30')
+      .attr('text-anchor', 'start')
+      .attr('fill', colors.brandPrimaryColor)
+      .text(d => d.id);
+
+    // if (service is registered twice in the scheduler) {
+    //   Do not show healthcheck in the header
+    // } else {
+    this.createHealthCheckBadge(text);
+    // }
+
+    // if (service is registered twice in the scheduler) {
+    //   this.createServiceNodeBody(data, elm, rect('0',`-${topHeight}`, width, 78, 4));
+    // } else {
+    this.createServiceNodeBody(data, elm,
+      bottomRoundedRect('0', `-${topHeight}`, width, 78, 4));
+    // }
+
+    // <==== END ====>
+
+    // Set up movement for service nodes
+    elm.call(d3.drag()
+            .on('start', dragstarted.bind(component))
+            .on('drag', dragged.bind(component))
+            .on('end', dragended.bind(component)));
+  }
+
+
+  dragstarted(d) {
+    if (!d3.event.active) this.simulation.alphaTarget(0.3).restart();
+    d.fx = d.x;
+    d.fy = d.y;
+  }
+
+  dragged(d) {
+    d.fx = d3.event.x;
+    d.fy = d3.event.y;
+  }
+
+  dragended(d) {
+    if (!d3.event.active) this.simulation.alphaTarget(0);
+    d.fx = null;
+    d.fy = null;
+  }
+
+  ref(name) {
+    this._refs = this._refs || {};
+
+    return (el) => {
+      this._refs[name] = el;
+    };
+  }
+
+  render() {
+    return (
+      <StyledSVGContainer
+        innerRef={this.ref('svg')}
+        {...this.props}
+      />
+    );
+  }
+
+}
+
+TopologyGraph.propTypes = {
+  graph: React.PropTypes.object,
+  height: React.PropTypes.number,
+  width: React.PropTypes.number,
+};
+
+module.exports = TopologyGraph;
--- a/ui/src/components/topology/story.js
+++ b/ui/src/components/topology/story.js
@ -0,0 +1,154 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const Topology = require('./');
+const TopologyView = require('./view');
+const services = {
+  nodes: [
+    {
+      id: 'Nginx',
+      attrs: {
+        dcs: 1,
+        instances: 2,
+        healthy: true,
+      },
+      metrics: [
+        {
+          name: 'CPU',
+          stat: '50%',
+        },
+        {
+          name: 'Memory',
+          stat: '20%',
+        },
+        {
+          name: 'Network',
+          stat: '5.9KB/sec',
+        },
+      ]
+    },
+    {
+      id: 'WordPress',
+      attrs: {
+        dcs: 1,
+        instances: 2,
+        healthy: true,
+      },
+      metrics: [
+        {
+          name: 'CPU',
+          stat: '50%',
+        },
+        {
+          name: 'Memory',
+          stat: '20%',
+        },
+        {
+          name: 'Network',
+          stat: '5.9KB/sec',
+        },
+      ]
+    },
+    {
+      id: 'Memcached',
+      attrs: {
+        dcs: 1,
+        instances: 2,
+        healthy: true,
+      },
+      metrics: [
+        {
+          name: 'CPU',
+          stat: '50%',
+        },
+        {
+          name: 'Memory',
+          stat: '20%',
+        },
+        {
+          name: 'Network',
+          stat: '5.9KB/sec',
+        },
+      ]
+    },
+    {
+      id: 'Percona',
+      attrs: {
+        dcs: 1,
+        instances: 2,
+        healthy: true,
+      },
+      metrics: [
+        {
+          name: 'CPU',
+          stat: '50%',
+        },
+        {
+          name: 'Memory',
+          stat: '20%',
+        },
+        {
+          name: 'Network',
+          stat: '5.9KB/sec',
+        },
+      ]
+    },
+    {
+      id: 'NFS',
+      attrs: {
+        dcs: 1,
+        instances: 2,
+        healthy: true,
+      },
+      metrics: [
+        {
+          name: 'CPU',
+          stat: '50%',
+        },
+        {
+          name: 'Memory',
+          stat: '20%',
+        },
+        {
+          name: 'Network',
+          stat: '5.9KB/sec',
+        },
+      ]
+    }
+  ],
+  links: [
+    {
+      source: 'Nginx',
+      target: 'WordPress',
+    },
+    {
+      source: 'WordPress',
+      target: 'Memcached',
+    },
+    {
+      source: 'WordPress',
+      target: 'NFS',
+    },
+    {
+      source: 'WordPress',
+      target: 'Percona',
+    }
+  ]
+};
+
+storiesOf('Topology', module)
+  .add('5 services', () => (
+    <Base>
+      <TopologyView>
+        <Topology
+          graph={services}
+          height={500}
+          width={500}
+        />
+      </TopologyView>
+    </Base>
+  ));
--- a/ui/src/components/topology/view.js
+++ b/ui/src/components/topology/view.js
@ -0,0 +1,33 @@
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const TopologyView = styled.div`
+  border: ${remcalc(1)} solid ${colors.borderSecondary};
+  background-color: ${colors.brandSecondary};
+`;
+
+const Topology = (props) => (
+  <TopologyView {...props}>
+    {props.children}
+  </TopologyView>
+);
+
+Topology.propTypes = {
+  children: React.PropTypes.node,
+};
+
+module.exports = Topology;
--- a/ui/src/components/widget/index.js
+++ b/ui/src/components/widget/index.js
@ -8,7 +8,8 @@ const {
 } = constants;

 const {
-  rndId
+  rndId,
+  remcalc
 } = fns;

 const {
@ -40,7 +41,7 @@ const StyledInput = styled.input`

 const StyledContent = styled.div`
  border: ${boxes.border.unchecked};
-  border-radius: 4px;
+  border-radius: ${remcalc(4)};
  cursor: pointer;
  padding: remcalc(36);

--- a/ui/src/index.js
+++ b/ui/src/index.js
@ -23,6 +23,7 @@ module.exports = {
  Tab: require('./components/tabs/tab'),
  Tabs: require('./components/tabs'),
  Toggle: require('./components/toggle'),
+  Topology: require('./components/topology'),
  Tooltip: require('./components/tooltip'),
  Textarea: require('./components/textarea'),
  Widget: require('./components/widget'),
--- a/ui/src/shared/constants/baseunits.js
+++ b/ui/src/shared/constants/baseunits.js
@ -0,0 +1,12 @@
+// WIP - possibly create a function like spacerXL, spacerS, spacerM for things lik
+//        padding, margins, widths
+
+const baseunit = {
+  xs: 3,
+  s: 6,
+  m: 12,
+  l: 18,
+  xl: 24
+};
+
+module.exports = baseunit;
--- a/ui/src/shared/constants/boxes.js
+++ b/ui/src/shared/constants/boxes.js
@ -1,15 +1,18 @@
 const colors = require('./colors');
+const fns = require('../functions');

-const boxes = {
-  borderRadius: '4px',
-  bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
-  bottomShaddowDarker: '0 2px 0 0 rgba(0, 0, 0, 0.1)',
-  insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
+const {
+  remcalc
+} = fns;
+
+module.exports = {
+  borderRadius: remcalc(4),
+  bottomShaddow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`,
+  bottomShaddowDarker: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`,
+  insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
  border: {
-    checked: `1px solid ${colors.brandPrimary}`,
-    unchecked: `1px solid ${colors.borderSecondary}`,
-    confirmed: `1px solid ${colors.confirmation}`
+    checked: `${remcalc(1)} solid ${colors.brandPrimary}`,
+    unchecked: `${remcalc(1)} solid ${colors.borderSecondary}`,
+    confirmed: `${remcalc(1)} solid ${colors.confirmation}`
  }
 };
-
-module.exports = boxes;
--- a/ui/src/shared/constants/colors.js
+++ b/ui/src/shared/constants/colors.js
@ -45,13 +45,18 @@ const metrics = {
  seperator: '#D9DEF3'
 };

+const topology = {
+  topologyBackground: '#343434',
+};
+
 const colors = {
  ...brandPrimary,
  ...brandSecondary,
  ...brandInactive,
  ...notifications,
  ...metrics,
-  fonts
+  ...topology,
+  fonts,
 };

 module.exports = colors;
--- a/ui/src/shared/constants/index.js
+++ b/ui/src/shared/constants/index.js
@ -6,6 +6,7 @@ const boxes = require('./boxes');
 const typography = require('./typography');
 const sizes = require('./sizes');
 const breakpoints = require('./breakpoints');
+const baseunit = require('./baseunits');

 const tables = {
  bg: 'transparent',
@ -22,7 +23,8 @@ const constants = traverse({
  forms,
  sizes,
  tables,
-  typography
+  typography,
+  baseunit
 }).map(function(x) {
  return isFunction(x) ? x(this.parent.node) : x;
 });
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@ -7,9 +7,8 @@ const {

 const {
  Base,
-  Container,
-  Row,
  Column,
+  Container,
  MiniMetric: {
    MiniMetricGraph,
    MiniMetricMeta,
@ -17,6 +16,7 @@ const {
    MiniMetricSubtitle,
    MiniMetricView
  },
+  Row,
 } = require('../src/');

 const MiniMetricData = require('../src/components/list/mini-metric-data');
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@ -162,8 +162,8 @@ ajv-keywords@^1.0.0:
  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.0.tgz#c11e6859eafff83e0dafc416929472eca946aa2c"

 ajv@^4.7.0:
-  version "4.10.3"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.10.3.tgz#3e4fea9675b157de7888b80dd0ed735b83f28e11"
+  version "4.10.4"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.10.4.tgz#c0974dd00b3464984892d6010aa9c2c945933254"
  dependencies:
    co "^4.6.0"
    json-stable-stringify "^1.0.1"
@ -293,6 +293,13 @@ array-unique@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"

+array.prototype.find@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.0.1.tgz#1557f888df6c57e4d1256f20852d687a25b51fde"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.0"
+
 arrify@^1.0.0, arrify@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
@ -1296,8 +1303,8 @@ babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18
    to-fast-properties "^1.0.1"

 babylon@^6.1.0, babylon@^6.11.0, babylon@^6.12.0, babylon@^6.13.0:
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.15.0.tgz#ba65cfa1a80e1759b0e89fb562e27dccae70348e"

 babylon@~5.8.3:
  version "5.8.38"
@ -1396,11 +1403,11 @@ browserify-zlib@^0.1.4:
  dependencies:
    pako "~0.2.0"

-browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.4.0, browserslist@~1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.5.1.tgz#67c3f2a1a6ad174cd01d25d2362e6e6083b26986"
+browserslist@^1.0.1, browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@~1.5.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.5.2.tgz#1c82fde0ee8693e6d15c49b7bff209dc06298c56"
  dependencies:
-    caniuse-db "^1.0.30000601"
+    caniuse-db "^1.0.30000604"

 buf-compare@^1.0.0:
  version "1.0.1"
@ -1435,9 +1442,9 @@ builtin-modules@^1.0.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"

-builtin-status-codes@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-2.0.0.tgz#6f22003baacf003ccd287afe6872151fddc58579"
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"

 caching-transform@^1.0.0:
  version "1.0.1"
@ -1489,9 +1496,19 @@ camelcase@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"

-caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000601, caniuse-db@^1.0.30000604:
-  version "1.0.30000604"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000604.tgz#bc139270a777564d19c0aadcd832b491d093bda5"
+caniuse-api@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.2.tgz#8f393c682f661c0a997b77bba6e826483fb3600e"
+  dependencies:
+    browserslist "^1.0.1"
+    caniuse-db "^1.0.30000346"
+    lodash.memoize "^4.1.0"
+    lodash.uniq "^4.3.0"
+    shelljs "^0.7.0"
+
+caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000604:
+  version "1.0.30000607"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000607.tgz#f9d5b542f30d064c305544ff8938b217c67b88e9"

 capture-stack-trace@^1.0.0:
  version "1.0.0"
@ -1537,12 +1554,9 @@ chart.js@^2.4.0:
    chartjs-color "^2.0.0"
    moment "^2.10.6"

-chartjs-chart-box-plot@^1.0.0-9:
-  version "1.0.0-9"
-  resolved "https://registry.yarnpkg.com/chartjs-chart-box-plot/-/chartjs-chart-box-plot-1.0.0-9.tgz#bd392c689301e71b13f602818629f5a0965eaddb"
-  dependencies:
-    react "^15.4.1"
-    react-dom "^15.4.1"
+chartjs-chart-box-plot@prerelease:
+  version "1.0.0-16"
+  resolved "https://registry.yarnpkg.com/chartjs-chart-box-plot/-/chartjs-chart-box-plot-1.0.0-16.tgz#2544012ae84b04fa9922fe528017f5b748346497"

 chartjs-color-string@^0.4.0:
  version "0.4.0"
@ -1774,7 +1788,7 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
  dependencies:
    delayed-stream "~1.0.0"

-commander@^2.8.1, commander@^2.9.0:
+commander@2, commander@^2.8.1, commander@^2.9.0:
  version "2.9.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
  dependencies:
@ -2076,6 +2090,216 @@ currently-unhandled@^0.4.1:
  dependencies:
    array-find-index "^1.0.1"

+d3-array@1, d3-array@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.0.2.tgz#174237bf356a852fadd6af87743d928631de7655"
+
+d3-axis@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.4.tgz#bdfdcf5e859824062e0f17ad920f76236e72512c"
+
+d3-brush@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.0.3.tgz#4fa5374cc3b755d0990bf76b71b7a66417751c74"
+  dependencies:
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-transition "1"
+
+d3-chord@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.3.tgz#a398bae7cb632a3c4ea687a555a6b9ee4609d990"
+  dependencies:
+    d3-array "1"
+    d3-path "1"
+
+d3-collection@1, d3-collection@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.2.tgz#df5acb5400443e9eabe9c1379896c67e52426b39"
+
+d3-color@1, d3-color@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.2.tgz#83cb4b3a9474e40795f009d97e97a15649830bbc"
+
+d3-dispatch@1, d3-dispatch@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.2.tgz#5b511e79a46a1f89492841c0a8f656687d5daa0a"
+
+d3-drag@1, d3-drag@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.0.2.tgz#d634cc3f7689f99dd03fd7eb1af2945c0f4339ad"
+  dependencies:
+    d3-dispatch "1"
+    d3-selection "1"
+
+d3-dsv@1, d3-dsv@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.3.tgz#049fe43c0f5f60c7ff7d376616bc76d6fc9d378f"
+  dependencies:
+    commander "2"
+    iconv-lite "0.4"
+    rw "1"
+
+d3-ease@1, d3-ease@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.2.tgz#b486f8f3ca308ca7be38197d65622b6e30983377"
+
+d3-force@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.0.4.tgz#f84dcbb3200be41de7bc30fa71923143156758bf"
+  dependencies:
+    d3-collection "1"
+    d3-dispatch "1"
+    d3-quadtree "1"
+    d3-timer "1"
+
+d3-format@1, d3-format@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.0.2.tgz#138618320b4bbeb43b5c0ff30519079fbbd7375e"
+
+d3-geo@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.4.0.tgz#15e58c414b5bafa1a960eeeb29059c94a60d8408"
+  dependencies:
+    d3-array "1"
+
+d3-hierarchy@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.0.3.tgz#986b4925e81f1e0b4087e9442850f950cf27d338"
+
+d3-interpolate@1, d3-interpolate@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.2.tgz#b52e6927a04fe1fe2a4cffc139e5389ed3e5e790"
+  dependencies:
+    d3-color "1"
+
+d3-path@1, d3-path@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.3.tgz#60103d0dea9a6cd6ca58de86c6d56724002d3fde"
+
+d3-polygon@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.2.tgz#6552c0fb03aa2d05023351da6e0e8adc4df0202b"
+
+d3-quadtree@1, d3-quadtree@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.2.tgz#e7e873af06aaa427eaa4af094cc4cbfb350b9e38"
+
+d3-queue@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/d3-queue/-/d3-queue-3.0.3.tgz#10ee4dd0574a1affaabfb931d0ba4f117926edc6"
+
+d3-random@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.0.2.tgz#83ff6a391206209c30565299e43c6549866db269"
+
+d3-request@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-request/-/d3-request-1.0.3.tgz#63fc7dfd784607db0df5d535d7cb898fceba755a"
+  dependencies:
+    d3-collection "1"
+    d3-dispatch "1"
+    d3-dsv "1"
+    xmlhttprequest "1"
+
+d3-scale@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.4.tgz#50e28bf6a193b706745528515ed9b3d44205a033"
+  dependencies:
+    d3-array "1"
+    d3-collection "1"
+    d3-color "1"
+    d3-format "1"
+    d3-interpolate "1"
+    d3-time "1"
+    d3-time-format "2"
+
+d3-selection@1, d3-selection@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.0.3.tgz#e63e51416172427854c1bcdfa066eb5fe872c108"
+
+d3-shape@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.0.4.tgz#145ee100ccbec42f8e3f1996cd05c786f79fe1c6"
+  dependencies:
+    d3-path "1"
+
+d3-time-format@2, d3-time-format@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.0.3.tgz#3241569b74ddc9c42e0689c0e8a903579fd6280a"
+  dependencies:
+    d3-time "1"
+
+d3-time@1, d3-time@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.4.tgz#2ceba09a76b7450c992a1ded4e10fc6195e69649"
+
+d3-timer@1, d3-timer@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.3.tgz#7a308a10c8524778e6b32d1d6c1c329209ae0ebf"
+
+d3-transition@1, d3-transition@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.0.3.tgz#91dc986bddb30973639320a85db72ce4ab1a27bb"
+  dependencies:
+    d3-color "1"
+    d3-dispatch "1"
+    d3-ease "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-timer "1"
+
+d3-voronoi@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.1.tgz#998544dca98ef0e89a6c40c0bac3510d1bc1b8b9"
+
+d3-zoom@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.1.1.tgz#d2362d8f7043c1fc5d96a438de69f4e02ef1e67b"
+  dependencies:
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-transition "1"
+
+d3@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-4.4.1.tgz#2cbb08f92970364076ffe91ab83ef66b80610785"
+  dependencies:
+    d3-array "1.0.2"
+    d3-axis "1.0.4"
+    d3-brush "1.0.3"
+    d3-chord "1.0.3"
+    d3-collection "1.0.2"
+    d3-color "1.0.2"
+    d3-dispatch "1.0.2"
+    d3-drag "1.0.2"
+    d3-dsv "1.0.3"
+    d3-ease "1.0.2"
+    d3-force "1.0.4"
+    d3-format "1.0.2"
+    d3-geo "1.4.0"
+    d3-hierarchy "1.0.3"
+    d3-interpolate "1.1.2"
+    d3-path "1.0.3"
+    d3-polygon "1.0.2"
+    d3-quadtree "1.0.2"
+    d3-queue "3.0.3"
+    d3-random "1.0.2"
+    d3-request "1.0.3"
+    d3-scale "1.0.4"
+    d3-selection "1.0.3"
+    d3-shape "1.0.4"
+    d3-time "1.0.4"
+    d3-time-format "2.0.3"
+    d3-timer "1.0.3"
+    d3-transition "1.0.3"
+    d3-voronoi "1.1.1"
+    d3-zoom "1.1.1"
+
 d@^0.1.1, d@~0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
@ -2487,9 +2711,10 @@ eslint-plugin-promise@^3.4.0:
  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.4.0.tgz#6ba9048c2df57be77d036e0c68918bc9b4fc4195"

 eslint-plugin-react@^6.8.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.8.0.tgz#741ab5438a094532e5ce1bbb935d6832356f492d"
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.9.0.tgz#54c2e9906b76f9d10142030bdc34e9d6840a0bb2"
  dependencies:
+    array.prototype.find "^2.0.1"
    doctrine "^1.2.2"
    jsx-ast-utils "^1.3.4"

@ -2498,8 +2723,8 @@ eslint-plugin-standard@^2.0.1:
  resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-2.0.1.tgz#3589699ff9c917f2c25f76a916687f641c369ff3"

 eslint@^3.12.2:
-  version "3.12.2"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.12.2.tgz#6be5a9aa29658252abd7f91e9132bab1f26f3c34"
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.13.1.tgz#564d2646b5efded85df96985332edd91a23bff25"
  dependencies:
    babel-code-frame "^6.16.0"
    chalk "^1.1.3"
@ -2531,7 +2756,7 @@ eslint@^3.12.2:
    require-uncached "^1.0.2"
    shelljs "^0.7.5"
    strip-bom "^3.0.0"
-    strip-json-comments "~1.0.1"
+    strip-json-comments "~2.0.1"
    table "^3.7.8"
    text-table "~0.2.0"
    user-home "^2.0.0"
@ -3019,7 +3244,7 @@ got@^5.0.0:
    unzip-response "^1.0.2"
    url-parse-lax "^1.0.0"

-graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@~4.1.4:
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@~4.1.4:
  version "4.1.11"
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"

@ -3155,14 +3380,14 @@ hyphenate-style-name@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"

+iconv-lite@0.4, iconv-lite@^0.4.13, iconv-lite@~0.4.13:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+
 iconv-lite@0.4.13:
  version "0.4.13"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"

-iconv-lite@^0.4.13, iconv-lite@~0.4.13:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
-
 icss-replace-symbols@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
@ -3856,8 +4081,8 @@ lodash.isarray@^3.0.0:
  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"

 lodash.isequal@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.4.0.tgz#6295768e98e14dc15ce8d362ef6340db82852031"
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"

 lodash.isfunction@^3.0.8:
  version "3.0.8"
@ -3883,6 +4108,10 @@ lodash.map@^4.4.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"

+lodash.memoize@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+
 lodash.merge@^4.4.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
@ -3907,6 +4136,10 @@ lodash.some@^4.4.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"

+lodash.uniq@^4.3.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+
 lodash@4.x.x, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
  version "4.17.4"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@ -4255,8 +4488,8 @@ normalize-selector@^0.2.0:
  resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"

 normalize-url@^1.4.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.8.0.tgz#a9550b079aa3523c85d78df24eef1959fce359ab"
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.0.tgz#c2bb50035edee62cd81edb2d45da68dc25e3423e"
  dependencies:
    object-assign "^4.0.1"
    prepend-http "^1.0.0"
@ -4705,24 +4938,24 @@ postcss-less@^0.14.0:
    postcss "^5.0.21"

 postcss-load-config@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.0.0.tgz#1399f60dcd6bd9c3124b2eb22960f77f9dc08b3d"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.1.0.tgz#1c3c217608642448c03bebf3c32b1b28985293f9"
  dependencies:
    cosmiconfig "^2.1.0"
    object-assign "^4.1.0"
-    postcss-load-options "^1.0.2"
-    postcss-load-plugins "^2.0.0"
+    postcss-load-options "^1.1.0"
+    postcss-load-plugins "^2.2.0"

-postcss-load-options@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.0.2.tgz#b99eb5759a588f4b2dd8b6471c6985f72060e7b0"
+postcss-load-options@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.1.0.tgz#e39215d154a19f69f9cb6052bffad4a82f09f354"
  dependencies:
    cosmiconfig "^2.1.0"
    object-assign "^4.1.0"

-postcss-load-plugins@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.1.0.tgz#dbb6f46271df8d16e19b5d691ebda5175ce424a0"
+postcss-load-plugins@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.2.0.tgz#84ef9cf36e637810ac5265e03f6d4c48ead83314"
  dependencies:
    cosmiconfig "^2.1.1"
    object-assign "^4.1.0"
@ -4755,10 +4988,13 @@ postcss-merge-longhand@^2.0.1:
    postcss "^5.0.4"

 postcss-merge-rules@^2.0.3:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.0.11.tgz#c5d7c8de5056a7377aea0dff2fd83f92cafb9b8a"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.1.tgz#5e5640020ce43cddd343c73bba91c9a358d1fe0f"
  dependencies:
+    browserslist "^1.5.2"
+    caniuse-api "^1.5.2"
    postcss "^5.0.4"
+    postcss-selector-parser "^2.2.2"
    vendors "^1.0.0"

 postcss-message-helpers@^2.0.0:
@ -4841,8 +5077,8 @@ postcss-normalize-url@^3.0.7:
    postcss-value-parser "^3.2.3"

 postcss-ordered-values@^2.1.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.2.tgz#be8b511741fab2dac8e614a2302e9d10267b0771"
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
  dependencies:
    postcss "^5.0.4"
    postcss-value-parser "^3.0.1"
@ -4896,7 +5132,7 @@ postcss-scss@^0.4.0:
  dependencies:
    postcss "^5.2.5"

-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.1.1:
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.1.1, postcss-selector-parser@^2.2.2:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.2.tgz#3d70f5adda130da51c7c0c2fc023f56b1374fe08"
  dependencies:
@ -4934,8 +5170,8 @@ postcss-zindex@^2.0.1:
    uniqs "^2.0.0"

 postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.18, postcss@^5.0.2, postcss@^5.0.20, postcss@^5.0.21, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.4, postcss@^5.2.5, postcss@^5.2.8:
-  version "5.2.8"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.8.tgz#05720c49df23c79bda51fd01daeb1e9222e94390"
+  version "5.2.10"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.10.tgz#b58b64e04f66f838b7bc7cb41f7dac168568a945"
  dependencies:
    chalk "^1.1.3"
    js-base64 "^2.1.9"
@ -5142,8 +5378,11 @@ rc@^1.0.1, rc@^1.1.6, rc@~1.1.6:
    strip-json-comments "~1.0.4"

 react-addons-test-utils@^15.4.1:
-  version "15.4.1"
-  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.1.tgz#1e4caab151bf27cce26df5f9cb714f4fd8359ae1"
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.2.tgz#93bcaa718fcae7360d42e8fb1c09756cc36302a2"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"

 react-docgen@^2.12.1:
  version "2.13.0"
@ -5158,8 +5397,8 @@ react-docgen@^2.12.1:
    recast "^0.11.5"

 react-dom@^15.4.1:
-  version "15.4.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a"
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f"
  dependencies:
    fbjs "^0.8.1"
    loose-envify "^1.1.0"
@ -5212,7 +5451,7 @@ react-modal@^1.2.0, react-modal@^1.2.1:
    exenv "1.2.0"
    lodash.assign "^4.2.0"

-react-select:
+react-select@^1.0.0-rc.2:
  version "1.0.0-rc.2"
  resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.0.0-rc.2.tgz#9fc11b149a3dc1ac831289d21b40a59742f82f8d"
  dependencies:
@ -5233,8 +5472,8 @@ react-stubber@^1.0.0:
    babel-runtime "^6.5.0"

 react@^15.4.1:
-  version "15.4.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6"
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"
  dependencies:
    fbjs "^0.8.4"
    loose-envify "^1.1.0"
@ -5553,6 +5792,10 @@ run-async@^0.1.0:
  dependencies:
    once "^1.3.0"

+rw@1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.2.tgz#14ef5137ff7547c73ecf0e0af1f0aee07e5401ee"
+
 rx-lite@^3.1.2:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
@ -5643,9 +5886,9 @@ shebang-regex@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"

-shelljs@^0.7.4, shelljs@^0.7.5:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.5.tgz#2eef7a50a21e1ccf37da00df767ec69e30ad0675"
+shelljs@^0.7.0, shelljs@^0.7.4, shelljs@^0.7.5:
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.6.tgz#379cccfb56b91c8601e4793356eb5382924de9ad"
  dependencies:
    glob "^7.0.0"
    interpret "^1.0.0"
@ -5690,8 +5933,8 @@ sort-keys@^1.0.0, sort-keys@^1.1.1:
    is-plain-obj "^1.0.0"

 source-list-map@^0.1.4, source-list-map@~0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.7.tgz#d4b5ce2a46535c72c7e8527c71a77d250618172e"
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"

 source-map-support@^0.4.0, source-map-support@^0.4.2:
  version "0.4.8"
@ -5811,10 +6054,10 @@ stream-combiner@^0.2.1:
    through "~2.3.4"

 stream-http@^2.3.1:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.5.0.tgz#585eee513217ed98fe199817e7313b6f772a6802"
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.6.1.tgz#7d20fcdfebc16b16e4174e31dd94cd9c70f10e89"
  dependencies:
-    builtin-status-codes "^2.0.0"
+    builtin-status-codes "^3.0.0"
    inherits "^2.0.1"
    readable-stream "^2.1.0"
    to-arraybuffer "^1.0.0"
@ -5897,10 +6140,14 @@ strip-indent@^1.0.1:
  dependencies:
    get-stdin "^4.0.1"

-strip-json-comments@~1.0.1, strip-json-comments@~1.0.4:
+strip-json-comments@~1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"

+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+
 style-loader@0.13.1:
  version "0.13.1"
  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.1.tgz#468280efbc0473023cd3a6cd56e33b5a1d7fc3a9"
@ -6295,8 +6542,8 @@ uniq@^1.0.1:
  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"

 uniqid@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.0.tgz#33d9679f65022f48988a03fd24e7dcaf8f109eca"
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.1.tgz#89220ddf6b751ae52b5f72484863528596bb84c1"
  dependencies:
    macaddress "^0.2.8"

@ -6486,8 +6733,8 @@ whatwg-fetch@>=0.10.0:
  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.1.tgz#078b9461bbe91cea73cbce8bb122a05f9e92b772"

 whatwg-url@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.2.0.tgz#abf1a3f5ff4bc2005b3f0c2119382631789d8e44"
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.3.0.tgz#92aaee21f4f2a642074357d70ef8500a7cbb171a"
  dependencies:
    tr46 "~0.0.3"
    webidl-conversions "^3.0.0"
@ -6550,10 +6797,10 @@ wrappy@1:
  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"

 write-file-atomic@^1.1.2, write-file-atomic@^1.1.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.2.0.tgz#14c66d4e4cb3ca0565c28cf3b7a6f3e4d5938fab"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.1.tgz#7d45ba32316328dd1ec7d90f60ebc0d845bb759a"
  dependencies:
-    graceful-fs "^4.1.2"
+    graceful-fs "^4.1.11"
    imurmurhash "^0.1.4"
    slide "^1.1.5"

@ -6608,6 +6855,10 @@ xmlbuilder@^4.1.0, xmlbuilder@~4.1.0:
  dependencies:
    lodash "^3.5.0"

+xmlhttprequest@1:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
+
 "xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"