New project page components

[dhovart]

• These changes fix #__ (github issue number if applicable).

• npm run mocha-test ran with full success.

• npm run mocha-test resulted in failure locally: some permissions tests did not pass locally, although the backend was not changed.

• All BrainBox tools behave as expected:

  • KEYS
    • right and left arrow keys
      • jump to next or previous slice within one brain, respectively
      • update the slider accordingly
      • update the slice number accordingly (upper left corner of the viewer window)
    • down and up arrow keys
      • jump to the next or previous brain within one project, respectively
      • update the selected subject in the annotation table
  • TOOL BUTTONS
    • minus
      • jumps to the previous slice within one brain
      • updates the slider accordingly
      • updates the slice number accordingly (upper left corner of the viewer window)
    • plus
      • jumps to the next slice within one brain
      • updates the slider accordingly
      • updates the slice number accordingly (upper left corner of the viewer window)
    • slider
      • updates slice view and slice number on the fly
    • sag / cor / axi buttons
      • switch view between the three orthogonal planes
    • show tool
      • when you click and drag in your browser window, this tool displays a cirlce at the position of your mouse click & drag as well as the user name in all browser windows connected to the same brain
    • the numbers at the bottom of the tool panel
      • change pencil size and eraser size accordingly
    • pencil tool
      • draws a line in the colour displayed in the color field
      • in combination with bucket tool filles a complete area with the chosen colour (be sure to have closed the contour line ;) Otherwise, the undo button will be your friend ;)
      • updates length and volume information (of what has been segmented) in the upper left corner of the viewer
    • erase tool
      • erases upon click drag from the annotation
      • in combination with the bucket tool erases the complete area of the color where you click
    • fill bucket tool
      • in combination with pencil tool
        • fills a complete area with the colour displayed in the colour field
      • in combination with erase tool
        • erases the complete area that is filled by the colour of where you click
    • colour field
      • displays the currently chosen colour to draw and fill
      • on click opens the set of colours available within the chosen label set where a new colour can be selected upon click
    • ruler tool
      • measures the distance between start and end of your defined path
        • points of mouse click appear and stay visible until you hit return key (this functionality is currently broken!) (you can click as many points as you wish to define the path you are interested in)
        • on return key, BrainBox will print the distance into the chat field (the ruler tool seems to be currently broken!!!)
    • adjust tool
      • slide opacity of overlaid annotation from 0 to 100%
      • increase or decrease brightness of the underlying MRI data
      • increase or decrease the contrast of the underlying MRI data
    • eyedropper tool
      • updates the colour field in the tool panel
      • displays/updates the region name in the upper left corner of the viewer
    • undo tool
      • undoes the user's actions in reverse chronological order and currently has the bug that it even undoes actions in slices you are currently not seeing! and there is currently no redo...
    • save button
      • saves the annotation of the data set into the data base
      • displays a message that user needs to login in case they are not
      • display a message Atlas saved Wed Oct 18 2017 12:49:12 GMT+0200 (CEST)

[dhovart]

Hello, thanks for not merging this right now, I still have some more things to do as for instance removing the dependency on jQuery in the Atlasmaker files.
But feel free to test, review and comment the suggested changes here.

[codecov-commenter]

Codecov Report

Merging #342 (15f3809) into master (0a4bfba) will decrease coverage by 19.00%.
The diff coverage is 20.00%.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

@@             Coverage Diff             @@
##           master     #342       +/-   ##
===========================================
- Coverage   64.33%   45.34%   -19.00%     
===========================================
  Files          16       16               
  Lines        2316     2329       +13     
===========================================
- Hits         1490     1056      -434     
- Misses        826     1273      +447     

