Ordering front end redesign #4595

flooie · 2024-10-18T16:46:44Z

UI Changes for Opinions Pages and associated view and utility changes.

PR adds

HTML
opinions.html
opinion-tabs.html
add-download-button.html

CSS and JS
base.js to modify footnotes and page numbers across various opinion sources.
override.css - to provide a new UI style for the front end and interactions.

py
Adds or updates new opinion views
for the Opinion, Summaries, Authorities, PDF/HTML document, Cited By and Related Cases

Overhauls the sidebar and orders opinions.
Improves the readability of footnotes and moves the three buttons to the top right for ease of access.

Add multiple tab specific endpoints

Rewrite and waffle the new UI changes Added a number of methods to fetch and/or store related and cited by data quickly Implemented new view opinion with waffles

Generally just override flags to avoid testing old view opinion page against the new ui changes.

Remove decorator for selenium tests unaffected And modify css to only affect scrolling on opinion page

Remove print statement and fix return for bot or scraping detection

Hide unwanted content during printing

flooie · 2024-10-18T18:10:29Z

Additionally, improves the printing process
Addresses #4278

flooie · 2024-10-18T18:11:53Z

Additionally, addresses #4279

Moving page numbers to the right side of the sidebar

update CSS and base.js to handle more edge case specific page numbering

flooie · 2024-10-18T18:50:13Z

Should address #1496 the strange intersection of footnotes and pagination in Anon/Tax import cases which appear to have competing and confusing changes.

flooie · 2024-10-18T18:54:21Z

#4379 Adds support for ordered opinions and only displays either the combined opinion or the separated ordered opinions.

flooie · 2024-10-18T19:00:31Z

Adds support for a beautiful new sidebar that orders and helps navigate thru an opinion. Bolds section of the page you are on as you scroll and allows for smooth scrolling between sections

mlissner

Looks great and it's lovely to see a number of other bugs getting squashed. A couple quick drive-by comments, then I'm afraid somebody else will need to do the full review.

The CSS is HUGE, and I'm afraid that if there is any extra code in there, we'll be carrying it around forever. I think we should put it in its own file so it's only on opinion pages (even though it'll be cached). On top of that, we should go through it as carefully as humanly possible to see if it can be optimized, documented, cleaned up, etc.
The JS file is also large and doesn't need to be on every page, so it should go in it's own file too.

That's it for me for the moment. Can't wait to see this live.

Move new js and css into own files

Was holding off on removing details but can re-add it if necessary

Also include the independent sections if the headmatter is separated out and the headmatter field is empty

ERosendo

@flooie Here's my first round of comments on the code. Tomorrow, I’ll be diving into the CSS, JavaScript, and performance. So, expect more comments coming your way!

ERosendo · 2024-10-24T02:15:01Z

cl/assets/static-global/css/opinions.css

+[id^="A"] {
+  text-indent: 2em;
+  display: inline;
+
+}


I typically prefer using classes for styling because they're more expressive and easier to understand. When you look at the HTML, it's immediately clear which styles are applied to an element based on its class. This can make debugging and maintenance much simpler compared to using IDs, which can be harder to track and potentially more difficult to manage.

I agree in general that using classes is much better.

Many of the design decisions that you see around css are based upon the HTML that we ingested from harvard.

for example Here is the start of US vs. Miranda opinion

<author id="b537-7">Mr. Chief Justice Warren</author> <p id="AMNy">delivered the opinion of the Court.</p>

I believe that the harvard dataset does not have classes and so the css was designed around that character.

ERosendo · 2024-10-24T02:25:01Z

cl/tests/test_visualizations.py

@@ -5,6 +5,7 @@
 from django.contrib.auth.hashers import make_password
 from selenium.webdriver.common.by import By
 from timeout_decorator import timeout_decorator
+from waffle.testutils import override_flag


We're not using this import, we should clean it.

nice catch. thanks ill remove all of those

ERosendo · 2024-10-24T02:25:28Z

cl/tests/test_feeds.py

@@ -10,6 +10,7 @@
 from django.urls import reverse
 from selenium.webdriver.common.by import By
 from timeout_decorator import timeout_decorator
+from waffle.testutils import override_flag


This import is also unused. We should remove it.

cl/search/tests/tests_es_opinion.py

cl/search/models.py

cl/opinion_page/views.py

cl/opinion_page/utils.py

Co-authored-by: Eduardo Rosendo <[email protected]>

Refactor returned object in es_get_cited...with cache to re-use dataclass in system Add some improved doc strings

