Upgrade perseus to npm published version. #9759

rtibbles · 2022-10-04T17:16:10Z

Summary

Upgrades our perseus version to the most recently published version on NPM after Khan Academy re-open sourced the code base.
Adds required dependency components KatexProvider and TeX for handling rendering, borrowing the latter from the the deprecated Khan React components
Updates the build scripts to simplify to just vendoring the Perseus JS and CSS for small tweaks and monkey patches
Moves some of the monkey patching into runtime code to simplify this and make more apparent
Uses specific imports from React and React-DOM to be clear about which elements we are using
Updates translation extraction to pull from the typescript files that Perseus packages have that expose the strings
Uses updated React context injection to provide strings for Perseus.
Removes the standalone webpack config for prebuilding the Perseus dist, and removes all dependencies related to that
Removes all previously patched globals that Perseus no longer relies on

Reviewer guidance

Test exercises in lots of different languages, and with lots of different exercise types! The most problematic are probably the more complex mathematical ones - graphs, lots of mathematical formulae etc.

Fixes #8362

Testing checklist

Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
Critical user journeys are covered by Gherkin stories
Critical and brittle code paths are covered by unit tests

PR process

PR has the correct target branch and milestone
PR has 'needs review' or 'work-in-progress' label
If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
If this is an important user-facing change, PR or related issue has a 'changelog' label
If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

Automated test coverage is satisfactory
PR is fully functional
PR has been tested for accessibility regressions
External dependency files were updated if necessary (yarn and pip)
Documentation is updated
Contributor is in AUTHORS.md

github-actions · 2022-10-04T17:22:55Z

Build Artifacts

Asset type	Download link
PEX file	kolibri-.pex
Windows Installer (EXE)	kolibri-0.17.0a0.dev0+git.55.g62da50d6-windows-setup-unsigned.exe
Debian Package	kolibri_0.17.0a0.dev0+git.55.g62da50d6-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.17.0a0.dev0+git.55.g62da50d6-0.4.2.dmg
Android Package (APK)	kolibri-0.17.0a0.dev0+git.55.g62da50d6-0.1.3-debug.apk
TAR file	kolibri-0.17.0a0.dev0+git.55.g62da50d6.tar.gz
WHL file	kolibri-0.17.0a0.dev0+git.55.g62da50d6-py2.py3-none-any.whl

pcenov · 2022-10-06T15:48:15Z

Hi @rtibbles, I was able to identify just the following issues by extensively testing various perseus exercises in multiple languages (valid in quiz, lesson or library context):

Issue	Screenshot
Multiple choice questions - It's not possible to deselect a selected answer
:-------------------------:	:-------------------------:
Fields with option to enter exponents or fractions are not keeping the selected value
:-------------------------:	:-------------------------:
Multiple "Not allowed to use local resource" errors in the console with seemingly no user facing consequences
:-------------------------:	:-------------------------:

The issues above can be replicated by importing Khan Academy (English - US curriculum) > Math by grade > 8th Grade > Illustrative Mathematics

rtibbles · 2022-10-06T16:07:43Z

Thanks @pcenov - I assumed that there is no way this could have gone as smoothly as I thought it had! Will look into these issues, thanks for the precise reference for replication.

nucleogenesis

Code LGTM so long as it passes manual QA. Added comments for context are much appreciated (probably mostly by you some years later when you find the need to revendor Perseus).

nucleogenesis · 2022-10-17T16:03:34Z

kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue

+  // Keep a global register of all image URLs at the module level,
+  // so that even if we have multiple instances of the PerseusRenderer
+  // instantiated at once, we can still render images from all of them.
+  // This also allows us to only monkey patch the Util functions once as
+  // well, and prevent duelling components from overriding each other.


Multi-modal friendliness <3

Dismissing to block merge until manual QA finalized.

pcenov · 2023-01-04T14:54:00Z

