docs(wigets): build the trame widgets list page automatically

[UlysseDurand]

As discussed in the last trame dev meeting, we would like to make a doc page automatically populated with trame widgets, containing only Kitware-owned repositories (github.com/Kitware and github.com/KitwareMedical) that have the trame GitHub topic, as well as a maintained list of external repositories.

This new doc page is deployed here, please give me your feedbacks and ideas.

1. I sorted by name, number of GitHub stars, number of commits, number of PRs ,
   creation date, last commit date. Is it ok ? Is the number of contributors
   sorting worthing being added (The fetching would be harder) ?

2. I made a list of tags that are based on the GitHub topics with the following
   mapping

const displayableTopics = {
  "trame-maintenance-program": "Maintenance program",
  "trame-app": "Application",
  "trame-component": "UI Widget",
  "vtk": "VTK",
  "paraview": "Paraview",
  "3d-slicer": "3D Slicer",
  "vue2": "Vue2",
  "vue3": "Vue3"
}

how would you change it ?

Any kind of suggestion is welcomed.

3. I put a ⚠️ for external repositories that are in the maintained list and a 🆕 for repositories that were created within the last year

If this is merged, all the maintainers of these repositories should be asked to update the repository preview image, description, and topics accordingly.

[jourdain]

Since your listing goes beyond just "Widgets", I would update the menu to be "Widgets and Applications".

[jourdain]

const displayableTopics = {
  "trame-maintenance-program": "Kitware supported",
  "trame-app": "Application",
  "trame-component": "Widget",
  "vtk": "VTK",
  "paraview": "Paraview",
  "3d-slicer": "3D Slicer",
  "trame-vue2": "Vue2",
  "trame-vue3": "Vue3",
  "...": "Community", // <--- For external repos
}

[finetjul]

"9/56 repos" should be below the table.

[jourdain]

The first column should only be the picture + link to repo
The second one should have a title (text of first col) + description below

[jourdain]

"9/56 repos" should be below the table.

or on same line as the filter toolbar.

[UlysseDurand]

Since your listing goes beyond just "Widgets", I would update the menu to be "Widgets and Applications".

Should I also change the page name ? (widgets.md)
This would change the URL and break all the external links to this page

[jourdain]

Since your listing goes beyond just "Widgets", I would update the menu to be "Widgets and Applications".

Should I also change the page name ? (widgets.md) This would change the URL and break all the external links to this page

What about using the same components across Widgets and a new page Applications? But the categories should be different on those 2 pages?

[jourdain]

Which means

Widgets

# Always on `trame-component`

const displayableTopics = {
  "trame-maintenance-program": "Maintenance program",
  "vue2": "Vue2",
  "vue3": "Vue3"
}

Applications

# Always on `trame-app`

const displayableTopics = {
  "trame-maintenance-program": "Maintenance program", # <= I'm not sure that one makes sense for app
  "vtk": "VTK",
  "paraview": "Paraview",
  "3d-slicer": "3D Slicer",
}

[UlysseDurand]

Previous comments were addressed, the new pages look like the following (quite empty because many widgets lack the trame-app or trame-component topic)

Also deployed here
https://ulyssedurand.github.io/trame/guide/intro/widgets.html
https://ulyssedurand.github.io/trame/guide/intro/applications.html

[finetjul]

I'm not sure about the "Known available widgets", especially :

• known: we are exhaustive for Kitware widgets, and being "known" is not enough to be listed, it must somehow be "approved" by us to be listed.
• available: I don't think the "availability" brings much information.

How about "Widget catalog", "Trame widgets", "Ready-to-use widgets", "Widget listing" ?

For the applications, it could be "Trame-based applications"

[jourdain]

Widget catalog
Application catalog

[jourdain]

brendanjmeade/fennil
brendanjmeade/parsli
XAITK/xaitk-saliency-web-demo
festim-dev/festim-gui
cardinalgeo/drilldown
MXJK851/SpinView/

https://gitlab.kitware.com/keu-public/trame-catalyst-demo/

[UlysseDurand]

This is done here: cf66815
I also adapted to handle non github repositories, for these, all the information must be put in the external_repos.yml file. Otherwise, a fetch script should be implemented for every possible source of repository.

[jourdain]

Those external repo are not necessary properly tagged... But we should be able to tag them on our end so they can be filtered properly with the UI.

[jourdain]

Meaning we can feed those tags into the JSON you use to display them.

kmarchais/mmgpy,trame,trame-app,vtk

[UlysseDurand]

I changed to a yml file
cf66815

The information of the repos (like topics, description, etc...) is from the external_repos.yml if present, otherwise it is taken from the fetched content of the github repository.

For example now in the FOAMFlask app the topics aren't specified because the github repo already has the right topics.

[jourdain]

Just added all the tags for the widgets.

[UlysseDurand]

In cf66815 I made a mermaid flowchart to describe what the fetch_repos.py script does. Here is how it renders