helpful text

Author: nicolaskruchten

src/components/containers/AnnotationAccordion.js

@@ -43,7 +43,21 @@ class AnnotationAccordion extends Component {
 
     return (
       <TraceRequiredPanel addAction={canAdd ? addAction : null}>
-        {content ? content : null}
+        {content ? (
+          content
+        ) : (
+          <div className="panel__empty__message">
+            <div className="panel__empty__message__heading">{_('Call out your data.')}</div>
+            <div className="panel__empty__message__content">
+              <p>
+                {_(
+                  'Annotations are text and arrows you can use to point out specific parts of your figure.'
+                )}
+              </p>
+              <p>{_('Click on the + button above to add an annotation.')}</p>
+            </div>
+          </div>
+        )}
       </TraceRequiredPanel>
     );
   }

src/components/containers/ImageAccordion.js

@@ -49,7 +49,21 @@ class ImageAccordion extends Component {
 
     return (
       <TraceRequiredPanel addAction={canAdd ? addAction : null}>
-        {content ? content : null}
+        {content ? (
+          content
+        ) : (
+          <div className="panel__empty__message">
+            <div className="panel__empty__message__heading">{_('Logos, watermarks and more.')}</div>
+            <div className="panel__empty__message__content">
+              <p>
+                {_(
+                  'Embed images in your figure to make the data more readable or to brand your content.'
+                )}
+              </p>
+              <p>{_('Click on the + button above to add an image.')}</p>
+            </div>
+          </div>
+        )}
       </TraceRequiredPanel>
     );
   }

src/components/containers/ShapeAccordion.js

@@ -49,7 +49,23 @@ class ShapeAccordion extends Component {
 
     return (
       <TraceRequiredPanel addAction={canAdd ? addAction : null}>
-        {content ? content : null}
+        {content ? (
+          content
+        ) : (
+          <div className="panel__empty__message">
+            <div className="panel__empty__message__heading">
+              {_('Lines, Rectangles and Ellipses.')}
+            </div>
+            <div className="panel__empty__message__content">
+              <p>
+                {_(
+                  'Add shapes to a figure to call out points or periods in time, thresholds, or areas of interest.'
+                )}
+              </p>
+              <p>{_('Click on the + button above to add a shape.')}</p>
+            </div>
+          </div>
+        )}
       </TraceRequiredPanel>
     );
   }

src/components/containers/TraceAccordion.js

@@ -110,8 +110,31 @@ class TraceAccordion extends Component {
           }
         },
       };
-
-      return <PlotlyPanel addAction={addAction}>{this.renderTraceFolds()}</PlotlyPanel>;
+      const content = this.renderTraceFolds();
+      return (
+        <PlotlyPanel addAction={addAction}>
+          {content.length ? (
+            content
+          ) : (
+            <div className="panel__empty__message">
+              <div className="panel__empty__message__heading">Trace your data.</div>
+              <div className="panel__empty__message__content">
+                <p>
+                  {_(
+                    'Traces of various types like bar and line are the building blocks of your figure.'
+                  )}
+                </p>
+                <p>
+                  {_(
+                    'You can add as many as you like, mixing and matching types and arranging them into subplots.'
+                  )}
+                </p>
+                <p>{_('Click on the + button above to add a trace.')}</p>
+              </div>
+            </div>
+          )}
+        </PlotlyPanel>
+      );
     }
 
     if (canGroup) {

src/components/containers/TransformAccordion.js

@@ -94,7 +94,43 @@ class TransformAccordion extends Component {
       }),
     };
 
-    return <PlotlyPanel addAction={addAction}>{content ? content : null}</PlotlyPanel>;
+    return (
+      <PlotlyPanel addAction={addAction}>
+        {content ? (
+          content
+        ) : (
+          <div className="panel__empty__message" style={{paddingTop: 0}}>
+            <div className="panel__empty__message__content">
+              <div style={{textAlign: 'left'}}>
+                <p>
+                  <strong>{_('Filter')}</strong>{' '}
+                  {_(' transforms allow you to filter data out from a trace.')}
+                </p>
+                <p>
+                  <strong>{_('Split')}</strong>{' '}
+                  {_(
+                    ' transforms allow you to create multiple traces from one source trace, so as to style them differently.'
+                  )}
+                </p>
+                <p>
+                  <strong>{_('Aggregate')}</strong>{' '}
+                  {_(
+                    ' transforms allow you to summarize a trace using an aggregate function like "average" or "minimum".'
+                  )}
+                </p>
+                <p>
+                  <strong>{_('Sort')}</strong>{' '}
+                  {_(
+                    ' transforms allow you to sort a trace, so as to control marker overlay or line connection order.'
+                  )}
+                </p>
+              </div>
+              <p>{_('Click on the + button above to add a transform.')}</p>
+            </div>
+          </div>
+        )}
+      </PlotlyPanel>
+    );
   }
 }