Symbol selector

src/components/fields/TraceSelector.js

@@ -5,13 +5,13 @@ import nestedProperty from 'plotly.js/src/lib/nested_property';
 import {connectToContainer} from '../../lib';
 
 class TraceSelector extends Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
     this.updatePlot = this.updatePlot.bind(this);
     this.fullValue = this.fullValue.bind(this);
 
-    const scatterAttrs = this.context.plotSchema.traces.scatter.attributes;
-    this.fillTypes = scatterAttrs.fill.values.filter(v => v !== 'none');
+    const fillMeta = props.getValObject('fill');
+    this.fillTypes = fillMeta.values.filter(v => v !== 'none');
   }
 
   updatePlot(value) {
@@ -26,18 +26,19 @@ class TraceSelector extends Component {
       update = {type: value};
     }
 
-    this.props.updateContainer && this.props.updateContainer(update);
+    if (this.props.updateContainer) {
+      this.props.updateContainer(update);
+    }
   }
 
   fullValue() {
-    const type = this.props.fullValue();
+    const {container, fullValue} = this.props;
+    const type = fullValue();
 
-    // we use gd.data instead of fullData so that we can show the trace
-    // even if the trace is not visible due to missing data.
-    // If we used fullData mode or fill will be undefined as the fullTrace
-    // isn't computed when not visible.
-    const mode = nestedProperty(this.props.trace, 'mode').get();
-    const fill = nestedProperty(this.props.trace, 'fill').get();
+    // If we used fullData mode or fill it may be undefined if the fullTrace
+    // is not visible and therefore does not have these values computed.
+    const mode = nestedProperty(container, 'mode').get();
+    const fill = nestedProperty(container, 'fill').get();
 
     if (type === 'scatter' && this.fillTypes.includes(fill)) {
       return 'area';
@@ -60,8 +61,11 @@ class TraceSelector extends Component {
   }
 }
 
-TraceSelector.contextTypes = {
-  plotSchema: PropTypes.object,
+TraceSelector.propTypes = {
+  getValObject: PropTypes.func.isRequired,
+  container: PropTypes.object.isRequired,
+  fullValue: PropTypes.func.isRequired,
+  updateContainer: PropTypes.func,
 };
 
 export default connectToContainer(TraceSelector);

src/lib/unpackPlotProps.js

@@ -3,7 +3,13 @@ import isNumeric from 'fast-isnumeric';
 import {MULTI_VALUED, MULTI_VALUED_PLACEHOLDER} from './constants';
 
 export default function unpackPlotProps(props, context, ComponentClass) {
-  const {container, defaultContainer, fullContainer, updateContainer} = context;
+  const {
+    container,
+    getValObject,
+    defaultContainer,
+    fullContainer,
+    updateContainer,
+  } = context;
 
   if (!container || !fullContainer) {
     throw new Error(
@@ -46,6 +52,7 @@ export default function unpackPlotProps(props, context, ComponentClass) {
     attrMeta,
     container,
     defaultValue,
+    getValObject,
     fullContainer,
     fullValue,
     isVisible,

src/styles/_helpers.scss

@@ -1,3 +1,3 @@
 .\+flex { display: flex; }
 .\+cursor-clickable { cursor: pointer; }
-.\+hover-grey:hover{ color: $color-gray-dark; }
+.\+hover-grey:hover{ color: $color-active-text; }

src/styles/_mixins.scss

@@ -21,3 +21,15 @@
         @error "'#{$value}' is not a valid z-index value";
     }
 }
+
+@mixin clearfix() {
+    &:before,
+    &:after {
+        content: " ";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+}

src/styles/components/containers/_fold.scss

@@ -15,8 +15,8 @@
   clear: both;
   padding: 6px 12px;
   color: #ffffff;
-  font-size: 13px;
-  line-height: 13px;
+  font-size: $font-size;
+  line-height: $font-size;
   border: 1px solid #a2b1c6;
   background-color: #a2b1c6;
   height: 15px;

src/styles/components/containers/_info.scss

@@ -1,5 +1,5 @@
 .info__title {
-    color: $color-blue-pale;
+    color: $color-link-light;
     font-size: $font-size-medium;
     font-weight: $font-weight-normal;
     line-height: 18px;
@@ -8,14 +8,14 @@
 
 .info__text {
     padding: $quarter-spacing-unit $half-spacing-unit;
-    color: $color-rhino-dark;
+    color: $color-secondary-text;
     font-size: $font-size-small;
     font-weight: $font-weight-light;
     line-height: 18px;
 }
 
 .info__sub-text {
-    color: $color-navyblue;
+    color: $color-brand;
     font-size: $font-size-small;
     font-weight: $font-weight-light;
     line-height: 14px;

src/styles/components/containers/_menupanel.scss

@@ -3,7 +3,7 @@
   border-radius: 2px;
   text-transform: none;
   text-align: left;
-  border: $fold-border;
+  border: 1px solid $color-border;
 
   align-content: center;
   box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
@@ -39,7 +39,7 @@
 }
 
 .subpanel__icon-span--question {
-  color: $color-blue-pale;
+  color: $color-link-light;
 }
 
 .subpanel__icon {

src/styles/components/containers/_panel.scss

@@ -5,7 +5,7 @@
   bottom: 5px;
   right: 1px;
   margin-left: 100px;
-  background-color: $color-rhino-light-3;
+  background-color: $color-panel-background;
   overflow-y: scroll;
   padding-left: $half-spacing-unit;
   padding-right: $half-spacing-unit;

src/styles/components/containers/_section.scss

@@ -1,10 +1,10 @@
 .section__heading {
   display: flex;
-  font-size: 13px;
-  color: #69738a;
+  font-size: $font-size;
+  color: $color-header-text;
   font-weight: 400;
   cursor: default;
-  background-color: #F4FAFF;
+  background-color: $color-section-header-background;
   padding: 6px 12px;
   clear: both;
   text-transform: capitalize;

src/styles/components/fields/_field.scss

@@ -0,0 +1,59 @@
+.field {
+  align-items: center;
+  border-top: 1px solid #f8f8f9;
+  color: #6D6D6D;
+  display: flex;
+  font-size: $font-size;
+  font-weight: $font-weight-light;
+  justify-content: flex-start;
+  line-height: $font-size;
+  min-height: 32px;
+  padding: 6px 0;
+  width: 100%;
+}
+
+.field:not(:last-child) {
+  border-bottom: 1px solid #f8f8f9;
+}
+
+.field__no-title {
+  width: 100%;
+  padding: 0 12px;
+}
+
+.field__no-title--center {
+  text-align: center;
+}
+
+.field__title {
+  padding-left: 0.5em;
+  color: #69738a;
+  font-size: 14px;
+  width: 36%;
+  display: inline-block;
+}
+
+.field__widget {
+  width: 64%;
+  padding-left: 18px;
+  display: inline-block;
+  padding-right: 12px;
+}
+
+.field__widget--postfix {
+  width: 50%;
+  padding-right: 0px;
+}
+
+.field__title {
+  width: 30%;
+  padding-left: 12px;
+  display: inline-block;
+  line-height: 18px;
+  text-transform: capitalize;
+}
+
+.field__title-text {
+  text-transform: capitalize;
+  cursor: default;
+}

src/styles/components/fields/_main.scss

@@ -1,59 +1,2 @@
-.field {
-  align-items: center;
-  border-top: 1px solid #f8f8f9;
-  color: #6D6D6D;
-  display: flex;
-  font-size: 13px;
-  font-weight: $font-weight-light;
-  justify-content: flex-start;
-  line-height: 13px;
-  min-height: 32px;
-  padding: 6px 0;
-  width: 100%;
-}
-
-.field:not(:last-child) {
-  border-bottom: 1px solid #f8f8f9;
-}
-
-.field__no-title {
-  width: 100%;
-  padding: 0 12px;
-}
-
-.field__no-title--center {
-  text-align: center;
-}
-
-.field__title {
-  padding-left: 0.5em;
-  color: #69738a;
-  font-size: 14px;
-  width: 36%;
-  display: inline-block;
-}
-
-.field__widget {
-  width: 64%;
-  padding-left: 18px;
-  display: inline-block;
-  padding-right: 12px;
-}
-
-.field__widget--postfix {
-  width: 50%;
-  padding-right: 0px;
-}
-
-.field__title {
-  width: 30%;
-  padding-left: 12px;
-  display: inline-block;
-  line-height: 18px;
-  text-transform: capitalize;
-}
-
-.field__title-text {
-  text-transform: capitalize;
-  cursor: default;
-}
+@import 'field';
+@import 'symbolselector';