Hi @rtibbles, after testing the latest build the issue with the exponents and fractions disappearing is still valid while the one with the single/multiple choice questions is partially fixed as it is now possible to deselect a selected answer but there are some blue lines displayed each time I make a selection, a yellow border displayed if I deselect a selected answer and also if I navigate to another question after having deselected my answer when I go back to the same question the answer is selected again. Videos:

Issue	Screenshot
Single/Multiple choice questions issues	https://user-images.githubusercontent.com/79847249/210579142-8453ea15-e769-443d-8953-cbdf8c3d0f5b.mp4
:-------------------------:	:-------------------------:
Fields with option to enter exponents or fractions are not keeping the selected value	https://user-images.githubusercontent.com/79847249/210579236-32854c6d-8582-4e02-a991-a837b73d434a.mp4
:-------------------------:	:-------------------------:

pcenov · 2023-01-06T16:07:07Z

@rtibbles following a discussion in Slack I tested the reported issue with the missing bar graph and I can confirm that I am able to replicate it both at https://content-demo.learningequality.org/en/learn/#/topics/t/b18a118b93dc52fe9f1c68f9e418aaf5/search and when using the latest build from this PR.
The difference is that at content-demo the bar graph is not being displayed at all while it is partially displayed in the latest build:

Here's also a video of what is being displayed in the latest build:

2023-01-06_17-41-13.mp4

I also noticed an issue with one multiple-select question where the text for the number of answers that need to be selected is not displayed correctly:

pcenov · 2024-06-17T11:07:44Z

Hi @rtibbles - I confirm that the keyboard is displayed now and it works correctly when viewing an exercise from the Library page. However when you create a quiz and attempt to fill in an answer the keyboard is displayed too high and also doesn't fit the screen properly (at least on my Note 10 Samsung phone which has a very large screen) so that the Back and Close button are invisible to the user unless the user drags the keyboard to the left. See the video:

quiz.view.mp4

rtibbles · 2024-06-18T00:53:39Z

Hi @pcenov I think I came up with a solution that seems to work well for both the exercise and quiz contexts, hopefully this is robust!

pcenov · 2024-06-18T11:54:47Z

Hi @rtibbles I confirm that now the keyboard fits better withing the screen in the Android app. Here's how it looks when compared to the previous implementation - might be worth investigating whether it can be further improved in a follow-up PR:

Also when testing the .deb build if I shrink the browser width to less than 820px the on-screen keyboard pops up, which shouldn't be so, right:

rtibbles · 2024-06-18T14:24:35Z

@pcenov this seems to have been a change by Khan Academy within perseus to display the keypad even on desktop - I think I'm ok with leaving it in, as it still allows use of the regular keys to enter the response. I think this may be a replacement for some of the previous tooltips they used to suggest permissable values (like pi, etc).

rtibbles · 2024-06-18T14:26:27Z

Oh.. or maybe not, as although it pops up, it doesn't actually allow input via the keypad.

rtibbles · 2024-06-18T16:40:15Z

OK, I have updated it so that the keypad does always show, regardless of modality, due to the lack of tooltips to offer prompts for how to answer, but in doing so, have also made sure that it works regardless of modality, and can still do keyboard input as well.

marcellamaki

minimal feedback so far. I think reading commit by commit, the code is.... as comprehensible as it can be (most of the complexity related to our use of perseus in general, not the method of implementation)

marcellamaki · 2024-06-19T13:18:27Z

kolibri/plugins/perseus_viewer/assets/dist/index.css

