Add descriptions for each render type

Author: mfisher87

packages/base/src/dialogs/symbology/vector_layer/types/Canonical.tsx

@@ -94,7 +94,12 @@ const Canonical = ({
     }
   })();
 
-  return <div className="jp-gis-layer-symbology-container">{body}</div>;
+  return (
+    <div className="jp-gis-layer-symbology-container">
+      <p>Color features based on an attribute containing a hex color code.</p>
+      {body}
+    </div>
+  );
 };
 
 export default Canonical;

packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx

@@ -271,7 +271,12 @@ const Categorized = ({
     }
   })();
 
-  return <div className="jp-gis-layer-symbology-container">{body}</div>;
+  return (
+    <div className="jp-gis-layer-symbology-container">
+      <p>Color features based on an attribute containing unique values.</p>
+      {body}
+    </div>
+  );
 };
 
 export default Categorized;

packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx

@@ -328,7 +328,12 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     }
   })();
 
-  return <div className="jp-gis-layer-symbology-container">{body}</div>;
+  return (
+    <div className="jp-gis-layer-symbology-container">
+      <p>Color features based on an attribute containing scalar values.</p>
+      {body}
+    </div>
+  );
 };
 
 export default Graduated;

packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx

@@ -87,6 +87,7 @@ const Heatmap = ({
 
   return (
     <div className="jp-gis-layer-symbology-container">
+      <p>Represent features based on their density using a heatmap.</p>
       <div className="jp-gis-symbology-row jp-gis-heatmap">
         <label htmlFor="color-ramp-select">Color Ramp:</label>
         <CanvasSelectComponent

packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx

@@ -210,6 +210,7 @@ const SimpleSymbol = ({
 
   return (
     <div className="jp-gis-layer-symbology-container">
+      <p>Color all features the same way.</p>
       {symbologyTab === 'color' ? renderColorTab() : renderRadiusTab()}
     </div>
   );