Flag	Coverage Δ
integration	?
unittests	45.34% <20.00%> (-0.17%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
controller/mri/mri.controller.js	59.92% <0.00%> (-20.29%)	⬇️
controller/project/project.controller.js	72.56% <15.38%> (-16.97%)	⬇️
controller/project/index.js	100.00% <100.00%> (ø)

... and 6 files with indirect coverage changes

[r03ert0]

hello @dhovart! It works very nicely! I'm checking it:

• would it be possible to limit the toolbox window to be contained within the MRI image?
• would it be possible to replicate the look of the current buttons in the toolbox? (the line width is smaller and I thing the buttons are rounder too)
• would it be possible to make the white drop shadow to look like the one in Microdraw which is grey?
• in /mri the full screen button is not working (it does work in /project, however the toggle button doesn't appear selected)
• when clicking the "save" button, the message is in a single line, which makes the toolbox window become momentarily large. Would it be possible to keep the width fixed?
• the chat window is very short (which was the case already). Would it be possible to add a drag corner so that it can be made longer?
• the toolbox is 2 columns (which happens when the window is large). Would it be possible to make it 1 column? Like this:

or this (in Microdraw):

- [x] when the toolbox is collapsed into a hamburger menu, the circle with the 3 horizontal lines stays in the place where the "x" was. Would it be possible to send it either to the left or to the right superior corner of the MRI image?

[dhovart]

Hello! To make sure I'm understanding your requests:

• would it be possible to limit the toolbox window to be contained within the MRI image?

The toolbox should still be a floating palette, but one cannot drag it outside of the MRI image, is that right?
For instance, we wouldn't be able to put it over the annotations pane.

• the full screen button is not working

will correct that, it indeed doesn't on the MRI page

• the chat window is very short (which was the case already). Would it be possible to add a drag corner so that it can be made longer?

So you'd want this on the chat scrollable window? Should the palette be resizable as well?

• when the toolbox is collapsed into a hamburger menu, the circle with the 3 horizontal lines stays in the place where the "x" was. Would it be possible to send it either to the left or to the right superior corner of the MRI image?

ok, which corner is preferable to you?

[r03ert0]

The toolbox should still be a floating palette, but one cannot drag it outside of the MRI image, is that right? For instance, we wouldn't be able to put it over the annotations pane.

Yes!

So you'd want this on the chat scrollable window? Should the palette be resizable as well?

Yes!

ok, which corner is preferable to you?
Could it be the one that's closer? If the pane is more to the left of the MRI image, the toolbox goes to the top left corner, and to the right top corner if it's not.

[dhovart]

Looks like there are a few oddities with the resizable tool palette, will look into it.

[r03ert0]

hey @dhovart, it's looking really nice!

• would it be possible to indicate that the toolbox is resizable with a small icon like this?

- [ ] when the toolbox is made taller, the chat div expands accordingly. However, if the chat is collapsed, the toolbox stays tall and displays a large empty space at the bottom: initial state:

observed state after collapsing the chat:

(continues...)

[r03ert0]

(...continuation)
expected state after collapsing the chat:

• I'm checking project "Test" (http://localhost:3001/project/test). The project name doesn't show up:

- [x] In mri page (here http://localhost:3001/mri?url=...), don't bother separating the toolbox and putting it at the bottom. Just keep it over the MRI, as in project page. That will make our lives simpler for Microdraw.  - [ ] The fullscreen button doesn't work in MRI page (it works fine in project page). - [x] The "script" space doesn't resize with the toolbox (unlike the "chat" space which resizes all fine)

(continues...)

[r03ert0]

(...continuation)

• When a message is displayed, the "chat" space overflows the toolbox. Expected: the whole toolbox should momentarily expand and then shrink.
  

[dhovart]

All right, will look into this, thanks for the feedback.

[r03ert0]

thank you for the commits! I updated the feedback items to show as checkboxes, and marked [x] the resolved ones :)

[dhovart]

All right, thank you. Should we disable vertically resizing when the chat or script is collapsed ?

[dhovart]

Also, I can't reproduce the issue where the file name is not appearing...

[dhovart]

" When a message is displayed, the "chat" space overflows the toolbox" -> this one is not fixed for you ?

[r03ert0]

• Text annotations do not update, unless there is a 2nd user connected (in which case they are very nicely updated in real time). So, if there's only one subject, and I write text in "Comments", for example, and then reload, nothing will have been saved.

[r03ert0]

hi @dhovart! I'm checking the new PR.
After npm install, npm run build, npm start, I open localhost:3001, select the "Lion from Zenodo" from the list of brains, and nothing displays. I'm attaching screenshots of the display and the console.

[dhovart]

Ah, I am sorry, I must have forgotten to import something. I'll provide a fix. Denis Le lun. 14 nov. 2022 à 16:10, Roberto Toro ***@***.***> a écrit :

…

hi @dhovart <https://github.com/dhovart>! I'm checking the new PR. After npm install, npm run build, npm start, I open localhost:3001, select the "Lion from Zenodo" from the list of brains, and nothing displays. I'm attaching screenshots of the display and the console. [image: Screenshot 2022-11-14 at 16 09 10] <https://user-images.githubusercontent.com/2310732/201694881-d27c248d-5684-48f2-8156-e5258686eaec.png> [image: Screenshot 2022-11-14 at 16 09 21] <https://user-images.githubusercontent.com/2310732/201694892-7ecc489e-3fec-4fbf-827f-b0d4b810be34.png> — Reply to this email directly, view it on GitHub <#342 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAF2VIAXN5NN3N7DQ6AU2ODWIJI5JANCNFSM5YGZKERA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[r03ert0]

hi Denis, Have you been able to find the bug?

…

On Nov 15 2022, at 10:06 am, Denis Hovart ***@***.***> wrote: Ah, I am sorry, I must have forgotten to import something. I'll provide a fix. Denis Le lun. 14 nov. 2022 à 16:10, Roberto Toro ***@***.***> a écrit : > hi @dhovart <https://github.com/dhovart>! I'm checking the new PR. > After npm install, npm run build, npm start, I open localhost:3001, > select the "Lion from Zenodo" from the list of brains, and nothing > displays. I'm attaching screenshots of the display and the console. > > [image: Screenshot 2022-11-14 at 16 09 10] > <https://user-images.githubusercontent.com/2310732/201694881-d27c248d-5684-48f2-8156-e5258686eaec.png> > > [image: Screenshot 2022-11-14 at 16 09 21] > <https://user-images.githubusercontent.com/2310732/201694892-7ecc489e-3fec-4fbf-827f-b0d4b810be34.png> > > — > Reply to this email directly, view it on GitHub > <#342 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAF2VIAXN5NN3N7DQ6AU2ODWIJI5JANCNFSM5YGZKERA> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> > — Reply to this email directly, view it on GitHub (#342 (comment)), or unsubscribe (https://github.com/notifications/unsubscribe-auth/AARUETF3TZ7RCGXOU3237RLWINHBTANCNFSM5YGZKERA). You are receiving this because you commented.

[dhovart]

Hi, sorry, the published package on npm wasn't matching the sources and there was indeed an import missing. I've bumped it to 1.2.1 and it seems to be working now, so it should be ok on your side as well.

[r03ert0]

thank you!

…

On Jan 5 2023, at 4:26 pm, Denis Hovart ***@***.***> wrote: Hi, sorry, the published package on npm wasn't matching the sources and there was indeed an import missing. I've bumped it to 1.2.1 and it seems to be working now, so it should be ok on your side as well. — Reply to this email directly, view it on GitHub (#342 (comment)), or unsubscribe (https://github.com/notifications/unsubscribe-auth/AARUETCCHXIHIHSLKVXAYXDWQ3R4DANCNFSM5YGZKERA). You are receiving this because you commented.

[ntraut]

Hello @dhovart, I recently updated brainbox dependencies and performed some linting, which produced some conflicts, sorry for that.
I can merge the master branch to yours if you want or rebase your branch, which one do you prefer?

[r03ert0]

The fullscreen button doesn't work on an ipad (i still see the table). It does work on desktop.

[r03ert0]

I can't drag the toolbar in an ipad (maybe the toolbar is only using click but not touch events?)

[katjaq]

Thanks so much for moving this forward!!