+    line-height: 1.2;
+}
+
+table.periodic-table td.element div.atomic-num {


Is this intentionally empty? (it looks like one of the few places there were more recent modifications which is why I ask)

Ah - the dist files are just directly copied from KA's npm packages, so 🤷 - I take no responsibility for these, except the minor manipulations we make to have valid font file URLs in them.

Upgrade to ServerItemRenderer API. Update message parsing and extraction.

Handle errors slightly more gracefully.

non-colliding recurrence of perseus rendering within the same page.

…e package.

… mobile input. Update styling through the assessment stack to ensure we can position it properly.

pcenov · 2024-06-19T15:55:12Z

Hi @rtibbles,
I confirm that the onscreen keyboard is now always displayed in both full-screen of a desktop browser and in mobile view. It works correctly in the Android app, but it's best to further discuss what can be improved there from usability point of view as for some exercises the keyboard is pushed at the lower end of the screen and the user has to be smart enough to scroll up in order to use it. :)

Also spotted the following issues:

I was having trouble with installing the latest build assets, getting the following error when I run Kolibri:

Ubuntu:

Running migrations:
  Applying morango.0003_auto_20170519_0543...Error: Traceback (most recent call last):
  File "/usr/lib/python3/dist-packages/kolibri/utils/cli.py", line 189, in invoke
    initialize(**get_initialize_params())
  File "/usr/lib/python3/dist-packages/kolibri/utils/main.py", line 342, in initialize
    update(version, kolibri.__version__)
  File "/usr/lib/python3/dist-packages/kolibri/utils/main.py", line 396, in update
    _migrate_databases()
  File "/usr/lib/python3/dist-packages/kolibri/utils/main.py", line 109, in _migrate_databases
    call_command("migrate", interactive=False, database=database)
  File "/usr/lib/python3/dist-packages/kolibri/dist/django/core/management/__init__.py", line 181, in call_command
    return command.execute(*args, **defaults)
  File "/usr/lib/python3/dist-packages/kolibri/dist/django/core/management/base.py", line 398, in execute
    output = self.handle(*args, **options)
  File "/usr/lib/python3/dist-packages/kolibri/dist/django/core/management/base.py", line 89, in wrapped
    res = handle_func(*args, **kwargs)
  File "/usr/lib/python3/dist-packages/kolibri/dist/django/core/management/commands/migrate.py", line 246, in handle
    fake_initial=fake_initial,
  File "/usr/lib/python3/dist-packages/kolibri/dist/django/db/migrations/executor.py", line 117, in migrate
    state = self._migrate_all_forwards(state, plan, full_plan, fake=fake, fake_initial=fake_initial)
  File "/usr/lib/python3/dist-packages/kolibri/dist/django/db/migrations/executor.py", line 147, in _migrate_all_forwards
    state = self.apply_migration(state, migration, fake=fake, fake_initial=fake_initial)
  File "/usr/lib/python3/dist-packages/kolibri/dist/django/db/migrations/executor.py", line 227, in apply_migration
    state = migration.apply(state, schema_editor)
  File "/usr/lib/python3/dist-packages/kolibri/dist/django/db/migrations/migration.py", line 126, in apply
    operation.database_forwards(self.app_label, schema_editor, old_state, project_state)
  File "/usr/lib/python3/dist-packages/kolibri/dist/django/db/migrations/operations/fields.py", line 353, in database_forwards
    to_model._meta.get_field(self.new_name),
  File "/usr/lib/python3/dist-packages/kolibri/dist/django/db/backends/sqlite3/schema.py", line 115, in alter_field
    ) % (model._meta.db_table, old_field_name))
django.db.utils.NotSupportedError: Renaming the 'morango_scopedefinition'.'scope_id' column while in a transaction is not supported on SQLite < 3.26 because it would break referential integrity. Try adding `atomic = False` to the Migration class.

Windows:

