feat(39): highlight entity connections on hover

Author: MindFreeze

src/ha-sankey-chart.ts

@@ -74,6 +74,7 @@ export class SankeyChart extends LitElement {
   @state() private statePerPixelY = 0;
   @state() private lastUpdate = 0;
   @state() private entityStates: Map<EntityConfigInternal, NormalizedState> = new Map();
+  @state() private highlightedEntities: EntityConfigInternal[] = [];
 
   // https://lit.dev/docs/components/properties/#accessors-custom
   public setConfig(config: SankeyChartConfig): void {
@@ -136,6 +137,9 @@ export class SankeyChart extends LitElement {
     if (!this.config) {
       return false;
     }
+    if (changedProps.has('highlightedEntities')) {
+      return true;
+    }
     const now = Date.now();
     if (this.config.throttle && now - this.lastUpdate < this.config.throttle) {
       // woah there
@@ -386,10 +390,39 @@ export class SankeyChart extends LitElement {
     return { boxes: result, statePerPixelY: this.statePerPixelY };
   }
 
+  private highlightPath(entityConf: EntityConfigInternal, direction: 'parents' | 'children') {
+    this.highlightedEntities.push(entityConf);
+    if (direction === 'children') {
+      this.connectionsByParent.get(entityConf)?.forEach(c => {
+        c.highlighted = true;
+        this.highlightPath(c.child, 'children');
+      });
+    } else {
+      this.connectionsByChild.get(entityConf)?.forEach(c => {
+        c.highlighted = true;
+        this.highlightPath(c.parent, 'parents');
+      });
+    }
+  }
+
   private _handleBoxClick(box: Box): void {
     fireEvent(this, 'hass-more-info', { entityId: box.entity_id });
   }
 
+  private _handleMouseEnter(box: Box): void {
+    this.highlightPath(box.config, 'children');
+    this.highlightPath(box.config, 'parents');
+    // trigger rerender
+    this.highlightedEntities = [...this.highlightedEntities];
+  }
+
+  private _handleMouseLeave(): void {
+    this.highlightedEntities = [];
+    this.connections.forEach(c => {
+      c.highlighted = false;
+    });
+  }
+
   // private _handleAction(ev: ActionHandlerEvent): void {
   //   console.log('@TODO');
   //   if (this.hass && this.config && ev.detail.action) {
@@ -505,7 +538,10 @@ export class SankeyChart extends LitElement {
               <div
                 style=${styleMap({ backgroundColor: box.color })}
                 @click=${() => this._handleBoxClick(box)}
+                @mouseenter=${() => this._handleMouseEnter(box)}
+                @mouseleave=${this._handleMouseLeave}
                 title=${name}
+                class=${this.highlightedEntities.includes(box.config) ? 'hl' : ''}
               >
                 ${show_icons && isNotPassthrough
                   ? html`<ha-icon .icon=${stateIcon(entity as HassEntity)}></ha-icon>`
@@ -570,7 +606,7 @@ export class SankeyChart extends LitElement {
           <path d="M0,${c.startY} C50,${c.startY} 50,${c.endY} 100,${c.endY} L100,${c.endY + c.endSize} C50,${
             c.endY + c.endSize
           } 50,${c.startY + c.startSize} 0,${c.startY + c.startSize} Z"
-            fill="url(#gradient${b.entity_id + i})" />
+            fill="url(#gradient${b.entity_id + i})" fill-opacity="${c.highlighted ? 0.85 : 0.4}" />
         `,
         )}
       `;

src/styles.ts

@@ -55,6 +55,9 @@ export default css`
     .box.type-passthrough div:first-child {
         opacity: 0.4;
     }
+    .box.type-passthrough div.hl:first-child {
+        opacity: 0.85;
+    }
     .box .label {
         flex: 1;
         display: flex;
@@ -78,8 +81,4 @@ export default css`
         width: 100%;
         height: 100%;
     }
-    .connectors path {
-        /* fill: var(--primary-color); */
-        opacity: 0.4;
-    }
 `;

src/types.ts

@@ -80,6 +80,7 @@ export interface Connection {
   state: number;
   startColor?: string;
   endColor?: string;
+  highlighted?: boolean,
 }
 
 export interface Box {
@@ -114,6 +115,7 @@ export interface ConnectionState {
   prevParentState: number,
   prevChildState: number,
   ready: boolean,
+  highlighted?: boolean,
 }
 
 export interface NormalizedState {

src/utils.ts

@@ -68,6 +68,7 @@ export function getChildConnections(parent: Box, children: Box[], connections?:
       endSize,
       endColor: child.color,
       state,
+      highlighted: connection.highlighted,
     };
   });
 }