Skip to content

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

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

docs(wigets): build the trame widgets list page automatically#899
UlysseDurand wants to merge 10 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".

</tr>
<tr v-for="r in filtered" :key="r.name">
<td>
<div v-if="!r.trustedOwner" title="Non Kitware-owned">⚠️</div>

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.

use span instead of div to allow a single line

<tr v-for="r in filtered" :key="r.name">
<td>
<div v-if="!r.trustedOwner" title="Non Kitware-owned">⚠️</div>
<div v-if="r.createdWithinLastYear" title="Created within the last year">🆕</div>

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.

span

{{ r.description || '—' }}
</td>
<td>
<div v-for="t in r.topics" :key="t">

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.

Maybe use a list instead of a pill. It will maybe make it more compact.

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.

The active ones could just be bold.

<span class="count">{{ filtered.length }} / {{ repos.length }} repos</span>
</div>

<div class="tag-filters">

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.

add a gap between the buttons

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.

display:flex;gap:5px;

@@ -0,0 +1,12 @@
karelvrabeckv/mri-viewer
kmarchais/mmgpy
ayenpure/QuickView

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.

should be removed => The official one is now in Kitware/QuickView

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.

Maybe those could be virtually tagged as "Community" ?

@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
}

<div v-if="!r.trustedOwner" title="Non Kitware-owned">⚠️</div>
<div v-if="r.createdWithinLastYear" title="Created within the last year">🆕</div>
<a :href="r.url" target="_blank">{{ r.name }}</a>
<img :src="r.image"/></td>

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.

The image should be part of the link... Bigger area to click on.

@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",
}

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