Skip to content

UI fixes #995

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cdolfi merged 4 commits into from
Nov 18, 2025
Merged

UI fixes #995

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3853ce6
UI fixes: white arrows, search pill colors, info card, and tab hover
EngCaioFonseca Nov 13, 2025
1424946
Add !important flags to pill styles to override Mantine inline styles
EngCaioFonseca Nov 13, 2025
e1c52bc
Addressing pr reviews. Removing inline comments. Moving color related…
EngCaioFonseca Nov 17, 2025
afe8a97
unused variable, so replacing name with _. Dash convention: input dec…
EngCaioFonseca Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions 8Knot/assets/landing_page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,8 +245,11 @@
white-space: nowrap;
}


/* font_transition: */
Copy link
Copy Markdown
Collaborator

@cdolfi cdolfi Nov 17, 2025

Choose a reason for hiding this comment

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

Is this for the other PR?

Copy link
Copy Markdown
Contributor Author

@EngCaioFonseca EngCaioFonseca Nov 17, 2025

Choose a reason for hiding this comment

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

Partially. The color of the tabs to baby-blue was going to be implemented in that PR (Font transitions), but then, I thought It'd be best to implement it here since this is about UI fixes anyways.
So, basically, the implementation about the colors changing the tabs are right, just the comment is not, which I'll change.


.landing-page .tabs-header .nav-tabs .nav-link:hover {
background: var(--hover-bg);
background: var(--baby-blue-300);
color: var(--color-white);
border-color: var(--baby-blue-500);
}
Expand Down Expand Up @@ -303,10 +306,12 @@
margin-bottom: var(--spacing-md);
}


/* UI-fixez: use background-color instead of color property */
Copy link
Copy Markdown
Collaborator

@cdolfi cdolfi Nov 17, 2025

Choose a reason for hiding this comment

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

Update all "UI-fixez: " comments

Copy link
Copy Markdown
Collaborator

@cdolfi cdolfi Nov 17, 2025

Choose a reason for hiding this comment

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

Shouldnt be in any of the in line comments

Copy link
Copy Markdown
Contributor Author

@EngCaioFonseca EngCaioFonseca Nov 17, 2025

Choose a reason for hiding this comment

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

no problem. I've only added these comments as temporary because before the rebase it was built on top of another branch, so it was showing a lot of modifications, not only the specifics for this one. I'll remove them now.


.landing-page .section-bordered {
background: transparent;
border: none;
color: var(--color-topbar-bg);
background-color: var(--color-topbar-bg);
border-radius: var(--landing-radius-md);
padding: var(--spacing-lg);
margin-top: var(--spacing-lg);
Expand Down Expand Up @@ -344,10 +349,13 @@
text-align: center;
}


/* UI-fixez: use defined token --border-radius-md */

.landing-page .feature-image {
max-width: 100%;
height: auto;
border-radius: var(--border-radius);
border-radius: var(--border-radius-md);
border: 1px solid var(--color-border);
}

Expand Down Expand Up @@ -822,10 +830,14 @@
align-self: center;
}


/* UI-fixez: Changed arrow to solid white using CSS filter */

.landing-page .arrow-image {
width: 80px;
height: auto;
opacity: 0.8;
opacity: 1;
filter: brightness(0) invert(1);
}


