Kb 48270 #990

xjiang-at-wiris · 2024-07-02T13:01:52Z

Description

Optimized the performance of the viewer by implementing the following:

Added an Interaction Observer to avoid rendering all functions on the page simultaneously. Instead, it renders only the currently visible functions and some that are just outside the viewport.
Added a Mutation Observer to render newly added functions individually instead of re-rendering the entire page. This also allows for the quick conversion of LaTeX to MathML.
Enabled concurrent rendering of multiple functions within a set upper limit, ensuring all visible functions on the page are rendered in parallel.

Steps to reproduce

Launch viewer on local yarn && nx build viewer && nx start html-viewer or in kitchen
Try to put a lot of formulas, you can use this
Ensure all mencioned before are working
Try to modify new added parameters on table simultaneousmml simultaneouslatex vieweroffset

#48270

feature: load formula asynchronous feat(viewer): add observer in order optimize performance feat: viewer improvement

xjiang-at-wiris

Some explanation

xjiang-at-wiris · 2024-07-02T13:04:06Z

demos/html/viewer/src/app.js

  };

  window.viewer.properties.config = config;

  document.getElementsByTagName("main")[0].innerHTML = document.getElementById("content").value;
-  window.com.wiris.js.JsPluginViewer.parseElement(document.getElementsByTagName("main")[0]);


It has been removed because we no longer need "Render under request."

xjiang-at-wiris · 2024-07-02T13:06:23Z

packages/viewer/src/mathml.ts

@@ -48,6 +48,41 @@ function decodeSafeMathML(root: HTMLElement) {
  }
 }

