Merge branch 'master' of github.com:informatics-isi-edu/chaise into p…

…laywright-config

.github/workflows/e2e.yml

@@ -97,8 +97,7 @@ jobs:
         run: |
           git clone https://github.com/informatics-isi-edu/ermrestjs.git
           cd ermrestjs
-          make dist
-          sudo make deploy
+          sudo make root-install
       - name: Install chaise
         run: |
           sudo mkdir -p /var/www/html/chaise

.github/workflows/npm-publish.yml

@@ -0,0 +1,38 @@
+name: Detect version change and publish to npmjs
+
+on:
+  push:
+    branches:
+      - 'master'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository code
+        uses: actions/checkout@v4
+      - name: setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Check if version has been updated
+        id: version-check
+        uses: EndBug/version-check@v2
+      - name: Publish new version
+        if: steps.version-check.outputs.changed == 'true'
+        run: |
+          : # these messages are duplicated in case npm publish failed
+          echo "Version change found in commit ${{ steps.version-check.outputs.commit }}" >> $GITHUB_STEP_SUMMARY
+          echo "New version: ${{ steps.version-check.outputs.version }} (${{ steps.version-check.outputs.type }})" >> $GITHUB_STEP_SUMMARY
+          npm ci --include=dev
+          npm publish
+          echo "Successfully published the new version! :rocket:" > $GITHUB_STEP_SUMMARY
+          echo "[Link to npm package](https://www.npmjs.com/package/@isrd-isi-edu/chaise)" >> $GITHUB_STEP_SUMMARY
+          echo "Version change found in commit ${{ steps.version-check.outputs.commit }}" >> $GITHUB_STEP_SUMMARY
+          echo "New version: ${{ steps.version-check.outputs.version }} (${{ steps.version-check.outputs.type }})" >> $GITHUB_STEP_SUMMARY
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+      - name: Skip publishing
+        if: steps.version-check.outputs.changed == 'false'
+        run: echo "No version change detected!" >> $GITHUB_STEP_SUMMARY

Makefile

