openscd / oscd-filtered-list Goto Github PK

Npm publish command wants to publish this package as a private package. This should be a public package

Currently in the OscdFilteredList there are no types exported for the elements it encapsulates.

For instance I might want to type in my code:

• a list item
• a check box?
• the search field?

Should this component be exporting some types to assist users with this?

Normally when we didn't fully encapsulate I would do something like:

import type { ListItemBase } from '@material/mwc-list/mwc-list-item-base.js';

I am not very proficient with types so please let me know if this is not the correct way this should be done.

To improve performance with a large number of list items, I suggest using a debounce on the @input for the search box, something like:

function debounce(callback: any, delay = 250) {
  let timeout: any;

  return (...args: any) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}

  onFilterInput = debounce(() => {
    Array.from(
      this.querySelectorAll(
        'mwc-list-item, mwc-check-list-item, mwc-radio-list-item'
      )
    ).forEach(item =>
      hideFiltered(item as ListItemBase, this.searchField.value)
    );
  }, 500);

My use case is that the filtered list becomes unresponsive in a large (or even not so large file) when the full scd file's ExtRefs are shown in a single filtered list in the oscd-subscriber-later-binding plugin (in the subscriber view)

I found this article on debouncing/throttling helpful: https://blog.webdevsimplified.com/2022-03/debounce-vs-throttle/

This helps for moderate sized lists but not adequately for large lists but is probably worth doing any way. It is very likely that we should choose a number slightly lower than 500 ms (250? 300? 350? 400?)

This is for a file which has about 3620 ExtRef elements. Quite a few of these are "empty" but many relays fully expose their maximum capability in the quantity of ExtRefs they export.

IEC61850_GOOSE_2-section.scd.zip

I think this is a realistic scenario - we use schemes like this in production now.

Documentation still needs to be added and a deploy is also needed in the package.json

Acceptance criteria:
Use the ADR format;
Discuss with the community

We now have a component guide (https://github.com/openscd/.github/blob/23491bd2408f3b7edaa8b0149a3d57aca1adaf40/docs/component_guide.md) where an explaination can be found on what a component should have. Some changes need to be made to the filtered-list to follow these rules.

Definition of Done:

• Only the source files in the dist folder/README.md/package.json/license are to be published on NPM
• CEM analyzer is being used. Be sure to use the correct annotations in the source files.
• oscd-filtered-list and OscdFilteredList need to be the other way around
• Screenshot tests need to be added

As a plugin author and maintainer of already existing plugins, I need to have open-scds filtered-list available through nmp.

• slot right and left to add filter icon buttons

Requirements:

• move filtered-list to oscd-filtered-list repo
• change tag name to oscd-filtered-list
• do !NOT! extend from mwc-list but use it in the render method
• add properties

TODO: search codebase for instances of filtered-list usage and add any properties/events/methods used that are not listed here.

• propagate selected event for any changes on maybeValue
• propagate ... event for any changes on ...
• add screenshot tests
• add storybook

Additional Information
This web-component is used pretty much everywhere in the software

Summary

As a user of the oscd-filtered-list I would like to avoid having browser performance issues with the "Select All" button when the list is too large.

To Refine:

1. Determining the number of items that is our limit for providing a performant "Select All" functionality.
2. Disabling the "Select All" button when we reach that limit.

Traditionally the tooltip for the search field is the word 'Filter'.

However after using the latest release of this component in a plugin, I notice there is code in the tooltip instead:

Because the types aren't in the packages.json it isnt possible to import types from the module. This can be fixed by adding the types to the packages.json

Similar to #8, SCD files can have very large numbers of ExtRefs and a debounce is insufficient to provide adequate performance.

I would like to see the oscd-filtered-list carry out lazy indexing and perhaps show a light coloured "progress of index" background in the search field.

I'm not sure from a technology point of view how to implement this.