+export async function renderAMathML(properties: Properties, mathElement: MathMLElement): Promise<void> {


I would like to delete the renderMathML function, but it seems to have a lot of implications and requires many document modifications. However, it appears worth discussing its feasibility.

I would like so too. I would even consider this part of the development of the task, since the renderMathML is used for the retro-compatibility methods, which could benefit from the new performance improvements.

It would require a part of investigation and maybe adapt the current methods so that renderMathML can be properly replaced.

carla-at-wiris · 2024-07-05T12:09:11Z

packages/viewer/docs/spec.md

@@ -112,6 +112,9 @@ The following table contains a specification of each of the properties.
 | lang                       | The language for the alt text.                                                                                                                                                                                                                                                                                                           | Frontend |                                                 | en                                      |
 | dpi                        | Resolution in dots per inch of the generated image. This feature scales the formula with a factor of dpi/96.                                                                                                                                                                                                                             | Frontend | Positive integer                                | 96                                      |
 | zoom                       | The scale of the generated image.                                                                                                                                                                                                                                                                                                        | Frontend | Positive floating point number                  | 1                                       |
+| vieweroffset                       | Number of pixels to render in advance.                                                                                                                                                                                                                                                                                                        | Frontend | Positive floating point number                  | 200                                       |


I'm missing maybe some information on what would that parameter be of use, because if I'm using the viewer for the first time, with that information I would not understand.

Maybe add something like "We render only the formulas on screen. This parameter defines the ..."

carla-at-wiris · 2024-07-05T12:10:28Z

packages/viewer/docs/spec.md

@@ -112,6 +112,9 @@ The following table contains a specification of each of the properties.
 | lang                       | The language for the alt text.                                                                                                                                                                                                                                                                                                           | Frontend |                                                 | en                                      |
 | dpi                        | Resolution in dots per inch of the generated image. This feature scales the formula with a factor of dpi/96.                                                                                                                                                                                                                             | Frontend | Positive integer                                | 96                                      |
 | zoom                       | The scale of the generated image.                                                                                                                                                                                                                                                                                                        | Frontend | Positive floating point number                  | 1                                       |
+| vieweroffset                       | Number of pixels to render in advance.                                                                                                                                                                                                                                                                                                        | Frontend | Positive floating point number                  | 200                                       |
+| simultaneousmml                       |  Mmax number of simultaneous MathML rendering petition can make at the same time.                                                                                                                                                                                                                                                                                                        | Frontend | Positive floating point number                  | 50                                       |


carla-at-wiris · 2024-07-05T12:11:05Z

packages/viewer/docs/spec.md

@@ -112,6 +112,9 @@ The following table contains a specification of each of the properties.
 | lang                       | The language for the alt text.                                                                                                                                                                                                                                                                                                           | Frontend |                                                 | en                                      |
 | dpi                        | Resolution in dots per inch of the generated image. This feature scales the formula with a factor of dpi/96.                                                                                                                                                                                                                             | Frontend | Positive integer                                | 96                                      |
 | zoom                       | The scale of the generated image.                                                                                                                                                                                                                                                                                                        | Frontend | Positive floating point number                  | 1                                       |
+| vieweroffset                       | Number of pixels to render in advance.                                                                                                                                                                                                                                                                                                        | Frontend | Positive floating point number                  | 200                                       |
+| simultaneousmml                       |  Mmax number of simultaneous MathML rendering petition can make at the same time.                                                                                                                                                                                                                                                                                                        | Frontend | Positive floating point number                  | 50                                       |
+| simultaneouslatex                       |  max number of simultaneous LaTeX rendering petition can make at the same time.                                                                                                                                                                                                                                                                                                        | Frontend | Positive floating point number                  | 50                                       |


carla-at-wiris · 2024-07-05T12:43:58Z

packages/viewer/src/app.ts

+    // Interaction Observer
+    const mathobserver = new IntersectionObserver(async (entries, observer) => {
+
+      let latexPromises = [];


I see that you are using the simultaneousmml but I fail to find the place where the simultaneouslatex is being used. It seems then that the parameter is not providing any value to the viewer at this point. Is this intentional, or am I failing to see something?

Same here!
In Latex.ts, line 21:

const maxLatexPetition = properties.simultaneousmml;

Maybe maxLatexPetition should be equal to properties.simultaneouslatex?

My mistake! It should be const maxLatexPetition = properties.simultaneouslatex;
FIxed, thank you both!

carla-at-wiris · 2024-07-05T12:52:31Z

packages/viewer/src/mathml.ts

@@ -48,6 +48,41 @@ function decodeSafeMathML(root: HTMLElement) {
  }
 }

+export async function renderAMathML(properties: Properties, mathElement: MathMLElement): Promise<void> {


I would like so too. I would even consider this part of the development of the task, since the renderMathML is used for the retro-compatibility methods, which could benefit from the new performance improvements.

It would require a part of investigation and maybe adapt the current methods so that renderMathML can be properly replaced.

carla-at-wiris · 2024-07-05T12:55:58Z

I'm getting the following console errors on the viewer demo:

psala-at-wiris · 2024-07-15T08:05:26Z

packages/viewer/src/app.ts

+
+    const allElements = document.querySelectorAll('*');
+    window.addEventListener("load", function () {
+      let counter = 0;


Is this counter used for something?
Looks like a development tool XD

Deleted! Thank you!

psala-at-wiris · 2024-07-15T08:09:37Z

packages/viewer/src/app.ts

+      for (const entry of entries) {
+
+        if (entry.isIntersecting && entry.target instanceof MathMLElement && entry.target.matches('math')) {
+          const promise = renderAMathML(properties, entry.target);


Maybe I am missing something, but:
Why the renderAMathMl method does not implement the petition guard and renderLatex does?
Could be possible to implement the guard logic in the same way for both methods? For me is kind of confusing that one does the guard mechanism and the other doesn't.

As we talked in private, renderAMathMl and renderLatex have some different behavior, that's why they don't share the same guard mechanism

usantos-at-wiris · 2024-07-24T14:49:45Z

Hey, remember to add the decode so this work ! 😊«math xmlns=¨http://www.w3.org/1998/Math/MathML¨»«mfrac»«mrow»«mi»r«/mi»«mi»e«/mi»«/mrow»«mi»w«/mi»«/mfrac»«mi»r«/mi»«/math»

feat(viewer): viewer performance improvement

d84b601

feature: load formula asynchronous feat(viewer): add observer in order optimize performance feat: viewer improvement

xjiang-at-wiris requested review from carla-at-wiris, jgonzalez-at-wiris, usantos-at-wiris and psala-at-wiris July 2, 2024 13:01

xjiang-at-wiris commented Jul 2, 2024

View reviewed changes

carla-at-wiris requested changes Jul 5, 2024

View reviewed changes

psala-at-wiris reviewed Jul 15, 2024

View reviewed changes

fix: text bug fixes

198dab2

usantos-at-wiris added the package:viewer label Oct 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kb 48270 #990

Kb 48270 #990

xjiang-at-wiris commented Jul 2, 2024

xjiang-at-wiris left a comment

xjiang-at-wiris Jul 2, 2024

xjiang-at-wiris Jul 2, 2024

carla-at-wiris Jul 5, 2024

carla-at-wiris Jul 5, 2024

carla-at-wiris Jul 5, 2024

carla-at-wiris Jul 5, 2024

carla-at-wiris Jul 5, 2024

psala-at-wiris Jul 15, 2024 •

edited

Loading

xjiang-at-wiris Jul 23, 2024

carla-at-wiris Jul 5, 2024

carla-at-wiris commented Jul 5, 2024

psala-at-wiris Jul 15, 2024

xjiang-at-wiris Jul 23, 2024

psala-at-wiris Jul 15, 2024

xjiang-at-wiris Jul 23, 2024

usantos-at-wiris commented Jul 24, 2024

	\| simultaneousmml \| Mmax number of simultaneous MathML rendering petition can make at the same time. \| Frontend \| Positive floating point number \| 50 \|
	\| simultaneousmml \| Max number of possible simultaneous MathML rendering petitions at the same time. \| Frontend \| Positive floating point number \| 50 \|

	\| simultaneouslatex \| max number of simultaneous LaTeX rendering petition can make at the same time. \| Frontend \| Positive floating point number \| 50 \|
	\| simultaneouslatex \| Max number of possible simultaneous LaTeX rendering petitions at the same time. \| Frontend \| Positive floating point number \| 50 \|

Kb 48270 #990

Are you sure you want to change the base?

Kb 48270 #990

Conversation

xjiang-at-wiris commented Jul 2, 2024

Description

Steps to reproduce

xjiang-at-wiris 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

psala-at-wiris Jul 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

carla-at-wiris commented Jul 5, 2024

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

usantos-at-wiris commented Jul 24, 2024

psala-at-wiris Jul 15, 2024 •

edited

Loading