Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve mobile support of views #7876

Merged
merged 4 commits into from
Jun 12, 2024

Conversation

MichaelBuessemeyer
Copy link
Contributor

@MichaelBuessemeyer MichaelBuessemeyer commented Jun 11, 2024

This PR improves the responsiveness of the login, registration

URL of deployed dev instance (used for testing):

  • https://___.webknossos.xyz

Steps to test:

  • Use your browser dev tools to emulate a mobile device
  • The login, registration & forgot password view should all look ok and should not overflow the screen width
  • This also goes for the login view hidden in the navbar while viewing a public annotation / dataset and not being logged in.
    • Create an annotation, make it public, copy the sharing link.
    • Log out and open the sharing link on the mobile device browser tab
    • In the navbar hit the user icon -> the auth popup should look ok :)
  • Open the dataset dashboard in the mobile browser tab. Compared to before, the dataset table should at least be a little visible and when working with a vertical mobile device, the table should now be kinda usable compared to before.

TODOs:

  • Any other ideas of views to make more responsive?

Issues:

  • No issue exists for this

(Please delete unneeded items, merge only when none are left open)

@MichaelBuessemeyer MichaelBuessemeyer marked this pull request as ready for review June 11, 2024 15:26
Copy link
Member

@hotzenklotz hotzenklotz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works well. Great work.

@hotzenklotz
Copy link
Member

The component <CoverWithLogin /> could also benefit from the same treatment.

Comment on lines -109 to 111
<Col span={8}>
<Col xs={22} sm={20} md={16} lg={12} xl={8}>
<h3>Try logging in to view the dataset.</h3>
<LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
Copy link
Contributor Author

@MichaelBuessemeyer MichaelBuessemeyer Jun 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But the <CoverWithLogin/> component is already adjusted right here

To me it looks like this:
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For record: The image shows the <LoginView/> component. To get the <CoverWithLogin /> component rendered, try to open a non public dataset in view mode without being logged in

@MichaelBuessemeyer MichaelBuessemeyer enabled auto-merge (squash) June 12, 2024 15:24
@MichaelBuessemeyer MichaelBuessemeyer merged commit 13151c8 into master Jun 12, 2024
2 checks passed
@MichaelBuessemeyer MichaelBuessemeyer deleted the improve-mobile-support-of-views branch June 12, 2024 15:42
MichaelBuessemeyer added a commit that referenced this pull request Jun 17, 2024
* make login, registration and forgot password view more responsive to mobile devices
- includes adding a link back to login for password reset view

* make dashboard dataset view less awful

* add changelog entry
aaronkanzer pushed a commit to lincbrain/webknossos that referenced this pull request Jun 17, 2024
* make login, registration and forgot password view more responsive to mobile devices
- includes adding a link back to login for password reset view

* make dashboard dataset view less awful

* add changelog entry
MichaelBuessemeyer added a commit that referenced this pull request Aug 28, 2024
* Add dataset metadata input to details view in dashboard

* update docs

