Skip to content

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

Open
UlysseDurand wants to merge 14 commits into
Kitware:masterfrom
UlysseDurand:trame-registry
Open

docs(wigets): build the trame widgets list page automatically#899
UlysseDurand wants to merge 14 commits into
Kitware:masterfrom
UlysseDurand:trame-registry

Conversation

@UlysseDurand

Copy link
Copy Markdown
Contributor

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.
Capture d’écran du 2026-07-01 17-39-44

  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.

  1. 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

jourdain commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator

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

Comment thread docs/vitepress/guide/intro/widgets.md Outdated
Comment thread docs/vitepress/guide/intro/widgets.md Outdated
Comment thread docs/vitepress/guide/intro/widgets.md
Comment thread docs/vitepress/guide/intro/widgets.md
Comment thread docs/vitepress/external_gh_repos.txt Outdated
@jourdain

jourdain commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator
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
}

Comment thread docs/vitepress/guide/intro/widgets.md Outdated
@finetjul

finetjul commented Jul 1, 2026

Copy link
Copy Markdown
Member

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

@jourdain

jourdain commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator

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

jourdain commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator

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

or on same line as the filter toolbar.

@UlysseDurand

Copy link
Copy Markdown
Contributor Author

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

jourdain commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

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

jourdain commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

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 and others added 2 commits July 10, 2026 11:44
Also use span for emojis within the line

Also use a list instead of pills for topics of repos, bold for active
ones

Also add gap between the buttons

Also changed the external github repos list

Also put the image only in the first column, and title with description
and emojis in the second

Also put the shown repos count next to the filters

The '...' topic is now put by `fetch_repos.py` directly for Community
repositories

Ref: Kitware#899 (comment)
Ref: Kitware#899 (comment)
Ref: Kitware#899 (comment)
Ref: Kitware#899 (comment)
Ref: Kitware#899 (comment)
Ref: Kitware#899 (comment)
Ref: Kitware#899 (comment)
@UlysseDurand

UlysseDurand commented Jul 10, 2026

Copy link
Copy Markdown
Contributor Author

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

Capture d’écran du 2026-07-10 15-33-36 Capture d’écran du 2026-07-10 15-39-30

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

@finetjul

Copy link
Copy Markdown
Member

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

Copy link
Copy Markdown
Collaborator

Widget catalog
Application catalog

linson7017/pymipf
ndminhvn/interactive-population-visualization
Chahat08/BioSET_Visualizer
jph6366/trame-aoc No newline at end of file

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/

@@ -0,0 +1,11 @@
karelvrabeckv/mri-viewer

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

kmarchais/mmgpy,trame,trame-app,vtk

@jourdain

Copy link
Copy Markdown
Collaborator

Just added all the tags for the widgets.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants