Displays author name on merge #9920

DanielleInkster · 2024-10-01T16:23:31Z

Displaying the author’s name next to the OL...A identifier making it easier to distinguish between works by different authors.

Technical

utils.js
Added get_author_name function to fetch the name of the author associated with the id and append to the record.

AuthorRoleTable.vue
Added p tag to display authors name, as well as class to formate with CSS.

MergeTable.vue
Created enhancedRecords to include author name and added to template in order to display. Added CSS to display name next to ID.

*** I've not added enhancedRecords to the merge function in this file as I couldn't verify if this would impact what is saved when merging works. Can someone please clarify?***

Testing

Run command npm run serve --component=MergeUI.
Open merge view (http://localhost:8080/static/components/?records=OL1233242W,OL12312W)
Verify merge view now displays the author names next to the ids
Verify merging works as expected.

*** I was not able to find any JS tests for the files associated with this ticket. If needed, I can create if directed to the correct directory.***

Screenshot

Stakeholders

@cdrini

cdrini

Awesome @DanielleInkster ! A few small fixes but looking great so far 😊 Note I noticed this in my testing erroring:

https://testing.openlibrary.org/works/merge?records=OL6151392W,OL31613496W

Some sort of error is happening and only the result row is getting rendered!

cdrini · 2024-10-02T19:28:35Z

openlibrary/components/MergeUI/AuthorRoleTable.vue

                                {{role[field].key.slice("/authors/".length)}}
                            </a>
+                            <p class="author-author-children"><b>{{role[field].name}}</b></p>


Let's put this in a new <td> element so it appears as its own column on the nested author roles table.

Oh actually, if we attach the author name to entry (eg the thing that has the author field) instead of to the entry.author, it should automatically show up! That might be easier.

Eg

entry.name = author_names[entry.author.key];

instead of

entry.author.name = author_names[entry.author.key];

I'm pretty sure I understand why this should work (should be captured under the else statement) but I couldn't get the name to render without making an else-if branch for it.

cdrini · 2024-10-02T19:32:48Z

openlibrary/components/MergeUI/MergeTable.vue

+            enhanced_records.flatMap(record =>
+                record.authors.map(entry=> {


Since we're not returning anything, we can use forEach instead. Actually a for loop here might be the cleanest approach!

We can also avoid the extra loop by change the get_author_names method to return the full key with the /authors/ prefix.

Suggested change

enhanced_records.flatMap(record =>

record.authors.map(entry=> {

for (const record of enhanced_records) {

for (entry of record.authors) {

entry.author.name = author_names[entry.author.key];

}

}

cdrini · 2024-10-02T19:33:43Z

openlibrary/components/MergeUI/utils.js

+        fields: 'key,name',
+    })
+
+    const response = await fetch(`${CONFIGS.OL_BASE_BOOKS}/search/authors.json?${queryParams}`)


Suggested change

const response = await fetch(`${CONFIGS.OL_BASE_BOOKS}/search/authors.json?${queryParams}`)

const response = await fetch(`${CONFIGS.OL_BASE_SEARCH}/search/authors.json?${queryParams}`)

cdrini · 2024-10-02T19:36:07Z

openlibrary/components/MergeUI/utils.js

+
+    const response = await fetch(`${CONFIGS.OL_BASE_BOOKS}/search/authors.json?${queryParams}`)
+
+    if (!response.ok) return {error: true};


Let's have this throw a new error, and then in the place we call it, wrap the call to this method in a try catch that...

cdrini · 2024-10-02T19:36:55Z

openlibrary/components/MergeUI/MergeTable.vue

+        async enhancedRecords(){
+            if (!this.records) return null;
+
+            const author_names = await get_author_names(this.records)


...to a try catch that just returns the clone without any modifications. Otherwise an error here will cause the entire UI to fail!

cdrini · 2024-10-02T19:38:30Z

*** I've not added enhancedRecords to the merge function in this file as I couldn't verify if this would impact what is saved when merging works. Can someone please clarify?***

Yes that's exactly correct! We don't want to use enhanced_records during merging since then it'll try to save the author names in a weird place :P

codecov-commenter · 2024-10-02T19:40:35Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 17.12%. Comparing base (ce16a79) to head (48a7178).
Report is 484 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #9920      +/-   ##
==========================================
+ Coverage   16.06%   17.12%   +1.06%     
==========================================
  Files          90       89       -1     
  Lines        4769     4752      -17     
  Branches      832      831       -1     
==========================================
+ Hits          766      814      +48     
+ Misses       3480     3428      -52     
+ Partials      523      510      -13

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

openlibrary/components/MergeUI/MergeTable.vue

DanielleInkster · 2024-10-05T13:21:54Z

https://testing.openlibrary.org/works/merge?records=OL6151392W,OL31613496W

@cdrini - I'm not able to access this unfortunately.

Freso

Idk Vue and my JavaScript is very rusty, and I also haven’t really looked at the HTML structure of the rest of the site, so take this comment with a tiny grain of salt! 😅

Freso · 2024-10-08T19:13:28Z

openlibrary/components/MergeUI/AuthorRoleTable.vue

@@ -19,6 +19,9 @@
                                {{role[field].key.slice("/authors/".length)}}
                            </a>
                        </div>
+                        <div v-else-if="field == 'name'">
+                            <b>{{role[field]}}</b>


Not sure how this is done elsewhere in the codebase, but this feels like something where a class property (on the div, if one isn’t already assigned?) and CSS rule would be more appropriate for formatting than using <b>.

DanielleInkster · 2024-10-12T15:26:49Z

@cdrini - I think I've covered everything except the error - I'm not able to access the link you've included. Can you please take a look when you've got a minute?

cdrini · 2024-10-15T17:53:44Z

Hi @DanielleInkster apologies for the delay, I was on holiday last week! IA/OL are currently offline, but I'll be able to test this once they're back up (see #9947 (comment) ).

github-actions bot assigned cdrini Oct 1, 2024

cdrini added the On testing.openlibrary.org This PR has been deployed to testing.openlibrary.org for testing label Oct 2, 2024

cdrini requested changes Oct 2, 2024

View reviewed changes

cdrini reviewed Oct 2, 2024

View reviewed changes

openlibrary/components/MergeUI/MergeTable.vue Show resolved Hide resolved

cdrini added the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label Oct 2, 2024

DanielleInkster force-pushed the 9811/feature/display-author-name-on-merge branch from 2253ae3 to 9474056 Compare October 5, 2024 13:18

github-actions bot removed the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label Oct 5, 2024

Freso reviewed Oct 8, 2024

View reviewed changes

DanielleInkster added 12 commits October 12, 2024 15:47

added get_author_names function

1eb4ef2

created enhanced records

7521d93

added author name and css

d572576

Added enhancedRecord to merge function

6220b67

remove from enhanced records

e50573c

Update book path to search

834935e

throws new error

2edfbc6

added comment

32e476e

used try/catch

a28967d

updated enhancedRecords to use for loop

d6e087e

add author name as td

a014aac

Moved bold to css

48a7178

DanielleInkster force-pushed the 9811/feature/display-author-name-on-merge branch from 9474056 to 48a7178 Compare October 12, 2024 15:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Displays author name on merge #9920

Displays author name on merge #9920

DanielleInkster commented Oct 1, 2024 •

edited

Loading

cdrini left a comment

cdrini Oct 2, 2024

cdrini Oct 2, 2024

cdrini Oct 2, 2024

DanielleInkster Oct 5, 2024

cdrini Oct 2, 2024 •

edited

Loading

cdrini Oct 2, 2024

cdrini Oct 2, 2024

cdrini Oct 2, 2024

cdrini commented Oct 2, 2024

codecov-commenter commented Oct 2, 2024 •

edited

Loading

DanielleInkster commented Oct 5, 2024

Freso left a comment

Freso Oct 8, 2024

DanielleInkster commented Oct 12, 2024

cdrini commented Oct 15, 2024

		enhanced_records.flatMap(record =>
		record.authors.map(entry=> {

-            enhanced_records.flatMap(record =>
-                record.authors.map(entry=> {
+            for (const record of enhanced_records) {
+                for (entry of record.authors) {
+                    entry.author.name = author_names[entry.author.key];
+                }
+            }

	const response = await fetch(`${CONFIGS.OL_BASE_BOOKS}/search/authors.json?${queryParams}`)
	const response = await fetch(`${CONFIGS.OL_BASE_SEARCH}/search/authors.json?${queryParams}`)


		const response = await fetch(`${CONFIGS.OL_BASE_BOOKS}/search/authors.json?${queryParams}`)

		if (!response.ok) return {error: true};

Displays author name on merge #9920

Are you sure you want to change the base?

Displays author name on merge #9920

Conversation

DanielleInkster commented Oct 1, 2024 • edited Loading

Technical

Testing

Screenshot

Stakeholders

cdrini left a 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

cdrini Oct 2, 2024 • 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

cdrini commented Oct 2, 2024

codecov-commenter commented Oct 2, 2024 • edited Loading

Codecov Report

DanielleInkster commented Oct 5, 2024

Freso left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanielleInkster commented Oct 12, 2024

cdrini commented Oct 15, 2024

DanielleInkster commented Oct 1, 2024 •

edited

Loading

cdrini Oct 2, 2024 •

edited

Loading

codecov-commenter commented Oct 2, 2024 •

edited

Loading