@@ -553,6 +553,18 @@ deploy-w-config: dont_deploy_in_root .make-rsync-list-w-config $(JS_CONFIG) $(VI
 	@rsync -avz --exclude='$(REACT_BUNDLES_FOLDERNAME)' $(DIST)/react/ $(CHAISEDIR)
 	@rsync -avz --delete $(REACT_BUNDLES) $(CHAISEDIR)
 
+# run dist and deploy with proper uesrs (GNU). only works with root user
+.PHONY: root-install
+root-install:
+	su $(shell stat -c "%U" Makefile) -c "make dist"
+	make deploy
+
+# run dist and deploy with proper uesrs (FreeBSD and MAC OS X). only works with root user
+.PHONY: root-install-alt
+root-install-alt:
+	su $(shell stat -f '%Su' Makefile) -c "make dist"
+	make deploy
+
 # Rule to create version.txt
 .PHONY: gitversion
 gitversion:
@@ -590,6 +602,8 @@ usage:
 	@echo "  updeps                         local update  of node dependencies"
 	@echo "  update-webdriver               update the protractor's webdriver"
 	@echo "  deps-test                      local install of dev node dependencies and update protractor's webdriver"
+	@echo "  root-install                   should only be used as root. will use dist with proper user and then deploy, for GNU systems"
+	@echo "  root-install-alt               should only be used as root. will use dist with proper user and then deploy, for FreeBSD and MAC OS X"
 	@echo "  test                           run e2e tests"
 	@echo "  testrecordadd                  run data entry app add e2e tests"
 	@echo "  testrecordedit                 run data entry app edit e2e tests"

docs/dev-docs/dev-guide.md

@@ -23,6 +23,9 @@ This is a guide for people who develop Chaise.
   * [Guidelines](#guidelines)
   * [Guidelines for promise chains](#guidelines-for-promise-chains)
 - [Context and provider pattern](#context-and-provider-pattern)
+- [Performance](#performance)
+  * [Debugging](#debugging)
+  * [Memorization](#memorization)
 
 ## Reading Material
 In this section, we've included all the guides and tools that we think are useful
@@ -987,3 +990,26 @@ const CounterDisplayInner = () => {
 
 export default CounterDisplay;
 ```
+
+## Performance
+
+In this section, we should summarize everything related to performance. This includes how to debug performance issues and common practices to fix issues. 
+
+### Debugging
+
+Before jumping into solutions, consider debugging and finding the root of the problem. 
+
+- You should install official [React developer tools](https://react.dev/learn/react-developer-tools). With this, you can look at components and see when/why each rerenders.
+  - 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
+
+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.
+
+That being said, performance-related changes applied incorrectly can even harm performance. Use `React.memo()` wisely. Don't use memoization if you can't quantify the performance gains.
+
+Useful links:
+- https://react.dev/reference/react/memo
+- https://dmitripavlutin.com/use-react-memo-wisely/
+

docs/dev-docs/e2e-test-writing.md

@@ -40,6 +40,7 @@ profileModal.waitFor({ state: 'detached' });
 
 Make sure `await` is consistently everywhere. It's needed for step, outside of it, and expects
 
+7b8f4775b390d09ea8f8548425e47ac2e
 ```
 test.describe('feature', () => {
   const PAGE_URL = `/recordset/#${process.env.CATALOG_ID!}/product-navbar:accommodation`;

docs/dev-docs/e2e-test.md

@@ -26,11 +26,11 @@ export REMOTE_CHAISE_DIR_PATH=USERNAME@HOST:public_html/chaise
 These variables are used in our test framework to communicate with `ERMrest`. The following is how these variables most probably should look like:
 
 ```sh
-export CHAISE_BASE_URL=https://dev.isrd.isi.edu/~<your-user-directory>chaise # No trailing `/`
-export ERMREST_URL=https://dev.isrd.isi.edu/ermrest # No trailing `/`
+export CHAISE_BASE_URL=https://dev.derivacloud.org/~<your-user-directory>chaise # No trailing `/`
+export ERMREST_URL=https://dev.derivacloud.org/ermrest # No trailing `/`
 export AUTH_COOKIE="webauthn=PutYourCookieHere;" # You have to put `webauthn=` at the beginging and `;` at the end.
 export RESTRICTED_AUTH_COOKIE="webauthn=PutAnotherCookieHere;" # You have to put `webauthn=` at the beginging and `;` at the end.
-export REMOTE_CHAISE_DIR_PATH=chirag@dev.isrd.isi.edu:public_html/chaise # No trailing `/`
+export REMOTE_CHAISE_DIR_PATH=some_user_name@dev.derivacloud.org:public_html/chaise # No trailing `/`
 export SHARDING=false
 ```
 
@@ -44,7 +44,7 @@ You can get your cookie by querying the database, or using the following simple
 
 ## How To Run Tests
 ### Prerequistes
-1. After setting up the environment variables, make sure that the `https://dev.isrd.isi.edu/~<your-user-directory>` directory has the public access(if not, give the folder the following permissions `chmod 755 <your-user-directory>`).
+1. After setting up the environment variables, make sure that the `https://dev.derivacloud.org/~<your-user-directory>` directory has the public access(if not, give the folder the following permissions `chmod 755 <your-user-directory>`).
 
 2. Make sure all the dependencies are installed by running the following command:
 
@@ -64,7 +64,7 @@ You can get your cookie by querying the database, or using the following simple
     ```
     As the name suggests this will not install dependencies. That's why you need to install all the dependencies in step 2.
 
-4. Upload your code on the `https://dev.isrd.isi.edu/~<your-user-directory>` by the running the following command in your local chaise repository (This will upload your local code to the remote server):
+4. Upload your code on the `https://dev.derivacloud.org/~<your-user-directory>` by the running the following command in your local chaise repository (This will upload your local code to the remote server):
 
     ```sh
     make deploy
@@ -125,7 +125,7 @@ $ eval ssh-agent
 $ ssh-add PATH/TO/KEY
 
 # export REMOTE_CHAISE_DIR_PATH=USERNAME@HOST:public_html/chaise
-$ export REMOTE_CHAISE_DIR_PATH=chirag@dev.isrd.isi.edu:public_html/chaise
+$ export REMOTE_CHAISE_DIR_PATH=some_user_name@dev.derivacloud.org:public_html/chaise
 ```
 
 **CI**: For CI there is no need to set `REMOTE_CHAISE_DIR_PATH` as it copies the actual file to the **chaise-config.js** in its local directory where it is running the test-suite.

docs/dev-docs/manual-test.md

@@ -22,11 +22,7 @@
 ### Auto placement of tooltips
 - By default, the tooltips on column headers should appear on top-center
 - For the rightmost column if the tooltip text(comment) is too long then the tooltip should be placed on top-right
-[(Right-most-column-tooltip)](https://dev.isrd.isi.edu/~dsingh/wiki-images/right-most-column-tooltip.png)
 - Similarly, for other columns too if the tooltip text is long and they appear on the left or right edge of the window then their tooltip should be placed on top-left or top-right respectively
-([Default tooltip](https://dev.isrd.isi.edu/~dsingh/wiki-images/top-center-arrow.png),
-[Long text on the leftmost column](https://dev.isrd.isi.edu/~dsingh/wiki-images/top-left-arrow.png),
-[Long text on the rightmost column](https://dev.isrd.isi.edu/~dsingh/wiki-images/top-right-arrow.png))
 
 - Make sure the tooltip does not flicker or overlap the header text if the text is too long.
 
@@ -103,7 +99,7 @@ This means that we will only update the "total count", if we got the updated dat
 
 1. For testing this feature, make sure that you have `debug:true` in your `chaise-config.js` to be able to look at the logs that we generate (You can also use the `network` tab in browsers to look at the actual ermrest requests).
 
-    - If you're using chrome make sure that it's showing [verbose](https://dev.isrd.isi.edu/~ashafaei/wiki-images/verbose.png) logs.
+    - If you're using chrome make sure that it's showing all the logs, including the "verbose" ones. More information [here](https://developer.chrome.com/docs/devtools/console/log/#browser).
 
 2. It's better if you throttle your network speed ([chrome](https://developers.google.com/web/tools/chrome-devtools/network-performance/network-conditions)/[firefox](https://blog.nightly.mozilla.org/2016/11/07/simulate-slow-connections-with-the-network-throttling-tool/)) to simulate slower networks and make the flow-control more visible.
 
@@ -132,16 +128,16 @@ In [ErmrestDataUtils](https://github.com/informatics-isi-edu/ErmrestDataUtils),
 ## Test priviledges
  - Verify that files uploaded by another user that you don't have permission to read, will properly create a new version of that file in hatrac.
    1. Need to have 2 user accounts. One cannot be a part of any of the globus groups that we rely on to set blanket permissions (`isrd-staff`, `isrd-testers`).
-      - `curl -H 'cookie: webauthn=<admin-cookie-here>' -X PUT -H "Content-Type: application/json" -d '[<user-2-globus-id>]' -i "https://dev.isrd.isi.edu/hatrac/js;acl/subtree-create"`
+      - `curl -H 'cookie: webauthn=<admin-cookie-here>' -X PUT -H "Content-Type: application/json" -d '[<user-2-globus-id>]' -i "https://dev.derivacloud.org/hatrac/js;acl/subtree-create"`
    2. User 1 creates file1 in hatrac
    3. user 2 doesn't have permission to update that object in hatrac
    4. user 2 tries to upload the same exact file to the same namespace in hatrac
       - should get 403
    5. change permissions on hatrac obj to include update for user 2
-      - `curl -H 'cookie: webauthn=<admin-cookie-here>' -X PUT -H "Content-Type: application/json" -d '[<user-2-globus-id>]' -i "https://dev.isrd.isi.edu/hatrac/js/chaise/<timestamp_txt-value>/<id-value>/<object-id>;acl/update"`
+      - `curl -H 'cookie: webauthn=<admin-cookie-here>' -X PUT -H "Content-Type: application/json" -d '[<user-2-globus-id>]' -i "https://dev.derivacloud.org/hatrac/js/chaise/<timestamp_txt-value>/<id-value>/<object-id>;acl/update"`
    6. user 2 tries to upload same exact file to the same namespace again
    7. navigate to hatrac folder and verify a new version was created
-      - ssh to `dev.isrd.isi.edu`
+      - ssh to `dev.derivacloud.org`
       - `cd /var/www/hatrac/js/chaise/<timestamp_txt-value>/<id-value>/`
       - `ls -al` to list all contents and file sizes
 

docs/user-docs/logging-pre-feb-20.md

@@ -6,16 +6,16 @@
 By providing `Deriva-Client-Context` header in ermrset requests we can log extra objects alongside the request. ERMrest will log the provided object in the `dcctx` attribute of logs. For example the following is a line from `/var/log/messages` file in dev.isrd:
 
 ```
-Jan 24 16:29:50 dev.isrd.isi.edu ermrest[4313.139635548755712]:
+Jan 24 16:29:50 dev.derivacloud.org ermrest[4313.139635548755712]:
 {
   "elapsed":0.014,
   "req":"OSGHMz7JSySiS0Y5UOLA6w",
   "scheme":"https",
-  "host":"dev.isrd.isi.edu",
+  "host":"dev.derivacloud.org",
   "status":"304 Not Modified",
   "method":"GET",
   "path":"/ermrest/catalog/1/attributegroup/M:=isa:dataset/F5:=left(thumbnail)=(isa:file:id)/$M/F4:=left(owner)=(isa:person:name)/$M/F3:=left(gene_summary)=(vocabulary:gene_summary:id)/$M/F2:=left(status)=(isa:dataset_status:id)/$M/F1:=left(project)=(isa:project:id)/$M/release_date,id;M:=array(M:*),F5:=array(F5:*),F4:=array(F4:*),F3:=array(F3:*),F2:=array(F2:*),F1:=array(F1:*)@sort(release_date::desc::,id)?limit=26", "client":"128.9.184.94",
-  "referrer":"https://dev.isrd.isi.edu/~ashafaei/chaise/recordset/",
+  "referrer":"https://dev.derivacloud.org/chaise/recordset/",
   "agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36",
   "track":"f671a1bf.559966234faaf",
   "dcctx":{

docs/user-docs/logging.md

@@ -31,13 +31,13 @@ By providing `Deriva-Client-Context` header in ermrset requests we can log extra
   "elapsed": 0.037084000000000006,
   "req": "Le-1bpTwSfSxddRT8Y0T5g",
   "scheme": "https",
-  "host": "dev.isrd.isi.edu",
+  "host": "dev.derivacloud.org",
   "status": "200 OK",
   "method": "GET",
   "path": "/ermrest/catalog/1/entity/T:=isa:dataset/(id)=(isa:dataset_organism:dataset_id)/M:=(organism)=(vocab:species:id)@sort(name,RID)?limit=11",
   "type": "application/json",
   "client": "128.9.180.218",
-  "referrer": "https://dev.isrd.isi.edu/chaise/recordset/",
+  "referrer": "https://dev.derivacloud.org/chaise/recordset/",
   "agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36",
   "track": "916d434.5aa5c5cf6b595",
   "dcctx": {

help-docs/chaise/viewer-annotation.md

@@ -1,8 +1,15 @@
 # How to annotate an image
 
-* [Add a new Annotation](#add-a-new-annotation)
-* [Edit/Delete an existing Annotation](#editdelete-an-existing-annotation)
-* [Draw a Shape](#draw-a-shape)
+- [Add a new Annotation](#add-a-new-annotation)
+- [Edit/Delete an existing Annotation](#editdelete-an-existing-annotation)
+- [Draw a Shape](#draw-a-shape)
+  * [Path](#path)
+  * [Rectangle](#rectangle)
+  * [Circle](#circle)
+  * [Line](#line)
+  * [Arrow line](#arrow-line)
+  * [Polygon](#polygon)
+  * [Text](#text)
 
 ## Add a new annotation {id=add-a-new-annotation}
 
@@ -64,7 +71,7 @@
 
 ## Draw a shape {id=draw-a-shape}
 
-### Path
+### Path {id=path}
 
 1. Select the path tool (pencil icon) from the annotation tool bar.
 	![](https://github.com/informatics-isi-edu/chaise/raw/master/docs/resources/viewer-annotation/Path.png)
@@ -75,7 +82,7 @@
 
 4. To add subsequent paths, repeat steps 2 & 3.
 
-### Rectangle
+### Rectangle {id=rectangle}
 
 1. Select the rectangle tool (square icon) from the annotation tool bar.
 
@@ -87,7 +94,7 @@
 
 4. To add subsequent rectangles, repeat steps 2 & 3.
 
-### Circle
+### Circle {id=circle}
 
 1. Select the circle tool (circle icon) from the annotation tool bar.
 
@@ -99,20 +106,28 @@
 
 4. To add subsequent circles, repeat steps 2 & 3.
 
-### Line
+### Line {id=line}
 1. Select the line tool (line icon) from the annotation tool bar.
 	![](https://github.com/informatics-isi-edu/chaise/raw/master/docs/resources/viewer-annotation/Line.png)
 
-2. Press and hold the left mouse button to draw the line on the image. Drag the mouse pointer
-
-to draw. As you drag the mouse, you will see the the line change its end point.
+2. Press and hold the left mouse button to draw the line on the image. Drag the mouse pointer to draw. As you drag the mouse, you will see the the line change its end point.
 
 3. Let go of the mouse button when you are done drawing.
 
 4. To add subsequent lines, repeat steps 2 & 3.
 
+### Arrow line {id=arrow-line}
+
+1. Select the arrow line tool (arrow icon) from the annotation tool bar.
+	![](https://github.com/informatics-isi-edu/chaise/raw/master/docs/resources/viewer-annotation/ArrowLine.png)
+
+2. Press and hold the left mouse button to draw the arrow line on the image. Drag the mouse pointer to draw. As you drag the mouse, you will see the the arrow line change its end point.
+
+3. Let go of the mouse button when you are done drawing.
+
+4. To add subsequent arrow lines, repeat steps 2 & 3.
 
-### Polygon
+### Polygon {id=polygon}
 1. Select the polygon tool (polygon icon) from the annotation tool bar.
 	![](https://github.com/informatics-isi-edu/chaise/raw/master/docs/resources/viewer-annotation/Polygon.png)
 
@@ -123,3 +138,24 @@ to draw. As you drag the mouse, you will see the the line change its end point.
 4. Let go of the mouse button when you are done placing the edge on the image.
 
 5. To add subsequent polygons, de-select the polygon icon from the annotation toolbar and select it again.
+
+### Text {id=text}
+
+
+1. Select the text tool ("A" icon) from the annotation tool bar.
+	![](https://github.com/informatics-isi-edu/chaise/raw/master/docs/resources/viewer-annotation/Text.png)
+
+2. Upon clicking the text option, you will see the font size selector beside the option. To adjust the font size, you can,
+ - Click on "+" or "-" buttons.
+ - Or, click on the displayed number to see the list of most common font sizes and pick one of those.
+ - Or, Type a new number.
+
+3. Click anywhere on the image that you would like to add the text.
+
+4. Click inside the displayed textbox and write your text.
+
+5. The text will wrap into the next line after writing a long text. If you want your text to be displayed on the same line, You can use the knob on the right side of the textbox to resize the box.
+
+6. If you want to move the textbox, press and hold the left mouse button on the textbox and start moving your mouse. Releasing your left mouse button will stop this move.
+
+7. To add subsequent texts, repeat step 3 & 4.