Link label text position and node text background (+hover arrow size)

[Arkkimaagi]

Describe the bug

• Link label text position is being adjusted with CSS transform: translateY(-0.5em) upwards regardless of which direction the text is oriented. This make the label overlap the link line and become hard to read.
• When Node text overlaps the graph or link labels, it's difficult to read.
• A minor issue about the hover arrow size. There's no point in resising the hover arrow as it's done now.

This can be fixed with pure CSS changes. Temporarily I fixed this with card-mod extension and following settings:

type: custom:zigbee2mqtt-networkmap
entity: sensor.zigbee2mqtt_networkmap
card_mod:
  style: |
    .node-label{
      stroke: var(--ha-card-background, var(--card-background-color, #fff));
      stroke-width: 0.5em;
      paint-order: stroke;
      stroke-opacity: 0.7;
      stroke-linejoin: round;
    }
    .link-label {
      -webkit-transform: none;
      transform: none;
      dominant-baseline: text-after-edge;
      dominant-baseline: ideographic;
    }
    .link:hover{
      stroke-width: 2;
    }

Screenshots Current implementation: With fix:

Home Assistant version

Core 2024.2.0 Supervisor 2024.01.1 Operating System 11.4 Frontend 20240207.0

Zigbee2mqtt version 1.35.3

OS and browser version Macos Chrome Version 121.0.6167.160 (Official Build) (x86_64)

[Arkkimaagi]

I added a PR that should fix these problems, but I was unable to test my code. 😬

[azuwis]

You can just use css: to override, should work:

type: custom:zigbee2mqtt-networkmap
entity: sensor.zigbee2mqtt_networkmap
css: |
  .node-label{
    stroke: var(--ha-card-background, var(--card-background-color, #fff));
    stroke-width: 0.5em;
    paint-order: stroke;
    stroke-opacity: 0.7;
    stroke-linejoin: round;
  }
  .link-label {
    -webkit-transform: none;
    transform: none;
    dominant-baseline: text-after-edge;
    dominant-baseline: ideographic;
  }
  .link:hover{
    stroke-width: 2;
  }