-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
<!--Please ensure the PR fulfills the following requirements! -->
<!-- If this is your first PR, make sure to add your details to the
AUTHORS.rst! -->
### Pull Request Checklist:
- [x] This PR addresses an already opened issue (for bug fixes /
features)
- This PR is a step towards fixing #1433
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] (If applicable) Documentation has been added / updated (for bug
fixes / features)
- [x] CHANGES.rst has been updated (with summary of main changes)
- [ ] Link to issue (:issue:`number`) and pull request (:pull:`number`)
has been added
### What kind of change does this PR introduce?
* This rewrites the "Climate Indicators" page of the doc so that it
presents a searchable un-categorized list of indicators.
* I also added the "used variables" to the short description.
### Does this PR introduce a breaking change?
No.
### Other information:
The changes are usable on RTD's build :
https://xclim--1454.org.readthedocs.build/en/1454/indicators.html
The first commit is only a prototype. For now, it shows a list of
indicators with title, python name and variables. The list is searchable
by "free text", but it only looks in the titles. I'd like to:
- [x] Add keywords to the description
- [x] Add the abstract to the description. Should it be directly
inserted ? A foldable box ? A mouseover box ?
- [x] Search by keywords (this will be a bit more heavy on the JS
side...
- [ ] by realms
- [ ] by variables
- [ ] Add a mouseover short description of the variables- Loading branch information
Showing
10 changed files
with
199 additions
and
176 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| /* Array of indicator objects */ | ||
| let indicators = []; | ||
|
|
||
| /* MiniSearch object defining search mechanism */ | ||
| let miniSearch = new MiniSearch({ | ||
| fields: ['title', 'abstract', 'variables', 'keywords'], // fields to index for full-text search | ||
| storeFields: ['title', 'abstract', 'vars', 'realm', 'module', 'name', 'keywords'], // fields to return with search results | ||
| searchOptions: { | ||
| boost: {'title': 3, 'variables': 2}, | ||
| fuzzy: 0.1, | ||
| prefix: true, | ||
| }, | ||
| extractField: (doc, field) => { | ||
| if (field === 'variables') { | ||
| return Object.keys(doc['vars']).join(' '); | ||
| } | ||
| return MiniSearch.getDefault('extractField')(doc, field); | ||
| } | ||
| }); | ||
|
|
||
| // Populate search object with complete list of indicators | ||
| fetch('indicators.json') | ||
| .then(data => data.json()) | ||
| .then(data => { | ||
| indicators = Object.entries(data).map(([k, v]) => { | ||
| return {id: k.toLowerCase(), ...v} | ||
| }); | ||
| miniSearch.addAll(indicators); | ||
| indFilter(); | ||
| }); | ||
|
|
||
|
|
||
| // Populate list of variables | ||
| //function getVariables() { | ||
| // fetch('variables.json') | ||
| // .then((res) => { | ||
| // return res.json(); | ||
| // }) | ||
| //} | ||
| //const variables = getVariables(); | ||
|
|
||
|
|
||
| function makeKeywordLabel(ind) { | ||
| /* Print list of keywords only if there is at least one. */ | ||
| if (ind.keywords[0].length > 0) { | ||
| const keywords = ind.keywords.map(v => `<code class="keywordlabel">${v.trim()}</code>`).join(''); | ||
| return `<div class="keywords">Keywords: ${keywords}</div>`; | ||
| } | ||
| else { | ||
| return ""; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| function makeVariableList(ind) { | ||
| /* Print list of variables and include mouse-hover tooltip with variable description. */ | ||
| return Object.entries(ind.vars).map((kv) => { | ||
| const tooltip = `<button class="indVarname" title="${kv[1]}" alt="${kv[1]}">${kv[0]}</button>`; | ||
| return tooltip | ||
| }).join(''); | ||
| } | ||
|
|
||
| function indTemplate(ind) { | ||
| // const varlist = Object.entries(ind.vars).map((kv) => `<code class="indVarname">${kv[0]}</code>`).join(''); | ||
| const varlist = makeVariableList(ind); | ||
| return ` | ||
| <div class="indElem" id="${ind.id}"> | ||
| <div class="indHeader"> | ||
| <b class="indTitle">${ind.title}</b> | ||
| <a class="reference_internal indName" href="api.html#xclim.indicators.${ind.module}.${ind.name}" title="${ind.name}"> | ||
| <code>${ind.module}.${ind.name}</code> | ||
| </a> | ||
| </div> | ||
| <div class="indVars">Uses: ${varlist}</div> | ||
| <div class="indDesc"><p>${ind.abstract}</p></div> | ||
| ${makeKeywordLabel(ind)} | ||
| <div class="indID">Yaml ID: <code>${ind.id}</code></div> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| function indFilter() { | ||
| const input = document.getElementById("queryInput").value; | ||
| let inds = []; | ||
| if (input === "") { | ||
| inds = indicators; | ||
| } else { | ||
| inds = miniSearch.search(input); | ||
| } | ||
|
|
||
| const newTable = inds.map(indTemplate).join(''); | ||
| const tableElem = document.getElementById("indTable"); | ||
| tableElem.innerHTML = newTable; | ||
| return newTable; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,16 @@ | ||
| {% extends "!layout.html" %} | ||
| {% set css_files = css_files + ["_static/style.css"] %} | ||
|
|
||
| <!-- Injection of the scripts for generating the indicators page data. | ||
| We do it this way to injected only where needed and to ensure they get | ||
| loaded before all other scripts. nbsphinx adds a line to load require.js which | ||
| breaks MiniSearch if loaded first. | ||
| --> | ||
|
|
||
| {% block scripts %} | ||
| {% if "indicators" in sourcename %} | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/index.min.js"></script> | ||
| <script type="text/javascript" src="./_static/indsearch.js"></script> | ||
| {% endif %} | ||
| {{ super() }} | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.