Clean up unused vars

bindings/jupyter-modules/jupyter-ma-causal/src/components/multi-line-chart/index.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {line as d3Line} from 'd3-shape';
 import {scaleLinear, scaleOrdinal} from 'd3-scale';
 import {schemeCategory10} from 'd3-scale-chromatic';
-import {extent as d3Extent} from 'd3-array';
 import {format as d3Format} from 'd3-format';
 
 const colorScale = scaleOrdinal(schemeCategory10);
@@ -45,8 +44,7 @@ export default class Chart extends Component {
     const {
       data,
       width,
-      height,
-      padding: {left, right, top},
+      padding: {right, top},
     } = this.props;
     if (!data || !data.lines) {
       return null;
@@ -211,7 +209,6 @@ export default class Chart extends Component {
       return null;
     }
 
-    const {width, height} = this.props;
     const xScale = this._getXScale();
     const yScale = this._getYScale();
 
@@ -235,7 +232,6 @@ export default class Chart extends Component {
     if (!data || !data.lines) {
       return null;
     }
-    const {width, height} = this.props;
     const xScale = this._getXScale();
     const yScale = this._getYScale();
 

bindings/jupyter-modules/jupyter-ma-causal/src/components/slidebar/index.js

@@ -49,15 +49,15 @@ export default class Chart extends Component {
 
   _renderLeftBar() {
     const {
-      extent: [[x0, y0], [x1, y1]],
+      extent: [[x0, y0], [, y1]],
     } = this.props;
     const x = this._getX();
     return <rect x={x0} y={y0} width={x - x0} height={y1} fill="#3399ff" />;
   }
 
   _renderRightBar() {
     const {
-      extent: [[x0, y0], [x1, y1]],
+      extent: [[, y0], [x1, y1]],
     } = this.props;
     const x = this._getX();
     return <rect x={x} y={y0} width={x1 - x} height={y1} fill="#c2c2d6" />;
@@ -68,7 +68,7 @@ export default class Chart extends Component {
       return null;
     }
     const {
-      extent: [[x0, y0], [x1, y1]],
+      extent: [[, y0], [, y1]],
       leftLabel,
     } = this.props;
     const x = this._getX();
@@ -89,7 +89,7 @@ export default class Chart extends Component {
       return null;
     }
     const {
-      extent: [[x0, y0], [x1, y1]],
+      extent: [[, y0], [, y1]],
       rightLabel,
     } = this.props;
     const x = this._getX();
@@ -140,7 +140,7 @@ export default class Chart extends Component {
           }
           if (this.move) {
             const [x, y] = this.props.getEventMouse(event);
-            const [sx, sy] = this.move;
+            const [sx] = this.move;
             const dx = x - sx;
             const mx = Math.min(Math.max(x + dx, x0), x1);
             this.move = [x, y];

bindings/jupyter-modules/jupyter-ma-causal/src/containers/index.js

@@ -5,6 +5,7 @@ import {updateData} from '../actions';
 import MultiLineChartContainer from '../containers/multi-line-chart-container';
 import SlidebarContainer from '../containers/slidebar-svg-container';
 import LineIndicatorContainer from '../containers/line-indicator-container';
+import StaticbarContainer from '../containers/staticbar-svg-container';
 
 const mapStateToProps = (state, props) => ({
   columnWidth: getColumnWidth(state),
@@ -54,8 +55,30 @@ class App extends Component {
                 </div>
               </div>
             ))}
+
             <LineIndicatorContainer index={i} />
           </div>
+          <div
+            style={{position: 'relative', width: columnWidth, marginTop: 13}}
+          >
+            {' '}
+            {(data[i].lines || []).map(d => (
+              <React.Fragment key={d.name}>
+                {['treatment', 'control'].map(groupName => (
+                  <div key={groupName}>
+                    <div>{`${d.name} ${groupName} group`}</div>
+                    <div>
+                      <StaticbarContainer
+                        index={i}
+                        lineName={d.name}
+                        groupName={groupName}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </React.Fragment>
+            ))}
+          </div>
         </div>
       );
     });

bindings/jupyter-modules/jupyter-ma-causal/src/containers/line-indicator-container/index.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {scaleLinear} from 'd3-scale';
+import {format as d3Format} from 'd3-format';
 
 import {clamp} from '../../utils';
 
@@ -43,7 +44,6 @@ class Chart extends Component {
   render() {
     const {
       width,
-      height,
       sliderValue,
       padding: {top, bottom, left, right},
       index,
@@ -55,36 +55,51 @@ class Chart extends Component {
     );
 
     return (
-      <div
-        ref={input => (this.div = input)}
-        style={{
-          position: 'absolute',
-          left: x,
-          top,
-          width: 1,
-          height: `calc(100% - ${bottom}px)`,
-          borderLeft: '1px dotted black',
-          cursor: 'ew-resize',
-        }}
-        onPointerDown={event => {
-          event.target.setPointerCapture(event.pointerId);
-          this.move = this._getEventMouse(event);
-        }}
-        onPointerMove={event => {
-          if (this.move) {
-            const [x, y] = this._getEventMouse(event);
-            const [sx, sy] = this.move;
-            const dx = x - sx;
-            const mx = Math.min(Math.max(x + dx, left), width - right);
-            this.move = [x, y];
-            const value = clamp(scale.invert(mx));
-            this.props.updateSliderValues({[index]: value});
-          }
-        }}
-        onPointerUp={event => {
-          this.move = null;
-        }}
-      />
+      <React.Fragment>
+        <div
+          ref={input => (this.div = input)}
+          style={{
+            position: 'absolute',
+            left: x,
+            top,
+            width: 0,
+            height: `calc(100% - ${bottom}px)`,
+            borderLeft: '1px dotted black',
+            cursor: 'ew-resize',
+          }}
+          onPointerDown={event => {
+            event.target.setPointerCapture(event.pointerId);
+            this.move = this._getEventMouse(event);
+          }}
+          onPointerMove={event => {
+            if (this.move) {
+              const [x, y] = this._getEventMouse(event);
+              const [sx] = this.move;
+              const dx = x - sx;
+              const mx = Math.min(Math.max(x + dx, left), width - right);
+              this.move = [x, y];
+              const value = clamp(scale.invert(mx));
+              this.props.updateSliderValues({[index]: value});
+            }
+          }}
+          onPointerUp={event => {
+            this.move = null;
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            left: x - 13,
+            top: 'calc(100% - 3px)',
+          }}
+        >
+          {`${d3Format('2d')(
+            (sliderValue === null || sliderValue === undefined
+              ? 1
+              : sliderValue) * 100
+          )}%`}
+        </div>
+      </React.Fragment>
     );
   }
 }

bindings/jupyter-modules/jupyter-ma-causal/src/containers/slidebar-svg-container/index.js

@@ -44,19 +44,20 @@ class Chart extends Component {
   }
 
   getLeftLabel() {
-    const {sliderValue, data, lineName} = this.props;
+    const format = d3Format('.6f');
+    const {sliderValue, data} = this.props;
     if (sliderValue === null || sliderValue === undefined) {
-      return '1.0';
+      return format(data[data.length - 1].y);
     }
 
-    const format = d3Format('.6f');
     const idx = data.findIndex(d => d.x > sliderValue);
     if (idx === -1) {
       return format(data[data.length - 1].y);
     } else {
       return format(data[idx && idx - 1].y);
     }
   }
+
   render() {
     const {
       width,

bindings/jupyter-modules/jupyter-ma-causal/src/containers/staticbar-svg-container/index.js

@@ -0,0 +1,65 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {format as d3Format} from 'd3-format';
+
+import {getLineDataFactory} from '../../selectors/factories';
+
+import {
+  getChartWidth,
+  getChartHeight,
+  getChartPadding,
+} from '../../selectors/staticbar-selectors';
+
+const mapStateToProps = (state, props) => {
+  const {index, lineName} = props;
+  const getLineData = getLineDataFactory(index, lineName);
+  return {
+    data: getLineData(state),
+    width: getChartWidth(state),
+    height: getChartHeight(state),
+    padding: getChartPadding(state),
+  };
+};
+
+const mapDispatchToProps = {};
+
+class Chart extends Component {
+  render() {
+    const {
+      width,
+      height,
+      padding: {left, right, top, bottom},
+      groupName, // treatment or control
+      data,
+    } = this.props;
+
+    const format = d3Format('.6f');
+
+    return (
+      <svg width={width} height={height}>
+        <rect
+          x={left}
+          y={0}
+          width={width - right - left}
+          height={height}
+          fill={groupName === 'treatment' ? '#3399ff' : '#c2c2d6'}
+        />
+        <text
+          x={width - right - 3}
+          y={(top + height - bottom) / 2}
+          textAnchor="end"
+          dominantBaseline="middle"
+        >
+          {groupName === 'treatment'
+            ? format(data[data.length - 1].y)
+            : format(data[0].y)}
+        </text>
+      </svg>
+    );
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Chart);

bindings/jupyter-modules/jupyter-ma-causal/src/selectors/index.js

@@ -3,11 +3,12 @@ import * as baseSelectors from './base-selectors';
 import * as multiLineChartSelectors from './multi-line-chart-selectors';
 import * as slidebarSelectors from './slidebar-selectors';
 import * as indicatorLineSelectors from './indicator-line-selectors';
-
+import * as staticbarSelectors from './staticbar-selectors';
 export {
   factories,
   baseSelectors,
   multiLineChartSelectors,
   slidebarSelectors,
   indicatorLineSelectors,
+  staticbarSelectors,
 };

bindings/jupyter-modules/jupyter-ma-causal/src/selectors/staticbar-selectors.js

@@ -0,0 +1,17 @@
+import {createSelector} from 'reselect';
+import {
+  rootSelector,
+  getColumnWidth,
+  getChartPaddingLeft,
+  getChartPaddingRight,
+} from './base-selectors';
+
+export const getChartWidth = createSelector(getColumnWidth, width => width);
+
+// TODO: move this to a constant or implement adjustable width logic depending on the needs
+export const getChartHeight = createSelector(rootSelector, height => 50);
+
+export const getChartPadding = createSelector(
+  [getChartPaddingLeft, getChartPaddingRight],
+  (left, right) => ({bottom: 0, top: 0, left, right})
+);