Add translation progress bar #40

jennchenn · 2021-07-02T02:02:54Z

Notion ticket link

Implementation description

Added progress bar to TranslationPage in frontend
Counting and returning number of translated lines on storyTranslationById query (added numTranslatedLines to StoryTranslationResponseDTO)
Will be building implementation in frontend to reflect/update percentage progress bar in frontend after PR Create TranslationPage for translating story content #39 is merged

Steps to test

Seed database with data:

$ INSERT INTO users (first_name, last_name, auth_id, role, approved_languages) VALUES ('PlanetAdmin', 'Read', <auth id>, <role>, '{"HINDI":3}');
$ INSERT INTO stories (title, description, youtube_link, level, translated_languages) VALUES ('A Book for Puchku', 'Puchku has run out of books to read. Then she discovers more books in the top shelf of the library bookcase. But Puchku is small, and the bookcase tall. How will she ever get to her beloved books?', 'https://www.youtube.com/watch?v=PKxMjO4HPvE', 3, '{}');
$ INSERT INTO story_contents (story_id, line_index, content) VALUES (<id of story you just inserted>,1,'first line'), (<id of story you just inserted>,2,'second line'), (<id of story you just inserted>,3,'third line'), (<id of story you just inserted>,4,'fourth line');
$ INSERT INTO story_translations (story_id, language, stage, translator_id) VALUES (<id of story>,'HINDI', 'TRANSLATE',1);
$ INSERT INTO story_translation_contents (story_translation_id, line_index, translation_content) VALUES (<id of story_translation>, 1, 'translation!');
$ INSERT INTO story_translation_contents (story_translation_id, line_index, translation_content) VALUES (<id of story_translation>, 2, '');
$ INSERT INTO story_translation_contents (story_translation_id, line_index, translation_content) VALUES (<id of story_translation>, 3, '');

Check that query for storyTranslationById returns correct number of translated lines (i.e. in this case it should return 1):

{
  storyTranslationById(id: 1) {
    id
    numTranslatedLines
  }
}

Verify the CSS for the progress bar when you navigate to http://localhost:3000/translation/{storyId}/{storyTranslationId} (currently hardcoded at 25%)

What should reviewers focus on?

backend/python/app/services/implementations/story_service.py
frontend/src/components/translation/TranslationProgressBar.tsx

Checklist

My PR name is descriptive and in imperative tense
My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
For backend changes, I have run the appropriate linters: docker exec -it planet-read_py-backend_1 /bin/bash -c "black . && isort --profile black ."
I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

backend/python/app/services/implementations/story_service.py

gaoxk · 2021-07-03T01:00:07Z

frontend/src/components/pages/TranslationPage.css

@@ -0,0 +1,16 @@
+.translation {


very nice looking progress bar 👌 did you run it by Shaahana?

sorry completely slipped my mind just messaged i will make any updates according to her comments

e-wai · 2021-07-12T04:36:39Z

backend/python/app/services/implementations/story_service.py

@@ -245,3 +249,6 @@ def get_story_translations_available_for_review(self, language, level):
        except Exception as error:
            self.logger.error(str(error))
            raise error
+
+    def _get_num_translated_lines(self, translation_contents):
+        return sum(1 for _ in translation_contents if _.translation_content)


How does this handle empty strings?

i believe Python empty strings evaluate to False so it should only sum if the translation_content is not an empty string--this seemed to be the case when i was testing but let me know if it's not working for you/if there's a more elegant way to do the check i'm happy to change it!!

https://stackoverflow.com/questions/12765833/counting-the-number-of-true-booleans-in-a-python-list/12766783

I'd prefer something like the [True,True,False].count(True) solution, ie len(arr) - arr.count('') might work

gaoxk

Nice! Just left some quick comments

gaoxk · 2021-07-13T01:30:09Z

frontend/src/index.css

@@ -11,3 +11,8 @@ code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
 }