Expand Down Expand Up @@ -857,9 +869,11 @@
padding: var(--landing-spacing-s-10) 0;
min-width: auto;
}
/* UI-fixez: Mobile arrow also solid white */
.landing-page .arrow-image {
transform: rotate(90deg);
width: 60px;
filter: brightness(0) invert(1);
}
.landing-page .before-image-container .image-caption,
.landing-page .after-image-container .image-caption {
Expand Down
41 changes: 41 additions & 0 deletions 8Knot/assets/main_layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,47 @@ a.sidebar-section-text {
}


/* ============================================================================
UI-fixez: Filter Pill Styles for Active Search State

This section implements dynamic pill coloring:
- Grey pills by default when repos/orgs are selected
- Blue pills (like Data Ready badge) when search is executing

The .searching class is toggled by a callback in index_callbacks.py
============================================================================ */


/* Style for filter pills (grey by default when selected) */

.mantine-MultiSelect-pill,
Copy link
Copy Markdown
Collaborator

@cdolfi cdolfi Nov 17, 2025

Choose a reason for hiding this comment

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

should be on color css, through 403

.mantine-MultiSelect-value {
background-color: var(--gray-medium);
color: var(--color-white);
}

.searchbar-dropdown .mantine-MultiSelect-pill,
.searchbar-dropdown .mantine-MultiSelect-value {
background-color: var(--gray-medium);
color: var(--color-white);
}


/* Style for filter pills when search is active */


/* !important needed to override inline styles from Mantine components */

.searchbar-dropdown.searching .mantine-MultiSelect-pill,
.searchbar-dropdown.searching .mantine-MultiSelect-value {
background-color: var(--baby-blue-700) !important;
color: var(--color-white) !important;
}


/* End UI-fixez pill styles */


/* visualization adjustments */

.visualization-row {
Expand Down
38 changes: 38 additions & 0 deletions 8Knot/pages/index/index_callbacks.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
from datetime import datetime, timedelta

Check warning on line 1 in 8Knot/pages/index/index_callbacks.py

View workflow job for this annotation

GitHub Actions / python-lint 

[pylint] reported by reviewdog 🐶
W0611: Unused timedelta imported from datetime (unused-import)

Raw Output:
8Knot/pages/index/index_callbacks.py:1:0: W0611: Unused timedelta imported from datetime (unused-import)

Check warning on line 1 in 8Knot/pages/index/index_callbacks.py

View workflow job for this annotation

GitHub Actions / python-lint 

[pylint] reported by reviewdog 🐶
W0611: Unused datetime imported from datetime (unused-import)

Raw Output:
8Knot/pages/index/index_callbacks.py:1:0: W0611: Unused datetime imported from datetime (unused-import)
import re

Check warning on line 2 in 8Knot/pages/index/index_callbacks.py

View workflow job for this annotation

GitHub Actions / python-lint 

[pylint] reported by reviewdog 🐶
W0611: Unused import re (unused-import)

Raw Output:
8Knot/pages/index/index_callbacks.py:2:0: W0611: Unused import re (unused-import)
import os
import time
Expand All @@ -8,7 +8,7 @@
import dash_bootstrap_components as dbc
import dash
from dash import callback, html
from dash.dependencies import Input, Output, State, MATCH

Check warning on line 11 in 8Knot/pages/index/index_callbacks.py

View workflow job for this annotation

GitHub Actions / python-lint 

[pylint] reported by reviewdog 🐶
W0611: Unused MATCH imported from dash.dependencies (unused-import)

Raw Output:
8Knot/pages/index/index_callbacks.py:11:0: W0611: Unused MATCH imported from dash.dependencies (unused-import)
from app import augur
from flask_login import current_user
from cache_manager.cache_manager import CacheManager as cm
Expand All @@ -33,7 +33,7 @@
from queries.repo_info_query import repo_info_query as riq
from models import SearchItem
import redis
import flask

Check warning on line 36 in 8Knot/pages/index/index_callbacks.py

View workflow job for this annotation

GitHub Actions / python-lint 

[pylint] reported by reviewdog 🐶
W0611: Unused import flask (unused-import)

Raw Output:
8Knot/pages/index/index_callbacks.py:36:0: W0611: Unused import flask (unused-import)
from .search_utils import fuzzy_search
from .search_utils import clean_repo_name

Expand Down Expand Up @@ -80,7 +80,7 @@
# TODO: check how old groups are. If they're pretty old (threshold tbd) then requery

# check if groups are not already cached, or if the refresh-button was pressed
if not users_cache.exists(f"{user_id}_groups") or (dash.ctx.triggered_id == "refresh-button"):

Check warning on line 83 in 8Knot/pages/index/index_callbacks.py

View workflow job for this annotation

GitHub Actions / python-lint 

[pylint] reported by reviewdog 🐶
R1705: Unnecessary "else" after "return", remove the "else" and de-indent the code inside it (no-else-return)

Raw Output:
8Knot/pages/index/index_callbacks.py:83:8: R1705: Unnecessary "else" after "return", remove the "else" and de-indent the code inside it (no-else-return)
# kick off celery task to collect groups
# on query worker queue,
return [ugq.apply_async(args=[user_id], queue="data").id]
Expand Down Expand Up @@ -423,7 +423,7 @@
elif search_item == SearchItem.REPO:
formatted_v["label"] = f"repo: {v['label']}"
default_options.append(formatted_v)
except:

Check warning on line 426 in 8Knot/pages/index/index_callbacks.py

View workflow job for this annotation

GitHub Actions / python-lint 

[pylint] reported by reviewdog 🐶
W0702: No exception type(s) specified (bare-except)

Raw Output:
8Knot/pages/index/index_callbacks.py:426:12: W0702: No exception type(s) specified (bare-except)
# If that fails, just return the raw selection values
default_options = [{"value": v, "label": f"ID: {v}"} for v in selections]

Expand Down Expand Up @@ -788,7 +788,7 @@
ctx = dash.callback_context

# Check which input triggered the callback
if ctx.triggered_id == "sidebar-toggle" and n_clicks:

Check warning on line 791 in 8Knot/pages/index/index_callbacks.py

View workflow job for this annotation

GitHub Actions / python-lint 

[pylint] reported by reviewdog 🐶
R1705: Unnecessary "elif" after "return", remove the leading "el" from "elif" (no-else-return)

Raw Output:
8Knot/pages/index/index_callbacks.py:791:4: R1705: Unnecessary "elif" after "return", remove the leading "el" from "elif" (no-else-return)
# Manual toggle - simply toggle the collapse state
return not is_open
elif ctx.triggered_id == "url":
Expand Down Expand Up @@ -851,7 +851,7 @@
)
def hide_loading_on_landing(pathname):
"""Hide loading components when on landing page."""
if pathname == "/" or pathname is None:

Check warning on line 854 in 8Knot/pages/index/index_callbacks.py

View workflow job for this annotation

GitHub Actions / python-lint 

[pylint] reported by reviewdog 🐶
R1705: Unnecessary "else" after "return", remove the "else" and de-indent the code inside it (no-else-return)

Raw Output:
8Knot/pages/index/index_callbacks.py:854:4: R1705: Unnecessary "else" after "return", remove the "else" and de-indent the code inside it (no-else-return)
# Hide loading components on landing page
return {"display": "none"}, {"display": "none"}
else:
Expand All @@ -860,3 +860,41 @@


# Note: Landing page callbacks moved to pages/landing/landing_callbacks.py


# ============================================================================
# UI-fixez: Callback to change pill color when search is clicked
#
# This callback implements dynamic pill coloring:
# - When user selects repos/orgs: pills are grey (pending)
# - When user clicks search icon: pills turn blue (active search)
# - Default selection (chaoss) starts blue since search is auto-triggered
#
# Works in conjunction with CSS in main_layout.css
# ============================================================================
@callback(
Output("projects", "className"),
Copy link
Copy Markdown
Collaborator

@cdolfi cdolfi Nov 17, 2025

Choose a reason for hiding this comment

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

please make these variables descriptive to our codebase

[Input("search", "n_clicks"), Input("projects", "value")],
prevent_initial_call=True,
)
def update_pill_color_on_search(search_clicks, selected_values):
"""Update pill color based on search action.

When search icon is clicked, add 'searching' class to turn pills blue.
When values change (user is selecting), remove 'searching' class to keep pills grey.
"""
if not dash.ctx.triggered:
return dash.no_update

triggered_id = dash.ctx.triggered_id

if triggered_id == "search":
# Search button clicked - add 'searching' class to turn pills blue
logging.info(f"PILL COLOR: Search clicked - turning pills BLUE")
return "searchbar-dropdown searching"
if triggered_id == "projects":
# Values changed (user selecting) - remove 'searching' class to keep pills grey
logging.info(f"PILL COLOR: Values changed - turning pills GREY. Selected: {selected_values}")
return "searchbar-dropdown"

return dash.no_update
16 changes: 14 additions & 2 deletions 8Knot/pages/index/index_layout.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
from dash import html, dcc
import dash

Check warning on line 2 in 8Knot/pages/index/index_layout.py

View workflow job for this annotation

GitHub Actions / python-lint 

[pylint] reported by reviewdog 🐶
W0611: Unused import dash (unused-import)

Raw Output:
8Knot/pages/index/index_layout.py:2:0: W0611: Unused import dash (unused-import)
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from app import augur
Expand Down Expand Up @@ -213,7 +213,8 @@
debounce=100, # debounce time for the search input, since we're implementing client-side caching, we can use a faster debounce
data=[augur.initial_multiselect_option()],
value=[augur.initial_multiselect_option()["value"]],
className="searchbar-dropdown",
# UI-fixez: Start with "searching" class so default selection (chaoss) shows as blue
Copy link
Copy Markdown
Contributor

@MoralCode MoralCode Nov 17, 2025

Choose a reason for hiding this comment

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

Are there particular tools you are using to cause the PR title to make it into commits? usually I end up committing the code several times before even thinking of making a PR (and usually I let github title it for me based on the commit messages)

Copy link
Copy Markdown
Contributor Author

@EngCaioFonseca EngCaioFonseca Nov 17, 2025

Choose a reason for hiding this comment

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

No, this was a particular case, because before the rebase it was built on top of another PR, so I wanted to make sure you guys could actually see what were the modifications made for this specific PR. So, I've added the comments after the PR was already created.

Copy link
Copy Markdown
Collaborator

@cdolfi cdolfi Nov 17, 2025

Choose a reason for hiding this comment

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

No worries on doing that in the future, you can select by commit(s) in review mode

className="searchbar-dropdown searching",
styles={
"input": {
"fontSize": "16px",
Expand All @@ -239,6 +240,15 @@
"margin": "2px 4px",
"color": "white",
},
# UI-fixez: Inline styles for grey pill default color
"value": {
"backgroundColor": "#555555",
"color": "white",
},
"pill": {
"backgroundColor": "#555555",
"color": "white",
},
},
),
dbc.Button(
Expand Down Expand Up @@ -266,10 +276,12 @@
style={"position": "relative"},
),
dbc.Alert(
# UI-fixez: Updated help text to explain pill color behavior
children='Please ensure that your spelling is correct. \
If your selection definitely isn\'t present, please request that \
it be loaded using the help button "REPO/ORG Request" \
in the bottom right corner of the screen.',
in the bottom right corner of the screen. \
The search is only confirmed when you click the search icon and the pill turns blue.',
id="help-alert",
dismissable=True,
fade=True,
Expand Down
Loading