Skip to content

Commit

Permalink
Automated update: Fri Feb 23 01:47:45 UTC 2024
Browse files Browse the repository at this point in the history
  • Loading branch information
isi-isrd-dev committed Feb 23, 2024
1 parent c745799 commit 1d7558a
Show file tree
Hide file tree
Showing 6 changed files with 34 additions and 27 deletions.
7 changes: 5 additions & 2 deletions docs/_sources/chaise/dev-docs/dev-guide.md.txt
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ This is a guide for people who develop Chaise.
- [Context and provider pattern](#context-and-provider-pattern)
- [Performance](#performance)
* [Debugging](#debugging)
* [Memorization](#memorization)
* [Memoization](#memoization)

## Reading Material
In this section, we've included all the guides and tools that we think are useful
Expand Down Expand Up @@ -448,6 +448,9 @@ To handle global errors, the app wrapper adds an `ErrorProvider` to handle the e
### Chaise Navbar
The navbar for each Chaise app is the same style. It is loaded as part of the configuration phase in the app wrapper. All apps in Chaise can decide to show or hide the navbar as part of defining the `AppWrapper` component.

### Buttons vs Links
We want to be aware of why we are using `<button>` or `<a>` tags. Generally we should use `<a>` for navigation when possible since this allows for other operating system and browser features. More details about which buttons and links are used for actions or navigation can be found in [this spreadsheet](https://docs.google.com/spreadsheets/d/1p7fI8Uput9nUuG1oc7m8ZfNwS0pu-HU70PmMDhcNmHM/edit#gid=0).

## Using Chaise through npm

Using npm, we can implement Chaise-like applications and use Chaise's existing code. This is how we're using Chaise to develop [`deriva-webapps`](https://github.com/informatics-isi-edu/deriva-webapps) React applications.
Expand Down Expand Up @@ -1030,7 +1033,7 @@ Before jumping into solutions, consider debugging and finding the root of the pr
- By default, the "Profiler" tab only works in development mode. To use this tab in the production mode, you need to uncomment the `'react-dom$': 'react-dom/profiling',` alias in the [app.config.js](https://github.com/informatics-isi-edu/chaise/blob/master/webpack/app.config.js) file.
- Installing in the `development` mode allows you to add break points in the code. You should also be mindful of the browser console, as React and other dependencies usually print warning/errors only in this mode. That being said, as we mentioned in [here](#development-vs-production), `development` has its downsides.

### Memorization
### Memoization

React always re-renders children when a parent component has to be re-rendered. But since we're using the provider pattern, the immediate relationship is unimportant. So, if we find any performance issues, it is probably related to redundant components rendering because of this. `memo` lets us skip re-rendering a component when its props are unchanged. You can see how we've used it [here](https://github.com/informatics-isi-edu/chaise/pull/2341/commits/29720eb277faaa6fc768a912ffcf8a8ec4776980), which significantly improved the performance of record page.

Expand Down
10 changes: 7 additions & 3 deletions docs/chaise/dev-docs/dev-guide.html
Original file line number Diff line number Diff line change
Expand Up @@ -1337,7 +1337,7 @@
<li><a class="reference external" href="#context-and-provider-pattern">Context and provider pattern</a></li>
<li><a class="reference external" href="#performance">Performance</a><ul>
<li><a class="reference external" href="#debugging">Debugging</a></li>
<li><a class="reference external" href="#memorization">Memorization</a></li>
<li><a class="reference external" href="#memoization">Memoization</a></li>
</ul>
</li>
</ul>
Expand Down Expand Up @@ -1870,6 +1870,10 @@
<span id="chaise-navbar"></span><h3>Chaise Navbar<a class="headerlink" href="#chaise-navbar" title="Permalink to this headline"></a></h3>
<p>The navbar for each Chaise app is the same style. It is loaded as part of the configuration phase in the app wrapper. All apps in Chaise can decide to show or hide the navbar as part of defining the <code class="docutils literal notranslate"><span class="pre">AppWrapper</span></code> component.</p>
</div>
<div class="section" id="buttons-vs-links">
<span id="buttons-vs-links"></span><h3>Buttons vs Links<a class="headerlink" href="#buttons-vs-links" title="Permalink to this headline"></a></h3>
<p>We want to be aware of why we are using <code class="docutils literal notranslate"><span class="pre">&lt;button&gt;</span></code> or <code class="docutils literal notranslate"><span class="pre">&lt;a&gt;</span></code> tags. Generally we should use <code class="docutils literal notranslate"><span class="pre">&lt;a&gt;</span></code> for navigation when possible since this allows for other operating system and browser features. More details about which buttons and links are used for actions or navigation can be found in <a class="reference external" href="https://docs.google.com/spreadsheets/d/1p7fI8Uput9nUuG1oc7m8ZfNwS0pu-HU70PmMDhcNmHM/edit#gid=0">this spreadsheet</a>.</p>
</div>
</div>
<div class="section" id="using-chaise-through-npm">
<span id="using-chaise-through-npm"></span><h2>Using Chaise through npm<a class="headerlink" href="#using-chaise-through-npm" title="Permalink to this headline"></a></h2>
Expand Down Expand Up @@ -2444,8 +2448,8 @@
<li>Installing in the <code class="docutils literal notranslate"><span class="pre">development</span></code> mode allows you to add break points in the code. You should also be mindful of the browser console, as React and other dependencies usually print warning/errors only in this mode. That being said, as we mentioned in <a class="reference external" href="#development-vs-production">here</a>, <code class="docutils literal notranslate"><span class="pre">development</span></code> has its downsides.</li>
</ul>
</div>
<div class="section" id="memorization">
<span id="memorization"></span><h3>Memorization<a class="headerlink" href="#memorization" title="Permalink to this headline"></a></h3>
<div class="section" id="memoization">
<span id="memoization"></span><h3>Memoization<a class="headerlink" href="#memoization" title="Permalink to this headline"></a></h3>
<p>React always re-renders children when a parent component has to be re-rendered. But since we’re using the provider pattern, the immediate relationship is unimportant. So, if we find any performance issues, it is probably related to redundant components rendering because of this. <code class="docutils literal notranslate"><span class="pre">memo</span></code> lets us skip re-rendering a component when its props are unchanged. You can see how we’ve used it <a class="reference external" href="https://github.com/informatics-isi-edu/chaise/pull/2341/commits/29720eb277faaa6fc768a912ffcf8a8ec4776980">here</a>, which significantly improved the performance of record page.</p>
<p>That being said, performance-related changes applied incorrectly can even harm performance. Use <code class="docutils literal notranslate"><span class="pre">React.memo()</span></code> wisely. Don’t use memoization if you can’t quantify the performance gains.</p>
<p>Useful links:</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1436,7 +1436,7 @@ <h2>Submodules<a class="headerlink" href="#submodules" title="Permalink to this

<dl class="attribute">
<dt id="deriva.utils.catalog.components.deriva_model.DerivaModel.contexts">
<code class="descname">contexts</code><em class="property"> = {&lt;DerivaContext.filter: 'filter'&gt;, &lt;DerivaContext.entry_create: 'entry/create'&gt;, &lt;DerivaContext.star: '*'&gt;, &lt;DerivaContext.row_name_compact: 'row_name/compact'&gt;, &lt;DerivaContext.detailed: 'detailed'&gt;, &lt;DerivaContext.compact_brief: 'compact/brief'&gt;, &lt;DerivaContext.entry: 'entry'&gt;, &lt;DerivaContext.compact: 'compact'&gt;, &lt;DerivaContext.row_name_title: 'row_name/title'&gt;, &lt;DerivaContext.compact_select: 'compact/select'&gt;, &lt;DerivaContext.row_name: 'row_name'&gt;, &lt;DerivaContext.entry_edit: 'entry/edit'&gt;, &lt;DerivaContext.row_name_detailed: 'row_name/detailed'&gt;}</em><a class="headerlink" href="#deriva.utils.catalog.components.deriva_model.DerivaModel.contexts" title="Permalink to this definition"></a></dt>
<code class="descname">contexts</code><em class="property"> = {&lt;DerivaContext.detailed: 'detailed'&gt;, &lt;DerivaContext.entry: 'entry'&gt;, &lt;DerivaContext.row_name_compact: 'row_name/compact'&gt;, &lt;DerivaContext.star: '*'&gt;, &lt;DerivaContext.row_name: 'row_name'&gt;, &lt;DerivaContext.compact: 'compact'&gt;, &lt;DerivaContext.compact_select: 'compact/select'&gt;, &lt;DerivaContext.row_name_title: 'row_name/title'&gt;, &lt;DerivaContext.row_name_detailed: 'row_name/detailed'&gt;, &lt;DerivaContext.filter: 'filter'&gt;, &lt;DerivaContext.entry_edit: 'entry/edit'&gt;, &lt;DerivaContext.entry_create: 'entry/create'&gt;, &lt;DerivaContext.compact_brief: 'compact/brief'&gt;}</em><a class="headerlink" href="#deriva.utils.catalog.components.deriva_model.DerivaModel.contexts" title="Permalink to this definition"></a></dt>
<dd></dd></dl>

<dl class="method">
Expand Down
40 changes: 20 additions & 20 deletions docs/deriva-py/get-started.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
"metadata": {
"collapsed": true,
"execution": {
"iopub.execute_input": "2024-02-22T17:01:04.428541Z",
"iopub.status.busy": "2024-02-22T17:01:04.425166Z",
"iopub.status.idle": "2024-02-22T17:01:04.683348Z",
"shell.execute_reply": "2024-02-22T17:01:04.683779Z"
"iopub.execute_input": "2024-02-23T01:46:44.674536Z",
"iopub.status.busy": "2024-02-23T01:46:44.671927Z",
"iopub.status.idle": "2024-02-23T01:46:44.917410Z",
"shell.execute_reply": "2024-02-23T01:46:44.917827Z"
}
},
"outputs": [
Expand Down Expand Up @@ -46,10 +46,10 @@
"execution_count": 2,
"metadata": {
"execution": {
"iopub.execute_input": "2024-02-22T17:01:04.687777Z",
"iopub.status.busy": "2024-02-22T17:01:04.687103Z",
"iopub.status.idle": "2024-02-22T17:01:04.689212Z",
"shell.execute_reply": "2024-02-22T17:01:04.689642Z"
"iopub.execute_input": "2024-02-23T01:46:44.921529Z",
"iopub.status.busy": "2024-02-23T01:46:44.921012Z",
"iopub.status.idle": "2024-02-23T01:46:44.923553Z",
"shell.execute_reply": "2024-02-23T01:46:44.923137Z"
}
},
"outputs": [],
Expand All @@ -72,10 +72,10 @@
"metadata": {
"collapsed": true,
"execution": {
"iopub.execute_input": "2024-02-22T17:01:04.693113Z",
"iopub.status.busy": "2024-02-22T17:01:04.692418Z",
"iopub.status.idle": "2024-02-22T17:01:04.695066Z",
"shell.execute_reply": "2024-02-22T17:01:04.694608Z"
"iopub.execute_input": "2024-02-23T01:46:44.926885Z",
"iopub.status.busy": "2024-02-23T01:46:44.926339Z",
"iopub.status.idle": "2024-02-23T01:46:44.928908Z",
"shell.execute_reply": "2024-02-23T01:46:44.928452Z"
}
},
"outputs": [],
Expand All @@ -96,10 +96,10 @@
"execution_count": 4,
"metadata": {
"execution": {
"iopub.execute_input": "2024-02-22T17:01:04.699406Z",
"iopub.status.busy": "2024-02-22T17:01:04.698640Z",
"iopub.status.idle": "2024-02-22T17:01:04.780900Z",
"shell.execute_reply": "2024-02-22T17:01:04.780395Z"
"iopub.execute_input": "2024-02-23T01:46:44.933616Z",
"iopub.status.busy": "2024-02-23T01:46:44.932540Z",
"iopub.status.idle": "2024-02-23T01:46:45.012349Z",
"shell.execute_reply": "2024-02-23T01:46:45.012814Z"
}
},
"outputs": [
Expand Down Expand Up @@ -135,10 +135,10 @@
"execution_count": 5,
"metadata": {
"execution": {
"iopub.execute_input": "2024-02-22T17:01:04.787160Z",
"iopub.status.busy": "2024-02-22T17:01:04.784133Z",
"iopub.status.idle": "2024-02-22T17:01:04.790537Z",
"shell.execute_reply": "2024-02-22T17:01:04.790086Z"
"iopub.execute_input": "2024-02-23T01:46:45.016923Z",
"iopub.status.busy": "2024-02-23T01:46:45.015422Z",
"iopub.status.idle": "2024-02-23T01:46:45.021404Z",
"shell.execute_reply": "2024-02-23T01:46:45.020830Z"
}
},
"outputs": [
Expand Down
Binary file modified docs/objects.inv
Binary file not shown.
2 changes: 1 addition & 1 deletion docs/searchindex.js

Large diffs are not rendered by default.

0 comments on commit 1d7558a

Please sign in to comment.