compare more-info manipulation in custom-ui

[Mariusthvdb]

HI,

please let me suggest some form of mutual checks ;-)

in custom-ui, we ve been handling the more-info options for a very long time. More specifically, by means of a hide_attributes option in customize, and have that change the contents of the more-info attributes list in the dropdown.

This was introduced to not only hide specific attributes, but also to hide the template that custom-ui adds to entities.

It has been a challenge to have that code update with the HA Frontend changes, as you are aware....

Since I am not a dev at all, and merely try to keep that JS script alive, I was hoping you could have a look at it, and see if some code could be change, to make it behave better. The dom paths and traversing those to the more-info panels, and group more info panels are of special interest in my custom-ui.

Currently it works nicely. with 1 big caveat and 1 smaller:

the smaller:
one can see the script in action: upon clicking the dropdown, one can see the box be made smaller and hiding the attributes, from an initial bigger dropdown.

the bigger:
if, because of the hide_attributes, no attributes are left to show, the dropdown is still displayed in the more-info, albeit with an empty box. Ive tried to prevent that, by adding some logic to the core attributes filter, but havent been able to manage that.

Ive even had some brief chat with the core frontend devs on this, but I cant make it happen see Mariusthvdb/custom-ui#52

I would appreciate you having a look enormously, and would love to get any feedback you might have.

update

I've separated the function into a dedicated resource here: https://github.com/Mariusthvdb/custom-ui/blob/master/update_more_info.js

[elchininet]

Hi @Mariusthvdb,
I need to take a look closer at the code because I am not releated to it at all. I have not used that plugin before so first I need to understand how it works so I can give you feedback about it and if it can be improved in some way.
Regards

[Mariusthvdb]

Ofc, take your time, no hurry at all.

I truly appreciate anything you could spot, or time you would spend.

[elchininet]

Hi @Mariusthvdb,

I tried to read the code on the repo and I am seeing that there is a logic to add display none to attributes, but that logic runs when a certain event is triggered. It is logic that you see that small jump, because the items are rendered and then the logic runs trying to hide them. Maybe it could be overcomed if you know in advance what will be rendered inside the attributes, but I don‘t know if that could be possible.

The second I cannot get it just reading the code. You can do something, try to copy/paste the Docker demo commands from this repo (adapting them to custom-ui) and a config that sets up some examples of the usage of custom-ui. In that way it is very easy to run the demo command and get a Home Assistant instance with some custom-ui features already configured and the issues could be reproduced there, in that way I can check what is happening in live instead of trying to get it just reading the code. I can give you more feedback if I can reproduce the issues in a fresh HA instance.

Regards

[Mariusthvdb]

right, now 2023.9 beta has landed my more-info update custom code no longer works.
Not sure if they changed the event (probably not) or the dom paths, but dropping down the attributes box does not change anything anymore in my card.

ive separated the code into a dedicated custom card for debugging purposes:

function updateMoreInfo(ev) {
  if (!ev.detail.expanded) return;
  const moreInfoInfo = document
    .querySelector("home-assistant")
    .shadowRoot.querySelector("ha-more-info-dialog")
    .shadowRoot.querySelector("ha-dialog")
    .getElementsByClassName("content")[0]
    .querySelector("ha-more-info-info");

  try {
    let t;
    {
      let moreInfoNodeName;
      const contentChild = moreInfoInfo.shadowRoot.querySelector(
        "more-info-content"
      ).childNodes;
      for (const nodeItem of contentChild) {
        if (nodeItem.nodeName.toLowerCase().startsWith("more-info-")) {
          moreInfoNodeName = nodeItem.nodeName.toLowerCase();
          break;
        }
      }
      if (moreInfoNodeName == "more-info-group") {
        let moreInfoNestedNodeName;
        const contentChildNested =
          moreInfoInfo.shadowRoot
            .querySelector("more-info-group")
            .shadowRoot.childNodes;
        for (const nodeItemNested of contentChildNested) {
          if (
            nodeItemNested.nodeName.toLowerCase().startsWith("more-info-")
          ) {
            moreInfoNestedNodeName = nodeItemNested.nodeName.toLowerCase();
            break;
          }
        }
        t = moreInfoInfo.shadowRoot
          .querySelector("more-info-group")
          .shadowRoot.querySelector(moreInfoNestedNodeName)
          .shadowRoot.querySelector("ha-attributes")
          .shadowRoot.querySelectorAll(".data-entry");
      } else {
        t = moreInfoInfo.shadowRoot
          .querySelector(moreInfoNodeName)
          .shadowRoot.querySelector("ha-attributes")
          .shadowRoot.querySelectorAll(".data-entry");
      }
    }
    if (t.length) {
      let e;
      for (const node of t) {
        const o = node.getElementsByClassName("key")[0];
        if (o.innerText.toLowerCase().trim() == "hide attributes") {
          e = o.parentNode
            .getElementsByClassName("value")[0]
            .innerText.split(",")
            .map((item) => item.replace("_", " ").trim());
          e.push("hide attributes");
        }
      }
      for (const node of t) {
        const o = node.getElementsByClassName("key")[0];
        if (
          e.includes(o.innerText.toLowerCase().trim()) ||
          e.includes("all")
        ) {
          o.parentNode.style.display = "none";
        }
      }
    }
  } catch (err) {}
}

window.addEventListener("expanded-changed", updateMoreInfo);

which works as expected in 2023.8.4

