Page MenuHomePhabricator

Performance review of Query Builder
Closed, ResolvedPublic

Description

Description

(Please provide the context of the performance review, and describe how the feature or service works at a high level technically and from a user point of view, or link to documentation describing that.)

Query builder is basically a WYSIWYG for Wikidata Query Service and SPARQL querying. It's a frontend-only application being served as static files from miscweb.

Preview environment

(Insert one or more links to where the feature can be tested, e.g. on Beta Cluster.)

It's in https://query-builder-test.toolforge.org/ If you need ssh access to that toolforge tool, let me know but it's just static files.

Which code to review

(Provide links to all proposed changes and/or repositories. It should also describe changes which have not yet been merged or deployed but are planned prior to deployment. E.g. production Puppet, wmf config, or in-flight features expected to complete prior to launch date, etc.).

Performance assessment

Please initiate the performance assessment by answering the below:

  • What work has been done to ensure the best possible performance of the feature?
    • We made sure to use lowest possible number of dependencies to avoid bloating the final payload and supply chain attacks. Both production and dev dependencies. The current package lock file is 14K lines, compared to for example MobileFrontend extension with package lock file of 22K lines
    • We investigated to find performance issues and fixed those. For example https://gerrit.wikimedia.org/r/c/wikidata/query-builder/+/708762 reducing size of css by factor of ten.
    • The current payload is extremely small considering its functionalities and features (date selection, complex relations between conditions, different data types, selectors of items, etc.)
    • Since it's fully outside of MediaWiki, it can't cause disruptions or become a DDoS vector.
    • API queries being made on behalf of this app to Wikidata (to search for example) are debounced and throttled.
    • We built several monitoring tools to make sure it's working properly https://grafana.wikimedia.org/d/RA1j2T0Mk/wikidata-query-builder?orgId=1
  • What are likely to be the weak areas (e.g. bottlenecks) of the code in terms of performance?
    • We don't have ongoing measurement of javascript performance so it might get worse without us noticing.
    • It depends on wikit (wmde's design system) and if it starts to get bloated, query builder will follow but wikit is in our control so we can work on it if any issue arises.
  • Are there potential optimisations that haven't been performed yet?
    • Not that I know of, we could maybe squeeze a bit more out of its dependencies and make sure we compile to ES6 to avoid extra code but that would be it.
  • Please list which performance measurements are in place for the feature and/or what you've measured ad-hoc so far. If you are unsure what to measure, ask the Performance Team for advice: performance-team@wikimedia.org.

Payload:

image.png (202×1 px, 34 KB)

JS flame chart of loading the page (partial):

image.png (397×791 px, 71 KB)

Event Timeline

Do you have a timeline when you were hoping to launch this?

The plan is basically to deploy it really soon. I can't talk on behalf of WMDE on the final day but it's basically as soon as possible (specially since the security readiness review is done)

You can ;-)
As Amir said, we'd like to deploy the tool as soon as possible.

I'll start with this later this week. One thing you can start with is this:

We don't have ongoing measurement of javascript performance so it might get worse without us noticing.

You can use the User Timing API for that, that would be super helpful if that is added before its used by real users. If you use the API those metrics are automatically picked up by our synthetic measurement tools if we point them to the query builder. If you feel like it you can create your own synthetic test, you can checkout searchWvuiObama.js in https://github.com/wikimedia/performance-synthetic-monitoring-tests/tree/master/tests/desktop how that can be done (I can also help you).

You can also have a look how the team implemented user timings for the Wvui search.

You can also beacon those metrics back to your server from real users, that is good so we can pickup if there are some users that struggle with the performance. Could those tag along with the other metrics you are measuring or are those backend only in your graphs?

Change 712966 had a related patch set uploaded (by Ladsgroup; author: Amir Sarabadani):

[performance/synthetic-monitoring-tests@master] Add query builder

https://gerrit.wikimedia.org/r/712966

Thanks. I started it, the problem is that the URL is not up so we can't merge the patches, I hope I did them correctly at least. Does that look correct to you?

@Ladsgroup I'm thinking maybe a user journey is better to measure instead of a cold hit? Then we can measure every part of it? Let me explain, I think like this:

  1. You add user timings that is meaningful to you (like either the full JS execution or parts of it if that could help you in the future).
  2. We add user user journey to the synthetic tests: I can do that if you help me with a good journey. That could be like going to the start URL, adding a property(/value and run the query. That way we will automatically collect the user timings but also devtools timeline data for JS where the time is spent. If we do that for one URL/user journey that is good because then we have a history of data so if you do change later on, we have something that we can compare with.

Does that sounds ok @Ladsgroup ?

I want to start with something simple and slowly migrate to something more complex. Specially since basically every interaction's bottleneck is API response time (e.g. for lookup for property ID, loading the WDQS results, etc.) and not the app itself. Other reason is that the main part of the interaction time is just loading the app, the rest are pretty quick.

Cool, I just added a comment to the your push @Ladsgroup !

Change 712966 merged by jenkins-bot:

[performance/synthetic-monitoring-tests@master] Add test for wikidata Query Builder

https://gerrit.wikimedia.org/r/712966

Cool @Ladsgroup, do you have time so I can walk you through the data we collect?

Sure. If you need a call or chat. Feel free to ping me in IRC.

I think this is ok as it is now. I can add a simple alert for the size and then if it fires we can sit-down and have look together.

So it turns out I never added the alert. I can add it now, but who should receive it?

Hi @Lydia_Pintscher, could you help us identify someone that could receive the alerts? Thanks ;)

Yes I can. Can you help me understand again what type of alert we are talking about?

@Lydia_Pintscher I think the main concern from the beginning would be if the JavaScript performance got worse over time and we wanted to add an alert for that. Today when I look at the metric (we measure CPU long tasks https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API) to see JavaScript is blocking the main thread. Looking at the data on that page I could only see one CPU long tasks that is 53 ms, and that is much better than the rest of our performance, so from my point of view I think we can skip it.

@Peter Thank you for your response. I agree, that can probably skip the alert for now. However, when we resume working on QueryBuilder, we would be in touch in order to set up some kind of way to inform us about degraded JS performance.

Cool, lets close this for now.