runtime version scanner: improve table display and filter controls

[toph-allen]

This PR contains a number of improvements to the runtime version scanner:

• Improved table display
  • Added GUID column
  • Improved styling and spacing of columns
  • Added pagination back
  • (Checked version sorting; didn't appear to be broken in the current version)
• Updated filter controls
  • Changed version selector from a slider to a drop-down
  • Changed matching from <= to <
  • Added filtering based on hits (Considered adding to table, but added in sidebar so that it could affect a forthcoming "Export" button)
• Started to work with data on what runtimes are on the server
  • Added a control to highlight content with stale builds (i.e. it was last built against a runtime that no longer exists)
• Misc
  • Updated CSS

With the version selector control — I had wanted to do a "type in the version number" control, but I didn't have time to implement that, as it would have required significant refactoring of how the app handles versions. It might be worth postponing to a future iteration.

• https://dogfood.team.pct.posit.it/runtime-version-scanner/
• https://connect.posit.it/runtime-version-scanner/

[jonkeane]

Some comments from using this (I haven't read the code doing this, so some of this is knowable if I RTFS, but I wanted to approach this round of feedback as a user):

This is getting pretty close to something useful + complete.

• I actually like the dropdowns for selecting versions better than I thought I would. I know I started off saying sliders, but the dropdowns aren't bad and it's nice to see the version possibilities. One thing I would like is stronger communication to me as to what "R older than 4.3.3" means I know it's clear when I sit and think about it, but is there some way that we can communicate that slightly more obviously at a glance? It would especially nice if we communicated both which items were in the filter (and therefor are possibly in the category of "need to do something about" versus which are outside of the filter and are possibly int he category of "just fine"). A timeline showing the versions from 3.1.0 to 4.3.3 are red, and the versions 4.3.3 to 4.5.0 are green? Maybe a histogram of versions where the versions that are less than and the versions that are greater than are different colors?
• I like the count in "Showing 15 items with any of:" and "R older than 4.4.0 (15 items)" to show me how many items I have. Is it possible to also add in the total so I know if 15 is a lot? Like is it 15 of 17 items? Or 15 of 1750?
• It's a little bit silly that there are two of these, but I get that you might have a mixture of languages — it would be really slick (though not required) to have that text transform if there are multiple filters, otherwise be simpler. Where the total matched only shows up when you have multiple filters. Having multiple filters is not a super likely scenario (but it's good that we are supporting it).
• I really want the table to be sorted by the version I'm filtering on by default. Anyway we can make that happen?
• What does Highlight stale builds mean?

[dotNomad]

Updated filter controls
Changed version selector from a slider to a drop-down
Changed matching from <= to <

I miss the sliders a little bit, but the dropdowns are simpler to use. One weirdness that comes out of the < choice is the first option will always result in an empty list.

For example: I have R content with 4.3.1 and 4.3.3 when I select "R older than 4.3.1" it will always be empty because that is the earliest version I have.

I understand you said you wanted to make that an input rather than <select> so nothing actionable there. What you have works, but just has some temporary quirks.

---

Having the total for pagination would be great if you have that available.

---

I also don't know what "Highlight stale builds" means. I assume this is the content was built on an older version of the language and Connect would use something different now? Definitely need some explanation on that.

[dotNomad]

The code here looks great. I highlighted a couple bits for feedback, but totally fine with any of those being follow-up PRs 😄

[dotNomad]

Nice job on the colors here 👍 They are accessible which is tough for color-on-color text.

[toph-allen]

I actually think that highlighting in color is perhaps a feature which will go away (it doesn't really communicate something easily understandable) but thanks 😂

[dotNomad]

I noticed the select boxes here didn't have labels. They are not shown which makes sense, but they aren't accessible due to this change since there is no content in the <label>. If we could supply a label and hide it with some CSS like the below that would be great.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

[toph-allen]

Aah, interesting. Good point!

I think that these controls may change a lot more or be replaced entirely, so I'm going to leave myself a reminder to check accessibility before the app is finalized, as new controls may need to be made accessible in a different way, or may not have this issue. Is that ok?

[dotNomad]

Totally fine with me sounds like a great way to handle that 🫡

[toph-allen]

@jonkeane Thanks for your feedback here! I'll go point by point.

• I actually like the dropdowns for selecting versions better than I thought I would. I know I started off saying sliders, but the dropdowns aren't bad and it's nice to see the version possibilities. One thing I would like is stronger communication to me as to what "R older than 4.3.3" means I know it's clear when I sit and think about it, but is there some way that we can communicate that slightly more obviously at a glance? It would especially nice if we communicated both which items were in the filter (and therefor are possibly in the category of "need to do something about" versus which are outside of the filter and are possibly int he category of "just fine"). A timeline showing the versions from 3.1.0 to 4.3.3 are red, and the versions 4.3.3 to 4.5.0 are green? Maybe a histogram of versions where the versions that are less than and the versions that are greater than are different colors?

I agree! I had been thinking about some kind of timeline view — it might be fiddly to code but worth it.

• I like the count in "Showing 15 items with any of:" and "R older than 4.4.0 (15 items)" to show me how many items I have. Is it possible to also add in the total so I know if 15 is a lot? Like is it 15 of 17 items? Or 15 of 1750?
• It's a little bit silly that there are two of these, but I get that you might have a mixture of languages — it would be really slick (though not required) to have that text transform if there are multiple filters, otherwise be simpler. Where the total matched only shows up when you have multiple filters. Having multiple filters is not a super likely scenario (but it's good that we are supporting it).

Yep, I like these two pieces of feedback.

• I really want the table to be sorted by the version I'm filtering on by default. Anyway we can make that happen?

Possibly! It might be a bit fiddly I'm not sure what to do if there are multiple runtimes selected for the filter, but perhaps we only do it when a single one is selected.

• What does Highlight stale builds mean?

It means "Highlight items whose most recent environment build used a version of a runtime that doesn't exist on the server any more."

Communicating better about what this means feels related to better communicating about server versions and the currently selected versions. In the next iteration I'm focusing on different ways to communicate the versions — perhaps a timeline or a histogram.

[jonkeane]

It means "Highlight items whose most recent environment build used a version of a runtime that doesn't exist on the server any more."

Communicating better about what this means feels related to better communicating about server versions and the currently selected versions. In the next iteration I'm focusing on different ways to communicate the versions — perhaps a timeline or a histogram.

Can you punt on this right now? 🚮 the message + code etc. And come back to it when the other stuff is in a better place? That will help you stay focused on getting something useful in this iteration. Like we talked about in our 1:1: this is an edge case, it would be nice to message about it, but this is not the most important thing / first thing we should be polishing.

[toph-allen]

It means "Highlight items whose most recent environment build used a version of a runtime that doesn't exist on the server any more."
Communicating better about what this means feels related to better communicating about server versions and the currently selected versions. In the next iteration I'm focusing on different ways to communicate the versions — perhaps a timeline or a histogram.

Can you punt on this right now? 🚮 the message + code etc. And come back to it when the other stuff is in a better place? That will help you stay focused on getting something useful in this iteration. Like we talked about in our 1:1: this is an edge case, it would be nice to message about it, but this is not the most important thing / first thing we should be polishing.

Yeah, definitely. I agree, I think that this is not helpful as a core functionality, the current messaging is more confusing than it is helpful, and trying to focus on it or whip it into shape this iteration will distract from the core functionality.