I even had hopes changing that constant (dom path) in MoreInfoInfo to

function updateMoreInfo(ev) {
  if (!ev.detail.expanded) return;
  const expansionPanel = document.querySelector("ha-expansion-panel");

and start from there, but that doesnt work in 2023.8 either. Would have been nicer, and more robust.

Im out of my league here, so if you could see what's wrong in this code reaching attributes in the more-info panels on regular entities and groups (because was the challenge before) I'd still be very appreciative ...

Didnt test whether Kiosk mode worked ok in 2023.9 beta, because I had to downgrade seeing system blocking issues.

[elchininet]

Hi @Mariusthvdb,
I‘ll try to see if I can help you in some way. What should I expect from that code? How do I know if it is working as expected?
Regards

[Mariusthvdb]

wow thanks!

short: set a customization hide_attributes under customize on any entity, and make it disappear from the attributes list in more-info.

this was originally introduced in custom-ui, to hide the attribute templates that allows on customizations. It as expanded a bit to hide itself also, hide any other attribute, or hide all ;-)

you can see what is does at https://github.com/Mariusthvdb/custom-ui/blob/master/EXAMPLES.md#hide-attributes

  customize_glob:
    # All Entities - Hide Templates & Icon Color
    # Note that yaml keys can't start with an asterisk. Use quotes in that case:
    "*.*":
      hide_attributes:
        - templates
        - icon_color
        - all # <-- this hides, well, all attributes ;-)

or like I do on all individual entities that get a template:

homeassistant:

  customize:

    binary_sensor.espresso_ready:
      hide_attributes: templates
      templates:
        icon_color: >
          return state === 'on' ? 'rgb(93,53,15)' : 'var(--primary-color)';

(this shows the famous icon_color option, which is the other main feature of custom-ui)

hope this is clear, if not, please let me know.

[Mariusthvdb]

I havent yet no. I didn't not find an issue yet...
Thanks for looking nine to this, I really appreciate that!!

at first I believed the last HA version to break something, but, as I went back and downgraded 2 versions, the issue remained....

I also downgraded custom-ui to the original and several later updates, but still the issue remains.

Maybe it has been like this always, and we just have bad memory....

Anyways, I did issue a new version, without templating, and only adding icon_color (to be used in customize, And in the attributes section of regular template entities.)

The last version of regular custom-ui does works otherwise, and is super powerful, so I guess we should leave it at that, unless someone with a true dev eye (not me, I merely kept it alive...) has a fix for it.

If you want to have a glimpse at the new version, please do, it is extremely small ;-)
https://github.com/Mariusthvdb/custom-ui/releases/tag/20231123

[elchininet]

Glad that it is working.

In the reduced version just add window.customUI.initDone = true; in some place, it seems that you want to prevent initialising everything once it was already done with if (window.customUI.initDone) return; but you are not setting that variable to true later, so it will pass that condition all the time.

[Mariusthvdb]

thanks, I admit not having checked that, and only taken part the original....

maybe, if you d be willing, continue any discussion on my repo? that way we wont liter yours with specifics not having to do anything with Kiosk mode....

[Mariusthvdb]

here's a new repo, and Ive mentioned you in the first update ;-)
https://github.com/Mariusthvdb/custom-ui-icon-color/tree/main

fyi, Ive also added a card-mod-examples page, geared specifically to those custom-ui mods for icon / icon_color and how to use these in various cards/combinations

[elchininet]

maybe, if you d be willing, continue any discussion on my repo? that way we wont liter yours with specifics not having to do anything with Kiosk mode....

Yes, just ping me in any issue or discussion and I‘ll glad to continue there.

[Mariusthvdb]

can finally confirm succes in the 2023.9b05 update.

all more-info's are nicely updated, and attributes are hidden

will update resources hopefully tomorrow!

[elchininet]

Good to know @Mariusthvdb 👍
I saw that you were searching in Discord a way to access the config of entities, did you find something?

[Mariusthvdb]

No, unfortunately I havent, and is seems to utterly simple, especially now these extraFilters have moved, and should probably be addressable as such, (without having to deal with a Dom path at all?)

My current (fixed by you) script is so clunky, reminiscing the old days. It hurts my eyes, but there is no other way for now.

I really think that is the only way forward, simply add those attributes to that list, and have the HA core frontend take care of them.
it's just me not being capable enough to find out how..
see: Mariusthvdb/custom-ui#99 (comment)

[Mariusthvdb]

might I ping you on an issue I now found:

Logger: frontend.js.latest.202309080
Source: components/system_log/__init__.py:269 
First occurred: 10 september 2023 om 16:54:29 (30 occurrences) 
Last logged: 07:48:52

Uncaught error from Safari 16.6 on Mac OS 10.15.7 Script error. null @:0:0
Uncaught error from Safari 16.6 on Mac OS 10.15.7 TypeError: null is not an object (near '...elector("ha-dialog")...') updateMoreInfo (/local/resources/custom-ui/custom-more-info.js:19:43) dispatchEvent ([native code]::) event (src/common/dom/fire_event.ts:76:21) nextRender (src/components/ha-expansion-panel.ts:131:14)

didnt spot this when testing, and havent yet found a reason/action for it to occur but maybe you understand point blank what this means?
I cant drop the .js file here, but it is in my repo at https://github.com/Mariusthvdb/custom-ui/blob/master/update_more_info.js

opened an issue in the repo myself Mariusthvdb/custom-ui#105