C:\Users\Kolibri>kolibri start --foreground
←[37mINFO     2024-06-19 17:13:58,310 Option DEBUG in section [Server] being overridden by environment variable KOLIBRI_DEBUG←[0m
←[37mINFO     2024-06-19 17:13:58,313 Option DEBUG_LOG_DATABASE in section [Server] being overridden by environment variable KOLIBRI_DEBUG_LOG_DATABASE←[0m
←[37mINFO     2024-06-19 17:13:58,313 Option RUN_MODE in section [Deployment] being overridden by environment variable KOLIBRI_RUN_MODE←[0m
←[37mINFO     2024-06-19 17:13:58,313 Attempting to setup using pre-migrated databases←[0m
c:\python36\lib\site-packages\kolibri\dist\morango\models\fields\crypto.py:23: CryptographyDeprecationWarning: Python 3.6 is no longer supported by the Python core team. Therefore, support for it is deprecated in cryptography. The next release of cryptography will remove support for Python 3.6.
  from cryptography.hazmat.backends import default_backend
←[37mINFO     2024-06-19 17:14:01,438 Running Kolibri with the following settings: kolibri.deployment.default.settings.base←[0m
←[37mINFO     2024-06-19 17:14:01,750 New install, version: 0.17.0a0.dev0+git.43.gf4569e12←[0m
←[37mINFO     2024-06-19 17:14:01,750 Running update routines for new version...←[0m
Operations to perform:
  Apply all migrations: analytics, auth, bookmarks, content, contenttypes, device, discovery, exams, kolibriauth, lessons, logger, morango, notifications, sessions
Running migrations:
  Applying morango.0003_auto_20170519_0543...Error: Traceback (most recent call last):
  File "c:\python36\lib\site-packages\kolibri\utils\cli.py", line 189, in invoke
    initialize(**get_initialize_params())
  File "c:\python36\lib\site-packages\kolibri\utils\main.py", line 342, in initialize
    update(version, kolibri.__version__)
  File "c:\python36\lib\site-packages\kolibri\utils\main.py", line 396, in update
    _migrate_databases()
  File "c:\python36\lib\site-packages\kolibri\utils\main.py", line 109, in _migrate_databases
    call_command("migrate", interactive=False, database=database)
  File "c:\python36\lib\site-packages\kolibri\dist\django\core\management\__init__.py", line 181, in call_command
    return command.execute(*args, **defaults)
  File "c:\python36\lib\site-packages\kolibri\dist\django\core\management\base.py", line 398, in execute
    output = self.handle(*args, **options)
  File "c:\python36\lib\site-packages\kolibri\dist\django\core\management\base.py", line 89, in wrapped
    res = handle_func(*args, **kwargs)
  File "c:\python36\lib\site-packages\kolibri\dist\django\core\management\commands\migrate.py", line 246, in handle
    fake_initial=fake_initial,
  File "c:\python36\lib\site-packages\kolibri\dist\django\db\migrations\executor.py", line 117, in migrate
    state = self._migrate_all_forwards(state, plan, full_plan, fake=fake, fake_initial=fake_initial)
  File "c:\python36\lib\site-packages\kolibri\dist\django\db\migrations\executor.py", line 147, in _migrate_all_forwards
    state = self.apply_migration(state, migration, fake=fake, fake_initial=fake_initial)
  File "c:\python36\lib\site-packages\kolibri\dist\django\db\migrations\executor.py", line 227, in apply_migration
    state = migration.apply(state, schema_editor)
  File "c:\python36\lib\site-packages\kolibri\dist\django\db\migrations\migration.py", line 126, in apply
    operation.database_forwards(self.app_label, schema_editor, old_state, project_state)
  File "c:\python36\lib\site-packages\kolibri\dist\django\db\migrations\operations\fields.py", line 353, in database_forwards
    to_model._meta.get_field(self.new_name),
  File "c:\python36\lib\site-packages\kolibri\dist\django\db\backends\sqlite3\schema.py", line 115, in alter_field
    ) % (model._meta.db_table, old_field_name))
django.db.utils.NotSupportedError: Renaming the 'morango_scopedefinition'.'scope_id' column while in a transaction is not supported on SQLite < 3.26 because it would break referential integrity. Try adding `atomic = False` to the Migration class.

I did manage to install the build in another Ubuntu VM and the issues I am seeing with the on-screen keyboard are:

when answering the questions in a quiz it seems that the focus is not in the input field so that the selected value from the keyboard is not entered in the field. But even if I manually input it sometimes it just disappears when I revisit the question:

2024-06-19_17-30-06.mp4

Here's the error in the console:
browser-console-error.log

When using the TAB key to navigate if I close the onscreen keyboard that's treated as an incorrect answer:

tab.mp4

rtibbles · 2024-06-19T18:49:06Z

1 is definitely not related to the changes here, I have filed a follow up issue for it here: learningequality/morango#224

…he enter key.

rtibbles · 2024-06-19T20:38:11Z

@pcenov I have fixed the inadvertent submission error you saw when dismissing the keypad, I was unable to replicate the other issue, and have filed a follow up here: #12322 if you could post the database from there so I can replicate, that would be helpful.

The error that is occurring is due to the answer not matching to the question, so I am trying to work out how that has happened.

marcellamaki · 2024-06-20T17:00:01Z

re-testing of the mobile keyboard close input confirms that issue Peter noted is resolved

marcellamaki

Thank you, @rtibbles - with my last manual QA test, I've confirmed the remaining bug that Peter found is resolved

rtibbles requested review from nucleogenesis and radinamatic October 4, 2022 17:16

rtibbles added the TODO: needs review Waiting for review label Oct 4, 2022

rtibbles force-pushed the medusa branch from ef5939c to e348f25 Compare October 4, 2022 17:26

nucleogenesis previously approved these changes Oct 17, 2022

View reviewed changes

rtibbles force-pushed the medusa branch from e348f25 to b849200 Compare December 24, 2022 15:58

rtibbles mentioned this pull request Jan 5, 2023

Bump babel-register from 6.8.0 to 6.26.0 #9971

Closed

This was referenced Jan 10, 2023

Bump pofile from 1.1.1 to 1.1.4 #9977

Closed

Bump walk from 2.3.14 to 2.3.15 #10007

Closed

This was referenced Jan 17, 2023

Bump draft-js from 0.10.5 to 0.11.7 #10013

Closed

Bump mkdirp from 1.0.4 to 2.1.2 #10016

Closed

Bump underscore from 1.4.4 to 1.13.6 #10021

Closed

Bump jquery from 3.5.1 to 3.6.3 #10024

Closed

This was referenced Jan 26, 2023

Bump classnames from 2.3.1 to 2.3.2 #10034

Closed

Bump redux from 3.7.2 to 4.2.1 #10063

Closed

rtibbles mentioned this pull request Feb 8, 2023

Bump immutable from 3.8.2 to 4.2.4 #10095

Closed

rtibbles mentioned this pull request Feb 25, 2023

Bump temp from 0.8.4 to 0.9.4 #10103

Closed

This was referenced Apr 14, 2023

Bump react-addons-css-transition-group from 15.3.2 to 15.6.2 #10468

Closed

build-perseus command no longer works due to webpack 5 #9154

Closed

rtibbles mentioned this pull request Apr 21, 2023

Bump immutable from 3.8.2 to 4.3.0 #10547

Closed

rtibbles mentioned this pull request Jun 14, 2023

Bump react-redux from 5.1.2 to 8.1.0 #10843

Closed

rtibbles mentioned this pull request Jul 14, 2023

Bump immutable from 3.8.2 to 4.3.1 #10977

Closed

rtibbles force-pushed the medusa branch from b849200 to 85e9229 Compare September 30, 2023 20:50

github-actions bot added the SIZE: very large label Sep 30, 2023

rtibbles force-pushed the medusa branch from 365dbe4 to d271210 Compare June 18, 2024 00:52

rtibbles force-pushed the medusa branch from d271210 to a07e667 Compare June 18, 2024 16:38

marcellamaki reviewed Jun 19, 2024

View reviewed changes

rtibbles added 11 commits June 19, 2024 08:35

Upgrade perseus to npm published version.

c28d6b2

Upgrade perseus and fix bugs in expression responses.

eadf561

Update to perseus 11.5.1

ccb6132

Update perseus to 22.7.0.

fce1bac

Upgrade to ServerItemRenderer API. Update message parsing and extraction.

Allow binary expressions as message definitions.

d30bef8

Handle errors slightly more gracefully.

Handle enter key to give answer.

ef89083

Group dependabot updates for Khan Academy namespaced packages.

38aed03

Move perseusFile handling into module scope to allow efficient and

063196f

non-colliding recurrence of perseus rendering within the same page.

Add the math-input styling into dist, as it is not importable from th…

e8b795a

…e package.

Instantiate the MobileKeypad components to ensure it is available for…

a9b692b

… mobile input. Update styling through the assessment stack to ensure we can position it properly.

Always use custom keypad, regardless of input modality.

3dbe259

rtibbles force-pushed the medusa branch from a07e667 to 3dbe259 Compare June 19, 2024 15:37

Don't attempt to submit an answer when the keypad is dismissed with t…

5937557

…he enter key.

rtibbles mentioned this pull request Jun 19, 2024

Errors in perseus renderer from possibly mismatched answer state #12322

Closed

marcellamaki approved these changes Jun 20, 2024

View reviewed changes

rtibbles merged commit 0e1ff08 into learningequality:develop Jun 20, 2024
31 checks passed

rtibbles deleted the medusa branch June 20, 2024 20:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade perseus to npm published version. #9759

Upgrade perseus to npm published version. #9759

rtibbles commented Oct 4, 2022 •

edited

Loading

github-actions bot commented Oct 4, 2022 •

edited

Loading

pcenov commented Oct 6, 2022 •

edited

Loading

rtibbles commented Oct 6, 2022

nucleogenesis left a comment

nucleogenesis Oct 17, 2022

pcenov commented Jan 4, 2023

pcenov commented Jan 6, 2023

pcenov commented Jun 17, 2024

rtibbles commented Jun 18, 2024

pcenov commented Jun 18, 2024

rtibbles commented Jun 18, 2024

rtibbles commented Jun 18, 2024

rtibbles commented Jun 18, 2024

marcellamaki left a comment

marcellamaki Jun 19, 2024

rtibbles Jun 19, 2024

pcenov commented Jun 19, 2024

rtibbles commented Jun 19, 2024

rtibbles commented Jun 19, 2024

marcellamaki commented Jun 20, 2024

marcellamaki left a comment

Upgrade perseus to npm published version. #9759

Upgrade perseus to npm published version. #9759

Conversation

rtibbles commented Oct 4, 2022 • edited Loading

Summary

Reviewer guidance

Testing checklist

PR process

Reviewer checklist

github-actions bot commented Oct 4, 2022 • edited Loading

Build Artifacts

pcenov commented Oct 6, 2022 • edited Loading

rtibbles commented Oct 6, 2022

nucleogenesis left a comment

Choose a reason for hiding this comment

nucleogenesis Oct 17, 2022

Choose a reason for hiding this comment

pcenov commented Jan 4, 2023

pcenov commented Jan 6, 2023

pcenov commented Jun 17, 2024

rtibbles commented Jun 18, 2024

pcenov commented Jun 18, 2024

rtibbles commented Jun 18, 2024

rtibbles commented Jun 18, 2024

rtibbles commented Jun 18, 2024

marcellamaki left a comment

Choose a reason for hiding this comment

marcellamaki Jun 19, 2024

Choose a reason for hiding this comment

rtibbles Jun 19, 2024

Choose a reason for hiding this comment

pcenov commented Jun 19, 2024

rtibbles commented Jun 19, 2024

rtibbles commented Jun 19, 2024

marcellamaki commented Jun 20, 2024

marcellamaki left a comment

Choose a reason for hiding this comment

rtibbles commented Oct 4, 2022 •

edited

Loading

github-actions bot commented Oct 4, 2022 •

edited

Loading

pcenov commented Oct 6, 2022 •

edited

Loading