+
+:root {


nice to see variable css!

gaoxk · 2021-07-13T01:54:13Z

backend/python/app/services/implementations/story_service.py

-                    Story.description.label("description"),
-                    Story.youtube_link.label("youtube_link"),
-                    Story.level.label("level"),
+                (


are the outer brackets (ie () needed?

nope removed now! i must have accidentally added it in with the rebasing/formatting

gaoxk · 2021-07-13T01:58:25Z

backend/python/app/services/implementations/story_service.py

@@ -245,3 +249,6 @@ def get_story_translations_available_for_review(self, language, level):
        except Exception as error:
            self.logger.error(str(error))
            raise error
+
+    def _get_num_translated_lines(self, translation_contents):
+        return sum(1 for _ in translation_contents if _.translation_content)


https://stackoverflow.com/questions/12765833/counting-the-number-of-true-booleans-in-a-python-list/12766783

I'd prefer something like the [True,True,False].count(True) solution, ie len(arr) - arr.count('') might work

gaoxk · 2021-07-13T02:00:08Z

frontend/src/components/translation/TranslationProgressBar.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { ProgressBar } from "react-bootstrap";


we haven't made any formal component library decisions so I'm happy with keeping the bootstrap. I am curious, do you have a particular reason for bootstrap or are you comfortable with it?

oops i can definitely swap it out later once we decide on a component library! not too much thought behind it, but thought it would be easier to quickly spin up a functional progress bar
i thought i had saw bootstrap used elsewhere in the repo but i think i just imagined it now 😅
i have used it a few times before but definitely can switch it to something else!!

gaoxk · 2021-07-13T02:10:16Z

frontend/src/App.tsx

@@ -35,6 +36,11 @@ const App = () => {
          <PrivateRoute exact path="/entity/update" component={UpdatePage} />
          <PrivateRoute exact path="/entity" component={DisplayPage} />
          <PrivateRoute exact path="/stories" component={HomePage} />
+          <PrivateRoute


heads up: may need rebase if jenn merges first

Will rebase 👍

gaoxk

🚢 🚢

* create query to get story translation progress * return percentage in get/update translation * update progress bar styling

jennchenn requested a review from gaoxk July 2, 2021 03:28

gaoxk requested changes Jul 3, 2021

View reviewed changes

jennchenn marked this pull request as draft July 5, 2021 00:54

e-wai mentioned this pull request Jul 6, 2021

Modify query to return story translation contents in response #41

Merged

4 tasks

jennchenn force-pushed the story-translation/add-translation-progress branch 2 times, most recently from 41a6c69 to a660e43 Compare July 12, 2021 00:46

jennchenn added 2 commits July 11, 2021 22:19

create query to get story translation progress

e48df01

return percentage in get/update translation

5705307

jennchenn force-pushed the story-translation/add-translation-progress branch 2 times, most recently from ef89942 to 37e9acc Compare July 12, 2021 02:48

jennchenn marked this pull request as ready for review July 12, 2021 02:57

jennchenn requested a review from gaoxk July 12, 2021 02:57

e-wai reviewed Jul 12, 2021

View reviewed changes

gaoxk requested changes Jul 13, 2021

View reviewed changes

gaoxk reviewed Jul 13, 2021

View reviewed changes

update progress bar styling

e7db980

jennchenn force-pushed the story-translation/add-translation-progress branch from 37e9acc to e7db980 Compare July 13, 2021 02:39

jennchenn requested a review from gaoxk July 13, 2021 02:44

gaoxk approved these changes Jul 13, 2021

View reviewed changes

jennchenn merged commit 85d186a into main Jul 13, 2021

jennchenn deleted the story-translation/add-translation-progress branch July 13, 2021 03:34

jennchenn added a commit that referenced this pull request Jul 20, 2021

Add translation progress bar (#40)

b53c3ac

* create query to get story translation progress * return percentage in get/update translation * update progress bar styling

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add translation progress bar #40

Add translation progress bar #40

jennchenn commented Jul 2, 2021 •

edited

Loading

gaoxk Jul 3, 2021

jennchenn Jul 3, 2021

e-wai Jul 12, 2021

jennchenn Jul 12, 2021

gaoxk Jul 13, 2021

gaoxk left a comment

gaoxk Jul 13, 2021

gaoxk Jul 13, 2021

jennchenn Jul 13, 2021

gaoxk Jul 13, 2021

gaoxk Jul 13, 2021

jennchenn Jul 13, 2021

gaoxk Jul 13, 2021

e-wai Jul 13, 2021

gaoxk left a comment

		@@ -0,0 +1,24 @@
		import React from "react";
		import { ProgressBar } from "react-bootstrap";

Add translation progress bar #40

Add translation progress bar #40

Conversation

jennchenn commented Jul 2, 2021 • edited Loading

Notion ticket link

Implementation description

Steps to test

What should reviewers focus on?

Checklist

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

gaoxk 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

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

gaoxk left a comment

Choose a reason for hiding this comment

jennchenn commented Jul 2, 2021 •

edited

Loading