And add docstrings

ERosendo · 2024-10-24T16:11:00Z

cl/opinion_page/utils.py

+    :param request:The user request
+    :return:Related Cluster Data
+    """
+    cache = caches["db_cache"]


is there a reason to use database caching over Redis?

I was attempting to be consistent with other elastic cached results

I tend to do DB caching for larger objects, myself, but it's a fun fact that Django only evicts DB cache entries when you try to access them again later. If you cache something today, it expires, and you never visit it again, it'll take up storage forever. One day we should make a script for Django itself that cleans this up.

flooie added 7 commits October 17, 2024 15:30

feat(new_ui): NEW HTML and CSS and JS

4cb004f

feat(opinion.urls): Add/remove new endpoints

2ac21c6

Add multiple tab specific endpoints

feat(opinion.views): Create new view methods

c260b60

Rewrite and waffle the new UI changes Added a number of methods to fetch and/or store related and cited by data quickly Implemented new view opinion with waffles

feat(tests): Update to tests

08a4e86

Generally just override flags to avoid testing old view opinion page against the new ui changes.

fix(tests): Fix tests

bc92162

Remove decorator for selenium tests unaffected And modify css to only affect scrolling on opinion page

fix(opinion_page): Remove comments and fix lint

be333b3

Remove print statement and fix return for bot or scraping detection

feat(printing): Prettify Printing

5b0cf27

Hide unwanted content during printing

feat(page-numbers): Fix anon page numbering

7e8a9e2

update CSS and base.js to handle more edge case specific page numbering

flooie requested a review from mlissner October 18, 2024 20:09

mlissner reviewed Oct 18, 2024

View reviewed changes

flooie added 5 commits October 22, 2024 15:13

refactor(js): Refactor js and css

d15e349

Move new js and css into own files

fix(urls): Remove details

353ebd2

Was holding off on removing details but can re-add it if necessary

fix(utils): Fix missing data in elastic related cache call

e3fa07e

feat(opinions.html): Tweak to tab display

1ad1040

feat(opinions): Some small UI tweaks

dfdca1f

Also include the independent sections if the headmatter is separated out and the headmatter field is empty

ERosendo requested changes Oct 24, 2024

View reviewed changes

flooie and others added 9 commits October 24, 2024 06:59

Update cl/search/models.py

dbe7bf3

Co-authored-by: Eduardo Rosendo <[email protected]>

Update cl/opinion_page/views.py

d210bdd

Co-authored-by: Eduardo Rosendo <[email protected]>

Update cl/opinion_page/views.py

6477b6f

Co-authored-by: Eduardo Rosendo <[email protected]>

fix(op_pages/test): Lint and typing changes

3d96869

fix(search.test): Remove unused import

70c0c49

refactor(cl.opinion_page): Simplify code around waffles

1735fae

Refactor returned object in es_get_cited...with cache to re-use dataclass in system Add some improved doc strings

refactor(search.models): Update display citation

3c009be

And add docstrings

fix(cl_opinion_page): Fix typo

ecd7bb2

fix(cl_opinion_page): Update bot response to empty data

7606b51

tests(cl_opinion_page): Tweak citation redirect to use new opinions

0117ed0

ERosendo reviewed Oct 24, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ordering front end redesign #4595

Ordering front end redesign #4595

flooie commented Oct 18, 2024

flooie commented Oct 18, 2024

flooie commented Oct 18, 2024 •

edited

Loading

flooie commented Oct 18, 2024

flooie commented Oct 18, 2024

flooie commented Oct 18, 2024 •

edited

Loading

mlissner left a comment

ERosendo left a comment •

edited

Loading

ERosendo Oct 24, 2024

flooie Oct 24, 2024

ERosendo Oct 24, 2024

flooie Oct 24, 2024

ERosendo Oct 24, 2024

ERosendo Oct 24, 2024

flooie Oct 24, 2024

mlissner Oct 24, 2024

Ordering front end redesign #4595

Are you sure you want to change the base?

Ordering front end redesign #4595

Conversation

flooie commented Oct 18, 2024

flooie commented Oct 18, 2024

flooie commented Oct 18, 2024 • edited Loading

flooie commented Oct 18, 2024

flooie commented Oct 18, 2024

flooie commented Oct 18, 2024 • edited Loading

mlissner left a comment

Choose a reason for hiding this comment

ERosendo left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flooie commented Oct 18, 2024 •

edited

Loading

flooie commented Oct 18, 2024 •

edited

Loading

ERosendo left a comment •

edited

Loading