fixes via vera, other tweaks

Author: aulneau

Diff for: src/PlotlyEditor.js

@@ -49,7 +49,7 @@ class PlotlyEditor extends Component {
       onUpdate: this.handleUpdate.bind(this),
       plotSchema: this.plotSchema,
       plotly: this.props.plotly,
-      traceSelectorConfig: this.props.traceSelectorConfig,
+      traceTypesConfig: this.props.traceTypesConfig,
     };
   }
 
@@ -252,12 +252,12 @@ PlotlyEditor.propTypes = {
   onUpdate: PropTypes.func,
   plotly: PropTypes.object,
   revision: PropTypes.any,
-  traceSelectorConfig: PropTypes.object,
+  traceTypesConfig: PropTypes.object,
 };
 
 PlotlyEditor.defaultProps = {
   locale: 'en',
-  traceSelectorConfig: {
+  traceTypesConfig: {
     categories: _ => categoryLayout(_),
     traces: _ => traceTypes(_),
   },
@@ -279,7 +279,7 @@ PlotlyEditor.childContextTypes = {
   onUpdate: PropTypes.func,
   plotly: PropTypes.object,
   plotSchema: PropTypes.object,
-  traceSelectorConfig: PropTypes.object,
+  traceTypesConfig: PropTypes.object,
 };
 
 export default PlotlyEditor;

Diff for: src/components/containers/Modal.js

@@ -21,10 +21,6 @@ const ModalContent = ({children}) => (
 );
 
 class Modal extends Component {
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     const {children, title} = this.props;
     let classes = 'modal';

Diff for: src/components/fields/TraceSelector.js

@@ -47,6 +47,8 @@ class TraceSelector extends Component {
     const _ = props.localize;
     if (props.traceOptions) {
       this.traceOptions = props.traceOptions;
+    } else if (context.traceTypesConfig) {
+      this.traceOptions = context.traceTypesConfig.traces(_);
     } else if (context.plotSchema) {
       this.traceOptions = computeTraceOptionsFromSchema(
         context.plotSchema,
@@ -102,7 +104,7 @@ class TraceSelector extends Component {
         <Field {...props}>
           <TraceTypeSelectorButton
             {...props}
-            traceSelectorConfig={this.context.traceSelectorConfig}
+            traceTypesConfig={this.context.traceTypesConfig}
             handleClick={() => this.context.openModal(TraceTypeSelector, props)}
           />
         </Field>
@@ -116,7 +118,7 @@ class TraceSelector extends Component {
 TraceSelector.contextTypes = {
   openModal: PropTypes.func,
   advancedTraceTypeSelector: PropTypes.bool,
-  traceSelectorConfig: PropTypes.object,
+  traceTypesConfig: PropTypes.object,
   plotSchema: PropTypes.object,
   config: PropTypes.object,
 };

Diff for: src/components/widgets/TraceTypeSelector.js

@@ -23,22 +23,31 @@ const actions = ({value}) => [
 ];
 
 const renderActionItems = (actionItems, item) =>
-  actionItems(item).map((action, i) => (
-    <a
-      className="trace-item__actions__item"
-      key={i}
-      aria-label={action.label}
-      data-microtip-position={`top-left`}
-      role="tooltip"
-      href={action.href}
-      target="_blank"
-    >
-      {action.icon}
-    </a>
-  ));
+  actionItems
+    ? actionItems(item).map((action, i) => (
+        <a
+          className="trace-item__actions__item"
+          key={i}
+          aria-label={action.label}
+          data-microtip-position={`top-left`}
+          role="tooltip"
+          href={action.href}
+          target="_blank"
+        >
+          {action.icon}
+        </a>
+      ))
+    : null;
 
 const Item = ({item, active, handleClick, actions, showActions}) => {
   const {label, value, icon} = item;
+  const SimpleIcon = renderTraceIcon(icon ? icon : value);
+  const ComplexIcon = renderTraceIcon(
+    icon ? `TraceType${icon}` : `TraceType${value}`
+  );
+
+  const complex = true;
+
   return (
     <div
       className={`trace-item${active ? ' trace-item--active' : ''}`}
@@ -48,7 +57,19 @@ const Item = ({item, active, handleClick, actions, showActions}) => {
         {actions && showActions ? renderActionItems(actions, item) : null}
       </div>
       <div className="trace-item__image">
-        <img src={`/_temp/ic-${icon ? icon : value}.svg`} />
+        {!complex && (
+          <div className="trace-item__image__svg">
+            <SimpleIcon />
+          </div>
+        )}
+        {complex && (
+          <div className="trace-item__image__wrapper">
+            <img
+              src={`/_temp/ic-${icon ? icon : value}.svg`}
+              alt={`Trace Type: ${label}`}
+            />
+          </div>
+        )}
       </div>
       <div className="trace-item__label">{label}</div>
     </div>
@@ -64,14 +85,14 @@ class TraceTypeSelector extends Component {
 
   renderCategories() {
     const {fullValue, localize: _} = this.props;
-    const {traces, categories} = this.context.traceSelectorConfig;
+    const {traces, categories} = this.context.traceTypesConfig;
 
     return categories(_).map((category, i) => {
       const items = traces(_).filter(
         ({category: {value}}) => value === category.value
       );
 
-      const MAX_ITEMS = 6;
+      const MAX_ITEMS = 4;
 
       let columnClasses = 'trace-grid__column';
 
@@ -114,7 +135,7 @@ class TraceTypeButton extends React.Component {
       handleClick,
       fullValue,
       localize: _,
-      traceSelectorConfig: {traces},
+      traceTypesConfig: {traces},
     } = this.props;
 
     const {label, icon, value} = traces(_).find(
@@ -146,10 +167,10 @@ TraceTypeButton.propTypes = {
   handleClick: PropTypes.func.isRequired,
   fullValue: PropTypes.string.isRequired,
   localize: PropTypes.func.isRequired,
-  traceSelectorConfig: PropTypes.object.isRequired,
+  traceTypesConfig: PropTypes.object.isRequired,
 };
 TraceTypeSelector.contextTypes = {
-  traceSelectorConfig: PropTypes.object,
+  traceTypesConfig: PropTypes.object,
   handleClose: PropTypes.func,
 };
 Item.propTypes = {

Diff for: src/lib/computeTraceOptionsFromSchema.js

@@ -5,7 +5,6 @@ function computeTraceOptionsFromSchema(schema, _, context) {
     t => !['area', 'scattermapbox'].includes(t)
   );
 
-  // explicit map of all supported trace types (as of plotlyjs 1.32)
   const traceOptions = [
     {
       value: 'scatter',

Diff for: src/lib/customTraceType.js

@@ -25,8 +25,6 @@ export function traceTypeToPlotlyInitFigure(traceType) {
       return {type: 'scatter', mode: 'markers', fill: 'none'};
     case 'area':
       return {type: 'scatter', fill: 'tozeroy'};
-    case 'cartesianArea':
-      return {type: 'scatter', fill: 'tozeroy'};
     case 'ohlc':
       return {
         type: 'ohlc',

Diff for: src/lib/traceTypes.js

@@ -61,21 +61,21 @@ export const traceTypes = _ => [
     label: _('Line'),
     category: chartCategory(_).SIMPLE,
   },
-  {
-    value: 'area',
-    label: _('Area'),
-    category: chartCategory(_).SIMPLE,
-  },
+  // {
+  //   value: 'area',
+  //   label: _('Area'),
+  //   category: chartCategory(_).SIMPLE,
+  // },
   {
     value: 'heatmap',
     label: _('Heatmap'),
     category: chartCategory(_).SIMPLE,
   },
-  {
-    value: 'table',
-    label: _('Table'),
-    category: chartCategory(_).SIMPLE,
-  },
+  // {
+  //   value: 'table',
+  //   label: _('Table'),
+  //   category: chartCategory(_).SIMPLE,
+  // },
   {
     value: 'contour',
     label: _('Contour'),
@@ -126,11 +126,11 @@ export const traceTypes = _ => [
     label: _('2D Contour Histogram'),
     category: chartCategory(_).DISTRIBUTIONS,
   },
-  {
-    value: 'violin',
-    label: _('Violin'),
-    category: chartCategory(_).DISTRIBUTIONS,
-  },
+  // {
+  //   value: 'violin',
+  //   label: _('Violin'),
+  //   category: chartCategory(_).DISTRIBUTIONS,
+  // },
   {
     value: 'choropleth',
     label: _('Choropleth'),
@@ -156,52 +156,52 @@ export const traceTypes = _ => [
     label: _('OHLC'),
     category: chartCategory(_).FINANCIAL,
   },
-  {
-    value: 'parcoords',
-    label: _('Parallel Coordinates'),
-    category: chartCategory(_).SPECIALIZED,
-  },
-  {
-    value: 'sankey',
-    label: _('Sankey'),
-    category: chartCategory(_).SPECIALIZED,
-  },
-  {
-    value: 'carpet',
-    label: _('Carpet'),
-    category: chartCategory(_).SPECIALIZED,
-  },
-  {
-    value: 'scatterpolar',
-    label: _('Polar Scatter'),
-    category: chartCategory(_).SPECIALIZED,
-  },
+  // {
+  //   value: 'parcoords',
+  //   label: _('Parallel Coordinates'),
+  //   category: chartCategory(_).SPECIALIZED,
+  // },
+  // {
+  //   value: 'sankey',
+  //   label: _('Sankey'),
+  //   category: chartCategory(_).SPECIALIZED,
+  // },
+  // {
+  //   value: 'carpet',
+  //   label: _('Carpet'),
+  //   category: chartCategory(_).SPECIALIZED,
+  // },
+  // {
+  //   value: 'scatterpolar',
+  //   label: _('Polar Scatter'),
+  //   category: chartCategory(_).SPECIALIZED,
+  // },
   {
     value: 'scatterternary',
     label: _('Ternary Scatter'),
     category: chartCategory(_).SPECIALIZED,
   },
-  {
-    value: 'pointcloud',
-    label: _('Point Cloud'),
-    category: chartCategory(_).WEB_GL,
-  },
+  // {
+  //   value: 'pointcloud',
+  //   label: _('Point Cloud'),
+  //   category: chartCategory(_).WEB_GL,
+  // },
   {
     value: 'scattergl',
     icon: 'scatter',
     label: _('Scatter GL'),
     category: chartCategory(_).WEB_GL,
   },
-  {
-    value: 'scatterpolarghl',
-    icon: 'scatterpolar',
-    label: _('Scatter Polar GL'),
-    category: chartCategory(_).WEB_GL,
-  },
-  {
-    value: 'heatmapgl',
-    icon: 'heatmap',
-    label: _('Heatmap GL'),
-    category: chartCategory(_).WEB_GL,
-  },
+  // {
+  //   value: 'scatterpolarghl',
+  //   icon: 'scatterpolar',
+  //   label: _('Scatter Polar GL'),
+  //   category: chartCategory(_).WEB_GL,
+  // },
+  // {
+  //   value: 'heatmapgl',
+  //   icon: 'heatmap',
+  //   label: _('Heatmap GL'),
+  //   category: chartCategory(_).WEB_GL,
+  // },
 ];

Diff for: src/styles/components/containers/_modal.scss

@@ -80,7 +80,7 @@
   // ANIMATIONS
 
   &__backdrop {
-    @include animate('fade-in', 1.25s);
+    @include animate('fade-in', 1s);
   }
   &__card {
     @include animate('fsb', 0.85s, 0.1s);
@@ -89,10 +89,10 @@
   &--animate-out {
     pointer-events: none;
     .modal__backdrop {
-      @include animate('fade-out', 1.25s);
+      @include animate('fade-out', 0.85s);
     }
     .modal__card {
-      @include animate('fsbr', 1.25s);
+      @include animate('fsbr', 0.85s);
     }
   }
 }