* Improve mobile support of views (#7876)

* make login, registration and forgot password view more responsive to mobile devices
- includes adding a link back to login for password reset view

* make dashboard dataset view less awful

* add changelog entry

* Mapping in default view config (#7858)

* allow viewing a mapping

* WIP: enable setting default active mappings in default view configuration

* add default active mapping to default view configuration
- add config settings to dataset settings default view config tab
- auto load initial default mapping

* fix bottom margin of layer settings
- was broken in view mode with multiple segmentation layers; the "Save View Config..." Button had no spacing to towards

* fix having the mapping settings enabled for layers with default mapping

* WIP: move default mapping store proeprty to dataset layer config
- undo moving mapping selection to a shared component

* moved default active mapping from separate select to view config layer config
- Also added validation check whether the mapping exists in the dataset view config settings

* allow saving no default active mapping from view mode & model init to new dataset config version

* rename defaultMapping to mapping

* cache available mappings fetched from backend when checking config in dataset settings

* remove logging statements

* clean up

* add changelog entry

* apply pr feedback

* Fix animation modal color layer validation (#7882)

* fix animation modal color layer validation

* changelog

* rename variable

* apply pr feedback

* improve error message of uint24 layers in animation modal

---------

Co-authored-by: Michael Büßemeyer <[email protected]>

* Validate animation job bounding box (#7883)

* validate BB size to be larger then 0

* changelog

* appy PR feedback

* force serialization of dataset details prop in compact version of dataset

* WIP adding details to folder

* First version metadata support for folders

* fix folder listing query

* finish frontend support for folder metadata

* default to undefined columnKey and not null to potentially prevent frontend dataset filtering
- reason: ll.530 checks for sortedInfo.columnKey == null and columnKey is per default "" which makes this check fail and thus the chained map will never be executed

* add evolution

* update test db init data & folder snapshot test & bump schema version

* remove unused import

* also blur on property input

* only support / show current error

* improve css

* WIP: use new json schema to save dataset & folder details and re-style metadata table

* fix backend to work with new type of details dataset / folder field & WIP restyling of metadata / details table

* WIP: improve dataset details table styling and add support for different types

* details table for folders and datasets version 2

* WIP: adapt migration to new details format

* uncomment ci tests

* mini migration fix

* - rename details to metadata

* fix schema

* remove unused backend imports

* only update metadata set of metadata table when folder / dataset changes

* ensure flushing updates on unmount of metadata table & increase debounce time

* remove accidental change

* WIP apply styling feedback & refactor handling metadataentry type

* remove unused css

* keep old dataset while updating & refetching in the dataset details view

* remove unused code as search support for metadata entries is currently not planned

* do not include metadata in dataset compact version

* Fix Dataset refetching

- also update datasetById when updating a dataset in the dashboard
- Avoid spinner when updating metadata
- Avoid unnecessary updates by guarding the debounced flush against not having pending calls to the debounced function

* have fix width for metadata table cell contents to  ensure consistent table column width and consistent layout

- Ignore adding new metadata entry when there is already an empty one to avoid showing an error

* enable selecting current folder of folder tree view as active details element

* do not have initial empty metadata row

* WIP: Apply styling update

* Finish next version

* hopefully fix flickering bug in when two different metadata updates have a cyclic race against each other

* Only have default metadata on species, brainRegion & acquisition when creating a publication

* also fill full metadata table width in case of an empty table

* allow changing prop name although it is a duplicate; do not save metadata in case it has errors

* clean up code for review

* add changelog & migration entry; rename evolution

* also rename revision; add comments to revision; remove dev logging

* Apply PR Feedback

* move metadata table to own file

* only update when metadata changed & refactor code

* fix updating the wrong dataset or folder with the newest metadata version of the table

* allow multiple error rows & only update local metadata set if new folder/dataset or update failed

- Try forcing dropdown menu to stay open during update -> does not work atm :/

* update preview image

* fix color layer / segmentation layer switchero bug

* remove periodic autosave an replace with explicit save via button or autosave when changing focused dataset / folder

* re add auto saving mechanism and do not have nested components to avoid frequent remounting

* update snapshots

* refactor code & remove `useWillUnmount` which sent outdated metadata update to the backend breaking the whole metadata feature.

* remove unnecessary dependency from useEffect accidentally added in a different pr

* include metadata in full dataset update route

* fix full update dataset route for metadata support

* remove option to update tags (as they will no longer be rendered in the frontend)

* remove index from initial metdata added to datasets with publication

* apply pr feedback (testing pending)

* lint frontend

* do not send updates while a row of the metadata table is focused
- Also: Use up-to-date metadata value on unmount effect (previously the inital value was sent to the server)

* avoid lost isSaving updates due to changes to `focusedRow` state while updating. Due to changes to `focusedRow` while saving the previously used isMounted boolean was set to false when changed during the update post to the backend and thus the update to isSaving never got through the guarding. => Now it is explicitly tracked via a custom hook to avoid this scenario

* fix sending double updates on unmount

* apply pr feedback

* migrate existing tags into metadata

* remove unwanted additional wrapping array around migrated tags in metadata value entry

* add undo migrating tags to metadata to revision

* fix revision schema

* give delete metadata entry button some more space; align key input to top & center delete button

* update schema migration version

* apply feedback

* readd tag support in frontend (and backend)

* fix backend

* make metadata non nullable

* update snapshots tests

* fix metadatatype type definition

* fix reversion against default null values of re-added details column

---------

Co-authored-by: Tom Herold <[email protected]>
Co-authored-by: Florian M <[email protected]>
Co-authored-by: Philipp Otto <[email protected]>
Co-authored-by: Michael Büßemeyer <[email protected]>
Co-authored-by: Florian M <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants