Merge pull request #727 from plotly/examples-fixes

Examples fixes

Author: dmt0

src/components/fields/SubplotCreator.js

@@ -35,15 +35,15 @@ class UnconnectedSingleSubplotCreator extends Component {
   }
 
   updateSubplot(update) {
-    const currentSubplotId = this.props.fullContainer[SUBPLOT_TO_ATTR[this.props.attr].data];
+    const currentSubplotId = this.props.fullContainer[SUBPLOT_TO_ATTR[this.props.layoutAttr].data];
     let subplotToBeGarbageCollected = null;
 
     // When we select another subplot, make sure no unused axes are left
     if (
       currentSubplotId !== update &&
       !this.context.fullData.some(
         trace =>
-          trace[SUBPLOT_TO_ATTR[this.props.attr].data] === currentSubplotId &&
+          trace[SUBPLOT_TO_ATTR[this.props.layoutAttr].data] === currentSubplotId &&
           trace.index !== this.props.fullContainer.index
       )
     ) {

src/components/widgets/TraceTypeSelector.js

@@ -107,6 +107,7 @@ class TraceTypeSelector extends Component {
         label: _('Charts like this by Plotly users.'),
         onClick:
           chartHelp[value] &&
+          chartHelp[value].feedQuery &&
           (e =>
             onClick(e, () =>
               window.open(
@@ -120,12 +121,16 @@ class TraceTypeSelector extends Component {
         label: _('View tutorials on this chart type.'),
         onClick:
           chartHelp[value] &&
+          chartHelp[value].helpDoc &&
           (e => onClick(e, () => window.open(chartHelp[value].helpDoc, '_blank'))),
         icon: <ThumnailViewIcon />,
       },
       {
         label: _('See a basic example.'),
-        onClick: chartHelp[value] && (e => onClick(e, chartHelp[value].examplePlot)),
+        onClick:
+          chartHelp[value] &&
+          chartHelp[value].examplePlot &&
+          (e => onClick(e, chartHelp[value].examplePlot)),
         icon: <GraphIcon />,
       },
     ];

src/styles/components/sidebar/_main.scss

@@ -112,6 +112,9 @@
 
     &--single {
       margin-top: 15px;
+      &:last-child {
+        margin-bottom: 15px;
+      }
     }
 
     &::before {

src/styles/components/widgets/_trace-type-selector.scss

@@ -1,4 +1,6 @@
 $item-size: 90px;
+$image-size: 60px;
+
 .trace-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -97,6 +99,7 @@ $item-size: 90px;
     justify-content: flex-start;
     align-items: flex-end;
     z-index: 99;
+    height: $image-size;
 
     &:hover {
       .trace-item__actions__item {
@@ -139,10 +142,9 @@ $item-size: 90px;
   &__image {
     position: relative;
     z-index: 2;
-    $size: 60px;
     border: 1px solid var(--color-border-default);
-    width: $size;
-    height: $size;
+    width: $image-size;
+    height: $image-size;
     border-radius: var(--border-radius);
     background: var(--color-background-top);
     box-shadow: 0 2px 9px transparent;