document CI (#7393)

* document CI

* update documentation note about immortality of non-main documentation in S3

* Apply suggestions from code review

Co-authored-by: Aarni Koskela <akx@iki.fi>

* technical stuff

* add more stuff

* fix

* Update testing-guidelines/ci.md

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Apply suggestions from code review

Co-authored-by: Aarni Koskela <akx@iki.fi>

* fix

* fix

* fix

* fix

* fix

* fix

---------

Co-authored-by: Aarni Koskela <akx@iki.fi>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
pngwn 2024-02-16 15:24:38 +00:00 committed by GitHub
parent 4faf8a7e86
commit 612fa6325c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 2079 additions and 12 deletions

432
testing-guidelines/ci.md Normal file
View File

@ -0,0 +1,432 @@
# Continous Integration
The CI for Gradio uses GitHub Actions and almost all of the configuration to run the CI exists within the repo.
The two cardinal rules that we have for CI are that:
- CI should run on _all_ pull requests, whether those PRs are made from forks or from a branch within the repo.
- These runs must be secure and _never_ leak any secrets, even if the run needs to have access to secrets in order to run successfully.
More information on how we achieve this can be found in the [architecture section of this document](#architecture).
## High-level overview
Broadly speaking, CI is split into three main parts.
- Quality
- Deployments
- Versioning and Publishing
### When do checks run
Checks only run when needed but are required to pass when they run.
We check to see which source files have changed and run the necessary checks. A full breakdown of how we determine this for each kind of check can be found in the [`changes` action](https://github.com/gradio-app/gradio/blob/main/.github/actions/changes/action.yml#L65-L108) but the high-level breakdown is as follows:
- **Python checks** - whenever Python source, dependencies or config change.
- **Javascript checks** - whenever JavaScript source, dependencies or config change.
- **functional and visual checks** - whenever any sopurce of config changes (most of the time).
- **repo hygiene checks** - always.
Checks almost always run when the CI config has changed.
If a check can be skipped, the status is set to `success` (green tick) to satisfy the GitHub required checks, but the message will have a text of `Skipped`.
### Quality
We run a series of quality checks on the repo. These range from static checks like linting to unit tests all the way through to fully end-to-end functional tests.
All tests have a name of something like `test-<type>-<os>-<stability-level>`. `os` and `stability-level` are optional.
This is a simple breakdown of our current quality checks:
| Language | Check | operating system | Workflow file | Notes |
| ---------- | --------------- | ---------------- | ------------------------ | -------------------------------------------- |
| Python | Linting | linux | `test-python.yml` | |
| Python | Formatting | linux | `test-python.yml` | |
| Python | Type-checking | linux | `test-python.yml` | |
| Python | Unit tests | linux | `test-python.yml` | |
| Python | Unit tests | windows | `test-python.yml` | |
| JavaScript | Linting | linux | `test-js.yml` | |
| JavaScript | Formatting | linux | `test-js.yml` | |
| JavaScript | Type-checking | linux | `test-js.yml` | |
| JavaScript | Unit tests | linux | `test-js.yml` | |
| n/a | Functional | linux | `test-functional/yml` | |
| n/a | Visual | linux | `deploy+test-visual/yml` | |
| n/a | Large files | linux | `test-hygiene.yml` | Checks that all files are below 5 MB |
| n/a | Notebooks match | linux | `test-hygiene.yml` | Ensures that notebooks and demos are in sync |
One important thing to note is that we split 'flaky' and 'non-flaky' Python unit/integration tests out.
These tests are flaky because of network requests that they make. They are typically fine, but anything that can cause a red check in PRs makes us less trustworthy of our CI and confidence is the goal!
The Windows tests are also very slow and only test a few edge cases.
The flaky and Windows tests are not run in every PR, but are always run against the release PR to ensure everything is working as expected prior to a release.
All other checks are run for every pull request, ensuring everything will work when we merge into `main`.
For more information about the tests and tools that we use and our approach to quality, check the [testing-strategy](https://github.com/gradio-app/gradio/blob/main/testing-guidelines/quality-strategy.md) document. For more information on how to run and write tests, see the [contributing guide](https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md).
### Deployments
We have three different deployment types that happen when a pull request is created:
- website (`deploy-website.yml`)
- spaces (`deploy-spaces.yml`)
- storybook (`deploy+test-visual.yml`)
#### website
When a PR is created and source code has changed, a preview of the website is created.
When a PR is merged into `main` the production version of the website is redeployed with the latest changes.
Documentation is stored by version, `main` represents the current version of the repo which may or may not match the latest release version. The process of generating documentation is roughly like this:
- In Pull Requests, `main` documentation is built from the pull request branch, reflecting the latest changes in that PR (when selecting the `main` option on the docs or guides).
- When we merge a normal pull request into `main` the documentation is built from the repo, reflecting the latest changes on `main`. The demo spaces are also redeployed to Hugging Face Spaces at this point (the space variant with the `main_` prefix).
- When a new version of Gradio is released (when a versioning PR is merged), the current documentation in the repo is deployed under a version tag. So for version `3.1.1` the current docs and guides in main will be available under that version for eternity. At this point `main` (built from source) and `3.1.1` (built from source and stored in the cloud) are equivalent. We also redeploy demo spaces when a new Gradio version is released, this time without the `main_` prefix.
> [!NOTE]
> Our non-main documentation is all stored in S3.
> Each version `x.x.x` has its own folder containing a JSON file with all docs and guides.
> They are immortal.
#### spaces
For every pull request we deploy a Gradio app to Hugging Face Spaces. This allows us to test out new features and check for any obvious issues. This process is follows:
- Build Gradio and create a wheel
- Upload the wheel to S3
- Copy certain demos to a folder with some configuration
- Create a requirements.txt contain links to the uploaded wheels
- Create the necessary spaces configuration (via a README.md file)
- Create a space using the `huggingface_hub` library
- Add a comment linking to the space and explaining how to install that version of `gradio` and `gradio_client`
These spaces are cleaned up after a certain period of time has passed, the wheels are immortal.
#### storybook
We redeploy storybook on every pull request that contains changes to the frontend source code to allow users to preview visual changes. Each PR is commented with a link to the storybook deployment. This deployment is also responsible for our visual tests as they are part of the same process.
The storybook deploment process is relatively simple as we use an action created by the storybook developers and use their service (chromatic) to handle this:
- Python needs to be installed and gradio needs to be installed locally in order to generate the gradio theme.
- The theme is generated.
- The storybook application is built.
- The storybook application is uploaded to chromatic.
### Versioning and publishing
Versioning is made up of two components:
- Each pull request has to explain what kind of change it introduces.
- When a pull request is merged into `main` we need to figure out what the next version for package should be based on the combination of all changes and whether or not we should publish.
To manage versioning and publishing we use a combination of the [`changesets`](https://github.com/changesets/changesets) library and some custom additions.
#### pull request changesets
Each pull request must include a changeset file. This is a simple markdown file that states what _type_ of change it is, what (if any) version bump is required for each affected package, and a description of that change.
Change types are purely semantic and we only use them to organise the changelog. These "types" are related to bump types but they are not the same. They can be one of the following:
- `fix` - we fixed a thing.
- `feature` - we added a new capability.
- `highlight` - we did something that we want to feature prominently in the changelog.
For bump types we follow semantic versioning:
- `patch` - No API changes, these are typically bug fixes, refactors, and docstring changes.
- `minor` - API additions, everything works as it did before but new API may have been added.
- `major` - breaking changes.
We tend to plan breaking changes ahead of time, we don't release new majors very frequently.
> [!NOTE]
> This is a goal. We are not perfect. Regressions sneak in, accidental breakages happen.
> It isn't a big deal but we need to fix them ASAP and try to make sure it doesn't happen again in the future.
These changesets appear in the `.changeset` directory as markdown files and each changeset has its own dedicated file (this reduces conflicts). These changeset can be written manually or generated via a CLI but we try to automatically detect the changes in a PR and generate a changeset. This isn't always perfect but it is pretty reliable. The changeset can be updated by modifying labels, editing the issue, or modifying the file directly.
#### merging into `main`
When a pull request is merging to main there are two possible routes.
- Create or update a versioning PR
- Publish packages
A normal pull request created by a user that does not contain a changeset will do nothing.
A normal pull request created by a user that _does_ contain a changeset will either create or update a versioning PR. This is a PR that tracks the changelog and versions that will be used for the release. The changelogs for each package are generated from the descriptions in the changeset files. The generated version pull request is on a branch named `changeset-release/main` and there is only ever one (unless we are also working on a pre-release).
When the `changeset-release/main` branch is merged into main all of the necessary versions will have been bumped and the changelogs generated. We then go through to see what needs to be published and publish to PyPi for Python packages and npm for JavaScript pacakges.
## Architecture
The CI on this repo is a little unconventional, this is mainly to work around various gaps in the GitHub Actions API while solving for our use case.
The [technical details](#technical-details) below explain how things are setup, the [context](#context) sections explains what problem we are trying to solve with this architecture, why we took this approach, and the various challenges we faced along the way. It is a little 'extra' for repo docs but serves as good context for the future.
<details>
<summary>Please show me a gigantic diagram of the CI</summary>
ok.
![](https://raw.githubusercontent.com/gradio-app/gradio/update-test-strategy-document/testing-guidelines/gh-actions-flow.png)
</details>
### Technical details
Most our our workflows are contained within the repository but we also have some custom JavaScript actions that are stored in the [gradio-app/github](https://github.com/gradio-app/github) repository. These actions will be mentioned below but I'll put a list here for ease of navigation:
- [`find-pr`](https://github.com/gradio-app/github/tree/main/packages/find-pr) - for getting a pr number, pr branch, and other metadata for a `workflow_run`.
- [`comment-pr`](https://github.com/gradio-app/github/tree/main/packages/comment-pr) - for creating and updating comments on a pull request.
- [`commit-status`](https://github.com/gradio-app/github/tree/main/packages/commit-status) - for creating statuses on commits.
- [`generate-changeset`](https://github.com/gradio-app/github/tree/main/packages/generate-changeset) - for generating and updating changesets based on the state or a pr and branch.
- [`publish-pypi`](https://github.com/gradio-app/github/tree/main/packages/publish-pypi) - for publishing packages to pypi.
From a technical point of view our workflows can be split into two categories:
- Quality, deployment and versioning for pull requests
- Final versioning and release when merged into main
#### Pull requests
Every PR run triggers a 'trigger' workflow that does nothing itself but acts as a trigger for other workflows to run via the `workflow_run` event.
##### changes
With the exception of the `hygiene` check everything is conditional and will only run if specific files have changes. These runs all have one job that everything else depends on that reuses a composite [`changes`](https://github.com/gradio-app/gradio/tree/main/.github/actions/changes) action, this action determines whether or not a check should run based on the files that have changed and also determines important metadata about the pull request that triggered the run. The [`find-pr`](https://github.com/gradio-app/github/tree/main/packages/find-pr) action is responsible for getting this metadata that all runs rely on.
When we know what branch we are on, what pr we care about, and what has changed we can decide how to continue. If we _do not_ need to run this job then we will set the output of the job to success and skip all subsequent steps. Steps following the `changes` step all have a condition of `if: needs.changes.outputs.should_run == 'true'` and such will not run if the prior step tells them not too. We _also_ set the commit status to `"success"` using the [`commit-status`](https://github.com/gradio-app/github/tree/main/packages/commit-status) custom action in order to satisfy the reequired check when
If the job does need to run then it continues as normal but instead we will set the commit status to `"pending"`. The job will later update this to either `'failed"` or `'success"` depending on the outcome.
##### environment and dependencies
The CI jobs in this repo usually depend on either Python or node or both. Sometimes they need to install everything, sometimes they need to build everything, sometimes they don't. We also cache pretty aggressively in order to speed up installations a builds where possible. Caching in particular requires quite a bit of code in CI, so in order to make our workflow more maintainable and easier to understand the installation and build steps have been abstracted into two resuable actions. Please see the `action.yml` file in the below links to see all possible inputs.
- [`install-frontend-deps`](https://github.com/gradio-app/gradio/tree/main/.github/actions/install-frontend-deps) - This action installs node, pnpm, and builds the frontend.
- [`install-all-deps`](https://github.com/gradio-app/gradio/tree/main/.github/actions/install-all-deps) - This action calls the frontend action but also installs python, install all dependencies, and installs the gradio packages locally (and in editable mode). This action also handle discrepancies between windows and linux environments, as we run certain checks in windows.
These actions are called by different jobs with slightly different inputs. These inputs allow us to skip certain steps when needed. For example, in Python unit tests, if there is a cache hit for the frontend build, then we don't need to install `pnpm` or frontend dependencies at all. But in the frontend unit tests, we never need to build the frontend but we always need to install `pnpm` and node.
By default all checks run in Linux, but we run certain Pyhon checks in windows. Sadly, Windows action runners are very slow and the windows tests are mostly there to handle a few edge cases. In order to ensure that we have good test coverage but don't slow down contributors with long CI runs, we only run the Windows check in the release pull request. If a pull request is specifically targetting a Windows issue, then maintainers can add the `windows` label which will make the Windows test run in that pull request as well.
We only run our Python tests for a single Python version, the oldest we support (3.8), for practical reasons.
##### Checking out branches
As we use `workflow_run` events for most jobs, we don't have easy access via the workflow context of the branch we actually care about. The `find-pr` action returns information not just about the pull request but also about the branch associated with it, importantly this includes both the HEAD SHA of that branch and the merge SHA. The merge SHA is the merged result of the branch and it's target and this is almost always the branch that we checkout, as it gives us confidence that the feature works when merged into `main` and not only in the PR branch.
The one exception to this is the visual tests. We use an external services to handle visual testing and storybook deployments ([chromatic](https://www.chromatic.com)) and they prefer the head commit of the branch to be used, so in this case we check out the HEAD SHA instead of the merge SHA.
##### Deploying previews
We deploy up to 3 ephemeral 'environments' and build a new wheel for gradio when a pull request is created:
- `storybook` - previews any frontend components that have a `.stories.svelte` file.
- `website` - previews the website - the `main` version will show any docs or guide changes present in the pull request.
- `spaces` - previews a series of gradio apps on Huggin Face Spaces as they will appear and behave when the pull requests is merged and released.
The `storybook` and `website` previews are relatively straightforward as they use tooling provided by the service providers that we use in order to deploy. We just make sure each run has the necessary assets and components built.
The `spaces` preview is a little more involved as it is a custom process and requires us to build a custom gradio wheel from that pull request.
The process is relatively straightforward, and follows [the steps mentioned above](#spaces) but there a few details to be aware of.
- We use [a custom script](https://github.com/gradio-app/gradio/blob/main/scripts/copy_demos.py) to pull in a select number of spaces and build them into a single FastAPI application. We serve each demo on its own subpath. This is the demo app that gets deployed to spaces.
- We build a new wheel from the pull requests source code and upload it to s3, we then add the url for this wheel to the requirements.txt of the space we are deploying.
- The wheel name (and subsequently the url) include the commit SHA, every build is unique even for the same pull request
- It is important the 'version' of the wheel is the same as the latest version of Gradio. This is because spaces _first_ installs the requirements from the `requirements.txt` and _then_ installs whatever it needs to based on the `sdk` field of the spaces `README.md`. Since the `sdk` is set to Gradio in this case, it will attempt to install the latest version of Gradio and see that the version requirement is already satisfied. If we didn't have matching versions then our custom wheel would be overwritten.
The spaces previews are cleaned up a few days after the pull request that created them is closed or merged.
##### commenting on pull requests
In cases where the commit status doesn't allow us to communicate what we need to, we will comment on the pull request. This happens both for both deploy previews, custom wheels, and versioning information.
All commenting is done by the [`comment-pr`](https://github.com/gradio-app/github/tree/main/packages/comment-pr) custom action, but importantly it is also done using a reusable workflow ([`comment-queue.yml`](https://github.com/gradio-app/gradio/blob/main/.github/workflows/comment-queue.yml)). We have many several jobs that create pull_requests comments and in most cases they update the same comment. Each discrete job does not have enough information to recreate the entire comment as it should be, so it is important that we have some kind of 'queue' that allows thes jobs to run in serial. In order to achieve this, this workflow has a concurrency group set to the pr number, as we want a 'comment-queue' per pull request.
##### Change detection
When a pull request is made we trigger _another_ action called `trigger-changeset`. As before this simply triggers a `workflow_run` event that handles change detection ([`generate-changeset.yml`](https://github.com/gradio-app/gradio/blob/main/.github/workflows/generate-changeset.yml)).
Almost all of the logic for this job is container in the [`generate-changeset`](https://github.com/gradio-app/github/tree/main/packages/generate-changeset) custom action.
This actions runs or reruns in the following cases:
- a pull request is opened
- a pull request branch is pushed to
- a pull requests title or body is updated
- a label is added to the pull request
- the generated comment is interacted with (this is technically an edit).
These reruns will cause the changeset to be updated if necessary. The change detection heuristic works like this:
Changed packages:
- Check which files have changed and which packages those changes correspond to.
- Check if any of the changed packages have `"main_changeset": true,` in their `package.json` file, if so this is also an update to the main `gradio` library.
- [NYI] - Check if the version of a package should be bound to the version of another package in any way.
Determining the bump type (`patch`, `minor`, `major`):
- Check if the pull request has a `"v: *"` labal explicitly dictating the bump type.
- If it does set that as the bump type and stop guessing.
- Check if the pull requests has a `fixes` or `closes` reference to an issue.
- If it has a `"bug"` label then return a `patch` bump and stop guessing
- If it has a `"enhancement"` label then return a `minor` bump and stop guessing
- If it has a both then return a `minor` bump and stop guessing
- If the version can't be determined then just return a `minor` bump.
Determining the change type (`fix`, `feat`, `highlight`):
- Check if the pull request has a `"t: *"` labal explicitly dictating the change type.
- If it does set that as the change type and stop guessing.
- Check if the pull requests has a `fixes` or `closes` reference to an issue.
- If it has a `"bug"` label then return a `fix` change type and stop guessing
- If it has a `"enhancement"` label then return a `feat` change type and stop guessing
- If it has a both then return a `feat` bump and stop guessing
- If the change type can't be determined then just return a `feat`.
If someone manually edits the changeset file, then this workflow will not detect anything but it will update the special pull request comment to reflect the change details in the changeset file.
#### publishing
Publishing is a two step provess as detailed above.
- When a branch with a changeset is merged into `main`, a versioning PR is generated or updated.
- When a versioning PR is updated, new versions of packages are released.
We use [`changesets`](https://github.com/changesets/changesets) for versioning and publishing but we have modified the process heavily. This is a bit hacky because changesets is not very configurable and isn't really designed for our usecase.
- We use a custom [changelog generation script](https://github.com/gradio-app/gradio/blob/main/.changeset/changeset.cjs)
- This is partly so that we can tweak the ouput, but mainly so that we can use this as a hook to store some structured data about each changeset.
- We run a script to regenerate the chnagelogs in the format we want them to be in. We use the structure data we gather in the previous step to customise the changelog format.
- We have added `package.json`s to our python packages, which allows changesets to track them as if they were JavaScript pacakges and bump their version in line with everything else
- We have accept an optional `main_changeset: true | false` field on the package.json of any packge. This allows to easy figure out if changes to this package should be considered changes to the main Gradio package. We cannot do this only via tracking dependencies because we want the changelog entries for these packages to actually appear in the Gradio changelog. If we were to only use dependencies to manage this we would only get an unhelpful "dependencies updated" message in the changelog of our main library.
Publishig itself is also a little different. `changesets` is only set up to publish `npm` packages, so we use the standard changeset GitHub action to do this and we use its `hasChangesets` output to decide whether or not publish to pypi. If `main` `hasChangesets` then we do not want to publish (because that means we haven't bumped the version and deleted the changeset files yet). When we do want to publish, we use [another custom action](https://github.com/gradio-app/github/tree/main/packages/publish-pypi) that does exactly that. This actually will take dependencies between packages into account when deciding which order to publish in (in case of failures) and allows each package being published to define a `build_pypi.sh` script that will be run prior to publishing, this typically builds the wheel.
Finally we create tags using the changesets library and the changesets action generate releases for us.
When releasing a new version of gradio we also create a JSON file containing the docs and guides from `main` and store them in S3 under an `x.x.x` folder. This allows us to keep hold of the docs and guides for everything version of Gradio.
### Context
This is some additional context about why things are the way they are and the challenges we had to overcome. This isn't essential reading but may be helpful if you want to understand why we chose the current design. This will also be helpful as we iterate further on CI in the future; the trauma is fresh as I write this but it will fade with time, and so too will my memory of it.
If you haven't read the previous sections, this part may not make complete sense.
#### The problem
We have the following constraints and challenges:
- We have a relatively comprehensive CI suite, different components have their own idiosyncracies.
- Many of our jobs need access to secrets but security is a high priority.
- We are an open source project and want the same experience for contributors (PRs from forks) as the core team have (PRs from repo branches).
- We want to make all of the important checks required.
- We want CI to be fast, certain jobs should be skipped where appropriate. These jobs may still be 'required' to pass if—and only if—they run.
- CI should give confidence over time, we don't want to be overlooking the odd ❌ as a 'normal' part of our CI, even for optional jobs. This will erode trust.
- Many of our CI jobs share the same steps. We want to avoid excessive duplication where possible for maintenance reasons.
Some of these are discrete problems with their own discrete solutions but a lot of the challenges stem from when certain GitHub Action events occur and how priveleged/ secure those event 'types' are.
#### Demystifying event triggers
Workflows are a discrete set of jobs with a discrete set of steps. It might be reasonable to assume that a workflow is a workflow. Sadly this isn't true, the event that triggers the workflow dictates not only when that workflow will run (which makes sense) but also a bunch of other information about both its environment and even which version of that workflow file will run (this is a git repo after all). This latter feature _also_ makes sense, but it isn't immediately apparent.
- `pull_request` - This event runs correctly on contributor PRs and check out the correct branch by default (more on this later) but it doesn't not have access to secrets.
- `pull_request_target` - Same as `pull_request` but it _does_ have access to secrets. However because this event runs in to context of the branch (and repo) the PR is made from, that PR has also has direct access to secrets making it insecure.
- `push` - When triggered from a fork, this will essentially be a `push` to the fork not the target repo. In many cases the workflow won't run ata ll (depends on the settings of the fork) and it won't have access to secrets from the base repo. Even if it did, it would be inscure.
There are ways to run workflows indirectly:
- `workflow_dispatch` - This event always runs in the context of `main`. You can programatically trigger this workflow event, allowing more control over where that workflow runs but you need to use the GitHub API to do this. Therefore the triggering workflow needs access to secrets, rendering it insecure for our purposes.
- `workflow_run` - This is essentially `workflow_dispatch` inverted. Instead of triggering it from elsewhere explicitly, the workflow _itself_ determines which workflow will trigger _it_. This means that you do not need access to secrets in order to start a `workflow_run` and since this event type runs in the context of main, it is secure.
<details>
<summary>What does the "context" of an event mean?</summary>
In GitHub Actions 'context' is a somewhat overloaded term, but it typically describes the permissions, available data, and the source code state that a given workflow has access to, without any additional code.
For example, you can check out any branch of any public repo in any workflow but the context is important before any configured steps are run, in fact, the context is important before the workflow even starts. For practical purposes, there are two elements to the 'context' that people care about.
- Which workflow file on which branch actually runs.
- What information about the repo or triggering event does that workflow have access to.
If a workflow "runs in the context of the default branch" then it will use the workflow that exists on the default branch, regardless of whether or not the event that originally triggered it was on another branch. If the workflow "runs in the context of the pull request branch" then it will pull the workflow file from the pull request branch.
The information available inside a workflow after it has started (usually available via the [`github` context](https://docs.github.com/en/actions/learn-github-actions/contexts#github-context)). For pull requests, this will include things like the pull request number, and the ref and HEAD SHA of the pull request branch. For workflows running in the context of the default branch, this may not contain much information, but all references to the branch and sha will mainly just be references to main.
</details>
#### New solution, new problems
For the reasons described above, we chose to use `workflow_run` _heavily_ for the gradio repo. However `workflow_run` presents its own challenges:
- This event runs in the context of main, it doesn't offer any of the conveniences that `push` and `pull_request` events give you, it knows very very little about the workflow run even that triggered it. It _does not_ inherit the triggering workflow's context. This is a huge problem.
- This workflow kind of runs in the void. It is run in the context of the default branch and so maintains references to that branch, however, it isn't really 'attached' to a commit or ref in any meaningful way and the status of the run (the 'check') is not added to any commits anywhere.
Both of these problems were eventually solve by using the GitHub API in combination with the information we get from the workflow event's context. Getting the commit reference of the pull request that triggered the workflow is the main challenge, when we have that, creating statuses on commits is trivial.
##### What branch am I even in?
The 'context' a workflow runs in is the branch that actions/checkout will checkout by default. In this case that is `main`. We don't want `main`.
Figuring out what branch or pull request triggered a workflow run is surprisingly difficult depending on the event that you allow to trigger it. The data you have access to in a `workflow_run` event is pretty limited. It is okay for pull requests, you get the PR number, but for pushes and other events it can be challenging. We trigger `workflow_run`s from the following events:
- `pull_request` - this is fine, we get the PR number.
- `push` - not fine, but we get the commit SHA which will do.
- `issue_comment` - couldn't be less fine, we only get the title.
_The reason we use the `issue_comment` event is because pull request are actually a special type of issue when it comes to the title, body, and replies._
It is much easier to find a SHA from a PR number than the other way around but both are possible, getting a PR from an issue title, or PR title is pretty error-prone. We typically need the following information in our workflows:
- Pull request number, if one exists (we create comments in a the PR for certain jobs).
- Source repository
- Source branch
- The HEAD SHA of the source branch (sometimes we want to check this out, we always want checks to appear on this ref)
- The SHA of the magical 'merge' branch that github creates (we want to check this out usually)
- Any labels for the PR (we use these for certain conditional jobs)
<details>
<summary>A magical branch, you say?</summary>
GitHub actually creates two magical refs. `pull/<pr-number>/head` and `pull/<pr-number>/merge`. Both of these refs are read-only, you cannot push to them no matter how many `-f`s you add.
The `head` variant is pretty much the same as the HEAD of the PR branch, except it exists in the target repo regardless of whether it was created from a fork or not. This is quite nice as the commit SHA for this ref will be the same as the commit SHA for the HEAD of the source branch. This makes checking out the branch easier.
The `merge` variant is special. This is a ref that has merged the PR changes into the target branch. `pull_request` events have this ref set as their 'default' and it is what gets checked out by default in `pull_request` workflows. The beauty of this ref is that any tests you run against it are essentially being run on the merged result of this PR and `main`. This isn't commonly known but it is exactly what you want in a pull request.
![](git-tree.svg)
</details>
The path to getting this information isn't necessarily complex but it is different for every event type (worse if also want to manually determine it for `pull_request` and `push` events too). To solve this problem we wrote a [custom JavaScript action](https://docs.github.com/en/actions/creating-actions/about-custom-actions) to solve it (yes, GitHub actions has naming issues "Actions" is the product "an action" is a discrete component).
##### Optional, required checks
This sounds contradictory, but what we want is a check that doesn't _always_ need to run but when they run they _must_ pass. GitHub doesn't really have a concept of this.
The solution is to set the check as required in the repo settings and then do the following:
- If the job runs then the commit status is set to pending prior to the run.
- If the job fails then the commit status should be set to failed.
- If the job succeeded then then commit status should be set to success.
- If the job does not need to run then it should be set to success with some text explaining it was skipped.
Determining what has changed is straightforward, we use a third-party action for this, but we also need to somehow prevent a workflow from running after we have started it, conceptually at least.
To solve this particular problem we _always_ trigger our workflows but don't always run all of them.
- Every workflow we might want to run is triggered by the pull request. We have a simple workflow that does nothing, it simply acts as a 'hook' for the `workflow_run` workflows to listen to.
- Those workflows have their own information about whether the job should run or not.
- If the job thinks that it _should_ run then it creates a 'pending' status and sets its output to `should_run = true`
- If the job thinks that it _shouldn't_ run then it creates a 'success' status nand sets its output to `should_run = false`.
- The next job in the workflow _depends_ on that initial run. It will only run on the condition that the `changes` job has an output of `should_run == true`.
- If it does run, the workflow does its thing and then updates the commit status to `success` or `failure` depending on the outcome.
We use a composite action to colocate the change detection logic and reuse that across workflows. We use a custom JavaScript action to create the commit statuses, again for easier reuse.

Binary file not shown.

After

Width:  |  Height:  |  Size: 212 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 783 KiB

View File

@ -0,0 +1,336 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1850 1055" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1,0,0,1,-62.9197,-55.6395)">
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.963889,0,0,0.932229,33.3355,289.64)">
<path d="M1890.65,104.878C1890.65,88.953 1877.59,76.025 1861.5,76.025L99.199,76.025C83.107,76.025 70.043,88.953 70.043,104.878L70.043,1072.87C70.043,1088.79 83.107,1101.72 99.199,1101.72L1861.5,1101.72C1877.59,1101.72 1890.65,1088.79 1890.65,1072.87L1890.65,104.878Z" style="fill:white;stroke:rgb(71,71,71);stroke-width:3.93px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,45.8334,84.9555)">
<circle cx="536.689" cy="535.526" r="46.107" style="fill:rgb(101,208,255);stroke:rgb(71,71,71);stroke-width:10px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,399.216,84.9555)">
<circle cx="536.689" cy="535.526" r="46.107" style="fill:rgb(101,208,255);stroke:rgb(71,71,71);stroke-width:10px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,399.216,295.916)">
<circle cx="536.689" cy="535.526" r="46.107" style="fill:rgb(101,255,171);stroke:rgb(71,71,71);stroke-width:10px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,752.6,295.916)">
<circle cx="536.689" cy="535.526" r="46.107" style="fill:rgb(101,255,171);stroke:rgb(71,71,71);stroke-width:10px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,1105.98,675.878)">
<circle cx="536.689" cy="535.526" r="46.107" style="fill:rgb(248,255,101);stroke:rgb(71,71,71);stroke-width:10px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,1105.98,506.877)">
<circle cx="536.689" cy="535.526" r="46.107" style="fill:rgb(255,149,254);stroke:rgb(71,71,71);stroke-width:10px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,752.6,84.9555)">
<circle cx="536.689" cy="535.526" r="46.107" style="fill:rgb(101,208,255);stroke:rgb(71,71,71);stroke-width:10px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,45.8334,58.1047)">
<path d="M536.689,611.138L536.689,737.629C536.689,770.312 563.223,796.846 595.905,796.846L862.237,796.846" style="fill:none;stroke:rgb(71,71,71);stroke-width:10px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,752.6,269.065)">
<path d="M536.689,611.138L536.689,737.629C536.689,770.312 563.223,796.846 595.905,796.846L862.237,796.846" style="fill:none;stroke:rgb(71,71,71);stroke-width:10px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,752.6,438.066)">
<path d="M536.689,425.431L536.689,737.629C536.689,770.312 563.223,796.846 595.905,796.846L862.237,796.846" style="fill:none;stroke:rgb(71,71,71);stroke-width:10px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(-0.950835,1.11448e-16,-1.16444e-16,-0.91004,2126.59,1297.47)">
<path d="M536.689,379.324L536.689,737.629C536.689,770.312 563.223,796.846 595.905,796.846L862.237,796.846" style="fill:none;stroke:rgb(71,71,71);stroke-opacity:0.58;stroke-width:10px;stroke-dasharray:10,20,0,0;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.425206,0,0,0.406963,346.594,248.019)">
<path d="M595.905,796.846L1220.78,796.846" style="fill:none;stroke:rgb(71,71,71);stroke-width:22.36px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.292994,0,0,0.406963,154.614,248.019)">
<path d="M595.905,796.846L1220.78,796.846" style="fill:none;stroke:rgb(71,71,71);stroke-opacity:0.31;stroke-width:26.04px;stroke-dasharray:26.04,52.08,0,0;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.425206,0,0,0.406963,699.977,248.019)">
<path d="M595.905,796.846L1220.78,796.846" style="fill:none;stroke:rgb(71,71,71);stroke-width:22.36px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.425206,0,0,0.406963,699.977,458.979)">
<path d="M595.905,796.846L1220.78,796.846" style="fill:none;stroke:rgb(71,71,71);stroke-width:22.36px;"/>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,274.016,-384.156)">
<g transform="matrix(36,0,0,36,285.836,1063.25)">
<path d="M0.211,-0.68L0.389,-0.68L0.586,-0L0.46,-0L0.416,-0.15L0.186,-0.15L0.143,-0L0.018,-0L0.211,-0.68ZM0.387,-0.261L0.3,-0.564L0.299,-0.564L0.216,-0.261L0.387,-0.261Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,627.314,-384.418)">
<g transform="matrix(36,0,0,36,285.836,1063.25)">
<path d="M0.253,0.008C0.194,0.008 0.129,0.005 0.057,-0.002L0.057,-0.682L0.227,-0.685L0.218,-0.685C0.298,-0.685 0.36,-0.679 0.403,-0.668C0.446,-0.657 0.477,-0.638 0.496,-0.611C0.514,-0.584 0.523,-0.545 0.523,-0.496C0.523,-0.451 0.517,-0.419 0.504,-0.399C0.491,-0.379 0.467,-0.365 0.433,-0.358L0.433,-0.352C0.464,-0.347 0.489,-0.338 0.506,-0.326C0.523,-0.314 0.535,-0.297 0.542,-0.276C0.549,-0.255 0.552,-0.226 0.552,-0.189C0.552,-0.137 0.543,-0.097 0.525,-0.069C0.507,-0.041 0.477,-0.021 0.435,-0.01C0.392,0.002 0.332,0.008 0.253,0.008ZM0.183,-0.104C0.214,-0.103 0.243,-0.102 0.27,-0.102C0.311,-0.102 0.342,-0.105 0.364,-0.111C0.385,-0.116 0.401,-0.126 0.41,-0.14C0.419,-0.153 0.424,-0.173 0.424,-0.198C0.424,-0.224 0.42,-0.244 0.413,-0.258C0.405,-0.272 0.392,-0.282 0.375,-0.288C0.357,-0.293 0.331,-0.296 0.298,-0.296L0.183,-0.296L0.183,-0.104ZM0.323,-0.406C0.352,-0.407 0.371,-0.413 0.382,-0.425C0.392,-0.436 0.397,-0.456 0.397,-0.487C0.397,-0.517 0.39,-0.538 0.377,-0.55C0.363,-0.562 0.337,-0.57 0.299,-0.573C0.274,-0.575 0.247,-0.576 0.216,-0.576L0.183,-0.576L0.183,-0.406L0.323,-0.406Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,619.886,-173.359)">
<g transform="matrix(36,0,0,36,285.836,1063.25)">
<path d="M0.211,-0.68L0.389,-0.68L0.586,-0L0.46,-0L0.416,-0.15L0.186,-0.15L0.143,-0L0.018,-0L0.211,-0.68ZM0.387,-0.261L0.3,-0.564L0.299,-0.564L0.216,-0.261L0.387,-0.261Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,307.436,1063.25)">
<path d="M0.301,-0.478L0.305,-0.54L0.266,-0.508L0.086,-0.397L0.086,-0.529L0.301,-0.68L0.425,-0.68L0.425,-0L0.301,-0L0.301,-0.478Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,971.386,-173.031)">
<g transform="matrix(36,0,0,36,285.836,1063.25)">
<path d="M0.211,-0.68L0.389,-0.68L0.586,-0L0.46,-0L0.416,-0.15L0.186,-0.15L0.143,-0L0.018,-0L0.211,-0.68ZM0.387,-0.261L0.3,-0.564L0.299,-0.564L0.216,-0.261L0.387,-0.261Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,307.436,1063.25)">
<path d="M0.067,-0.165C0.156,-0.233 0.222,-0.284 0.265,-0.319C0.308,-0.354 0.342,-0.384 0.368,-0.41C0.381,-0.423 0.389,-0.436 0.394,-0.448C0.399,-0.46 0.401,-0.475 0.401,-0.494C0.401,-0.517 0.398,-0.535 0.392,-0.548C0.385,-0.56 0.374,-0.569 0.359,-0.574C0.344,-0.579 0.322,-0.582 0.294,-0.582C0.266,-0.582 0.244,-0.579 0.229,-0.574C0.213,-0.568 0.201,-0.559 0.194,-0.546C0.187,-0.533 0.182,-0.514 0.18,-0.49L0.052,-0.49C0.055,-0.543 0.064,-0.583 0.079,-0.612C0.094,-0.64 0.118,-0.66 0.152,-0.672C0.185,-0.684 0.232,-0.69 0.293,-0.69C0.354,-0.69 0.401,-0.684 0.435,-0.673C0.467,-0.661 0.491,-0.641 0.505,-0.613C0.519,-0.584 0.526,-0.544 0.526,-0.492C0.526,-0.457 0.521,-0.428 0.511,-0.405C0.501,-0.382 0.482,-0.357 0.454,-0.329C0.419,-0.294 0.383,-0.261 0.347,-0.232C0.31,-0.203 0.26,-0.166 0.196,-0.121L0.196,-0.112L0.535,-0.112L0.535,-0L0.067,-0L0.067,-0.165Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,13.2789,95.6221)">
<g transform="matrix(36,0,0,36,1653.8,999.692)">
<path d="M0.211,-0.68L0.389,-0.68L0.586,-0L0.46,-0L0.416,-0.15L0.186,-0.15L0.143,-0L0.018,-0L0.211,-0.68ZM0.387,-0.261L0.3,-0.564L0.299,-0.564L0.216,-0.261L0.387,-0.261Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,1675.4,999.692)">
<path d="M0.067,-0.165C0.156,-0.233 0.222,-0.284 0.265,-0.319C0.308,-0.354 0.342,-0.384 0.368,-0.41C0.381,-0.423 0.389,-0.436 0.394,-0.448C0.399,-0.46 0.401,-0.475 0.401,-0.494C0.401,-0.517 0.398,-0.535 0.392,-0.548C0.385,-0.56 0.374,-0.569 0.359,-0.574C0.344,-0.579 0.322,-0.582 0.294,-0.582C0.266,-0.582 0.244,-0.579 0.229,-0.574C0.213,-0.568 0.201,-0.559 0.194,-0.546C0.187,-0.533 0.182,-0.514 0.18,-0.49L0.052,-0.49C0.055,-0.543 0.064,-0.583 0.079,-0.612C0.094,-0.64 0.118,-0.66 0.152,-0.672C0.185,-0.684 0.232,-0.69 0.293,-0.69C0.354,-0.69 0.401,-0.684 0.435,-0.673C0.467,-0.661 0.491,-0.641 0.505,-0.613C0.519,-0.584 0.526,-0.544 0.526,-0.492C0.526,-0.457 0.521,-0.428 0.511,-0.405C0.501,-0.382 0.482,-0.357 0.454,-0.329C0.419,-0.294 0.383,-0.261 0.347,-0.232C0.31,-0.203 0.26,-0.166 0.196,-0.121L0.196,-0.112L0.535,-0.112L0.535,-0L0.067,-0L0.067,-0.165Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,1697,999.692)">
<path d="M0.325,0.009C0.254,0.009 0.2,-0.001 0.162,-0.023C0.124,-0.044 0.097,-0.079 0.081,-0.128C0.065,-0.177 0.057,-0.248 0.057,-0.339C0.057,-0.431 0.065,-0.502 0.081,-0.552C0.097,-0.602 0.124,-0.638 0.162,-0.659C0.2,-0.68 0.254,-0.69 0.325,-0.69C0.384,-0.69 0.43,-0.684 0.463,-0.672C0.496,-0.659 0.519,-0.639 0.534,-0.61C0.549,-0.581 0.557,-0.539 0.559,-0.486L0.434,-0.486C0.427,-0.523 0.416,-0.548 0.401,-0.561C0.386,-0.574 0.36,-0.581 0.325,-0.581C0.288,-0.581 0.26,-0.574 0.24,-0.56C0.22,-0.545 0.206,-0.521 0.198,-0.486C0.189,-0.451 0.185,-0.402 0.185,-0.339C0.185,-0.276 0.189,-0.228 0.198,-0.194C0.206,-0.16 0.22,-0.136 0.24,-0.122C0.26,-0.107 0.288,-0.1 0.325,-0.1C0.364,-0.1 0.392,-0.106 0.408,-0.119C0.424,-0.131 0.435,-0.154 0.44,-0.189L0.565,-0.189C0.562,-0.137 0.552,-0.097 0.537,-0.069C0.522,-0.04 0.498,-0.02 0.465,-0.009C0.432,0.003 0.385,0.009 0.325,0.009Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,1324.77,206.93)">
<g transform="matrix(36,0,0,36,285.836,1063.25)">
<path d="M0.211,-0.68L0.389,-0.68L0.586,-0L0.46,-0L0.416,-0.15L0.186,-0.15L0.143,-0L0.018,-0L0.211,-0.68ZM0.387,-0.261L0.3,-0.564L0.299,-0.564L0.216,-0.261L0.387,-0.261Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,307.436,1063.25)">
<path d="M0.067,-0.165C0.156,-0.233 0.222,-0.284 0.265,-0.319C0.308,-0.354 0.342,-0.384 0.368,-0.41C0.381,-0.423 0.389,-0.436 0.394,-0.448C0.399,-0.46 0.401,-0.475 0.401,-0.494C0.401,-0.517 0.398,-0.535 0.392,-0.548C0.385,-0.56 0.374,-0.569 0.359,-0.574C0.344,-0.579 0.322,-0.582 0.294,-0.582C0.266,-0.582 0.244,-0.579 0.229,-0.574C0.213,-0.568 0.201,-0.559 0.194,-0.546C0.187,-0.533 0.182,-0.514 0.18,-0.49L0.052,-0.49C0.055,-0.543 0.064,-0.583 0.079,-0.612C0.094,-0.64 0.118,-0.66 0.152,-0.672C0.185,-0.684 0.232,-0.69 0.293,-0.69C0.354,-0.69 0.401,-0.684 0.435,-0.673C0.467,-0.661 0.491,-0.641 0.505,-0.613C0.519,-0.584 0.526,-0.544 0.526,-0.492C0.526,-0.457 0.521,-0.428 0.511,-0.405C0.501,-0.382 0.482,-0.357 0.454,-0.329C0.419,-0.294 0.383,-0.261 0.347,-0.232C0.31,-0.203 0.26,-0.166 0.196,-0.121L0.196,-0.112L0.535,-0.112L0.535,-0L0.067,-0L0.067,-0.165Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,980.474,-384.451)">
<g transform="matrix(36,0,0,36,285.836,1063.25)">
<path d="M0.325,0.009C0.254,0.009 0.2,-0.001 0.162,-0.023C0.124,-0.044 0.097,-0.079 0.081,-0.128C0.065,-0.177 0.057,-0.248 0.057,-0.339C0.057,-0.431 0.065,-0.502 0.081,-0.552C0.097,-0.602 0.124,-0.638 0.162,-0.659C0.2,-0.68 0.254,-0.69 0.325,-0.69C0.384,-0.69 0.43,-0.684 0.463,-0.672C0.496,-0.659 0.519,-0.639 0.534,-0.61C0.549,-0.581 0.557,-0.539 0.559,-0.486L0.434,-0.486C0.427,-0.523 0.416,-0.548 0.401,-0.561C0.386,-0.574 0.36,-0.581 0.325,-0.581C0.288,-0.581 0.26,-0.574 0.24,-0.56C0.22,-0.545 0.206,-0.521 0.198,-0.486C0.189,-0.451 0.185,-0.402 0.185,-0.339C0.185,-0.276 0.189,-0.228 0.198,-0.194C0.206,-0.16 0.22,-0.136 0.24,-0.122C0.26,-0.107 0.288,-0.1 0.325,-0.1C0.364,-0.1 0.392,-0.106 0.408,-0.119C0.424,-0.131 0.435,-0.154 0.44,-0.189L0.565,-0.189C0.562,-0.137 0.552,-0.097 0.537,-0.069C0.522,-0.04 0.498,-0.02 0.465,-0.009C0.432,0.003 0.385,0.009 0.325,0.009Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,-288.958,214.163)">
<g transform="matrix(48,0,0,48,500.761,406.114)">
<path d="M0.025,-0.522L0.133,-0.522L0.133,-0.458L0.141,-0.458C0.155,-0.487 0.169,-0.507 0.182,-0.519C0.195,-0.53 0.213,-0.535 0.236,-0.535C0.271,-0.535 0.296,-0.53 0.311,-0.519C0.326,-0.507 0.338,-0.487 0.347,-0.458L0.348,-0.458C0.357,-0.487 0.369,-0.507 0.384,-0.519C0.399,-0.53 0.421,-0.535 0.451,-0.535C0.484,-0.535 0.509,-0.529 0.526,-0.517C0.543,-0.505 0.556,-0.485 0.563,-0.456C0.57,-0.427 0.574,-0.385 0.574,-0.332L0.574,-0L0.463,-0L0.463,-0.314C0.463,-0.357 0.459,-0.387 0.452,-0.403C0.445,-0.419 0.431,-0.427 0.412,-0.427C0.397,-0.427 0.386,-0.423 0.378,-0.416C0.369,-0.408 0.363,-0.395 0.36,-0.377C0.357,-0.359 0.355,-0.333 0.355,-0.3L0.355,-0L0.245,-0L0.247,-0.314C0.248,-0.357 0.244,-0.387 0.236,-0.403C0.227,-0.419 0.212,-0.427 0.189,-0.427C0.175,-0.427 0.164,-0.423 0.157,-0.415C0.149,-0.407 0.143,-0.394 0.141,-0.375C0.138,-0.356 0.136,-0.33 0.136,-0.295L0.136,-0L0.025,-0L0.025,-0.522Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,529.561,406.114)">
<path d="M0.253,0.009C0.204,0.009 0.167,0.004 0.141,-0.006C0.114,-0.015 0.096,-0.032 0.085,-0.055C0.074,-0.078 0.068,-0.11 0.068,-0.152C0.068,-0.201 0.076,-0.24 0.091,-0.267C0.106,-0.294 0.132,-0.313 0.169,-0.324C0.206,-0.335 0.258,-0.341 0.325,-0.341L0.404,-0.341L0.404,-0.347C0.404,-0.38 0.397,-0.403 0.382,-0.415C0.367,-0.427 0.34,-0.433 0.299,-0.433C0.262,-0.433 0.238,-0.428 0.225,-0.419C0.212,-0.409 0.206,-0.39 0.207,-0.363L0.085,-0.363C0.083,-0.408 0.088,-0.443 0.101,-0.468C0.113,-0.492 0.135,-0.509 0.166,-0.52C0.197,-0.53 0.241,-0.535 0.299,-0.535C0.357,-0.535 0.402,-0.529 0.434,-0.518C0.465,-0.507 0.488,-0.488 0.501,-0.461C0.514,-0.434 0.521,-0.396 0.521,-0.347L0.521,-0L0.407,-0L0.407,-0.062L0.399,-0.062C0.38,-0.035 0.361,-0.016 0.34,-0.006C0.319,0.004 0.29,0.009 0.253,0.009ZM0.19,-0.161C0.19,-0.136 0.196,-0.118 0.208,-0.109C0.219,-0.1 0.241,-0.095 0.274,-0.095C0.307,-0.095 0.333,-0.099 0.351,-0.108C0.369,-0.117 0.382,-0.131 0.39,-0.152C0.397,-0.173 0.402,-0.202 0.403,-0.241L0.304,-0.24C0.274,-0.239 0.251,-0.237 0.235,-0.232C0.218,-0.227 0.207,-0.22 0.2,-0.209C0.193,-0.198 0.19,-0.182 0.19,-0.161Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,558.361,406.114)">
<path d="M0.235,-0.728L0.388,-0.728L0.388,-0.587L0.235,-0.587L0.235,-0.728ZM0.09,-0.103L0.264,-0.103L0.264,-0.419L0.1,-0.419L0.1,-0.522L0.384,-0.522L0.384,-0.103L0.551,-0.103L0.551,-0L0.09,-0L0.09,-0.103Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,587.161,406.114)">
<path d="M0.068,-0.522L0.19,-0.522L0.19,-0.45L0.198,-0.45C0.217,-0.483 0.236,-0.505 0.256,-0.517C0.276,-0.529 0.304,-0.535 0.341,-0.535C0.392,-0.535 0.431,-0.529 0.458,-0.517C0.485,-0.504 0.505,-0.484 0.517,-0.455C0.528,-0.426 0.534,-0.384 0.534,-0.33L0.534,-0L0.412,-0L0.412,-0.332C0.412,-0.369 0.405,-0.394 0.392,-0.407C0.378,-0.42 0.352,-0.427 0.315,-0.427C0.282,-0.427 0.257,-0.422 0.24,-0.413C0.222,-0.404 0.209,-0.388 0.202,-0.366C0.194,-0.343 0.19,-0.312 0.19,-0.271L0.19,-0L0.068,-0L0.068,-0.522Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,-104.56,412.466)">
<g transform="matrix(48,0,0,48,500.761,406.114)">
<path d="M0.213,-0.414L0.083,-0.414L0.05,-0.522L0.213,-0.522L0.213,-0.583C0.213,-0.626 0.22,-0.66 0.235,-0.684C0.249,-0.707 0.272,-0.724 0.305,-0.735C0.337,-0.745 0.382,-0.75 0.441,-0.75C0.468,-0.75 0.497,-0.749 0.53,-0.747L0.53,-0.643C0.495,-0.644 0.472,-0.645 0.46,-0.645C0.412,-0.645 0.379,-0.64 0.361,-0.631C0.342,-0.621 0.333,-0.604 0.333,-0.579L0.333,-0.522L0.519,-0.522L0.519,-0.414L0.333,-0.414L0.333,-0L0.213,-0L0.213,-0.414Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,529.561,406.114)">
<path d="M0.309,0.009C0.244,0.009 0.193,0.001 0.158,-0.016C0.123,-0.032 0.097,-0.06 0.083,-0.099C0.068,-0.138 0.06,-0.194 0.06,-0.266C0.06,-0.337 0.067,-0.391 0.082,-0.43C0.096,-0.468 0.12,-0.495 0.155,-0.511C0.189,-0.527 0.238,-0.535 0.301,-0.535C0.362,-0.535 0.409,-0.527 0.443,-0.51C0.477,-0.493 0.501,-0.464 0.517,-0.425C0.532,-0.385 0.539,-0.329 0.539,-0.257L0.538,-0.218L0.183,-0.218C0.186,-0.185 0.191,-0.16 0.199,-0.143C0.207,-0.125 0.22,-0.112 0.237,-0.105C0.254,-0.098 0.277,-0.094 0.308,-0.094C0.338,-0.094 0.36,-0.099 0.374,-0.108C0.387,-0.117 0.398,-0.135 0.406,-0.16L0.53,-0.16C0.523,-0.116 0.512,-0.082 0.497,-0.058C0.482,-0.034 0.459,-0.017 0.43,-0.007C0.401,0.004 0.36,0.009 0.309,0.009ZM0.419,-0.313C0.419,-0.358 0.41,-0.39 0.393,-0.407C0.375,-0.424 0.344,-0.432 0.301,-0.432C0.259,-0.432 0.229,-0.423 0.211,-0.406C0.193,-0.389 0.184,-0.358 0.184,-0.313L0.419,-0.313Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,558.361,406.114)">
<path d="M0.253,0.009C0.204,0.009 0.167,0.004 0.141,-0.006C0.114,-0.015 0.096,-0.032 0.085,-0.055C0.074,-0.078 0.068,-0.11 0.068,-0.152C0.068,-0.201 0.076,-0.24 0.091,-0.267C0.106,-0.294 0.132,-0.313 0.169,-0.324C0.206,-0.335 0.258,-0.341 0.325,-0.341L0.404,-0.341L0.404,-0.347C0.404,-0.38 0.397,-0.403 0.382,-0.415C0.367,-0.427 0.34,-0.433 0.299,-0.433C0.262,-0.433 0.238,-0.428 0.225,-0.419C0.212,-0.409 0.206,-0.39 0.207,-0.363L0.085,-0.363C0.083,-0.408 0.088,-0.443 0.101,-0.468C0.113,-0.492 0.135,-0.509 0.166,-0.52C0.197,-0.53 0.241,-0.535 0.299,-0.535C0.357,-0.535 0.402,-0.529 0.434,-0.518C0.465,-0.507 0.488,-0.488 0.501,-0.461C0.514,-0.434 0.521,-0.396 0.521,-0.347L0.521,-0L0.407,-0L0.407,-0.062L0.399,-0.062C0.38,-0.035 0.361,-0.016 0.34,-0.006C0.319,0.004 0.29,0.009 0.253,0.009ZM0.19,-0.161C0.19,-0.136 0.196,-0.118 0.208,-0.109C0.219,-0.1 0.241,-0.095 0.274,-0.095C0.307,-0.095 0.333,-0.099 0.351,-0.108C0.369,-0.117 0.382,-0.131 0.39,-0.152C0.397,-0.173 0.402,-0.202 0.403,-0.241L0.304,-0.24C0.274,-0.239 0.251,-0.237 0.235,-0.232C0.218,-0.227 0.207,-0.22 0.2,-0.209C0.193,-0.198 0.19,-0.182 0.19,-0.161Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,587.161,406.114)">
<path d="M0.365,0.011C0.317,0.011 0.281,0.005 0.256,-0.008C0.231,-0.021 0.215,-0.04 0.206,-0.065C0.197,-0.09 0.193,-0.124 0.193,-0.167L0.193,-0.419L0.064,-0.419L0.088,-0.522L0.197,-0.522L0.197,-0.628L0.313,-0.677L0.313,-0.522L0.508,-0.522L0.508,-0.419L0.313,-0.419L0.313,-0.171C0.313,-0.15 0.315,-0.134 0.319,-0.124C0.322,-0.114 0.33,-0.107 0.343,-0.102C0.355,-0.097 0.374,-0.095 0.399,-0.095C0.428,-0.095 0.469,-0.099 0.524,-0.107L0.524,-0.002C0.455,0.007 0.402,0.011 0.365,0.011Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,-99.5908,452.625)">
<g transform="matrix(36,0,0,36,500.761,406.114)">
<path d="M0.05,-0.522L0.171,-0.522L0.171,-0.471L0.179,-0.471C0.2,-0.495 0.22,-0.511 0.239,-0.52C0.258,-0.529 0.282,-0.533 0.312,-0.533C0.371,-0.533 0.417,-0.525 0.449,-0.509C0.481,-0.492 0.504,-0.465 0.518,-0.426C0.531,-0.387 0.538,-0.332 0.538,-0.261C0.538,-0.19 0.531,-0.136 0.518,-0.098C0.505,-0.059 0.482,-0.032 0.451,-0.016C0.419,0.001 0.374,0.009 0.315,0.009C0.28,0.009 0.252,0.005 0.233,-0.004C0.214,-0.013 0.196,-0.029 0.179,-0.053L0.171,-0.053L0.171,0.215L0.05,0.215L0.05,-0.522ZM0.169,-0.261C0.169,-0.218 0.173,-0.184 0.18,-0.161C0.187,-0.137 0.198,-0.12 0.215,-0.11C0.232,-0.1 0.255,-0.095 0.286,-0.095C0.32,-0.095 0.346,-0.1 0.365,-0.11C0.383,-0.12 0.396,-0.137 0.404,-0.161C0.411,-0.184 0.415,-0.218 0.415,-0.261C0.415,-0.305 0.411,-0.339 0.404,-0.363C0.396,-0.387 0.383,-0.404 0.365,-0.414C0.346,-0.424 0.32,-0.429 0.286,-0.429C0.255,-0.429 0.232,-0.424 0.215,-0.414C0.198,-0.404 0.187,-0.387 0.18,-0.363C0.173,-0.339 0.169,-0.305 0.169,-0.261Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,522.361,406.114)">
<path d="M0.132,-0.522L0.242,-0.522L0.237,-0.415L0.248,-0.415C0.273,-0.456 0.29,-0.484 0.301,-0.497C0.312,-0.51 0.323,-0.519 0.335,-0.522C0.347,-0.525 0.369,-0.527 0.401,-0.527L0.499,-0.525L0.499,-0.405C0.487,-0.406 0.469,-0.406 0.445,-0.406C0.408,-0.406 0.376,-0.404 0.348,-0.401C0.335,-0.399 0.32,-0.39 0.305,-0.375C0.29,-0.36 0.277,-0.341 0.267,-0.32C0.257,-0.298 0.252,-0.277 0.252,-0.257L0.252,-0L0.132,-0L0.132,-0.522Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,565.561,406.114)">
<path d="M0.106,-0.175L0.005,-0.175L0.025,-0.273L0.127,-0.273L0.155,-0.408L0.055,-0.408L0.075,-0.505L0.177,-0.505L0.214,-0.68L0.32,-0.68L0.282,-0.505L0.381,-0.505L0.419,-0.68L0.526,-0.68L0.489,-0.505L0.595,-0.505L0.575,-0.408L0.469,-0.408L0.44,-0.273L0.546,-0.273L0.525,-0.175L0.42,-0.175L0.382,-0L0.274,-0L0.311,-0.175L0.213,-0.175L0.176,-0L0.069,-0L0.106,-0.175ZM0.334,-0.269L0.365,-0.412L0.26,-0.412L0.229,-0.269L0.334,-0.269Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,587.161,406.114)">
<path d="M0.301,-0.478L0.305,-0.54L0.266,-0.508L0.086,-0.397L0.086,-0.529L0.301,-0.68L0.425,-0.68L0.425,-0L0.301,-0L0.301,-0.478Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,385.019,617.463)">
<g transform="matrix(36,0,0,36,500.761,406.114)">
<path d="M0.132,-0.522L0.242,-0.522L0.237,-0.415L0.248,-0.415C0.273,-0.456 0.29,-0.484 0.301,-0.497C0.312,-0.51 0.323,-0.519 0.335,-0.522C0.347,-0.525 0.369,-0.527 0.401,-0.527L0.499,-0.525L0.499,-0.405C0.487,-0.406 0.469,-0.406 0.445,-0.406C0.408,-0.406 0.376,-0.404 0.348,-0.401C0.335,-0.399 0.32,-0.39 0.305,-0.375C0.29,-0.36 0.277,-0.341 0.267,-0.32C0.257,-0.298 0.252,-0.277 0.252,-0.257L0.252,-0L0.132,-0L0.132,-0.522Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,522.361,406.114)">
<path d="M0.309,0.009C0.244,0.009 0.193,0.001 0.158,-0.016C0.123,-0.032 0.097,-0.06 0.083,-0.099C0.068,-0.138 0.06,-0.194 0.06,-0.266C0.06,-0.337 0.067,-0.391 0.082,-0.43C0.096,-0.468 0.12,-0.495 0.155,-0.511C0.189,-0.527 0.238,-0.535 0.301,-0.535C0.362,-0.535 0.409,-0.527 0.443,-0.51C0.477,-0.493 0.501,-0.464 0.517,-0.425C0.532,-0.385 0.539,-0.329 0.539,-0.257L0.538,-0.218L0.183,-0.218C0.186,-0.185 0.191,-0.16 0.199,-0.143C0.207,-0.125 0.22,-0.112 0.237,-0.105C0.254,-0.098 0.277,-0.094 0.308,-0.094C0.338,-0.094 0.36,-0.099 0.374,-0.108C0.387,-0.117 0.398,-0.135 0.406,-0.16L0.53,-0.16C0.523,-0.116 0.512,-0.082 0.497,-0.058C0.482,-0.034 0.459,-0.017 0.43,-0.007C0.401,0.004 0.36,0.009 0.309,0.009ZM0.419,-0.313C0.419,-0.358 0.41,-0.39 0.393,-0.407C0.375,-0.424 0.344,-0.432 0.301,-0.432C0.259,-0.432 0.229,-0.423 0.211,-0.406C0.193,-0.389 0.184,-0.358 0.184,-0.313L0.419,-0.313Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,543.961,406.114)">
<path d="M0.213,-0.414L0.083,-0.414L0.05,-0.522L0.213,-0.522L0.213,-0.583C0.213,-0.626 0.22,-0.66 0.235,-0.684C0.249,-0.707 0.272,-0.724 0.305,-0.735C0.337,-0.745 0.382,-0.75 0.441,-0.75C0.468,-0.75 0.497,-0.749 0.53,-0.747L0.53,-0.643C0.495,-0.644 0.472,-0.645 0.46,-0.645C0.412,-0.645 0.379,-0.64 0.361,-0.631C0.342,-0.621 0.333,-0.604 0.333,-0.579L0.333,-0.522L0.519,-0.522L0.519,-0.414L0.333,-0.414L0.333,-0L0.213,-0L0.213,-0.414Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,565.561,406.114)">
<path d="M0.302,0.009C0.238,0.009 0.189,0.004 0.155,-0.007C0.12,-0.018 0.096,-0.036 0.082,-0.062C0.068,-0.088 0.062,-0.125 0.063,-0.172L0.186,-0.172C0.187,-0.151 0.191,-0.136 0.198,-0.125C0.205,-0.114 0.218,-0.106 0.236,-0.101C0.253,-0.096 0.278,-0.094 0.311,-0.094C0.35,-0.094 0.377,-0.098 0.392,-0.106C0.407,-0.113 0.414,-0.127 0.414,-0.148C0.414,-0.161 0.41,-0.173 0.402,-0.182C0.393,-0.191 0.379,-0.198 0.359,-0.205C0.339,-0.212 0.311,-0.218 0.274,-0.225C0.221,-0.235 0.18,-0.246 0.151,-0.259C0.122,-0.271 0.101,-0.287 0.089,-0.306C0.076,-0.325 0.07,-0.35 0.07,-0.381C0.07,-0.422 0.077,-0.453 0.091,-0.475C0.104,-0.496 0.128,-0.512 0.161,-0.521C0.194,-0.53 0.24,-0.535 0.3,-0.535C0.359,-0.535 0.404,-0.53 0.436,-0.521C0.468,-0.511 0.491,-0.495 0.504,-0.472C0.517,-0.448 0.524,-0.416 0.525,-0.373L0.405,-0.373C0.404,-0.396 0.396,-0.411 0.381,-0.42C0.366,-0.428 0.338,-0.432 0.299,-0.432C0.258,-0.432 0.229,-0.428 0.214,-0.421C0.199,-0.414 0.191,-0.4 0.191,-0.38C0.191,-0.369 0.202,-0.36 0.223,-0.352C0.244,-0.343 0.284,-0.332 0.345,-0.318C0.395,-0.307 0.434,-0.294 0.461,-0.281C0.488,-0.267 0.508,-0.25 0.52,-0.229C0.531,-0.208 0.537,-0.182 0.537,-0.149C0.537,-0.108 0.53,-0.076 0.516,-0.053C0.502,-0.03 0.478,-0.014 0.445,-0.005C0.411,0.004 0.363,0.009 0.302,0.009Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,587.161,406.114)">
<path d="M0.418,-0.781L0.539,-0.781L0.18,0.127L0.06,0.127L0.418,-0.781Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,608.761,406.114)">
<path d="M0.05,-0.522L0.171,-0.522L0.171,-0.471L0.179,-0.471C0.2,-0.495 0.22,-0.511 0.239,-0.52C0.258,-0.529 0.282,-0.533 0.312,-0.533C0.371,-0.533 0.417,-0.525 0.449,-0.509C0.481,-0.492 0.504,-0.465 0.518,-0.426C0.531,-0.387 0.538,-0.332 0.538,-0.261C0.538,-0.19 0.531,-0.136 0.518,-0.098C0.505,-0.059 0.482,-0.032 0.451,-0.016C0.419,0.001 0.374,0.009 0.315,0.009C0.28,0.009 0.252,0.005 0.233,-0.004C0.214,-0.013 0.196,-0.029 0.179,-0.053L0.171,-0.053L0.171,0.215L0.05,0.215L0.05,-0.522ZM0.169,-0.261C0.169,-0.218 0.173,-0.184 0.18,-0.161C0.187,-0.137 0.198,-0.12 0.215,-0.11C0.232,-0.1 0.255,-0.095 0.286,-0.095C0.32,-0.095 0.346,-0.1 0.365,-0.11C0.383,-0.12 0.396,-0.137 0.404,-0.161C0.411,-0.184 0.415,-0.218 0.415,-0.261C0.415,-0.305 0.411,-0.339 0.404,-0.363C0.396,-0.387 0.383,-0.404 0.365,-0.414C0.346,-0.424 0.32,-0.429 0.286,-0.429C0.255,-0.429 0.232,-0.424 0.215,-0.414C0.198,-0.404 0.187,-0.387 0.18,-0.363C0.173,-0.339 0.169,-0.305 0.169,-0.261Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,630.361,406.114)">
<path d="M0.242,0.009C0.196,0.009 0.161,0.003 0.136,-0.009C0.111,-0.021 0.093,-0.041 0.082,-0.07C0.071,-0.099 0.066,-0.139 0.066,-0.192L0.066,-0.522L0.188,-0.522L0.188,-0.19C0.188,-0.153 0.194,-0.128 0.207,-0.115C0.219,-0.102 0.242,-0.095 0.277,-0.095C0.312,-0.095 0.339,-0.1 0.358,-0.109C0.377,-0.118 0.39,-0.134 0.398,-0.157C0.406,-0.179 0.41,-0.211 0.41,-0.252L0.41,-0.522L0.532,-0.522L0.532,-0L0.41,-0L0.41,-0.073L0.402,-0.073C0.385,-0.042 0.365,-0.02 0.343,-0.009C0.32,0.003 0.287,0.009 0.242,0.009Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,651.961,406.114)">
<path d="M0.067,-0.104L0.25,-0.104L0.25,-0.624L0.077,-0.624L0.077,-0.728L0.37,-0.728L0.37,-0.104L0.541,-0.104L0.541,-0L0.067,-0L0.067,-0.104Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,673.561,406.114)">
<path d="M0.067,-0.104L0.25,-0.104L0.25,-0.624L0.077,-0.624L0.077,-0.728L0.37,-0.728L0.37,-0.104L0.541,-0.104L0.541,-0L0.067,-0L0.067,-0.104Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,695.161,406.114)">
<path d="M0.418,-0.781L0.539,-0.781L0.18,0.127L0.06,0.127L0.418,-0.781Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,716.761,406.114)">
<path d="M0.301,-0.478L0.305,-0.54L0.266,-0.508L0.086,-0.397L0.086,-0.529L0.301,-0.68L0.425,-0.68L0.425,-0L0.301,-0L0.301,-0.478Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,738.361,406.114)">
<path d="M0.418,-0.781L0.539,-0.781L0.18,0.127L0.06,0.127L0.418,-0.781Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,759.961,406.114)">
<path d="M0.025,-0.522L0.133,-0.522L0.133,-0.458L0.141,-0.458C0.155,-0.487 0.169,-0.507 0.182,-0.519C0.195,-0.53 0.213,-0.535 0.236,-0.535C0.271,-0.535 0.296,-0.53 0.311,-0.519C0.326,-0.507 0.338,-0.487 0.347,-0.458L0.348,-0.458C0.357,-0.487 0.369,-0.507 0.384,-0.519C0.399,-0.53 0.421,-0.535 0.451,-0.535C0.484,-0.535 0.509,-0.529 0.526,-0.517C0.543,-0.505 0.556,-0.485 0.563,-0.456C0.57,-0.427 0.574,-0.385 0.574,-0.332L0.574,-0L0.463,-0L0.463,-0.314C0.463,-0.357 0.459,-0.387 0.452,-0.403C0.445,-0.419 0.431,-0.427 0.412,-0.427C0.397,-0.427 0.386,-0.423 0.378,-0.416C0.369,-0.408 0.363,-0.395 0.36,-0.377C0.357,-0.359 0.355,-0.333 0.355,-0.3L0.355,-0L0.245,-0L0.247,-0.314C0.248,-0.357 0.244,-0.387 0.236,-0.403C0.227,-0.419 0.212,-0.427 0.189,-0.427C0.175,-0.427 0.164,-0.423 0.157,-0.415C0.149,-0.407 0.143,-0.394 0.141,-0.375C0.138,-0.356 0.136,-0.33 0.136,-0.295L0.136,-0L0.025,-0L0.025,-0.522Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,781.561,406.114)">
<path d="M0.309,0.009C0.244,0.009 0.193,0.001 0.158,-0.016C0.123,-0.032 0.097,-0.06 0.083,-0.099C0.068,-0.138 0.06,-0.194 0.06,-0.266C0.06,-0.337 0.067,-0.391 0.082,-0.43C0.096,-0.468 0.12,-0.495 0.155,-0.511C0.189,-0.527 0.238,-0.535 0.301,-0.535C0.362,-0.535 0.409,-0.527 0.443,-0.51C0.477,-0.493 0.501,-0.464 0.517,-0.425C0.532,-0.385 0.539,-0.329 0.539,-0.257L0.538,-0.218L0.183,-0.218C0.186,-0.185 0.191,-0.16 0.199,-0.143C0.207,-0.125 0.22,-0.112 0.237,-0.105C0.254,-0.098 0.277,-0.094 0.308,-0.094C0.338,-0.094 0.36,-0.099 0.374,-0.108C0.387,-0.117 0.398,-0.135 0.406,-0.16L0.53,-0.16C0.523,-0.116 0.512,-0.082 0.497,-0.058C0.482,-0.034 0.459,-0.017 0.43,-0.007C0.401,0.004 0.36,0.009 0.309,0.009ZM0.419,-0.313C0.419,-0.358 0.41,-0.39 0.393,-0.407C0.375,-0.424 0.344,-0.432 0.301,-0.432C0.259,-0.432 0.229,-0.423 0.211,-0.406C0.193,-0.389 0.184,-0.358 0.184,-0.313L0.419,-0.313Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,803.161,406.114)">
<path d="M0.132,-0.522L0.242,-0.522L0.237,-0.415L0.248,-0.415C0.273,-0.456 0.29,-0.484 0.301,-0.497C0.312,-0.51 0.323,-0.519 0.335,-0.522C0.347,-0.525 0.369,-0.527 0.401,-0.527L0.499,-0.525L0.499,-0.405C0.487,-0.406 0.469,-0.406 0.445,-0.406C0.408,-0.406 0.376,-0.404 0.348,-0.401C0.335,-0.399 0.32,-0.39 0.305,-0.375C0.29,-0.36 0.277,-0.341 0.267,-0.32C0.257,-0.298 0.252,-0.277 0.252,-0.257L0.252,-0L0.132,-0L0.132,-0.522Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,824.761,406.114)">
<path d="M0.302,0.22C0.242,0.22 0.196,0.215 0.163,0.204C0.13,0.193 0.107,0.175 0.093,0.151C0.079,0.126 0.071,0.09 0.07,0.044L0.193,0.044C0.194,0.065 0.198,0.08 0.204,0.091C0.21,0.102 0.221,0.109 0.236,0.114C0.251,0.118 0.273,0.12 0.303,0.12C0.333,0.12 0.356,0.116 0.373,0.11C0.389,0.102 0.4,0.091 0.407,0.075C0.414,0.058 0.417,0.035 0.418,0.005L0.419,-0.071L0.411,-0.071C0.402,-0.051 0.392,-0.036 0.381,-0.026C0.37,-0.015 0.356,-0.008 0.339,-0.004C0.321,0.001 0.297,0.003 0.266,0.003C0.211,0.003 0.169,-0.005 0.138,-0.021C0.107,-0.037 0.085,-0.064 0.072,-0.102C0.058,-0.139 0.051,-0.192 0.051,-0.261C0.051,-0.332 0.058,-0.387 0.072,-0.426C0.085,-0.465 0.109,-0.492 0.142,-0.509C0.175,-0.525 0.221,-0.533 0.281,-0.533C0.319,-0.533 0.347,-0.528 0.366,-0.518C0.384,-0.507 0.4,-0.488 0.413,-0.46L0.421,-0.46L0.421,-0.522L0.538,-0.522L0.538,0.015C0.538,0.069 0.531,0.111 0.517,0.14C0.503,0.169 0.479,0.189 0.446,0.202C0.412,0.214 0.364,0.22 0.302,0.22ZM0.173,-0.261C0.173,-0.219 0.177,-0.187 0.184,-0.164C0.191,-0.14 0.204,-0.124 0.222,-0.115C0.239,-0.105 0.264,-0.1 0.296,-0.1C0.328,-0.1 0.353,-0.105 0.37,-0.115C0.387,-0.124 0.4,-0.14 0.407,-0.164C0.414,-0.187 0.418,-0.219 0.418,-0.261C0.418,-0.305 0.414,-0.339 0.407,-0.363C0.4,-0.387 0.387,-0.404 0.37,-0.415C0.353,-0.425 0.328,-0.43 0.296,-0.43C0.264,-0.43 0.239,-0.425 0.222,-0.415C0.204,-0.404 0.191,-0.387 0.184,-0.363C0.177,-0.339 0.173,-0.305 0.173,-0.261Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,846.361,406.114)">
<path d="M0.309,0.009C0.244,0.009 0.193,0.001 0.158,-0.016C0.123,-0.032 0.097,-0.06 0.083,-0.099C0.068,-0.138 0.06,-0.194 0.06,-0.266C0.06,-0.337 0.067,-0.391 0.082,-0.43C0.096,-0.468 0.12,-0.495 0.155,-0.511C0.189,-0.527 0.238,-0.535 0.301,-0.535C0.362,-0.535 0.409,-0.527 0.443,-0.51C0.477,-0.493 0.501,-0.464 0.517,-0.425C0.532,-0.385 0.539,-0.329 0.539,-0.257L0.538,-0.218L0.183,-0.218C0.186,-0.185 0.191,-0.16 0.199,-0.143C0.207,-0.125 0.22,-0.112 0.237,-0.105C0.254,-0.098 0.277,-0.094 0.308,-0.094C0.338,-0.094 0.36,-0.099 0.374,-0.108C0.387,-0.117 0.398,-0.135 0.406,-0.16L0.53,-0.16C0.523,-0.116 0.512,-0.082 0.497,-0.058C0.482,-0.034 0.459,-0.017 0.43,-0.007C0.401,0.004 0.36,0.009 0.309,0.009ZM0.419,-0.313C0.419,-0.358 0.41,-0.39 0.393,-0.407C0.375,-0.424 0.344,-0.432 0.301,-0.432C0.259,-0.432 0.229,-0.423 0.211,-0.406C0.193,-0.389 0.184,-0.358 0.184,-0.313L0.419,-0.313Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,405.831,794.631)">
<g transform="matrix(36,0,0,36,500.761,406.114)">
<path d="M0.132,-0.522L0.242,-0.522L0.237,-0.415L0.248,-0.415C0.273,-0.456 0.29,-0.484 0.301,-0.497C0.312,-0.51 0.323,-0.519 0.335,-0.522C0.347,-0.525 0.369,-0.527 0.401,-0.527L0.499,-0.525L0.499,-0.405C0.487,-0.406 0.469,-0.406 0.445,-0.406C0.408,-0.406 0.376,-0.404 0.348,-0.401C0.335,-0.399 0.32,-0.39 0.305,-0.375C0.29,-0.36 0.277,-0.341 0.267,-0.32C0.257,-0.298 0.252,-0.277 0.252,-0.257L0.252,-0L0.132,-0L0.132,-0.522Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,522.361,406.114)">
<path d="M0.309,0.009C0.244,0.009 0.193,0.001 0.158,-0.016C0.123,-0.032 0.097,-0.06 0.083,-0.099C0.068,-0.138 0.06,-0.194 0.06,-0.266C0.06,-0.337 0.067,-0.391 0.082,-0.43C0.096,-0.468 0.12,-0.495 0.155,-0.511C0.189,-0.527 0.238,-0.535 0.301,-0.535C0.362,-0.535 0.409,-0.527 0.443,-0.51C0.477,-0.493 0.501,-0.464 0.517,-0.425C0.532,-0.385 0.539,-0.329 0.539,-0.257L0.538,-0.218L0.183,-0.218C0.186,-0.185 0.191,-0.16 0.199,-0.143C0.207,-0.125 0.22,-0.112 0.237,-0.105C0.254,-0.098 0.277,-0.094 0.308,-0.094C0.338,-0.094 0.36,-0.099 0.374,-0.108C0.387,-0.117 0.398,-0.135 0.406,-0.16L0.53,-0.16C0.523,-0.116 0.512,-0.082 0.497,-0.058C0.482,-0.034 0.459,-0.017 0.43,-0.007C0.401,0.004 0.36,0.009 0.309,0.009ZM0.419,-0.313C0.419,-0.358 0.41,-0.39 0.393,-0.407C0.375,-0.424 0.344,-0.432 0.301,-0.432C0.259,-0.432 0.229,-0.423 0.211,-0.406C0.193,-0.389 0.184,-0.358 0.184,-0.313L0.419,-0.313Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,543.961,406.114)">
<path d="M0.213,-0.414L0.083,-0.414L0.05,-0.522L0.213,-0.522L0.213,-0.583C0.213,-0.626 0.22,-0.66 0.235,-0.684C0.249,-0.707 0.272,-0.724 0.305,-0.735C0.337,-0.745 0.382,-0.75 0.441,-0.75C0.468,-0.75 0.497,-0.749 0.53,-0.747L0.53,-0.643C0.495,-0.644 0.472,-0.645 0.46,-0.645C0.412,-0.645 0.379,-0.64 0.361,-0.631C0.342,-0.621 0.333,-0.604 0.333,-0.579L0.333,-0.522L0.519,-0.522L0.519,-0.414L0.333,-0.414L0.333,-0L0.213,-0L0.213,-0.414Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,565.561,406.114)">
<path d="M0.302,0.009C0.238,0.009 0.189,0.004 0.155,-0.007C0.12,-0.018 0.096,-0.036 0.082,-0.062C0.068,-0.088 0.062,-0.125 0.063,-0.172L0.186,-0.172C0.187,-0.151 0.191,-0.136 0.198,-0.125C0.205,-0.114 0.218,-0.106 0.236,-0.101C0.253,-0.096 0.278,-0.094 0.311,-0.094C0.35,-0.094 0.377,-0.098 0.392,-0.106C0.407,-0.113 0.414,-0.127 0.414,-0.148C0.414,-0.161 0.41,-0.173 0.402,-0.182C0.393,-0.191 0.379,-0.198 0.359,-0.205C0.339,-0.212 0.311,-0.218 0.274,-0.225C0.221,-0.235 0.18,-0.246 0.151,-0.259C0.122,-0.271 0.101,-0.287 0.089,-0.306C0.076,-0.325 0.07,-0.35 0.07,-0.381C0.07,-0.422 0.077,-0.453 0.091,-0.475C0.104,-0.496 0.128,-0.512 0.161,-0.521C0.194,-0.53 0.24,-0.535 0.3,-0.535C0.359,-0.535 0.404,-0.53 0.436,-0.521C0.468,-0.511 0.491,-0.495 0.504,-0.472C0.517,-0.448 0.524,-0.416 0.525,-0.373L0.405,-0.373C0.404,-0.396 0.396,-0.411 0.381,-0.42C0.366,-0.428 0.338,-0.432 0.299,-0.432C0.258,-0.432 0.229,-0.428 0.214,-0.421C0.199,-0.414 0.191,-0.4 0.191,-0.38C0.191,-0.369 0.202,-0.36 0.223,-0.352C0.244,-0.343 0.284,-0.332 0.345,-0.318C0.395,-0.307 0.434,-0.294 0.461,-0.281C0.488,-0.267 0.508,-0.25 0.52,-0.229C0.531,-0.208 0.537,-0.182 0.537,-0.149C0.537,-0.108 0.53,-0.076 0.516,-0.053C0.502,-0.03 0.478,-0.014 0.445,-0.005C0.411,0.004 0.363,0.009 0.302,0.009Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,587.161,406.114)">
<path d="M0.418,-0.781L0.539,-0.781L0.18,0.127L0.06,0.127L0.418,-0.781Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,608.761,406.114)">
<path d="M0.05,-0.522L0.171,-0.522L0.171,-0.471L0.179,-0.471C0.2,-0.495 0.22,-0.511 0.239,-0.52C0.258,-0.529 0.282,-0.533 0.312,-0.533C0.371,-0.533 0.417,-0.525 0.449,-0.509C0.481,-0.492 0.504,-0.465 0.518,-0.426C0.531,-0.387 0.538,-0.332 0.538,-0.261C0.538,-0.19 0.531,-0.136 0.518,-0.098C0.505,-0.059 0.482,-0.032 0.451,-0.016C0.419,0.001 0.374,0.009 0.315,0.009C0.28,0.009 0.252,0.005 0.233,-0.004C0.214,-0.013 0.196,-0.029 0.179,-0.053L0.171,-0.053L0.171,0.215L0.05,0.215L0.05,-0.522ZM0.169,-0.261C0.169,-0.218 0.173,-0.184 0.18,-0.161C0.187,-0.137 0.198,-0.12 0.215,-0.11C0.232,-0.1 0.255,-0.095 0.286,-0.095C0.32,-0.095 0.346,-0.1 0.365,-0.11C0.383,-0.12 0.396,-0.137 0.404,-0.161C0.411,-0.184 0.415,-0.218 0.415,-0.261C0.415,-0.305 0.411,-0.339 0.404,-0.363C0.396,-0.387 0.383,-0.404 0.365,-0.414C0.346,-0.424 0.32,-0.429 0.286,-0.429C0.255,-0.429 0.232,-0.424 0.215,-0.414C0.198,-0.404 0.187,-0.387 0.18,-0.363C0.173,-0.339 0.169,-0.305 0.169,-0.261Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,630.361,406.114)">
<path d="M0.242,0.009C0.196,0.009 0.161,0.003 0.136,-0.009C0.111,-0.021 0.093,-0.041 0.082,-0.07C0.071,-0.099 0.066,-0.139 0.066,-0.192L0.066,-0.522L0.188,-0.522L0.188,-0.19C0.188,-0.153 0.194,-0.128 0.207,-0.115C0.219,-0.102 0.242,-0.095 0.277,-0.095C0.312,-0.095 0.339,-0.1 0.358,-0.109C0.377,-0.118 0.39,-0.134 0.398,-0.157C0.406,-0.179 0.41,-0.211 0.41,-0.252L0.41,-0.522L0.532,-0.522L0.532,-0L0.41,-0L0.41,-0.073L0.402,-0.073C0.385,-0.042 0.365,-0.02 0.343,-0.009C0.32,0.003 0.287,0.009 0.242,0.009Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,651.961,406.114)">
<path d="M0.067,-0.104L0.25,-0.104L0.25,-0.624L0.077,-0.624L0.077,-0.728L0.37,-0.728L0.37,-0.104L0.541,-0.104L0.541,-0L0.067,-0L0.067,-0.104Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,673.561,406.114)">
<path d="M0.067,-0.104L0.25,-0.104L0.25,-0.624L0.077,-0.624L0.077,-0.728L0.37,-0.728L0.37,-0.104L0.541,-0.104L0.541,-0L0.067,-0L0.067,-0.104Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,695.161,406.114)">
<path d="M0.418,-0.781L0.539,-0.781L0.18,0.127L0.06,0.127L0.418,-0.781Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,716.761,406.114)">
<path d="M0.301,-0.478L0.305,-0.54L0.266,-0.508L0.086,-0.397L0.086,-0.529L0.301,-0.68L0.425,-0.68L0.425,-0L0.301,-0L0.301,-0.478Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,738.361,406.114)">
<path d="M0.418,-0.781L0.539,-0.781L0.18,0.127L0.06,0.127L0.418,-0.781Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,759.961,406.114)">
<path d="M0.068,-0.728L0.19,-0.728L0.19,-0.452L0.198,-0.452C0.215,-0.483 0.233,-0.505 0.254,-0.517C0.275,-0.529 0.303,-0.535 0.34,-0.535C0.391,-0.535 0.431,-0.529 0.458,-0.517C0.485,-0.505 0.505,-0.485 0.517,-0.456C0.528,-0.427 0.534,-0.385 0.534,-0.332L0.534,-0L0.412,-0L0.412,-0.334C0.412,-0.371 0.405,-0.397 0.392,-0.411C0.378,-0.424 0.352,-0.431 0.314,-0.431C0.281,-0.431 0.256,-0.426 0.239,-0.417C0.221,-0.408 0.208,-0.392 0.201,-0.369C0.194,-0.346 0.19,-0.314 0.19,-0.272L0.19,-0L0.068,-0L0.068,-0.728Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,781.561,406.114)">
<path d="M0.309,0.009C0.244,0.009 0.193,0.001 0.158,-0.016C0.123,-0.032 0.097,-0.06 0.083,-0.099C0.068,-0.138 0.06,-0.194 0.06,-0.266C0.06,-0.337 0.067,-0.391 0.082,-0.43C0.096,-0.468 0.12,-0.495 0.155,-0.511C0.189,-0.527 0.238,-0.535 0.301,-0.535C0.362,-0.535 0.409,-0.527 0.443,-0.51C0.477,-0.493 0.501,-0.464 0.517,-0.425C0.532,-0.385 0.539,-0.329 0.539,-0.257L0.538,-0.218L0.183,-0.218C0.186,-0.185 0.191,-0.16 0.199,-0.143C0.207,-0.125 0.22,-0.112 0.237,-0.105C0.254,-0.098 0.277,-0.094 0.308,-0.094C0.338,-0.094 0.36,-0.099 0.374,-0.108C0.387,-0.117 0.398,-0.135 0.406,-0.16L0.53,-0.16C0.523,-0.116 0.512,-0.082 0.497,-0.058C0.482,-0.034 0.459,-0.017 0.43,-0.007C0.401,0.004 0.36,0.009 0.309,0.009ZM0.419,-0.313C0.419,-0.358 0.41,-0.39 0.393,-0.407C0.375,-0.424 0.344,-0.432 0.301,-0.432C0.259,-0.432 0.229,-0.423 0.211,-0.406C0.193,-0.389 0.184,-0.358 0.184,-0.313L0.419,-0.313Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,803.161,406.114)">
<path d="M0.253,0.009C0.204,0.009 0.167,0.004 0.141,-0.006C0.114,-0.015 0.096,-0.032 0.085,-0.055C0.074,-0.078 0.068,-0.11 0.068,-0.152C0.068,-0.201 0.076,-0.24 0.091,-0.267C0.106,-0.294 0.132,-0.313 0.169,-0.324C0.206,-0.335 0.258,-0.341 0.325,-0.341L0.404,-0.341L0.404,-0.347C0.404,-0.38 0.397,-0.403 0.382,-0.415C0.367,-0.427 0.34,-0.433 0.299,-0.433C0.262,-0.433 0.238,-0.428 0.225,-0.419C0.212,-0.409 0.206,-0.39 0.207,-0.363L0.085,-0.363C0.083,-0.408 0.088,-0.443 0.101,-0.468C0.113,-0.492 0.135,-0.509 0.166,-0.52C0.197,-0.53 0.241,-0.535 0.299,-0.535C0.357,-0.535 0.402,-0.529 0.434,-0.518C0.465,-0.507 0.488,-0.488 0.501,-0.461C0.514,-0.434 0.521,-0.396 0.521,-0.347L0.521,-0L0.407,-0L0.407,-0.062L0.399,-0.062C0.38,-0.035 0.361,-0.016 0.34,-0.006C0.319,0.004 0.29,0.009 0.253,0.009ZM0.19,-0.161C0.19,-0.136 0.196,-0.118 0.208,-0.109C0.219,-0.1 0.241,-0.095 0.274,-0.095C0.307,-0.095 0.333,-0.099 0.351,-0.108C0.369,-0.117 0.382,-0.131 0.39,-0.152C0.397,-0.173 0.402,-0.202 0.403,-0.241L0.304,-0.24C0.274,-0.239 0.251,-0.237 0.235,-0.232C0.218,-0.227 0.207,-0.22 0.2,-0.209C0.193,-0.198 0.19,-0.182 0.19,-0.161Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(36,0,0,36,824.761,406.114)">
<path d="M0.26,0.01C0.203,0.01 0.16,0.002 0.129,-0.015C0.097,-0.031 0.076,-0.058 0.063,-0.098C0.05,-0.136 0.043,-0.192 0.043,-0.264C0.043,-0.335 0.05,-0.39 0.063,-0.429C0.076,-0.467 0.097,-0.494 0.129,-0.511C0.16,-0.527 0.203,-0.535 0.26,-0.535C0.304,-0.535 0.336,-0.531 0.356,-0.522C0.376,-0.513 0.391,-0.497 0.402,-0.473L0.41,-0.473L0.41,-0.728L0.531,-0.728L0.531,-0L0.41,-0L0.41,-0.054L0.402,-0.054C0.387,-0.029 0.369,-0.013 0.35,-0.004C0.33,0.006 0.3,0.01 0.26,0.01ZM0.166,-0.264C0.166,-0.22 0.17,-0.186 0.178,-0.162C0.185,-0.137 0.198,-0.12 0.217,-0.11C0.235,-0.1 0.261,-0.095 0.295,-0.095C0.326,-0.095 0.349,-0.1 0.366,-0.111C0.383,-0.121 0.395,-0.138 0.402,-0.162C0.409,-0.186 0.412,-0.22 0.412,-0.264C0.412,-0.308 0.409,-0.342 0.402,-0.366C0.395,-0.389 0.383,-0.406 0.366,-0.416C0.349,-0.426 0.326,-0.431 0.295,-0.431C0.261,-0.431 0.235,-0.426 0.217,-0.416C0.198,-0.406 0.185,-0.389 0.178,-0.366C0.17,-0.342 0.166,-0.308 0.166,-0.264Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.05171,0,0,1.09885,-41.1435,-338.511)">
<g transform="matrix(0.950835,0,0,0.91004,665.427,120.105)">
<g transform="matrix(48,0,0,48,500.761,406.114)">
<path d="M0.025,-0.522L0.133,-0.522L0.133,-0.458L0.141,-0.458C0.155,-0.487 0.169,-0.507 0.182,-0.519C0.195,-0.53 0.213,-0.535 0.236,-0.535C0.271,-0.535 0.296,-0.53 0.311,-0.519C0.326,-0.507 0.338,-0.487 0.347,-0.458L0.348,-0.458C0.357,-0.487 0.369,-0.507 0.384,-0.519C0.399,-0.53 0.421,-0.535 0.451,-0.535C0.484,-0.535 0.509,-0.529 0.526,-0.517C0.543,-0.505 0.556,-0.485 0.563,-0.456C0.57,-0.427 0.574,-0.385 0.574,-0.332L0.574,-0L0.463,-0L0.463,-0.314C0.463,-0.357 0.459,-0.387 0.452,-0.403C0.445,-0.419 0.431,-0.427 0.412,-0.427C0.397,-0.427 0.386,-0.423 0.378,-0.416C0.369,-0.408 0.363,-0.395 0.36,-0.377C0.357,-0.359 0.355,-0.333 0.355,-0.3L0.355,-0L0.245,-0L0.247,-0.314C0.248,-0.357 0.244,-0.387 0.236,-0.403C0.227,-0.419 0.212,-0.427 0.189,-0.427C0.175,-0.427 0.164,-0.423 0.157,-0.415C0.149,-0.407 0.143,-0.394 0.141,-0.375C0.138,-0.356 0.136,-0.33 0.136,-0.295L0.136,-0L0.025,-0L0.025,-0.522Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,529.561,406.114)">
<path d="M0.253,0.009C0.204,0.009 0.167,0.004 0.141,-0.006C0.114,-0.015 0.096,-0.032 0.085,-0.055C0.074,-0.078 0.068,-0.11 0.068,-0.152C0.068,-0.201 0.076,-0.24 0.091,-0.267C0.106,-0.294 0.132,-0.313 0.169,-0.324C0.206,-0.335 0.258,-0.341 0.325,-0.341L0.404,-0.341L0.404,-0.347C0.404,-0.38 0.397,-0.403 0.382,-0.415C0.367,-0.427 0.34,-0.433 0.299,-0.433C0.262,-0.433 0.238,-0.428 0.225,-0.419C0.212,-0.409 0.206,-0.39 0.207,-0.363L0.085,-0.363C0.083,-0.408 0.088,-0.443 0.101,-0.468C0.113,-0.492 0.135,-0.509 0.166,-0.52C0.197,-0.53 0.241,-0.535 0.299,-0.535C0.357,-0.535 0.402,-0.529 0.434,-0.518C0.465,-0.507 0.488,-0.488 0.501,-0.461C0.514,-0.434 0.521,-0.396 0.521,-0.347L0.521,-0L0.407,-0L0.407,-0.062L0.399,-0.062C0.38,-0.035 0.361,-0.016 0.34,-0.006C0.319,0.004 0.29,0.009 0.253,0.009ZM0.19,-0.161C0.19,-0.136 0.196,-0.118 0.208,-0.109C0.219,-0.1 0.241,-0.095 0.274,-0.095C0.307,-0.095 0.333,-0.099 0.351,-0.108C0.369,-0.117 0.382,-0.131 0.39,-0.152C0.397,-0.173 0.402,-0.202 0.403,-0.241L0.304,-0.24C0.274,-0.239 0.251,-0.237 0.235,-0.232C0.218,-0.227 0.207,-0.22 0.2,-0.209C0.193,-0.198 0.19,-0.182 0.19,-0.161Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,558.361,406.114)">
<path d="M0.235,-0.728L0.388,-0.728L0.388,-0.587L0.235,-0.587L0.235,-0.728ZM0.09,-0.103L0.264,-0.103L0.264,-0.419L0.1,-0.419L0.1,-0.522L0.384,-0.522L0.384,-0.103L0.551,-0.103L0.551,-0L0.09,-0L0.09,-0.103Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,587.161,406.114)">
<path d="M0.068,-0.522L0.19,-0.522L0.19,-0.45L0.198,-0.45C0.217,-0.483 0.236,-0.505 0.256,-0.517C0.276,-0.529 0.304,-0.535 0.341,-0.535C0.392,-0.535 0.431,-0.529 0.458,-0.517C0.485,-0.504 0.505,-0.484 0.517,-0.455C0.528,-0.426 0.534,-0.384 0.534,-0.33L0.534,-0L0.412,-0L0.412,-0.332C0.412,-0.369 0.405,-0.394 0.392,-0.407C0.378,-0.42 0.352,-0.427 0.315,-0.427C0.282,-0.427 0.257,-0.422 0.24,-0.413C0.222,-0.404 0.209,-0.388 0.202,-0.366C0.194,-0.343 0.19,-0.312 0.19,-0.271L0.19,-0L0.068,-0L0.068,-0.522Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,615.961,406.114)">
<path d="M0.204,-0.203L0.394,-0.203L0.394,-0.02L0.204,-0.02L0.204,-0.203ZM0.204,-0.596L0.394,-0.596L0.394,-0.413L0.204,-0.413L0.204,-0.596Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,644.761,406.114)">
<path d="M0.057,-0.68L0.185,-0.68L0.185,-0.41L0.415,-0.41L0.415,-0.68L0.543,-0.68L0.543,-0L0.415,-0L0.415,-0.297L0.185,-0.297L0.185,-0L0.057,-0L0.057,-0.68Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,673.561,406.114)">
<path d="M0.096,-0.68L0.518,-0.68L0.518,-0.57L0.224,-0.57L0.224,-0.408L0.478,-0.408L0.478,-0.298L0.224,-0.298L0.224,-0.11L0.538,-0.11L0.538,-0L0.096,-0L0.096,-0.68Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,702.361,406.114)">
<path d="M0.211,-0.68L0.389,-0.68L0.586,-0L0.46,-0L0.416,-0.15L0.186,-0.15L0.143,-0L0.018,-0L0.211,-0.68ZM0.387,-0.261L0.3,-0.564L0.299,-0.564L0.216,-0.261L0.387,-0.261Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(48,0,0,48,731.161,406.114)">
<path d="M0.231,0.008C0.182,0.008 0.123,0.005 0.054,-0L0.054,-0.68C0.097,-0.683 0.135,-0.684 0.17,-0.684C0.208,-0.684 0.242,-0.682 0.272,-0.679C0.348,-0.672 0.407,-0.656 0.449,-0.633C0.49,-0.61 0.52,-0.575 0.537,-0.528C0.554,-0.481 0.563,-0.415 0.563,-0.331C0.563,-0.243 0.553,-0.175 0.533,-0.127C0.513,-0.078 0.479,-0.044 0.432,-0.023C0.385,-0.002 0.318,0.008 0.231,0.008ZM0.182,-0.105C0.222,-0.102 0.248,-0.101 0.261,-0.102C0.306,-0.105 0.341,-0.113 0.366,-0.128C0.391,-0.143 0.408,-0.167 0.419,-0.2C0.429,-0.233 0.434,-0.279 0.434,-0.338C0.434,-0.394 0.429,-0.438 0.419,-0.47C0.409,-0.501 0.392,-0.525 0.369,-0.54C0.345,-0.555 0.311,-0.564 0.268,-0.569C0.234,-0.572 0.205,-0.574 0.182,-0.574L0.182,-0.105Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 52 KiB

View File

@ -3,7 +3,7 @@
Gradio uses [playwright](https://playwright.dev/docs/intro) to interact with gradio applications programmatically to ensure that both the frontend and backend function as expected.
Playwright is very powerful but it can be a little intimidating if you haven't used it before.
No one on the team is a testing expert so don't be afraid to ask if you're unsure how to do something.
Likewise, if you learn something new about playwright, please share with the team!
Likewise, if you learn something new about playwright, please share with the team!
### Tip 1 - Retrying Assertions
@ -17,6 +17,7 @@ These assertions will retry until they pass or a timeout is reached, by default
So even if playwright checks a DOM element before the server is done, it gives the server a chance to finish by retrying.
An example of a retrying assertion is `toBeChecked`. Note that you can manually increase the timeout as well:
```js
// 5 seconds
await expect(page.getByTestId('checkbox')).toBeChecked({timeout?: 5000});
@ -25,7 +26,7 @@ await expect(page.getByTestId('checkbox')).toBeChecked({timeout?: 5000});
An example of a non-retrying assertion is `isChecked`:
```js
await expect(page.getByTestId('checkbox').isChecked())
await expect(page.getByTestId("checkbox").isChecked());
```
Sometimes there may not be a retrying assertion for what you need to check.
@ -33,18 +34,20 @@ In that case, you can retry any custom async function until it passes using `toP
```js
await expect(async () => {
const response = await page.request.get('https://api.example.com');
expect(response.status()).toBe(200);
const response = await page.request.get("https://api.example.com");
expect(response.status()).toBe(200);
}).toPass();
```
### Tip 2 - Don't rely on internal network calls to check if something is done
Internal network calls are not visible to the user, so they can be refactored whenever.
If we have tests that rely on a request to a given route finishing before moving on, for example, they will fail if we ever change the route name or some other implementation detail.
It's much better to use a retrying assertion that targets a visible DOM element with a larger timeout to check if some work is done.
Avoid this:
```js
const uploadButton = page...
await uploadButton.click();
@ -53,6 +56,7 @@ await expect(page.getByTestId("file-component")).toHaveValue(...)
```
Do This:
```js
const uploadButton = page...
await uploadButton.click();
@ -60,6 +64,7 @@ await expect(page.getByTestId("file-component")).toHaveValue(..., {timeout?: 500
```
### Tip 3 - Use the playwright trace viewer
Whenever a test fails locally, playwright will write out some details about the test to the `test-results` directory at the top level of the repo.
You can view the trace using the following command:
@ -95,4 +100,4 @@ This will open up a Chromium session where each interaction with the page will b
NOTE: Only copy the `test("test-name", ....)` not the imports. For playwright to work when running in the gradio CI, `test` and `expect` need to be imported from `@gradio/tootils`.
![code_gen_demo](https://github.com/gradio-app/gradio/assets/41651716/96003fba-d17c-46b9-9c6d-35218fbdfb6f)
![code_gen_demo](https://github.com/gradio-app/gradio/assets/41651716/96003fba-d17c-46b9-9c6d-35218fbdfb6f)

View File

@ -1,6 +1,6 @@
# Test Strategy
# Quality Strategy
Very brief, mildly aspirational test strategy document. This isn't where we are but it is where we want to get to.
Very brief, mildly aspirational quality strategy document. This isn't where we are but it is where we want to get to.
This document does not detail how to setup an environment or how to run the tests locally nor does it contain any best practices that we try to follow when writing tests, that information exists in the [contributing guide](https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md).
@ -63,12 +63,12 @@ We currently use the following tools:
### Static quality checks
- Python type-checking (python)
- Black linting (python)
- ruff formatting (python)
- ruff linting (python)
- pyright type-checking (python)
- prettier formatting (javascript/svelte)
- eslint linting (javascript/svelte)
- TypeScript type-checking (javascript/svelte)
- eslint linting (javascript/svelte) [in progress]
### Dynamic code tests
@ -79,7 +79,7 @@ We currently use the following tools:
### Functional/acceptance tests
- playwright (full end to end testing)
- chromatic (visual testing) [in progress]
- chromatic (visual testing)
- Accessibility testing [to do]
## Supported environments and versions
@ -107,4 +107,4 @@ For instructions on how to write and run tests see the [contributing guide](http
As we formalise our testing strategy and bring / keep our test up to standard, it is important that we have some principles on managing defects as they occur/ are reported. For now we can have one very simple rule:
- Every bug fix should be accompanied by a test that failed before the fix and passes afterwards. This test should _typically_ be a dynamic code test but it could be a linting rule or new type if that is appropriate. There are always exceptions but we should think very carefully before ignoring this rule.
- Every bug fix should be accompanied by a test that failed before the fix and passes afterwards. This test should _typically_ be a dynamic code test but it could be a linting rule or new type if that is appropriate. There are always exceptions but we should think very carefully before ignoring this rule.