Embedding Projector: fix gradient color map (#6310)

## Motivation for features / changes

Fix errors for gradient color map

## Technical description of changes

When colorby gradient metadata is selected the UI currently not working
as expected due to multiple errors that causes exceptions/bugs in UI.
This fixes:
- gradient not getting rendered at all when there are no items
-  a race condition where the gradient color map would not get rendered
- linearGraident children does not get attached
- rendering issue with the end label when switching away to a
categorical coloring

## Screenshots of UI changes
Before:

<img width="295" alt="Screenshot 2023-04-17 at 8 53 44 PM"
src="https://user-images.githubusercontent.com/31378877/232666984-daee9298-0df5-41c5-9cc3-f98391137c61.png">

After:

![image](https://user-images.githubusercontent.com/31378877/232666802-cfe81b50-ad2d-43f3-a91d-49e0d49302ce.png)

## Detailed steps to verify changes work correctly (as executed by you)
Use the default Word2Vec 10k dataset
change `color by` from "No Color Map" to `count`

## Alternate designs / implementations considered

---------

Co-authored-by: Riley Jones <[email protected]>

Author: alicialics

tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.ts

@@ -540,7 +540,7 @@ class DataPanel extends LegacyElementMixin(PolymerElement) {
     this.showForceCategoricalColorsCheckbox = !!colorOption.tooManyUniqueValues;
     if (colorOption.map == null) {
       this.colorLegendRenderInfo = null!;
-    } else if (colorOption.items) {
+    } else if (colorOption.items?.length) {
       let items = colorOption.items.map((item) => {
         return {
           color: colorOption?.map?.(item.label) as string,

tensorboard/plugins/projector/vz_projector/vz-projector-legend.ts

@@ -78,7 +78,7 @@ class Legend extends LegacyElementMixin(PolymerElement) {
       </div>
     </template>
 
-    <template is="dom-if" if="[[renderInfo.thresholds]]">
+    <template is="dom-if" if="[[renderInfo.thresholds?.length]]">
       <svg class="gradient">
         <defs>
           <linearGradient
@@ -105,14 +105,14 @@ class Legend extends LegacyElementMixin(PolymerElement) {
     if (this.renderInfo == null) {
       return;
     }
-    if (this.renderInfo.thresholds) {
+    if (this.renderInfo.thresholds?.length) {
       // <linearGradient> is under dom-if so we should wait for it to be
       // inserted in the dom tree using async().
-      this.async(() => this.setupLinearGradient());
+      this.async(() => this.setupLinearGradient(), 150);
     }
   }
   _getLastThreshold(): number | undefined {
-    if (this.renderInfo == null || this.renderInfo.thresholds == null) {
+    if (this.renderInfo == null || !this.renderInfo.thresholds?.length) {
       return;
     }
     return this.renderInfo.thresholds[this.renderInfo.thresholds.length - 1]
@@ -139,6 +139,7 @@ class Legend extends LegacyElementMixin(PolymerElement) {
       );
       stopElement.setAttribute('offset', this.getOffset(t.value));
       stopElement.setAttribute('stop-color', t.color);
+      linearGradient.appendChild(stopElement);
     });
   }
 }