[Bug] Font choice on UI table-content makes Aim look unpolished

[adivekar-utexas]

🐛 Bug

Firstly, I really like Aim. It's what W&B should have been. I am planning to use it for a few research projects and recommend it to others at my company (Amazon).

My bug/quibble: The font in the table (Inconsolata) looks strange and out of place compared to the rest of the fonts on the page. In both Firefox and Chrome, Inconsolata is too tall and narrow. Compared to the rest of the fonts used on the page, this looks jarring and makes Aim seem a bit unfinished.

To reproduce

Run aim up on a repo with some experiments, look at the Aim UI's table on any page (images below).

Expected behavior

I made the following changed in my CSS (using Inspect Element) to produce the "proposed UI" image:

.Table__container--medium {
    ## Other CSS as-is
    --cell-font-size: 0.8rem;
    --font-family: "Inter",sans-serif

The "Inter",sans-serif is what is used on other page widgets. The font-color (light grey) and font-weight (650) are sufficient to help distinguish it, but I had to adjust the cell-font-size.

Environment

• Aim Version: v3.16.0
• Python version: 3.10
• pip version: 22.2.2
• OS: MacOS Monterey 12.6.1, running on a Macbook M1 Pro
• Any other relevant information: using Firefox 102.8.0esr (64-bit), at 100% zoom.

Additional context

Current table look in Aim v3.16 UI

Proposed table UI (using cell-font-size: 0.8rem and font-family: "Inter",sans-serif)

[roubkar]

Hey @adivekar-utexas, thanks for opening this issue and sharing the technical details 🙌

We're using a different font in the Table for the row-by-row cell value (runs) comparison (for a better UX). Inconsolata was selected as a lightweight monospace font which will allow that.

We would like to keep the comparison of values across the rows smooth. Probably changing the font to Inter will not work.

Maybe there are some other options that can both support a good experience for row-by-row value comparison and look good when used in combination with Inter?

[adivekar-utexas]

That's fair.

An alternative is font-family: "Monaco", monospace with cell-font-size: 0.75rem. It looks good on my system (image below).

Mozilla indicates it should be universally supported: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family ("monospace" section).

[adivekar-utexas]

I also tried Menlo and Fira Mono, and they both look about the same with 0.75rem.

Jupyter notebook uses the following fonts for code cells: Menlo, Consolas, 'DejaVu Sans Mono', monospace

So I think Menlo is a good alternative choice.

[roubkar]

Thanks a lot for putting in an effort and sharing this 🙌 really appreciate it. I will keep you updated on the progress of this.

I also would like to invite you to join our community discord server where you can ask questions, get help from the team and the community, discuss MLOps-related topics and not only. https://community.aimstack.io/

[SGevorg]

This is a great conversation and really true to our ethos of putting proper craft and thinking into building Aim. @adivekar-utexas really appreciate you opening up this discussion. Something we have had lots of internal debates as well.

@mahnerak has been the main proponent for font considerations and reconsiderations :) Pinning this issue.

[adivekar-utexas]

Hi folks, any update on this? It's a really small change as mentioned above. I think the code I provided should work as-is?

[vfilter]

The fonts are an absolute eyesore. This is what is keeping us from even considering using Aim right now. It feels like a simple change and there are plenty of examples out there of platforms that use non-ugly monospace fonts. Sentry for instances is using Roboto Mono which looks good.