Skip to content
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

Fix #504 : honor the indentation in the MetadataFilter formatting #510

Merged
merged 2 commits into from
Dec 12, 2024
Merged

Fix #504 : honor the indentation in the MetadataFilter formatting #510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
170b11b
Fix #504
pierrotsmnrd Dec 11, 2024
b846b2c
linting
pierrotsmnrd Dec 11, 2024
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
14 changes: 10 additions & 4 deletions ragna/deploy/_ui/central_view.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,11 +205,17 @@ def on_click_chat_info_wrapper(self, event):
# `MetadataFilter`s provided as dict
title = "Metadata Filters"

metadata_filters_readable = str(
MetadataFilter.from_primitive(self.current_chat["metadata"]["input"])
).replace("\n", "<br>")
metadata_filters_readable = (
str(
MetadataFilter.from_primitive(
self.current_chat["metadata"]["input"]
)
)
.replace("\n", "<br>")
Copy link
Member

Choose a reason for hiding this comment

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

Shouldn't we able to remove this given that <pre> should honor line breaks?

Copy link
Contributor Author

@pierrotsmnrd pierrotsmnrd Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

That's indeed the first thing I have tried, but no.
<pre> does not natively honor line breaks. It can be done with CSS but then the line breaks at the first opportunity, and it doesn't result in a hierarchical result anymore.

.replace(" ", "&nbsp;")
Copy link
Member

Choose a reason for hiding this comment

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

Could you explain that?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

.replace("\n", "<br>")
We need to put explicit <br> to have line-breaks at the right places, as explained in the other comment.

.replace(" ", "&nbsp;")
We need to replace the whitespaces as explicit non-breakable spaces to show indentation, otherwise it's ignored.

Try removing these lines to see how it behaves.

Copy link
Member

Choose a reason for hiding this comment

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

So do we even need the <pre> tag in that case?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, to prevent from any forced line-break, and it also renders with a nice monospaced font.

Here are two screenshots comparing both results

  • with <pre>
Capture d’écran 2024-12-11 à 12 10 20
  • without <pre>
Capture d’écran 2024-12-11 à 12 11 10

If you want the non-monospaced font, so no <pre>, I can probably fix the result with CSS.

)

details = f"<div class='details details_block' style='display:block;'>{metadata_filters_readable}</div><br />\n\n"
details = f"<div class='details details_block' style='display:block;'><pre>{metadata_filters_readable}</pre></div><br />\n\n"
grid_height = 1

elif self.current_chat["metadata"]["input"] is None:
Expand Down
7 changes: 7 additions & 0 deletions ragna/deploy/_ui/css/chat_info/markdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,10 @@
:host(.chat_info_markdown) ul {
list-style-type: none;
}

:host(.chat_info_markdown) .details_block pre {
width: calc(100% - 10px);
overflow-x: scroll;
padding-right: 10px;
margin-right: 10px;
}
Loading