Giter VIP home page Giter VIP logo

cytomine-web-ui's Introduction

Cytomine front-end

Presentation

The Cytomine-WebUI is the official front-end for Cytomine, developed in VueJS.
You will find more information about the Cytomine project on the website.
You can also find, on our official documentation how to install it and an user guide.

The main features of this new front-end are :

  • A complete new Cytomine experience.
  • Support of internationalization i.e. multiple languages (English and French currently available). You can contribute by adding new languages (See here).
  • Reactive application.
  • New lists of project, image, job with sorting, searching and filtering.
  • Display details of images, jobs and projects in all the lists.
  • A complete refactoring of the image viewer to focus on the main part : the image. The other components have been developed to be discreet and can be fold in if necessary. The viewer is now compatible with tablets.
  • Rotation of images at any specific angle.
  • Set up of magnification and resolution of each image directly from the viewer or the image list.
  • Zoom beyond the maximum resolution of an image by activating a digital zoom.
  • Display more than one image into a viewer for efficient comparison. These opened images can be linked to synchronize your navigation and allow you to easily browse though multiple images at once.
  • Draw annotations with a preselected term.
  • Opacity of each term color can be specificly set up.
  • Straight lines and Free hand lines annotations are now available.
  • Brightness, Contrast, Saturation and Hue of a image can be set up during visualization.
  • The Workspace feature allows you to open multiple projects and image and go back to a currently opened image or project.
  • A quick search across the platform is available in the top navigation bar.
  • An advanced panel allowing you to search all across the platform.
  • Set for projects default annotation layers and default property which will be displayed at the opening of an image.
  • Follow in real time an other user viewer or part of viewer, only if this user have allowed the Cytomine platform to broadcast it.
  • Simplification of user managment in projects.
  • Change the ontology of a project is now possible.
  • Edition of ontology terms had been simplified.
  • Adding attached files to a project, a image, or an annotation is now possible.
  • Manage files in storage is enriched by total size on disk and list of sub images for archived or converted images.

Installation

This section assumes that you have access to an instance of Cytomine (especially Cytomine-core) and an installed proxy. These two conditions are filled if you have used Cytomine-bootstrap. The following steps will allow you to run a front-end interacting with this instance:

  • Execute npm install to install the dependencies;
  • Change the value of constants CYTOMINE_CORE_HOST and CYTOMINE_UPLOAD_HOST in src/utils/constants.js ; you may also update other constants according to your Cytomine instance or your preferences;
  • Execute npm run build to build all the files into a dist folder.
  • Configure your proxy to redirect http request on the index.html file or replace the dist folder in your Cytomine-bootstrap by this one.

Local installation

This section assumes that you have access to an instance of Cytomine (especially Cytomine-core). The following steps will allow you to run locally a front-end interacting with this instance:

  • Execute npm install to install the dependencies ;
  • Change the value of constants CYTOMINE_CORE_HOST and CYTOMINE_UPLOAD_HOST in src/utils/constants.js ; you may also update other constants according to your Cytomine instance or your preferences;
  • Execute npm run serve to start a web server serving the front end (by default on localhost:8080).

Remarks:

  • If the front-end is not expected to run on the same host/port as the core, NGINX should be configured to allow CORS addressed to the core
  • When using our software, we kindly ask you to show our website URL and our logo in all your work (web site, publications, studies, oral presentations, manuals, ...). If you use Cytomine for scientific purpose, please cite Marée et al., Bioinformatics 2016 as reference paper. See our license files for additional details.

Code of Conduct

We subscribe to the Contributor Convenant Code of Conduct for a respectful community.

cytomine-web-ui's People

Contributors

cytominedev avatar dependabot[bot] avatar geektortoise avatar gvincke avatar jgillardcytomine avatar moelasec avatar nassim-89 avatar paulbarza avatar urubens avatar waliens avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

cytomine-web-ui's Issues

Hidden reviewed annotations

Hello,

I have noticed that the "review layer" is invisible. It also bugs out the annotations in the other layers when it is set on visible.

In addition, in the annotations tab, it is impossible to switch to the reviewed annotations (the manual and algorithm annotations options work normally).

These errors were observed on the cytomine cloud app.

Change the current thumbnail/mini map behavior.

Current :
To deplace the viewport, you can use the minimap in the following way :
“drag the view box in the area that you want to display”

Wanted :
A simple "click" on the new targeted view is simplier.

Logging in redirects to localhost

I have followed the installation instructions for Cytomine 3.0.0 at https://doc.cytomine.org/How-to-install-Cytomine, and I selected option (b) "make your Cytomine instance accessible from other computers." I have the URLs section of the configuration.sh file set as follows (with [my-domain] replaced with the domain name I'm using).

CORE_URL=[my-domain]
IMS_URL1=[my-domain]/ims
IMS_URL2=[my-domain]/ims2
UPLOAD_URL=[my-domain]/upload

It's not clear to me from the documentation what the user name should be, so at the log in page, I tried 'admin' and entered the password from the configs/core/cytomineconfig.groovy file. When I click the 'Log in' button, the browser sends a POST request to http://[my-domain]/j_spring_security_check, but the response from that POST includes the following redirect header:

Location: http://localhost/login/authfail?ajax=true

Going to 'localhost' cannot work, of course, because the browser is running on one machine and the Cytomine software is running on another.

I've been looking through several of the related docker containers to see why 'localhost' is being sent instead of the domain name I selected, but thus far, no luck.

Can you offer a suggestion that might help?

Thanks much.

Annotation fetching by category is unefficient

Currently, the Web UI ask for the fetching of all the annotation classified by a defined category (user, term, etc.)

This PR (#89) set a limitation of the number of categories to avoid backend flooding.
However, this is a strict limitation and missing annotations would only be fetch by a more precise filtering (remove some terms or users).

I think it would be a nice feature to

  • don't flood the backend;
  • be able to see everything :-)

I see 2 options :

  • An "hot loading" : only load the annotations related to the first categories then load the next if the user scroll down;
  • Load all categories with only the number of annotations (dedicated api request) and by extending the "category row", load the related annotation

Maybe there is other options that I don't see at this moment.

Optimize annotations fetching in Annotation panel

In a project, when working on an instance used for years, we can have a difficulty to load the annotations.

In the ListAnnotations file, we load all the users. In some instances, the users are numerous and this request take more than 5 seconds (more if the instance is massively used at this time).
The panel stay unavailable with the loading wheel.

The users are used in the AnnotationDetails component to display the creator or reviewer of this annotation.
But currently, if a creator is removed its annotations are no more displayed.

Multi-image viewer doesn't keep the order

When I reload a viewer into my browser,
(url is BASE_URL/#/project/P/image/I1-I2-I3?viewer=V )

the order of the opened images is not kept. It can be disturbing for the user.

Attended behaviour :
The image order is kept.

Change of background color when zooming in on RGBA images

The following screenshot shows an RGBA image where the black background has an alpha of 0.

Screenshot from 2024-06-03 15-57-50

When zooming in, the background changes to white.

Screenshot from 2024-06-03 15-57-58

I have also tried to disable the Digital Zoom, the issue persists.
Although this is shown on the ULiège instance, the bug was reproduced by Ba Thien on another instance.
I can send the image (<100kB), if needed to reproduce of the bug.

Cytomine viewe open dicom wsi format

I have a question. Open cytomine viewer the images in dicom wsi
Format or it opens propietary images from scanners?
Kind regards and thank you in advance.

Do not search annotations where term is disabled.

Currently, the search is made independently of the terms.

If we unselect a term, we still ask back-end to search for all annotations (including this term) and mask them.

  1. It will be better for performance to search for the displayed terms.
  2. A consequence is that for clusters, the count is "false". We display the number of all the clustered annotations including the masked one... Even if we ask to see only one term with few annotation (and in this case, a cluster is not to display (i.e. the back-end will not return the cluster information)).

Web UI cannot get data from Core

Hello,

I have some issues regarding cytomine development setup. I have made the regular installation of cytomine core on local machine. It is working fine. For the front end I have installed cytomine-web-ui as follows:
Hello,

I have some issues regarding cytomine development setup. I have made the regular installation of cytomine core on local machine. It is working fine. For the front end I have installed cytomine-web-ui as follows:

image

The issue I am having is that in the cytomine-web ui, I can see the projects created in the cytomine core but could not open them, it says ‘the page could not be found’. Moreover I am unable to create a project or upload the images.

In the configuration.sh file, if I make the parameter Core-development to true and run it, both cytomine core and web-ui shows the login screen but when I try to login it says ‘Unexpected Error Occured’.

In the configuration.sh file, if I make the parameter Web-Ui or IMS-development to true and run it, cytomine core gives the error of Bad gateway but cytomine web-ui works fine. I am able to create projects and upload images but in this case, the issue is that when I try to open some image, it says ‘failed to fetch annotation layers’ and the image could not be opened.

Kindly help me with this.

Show IMS errors in the UI.

When uploading a seemingly faulty image and triggering an error on the IMS (e.g. cytomine/Cytomine-IMS#33 or other errors of the java.lang.Exception: Openslide is unable to read nature) either the upload status is stuck at "Detecting format" or "Deploying", but without any error message visible to the user.

Please forward the error to the UI.

error in compile

Failed to compile.

How i resolve this error? ... after i type this in browser: http://localhost:8080/

./src/components/admin/AdminUsers.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: 'getWildcardRegexp' is defined but never used (no-unused-vars) at src/components/admin/AdminUsers.vue:117:9:
115 | import UserDetails from './UserDetails';
116 | import {rolesMapping} from '@/utils/role-utils';

117 | import {getWildcardRegexp} from '@/utils/string-utils';
| ^
118 |
119 | export default {
120 | name: 'admin-users',

1 error found.

Annotation-related features

Hi @geektortoise, @urubens and Cytomine developers,

We're doing collaborative analysis with the pathologist, on the analysis annotations (nuclei detection and classification). There are some features related to annotation work which we think would be useful or can be improved:

  1. To edit the analysis annotation terms when the Review stage is enabled.
  2. To enable/disable colour overlay of the annotations without affecting the outlines.
  3. To change annotation outline colours for each term. So that when we disable colour overlay, we can still distinguish the different annotation terms
  4. To enable "Correct annotation by adding a freehand area" and "Correct annotation by removing a freehand area" tools for analysis annotations. These are very useful because the pathologist don't have to edit each point using "Modify" tool.
  5. "Fill" tool has unclear usage. I have tried using it several times but it did not capture anything.

I went through the documentation and could not find further info on these. We would like to ease the pathologists work as much as possible hence we look forward to getting your response.

Thank you very much

.

Navbar dropdown not supported in IE

Currently the implementation of the .navbar-item.has-dropdown class in src/components/navbar/NavbarDropdown.vue relies on toggling the .is-active class which works fine on Chrome and FireFox, but not on Edge.

<div class="navbar-item has-dropdown"
:class="{'is-active': opened}"
@mouseover="opened = true"
@mouseout="opened = false"
>

The Bulma docs provide an example that adds the .is-hoverable modifier to the .navbar-item.

Allow multiple selection of annotations

It would be a nice feature to be able to select multiple annotations.
Example :
Click on one annotation -> Display of the annotation details
MAJ + click on another annotation -> Hiding of the annotations details (there is no more "THE current annotation" to show)
Two annotations are selected
Then when click on delete, we should be able to delete the 2 annotations with a single "confirm" (one confirmation pop-up for all the annotation deletion) => The message should vary and contains the number of annotation to delete.

brightness / contrast / etc - changes are not persistent

When changing the brightness / contrast / etc - the changes are not persisted and the viewing is a little choppy because tiles are first shown THEN adjusted through brightness / contrast / etc .

If possible, would be better to first pass any tile(s) through the brightness / contrast / etc changes before being presented on the screen

Grid lines when displaying .svs images

When .svs images are displayed at lower magnification levels, they appear to have faint grid lines. I do not see these line when the magnification is increased to 5x or higher. The lines appear whether or not digital zoom is on. These lines don't appear when the image is in .ndpi or .jpg format. The images below are from screenshots of the browser taken at different magnification levels.

Magnification 0.63x
magnification 0 63

Magnification 1.25x
magnification 1 25

Magnification 2.5x
magnification 2 5

Magnification 5x
magnification 5

Project and Images missing from Project's page

Hi,

I was adding new users to 3 existing projects, and configured the download permission for each project as ''Images downloadable by contributor'. After doing these, there seems a few problems with the Projects page:

  1. One of the projects disappeared from the Projects page
  2. Total number of images for the other 2 projects became lesser (from 37 to 0, and from 171 to 6)

The missing project and images are still there, accessible from "Recently Opened". Maybe there is a bug somewhere. Our Cytomine was already updated (core v3.0.3).

Hope to get this sorted out to avoid confusion to our collaborators when seeing the missing project and images. Thank you.

Recently Opened panel showing "ER WSI" project:
image

Projects page has no "ER WSI" project:
image

Project "ER Patches" still has 100+ images, but only showing 6 in the project information:
image
image

Cannot modify an annotation or close the information pop-up

Some problems appeared with annotations.
Example : each time I close the information pop-up, it opens again.

It seems that it is caused by the package-lock.json update and the vuelayers version evolution from 0.11.4 to 0.11.22.

When I force version 0.11.4, it works fine.

Expose slide label in the UI.

Pathologists use the slide label for identification of the patient/staining; displaying the slide label would increase confidence in using cytomine.

Label images are served by the backend:

$HOST/api/imageinstance/$ID/associated/label.png

or

$HOST/api/abstractimage/$ID/associated/label.png

Please include the label in the accordion chevron-cell near "Slide preview" and on the image viewer.

An alternate view-mode incorporating this feature could look like this:

mock_slidecards

VueLayers dependency

One of our main dependency is vuelayers.
When we develop this project, we based our features on the version 0.11.4 of vuelayers.

However, we face problems with infinite loop of feature selection with new versions (see #18 and #57 )

Even with the fix of the PR, we still have issues with rotation and translation.
With recent 0.11.x, it is impossible to select the source for the rotation (source "undefined" in https://github.com/cytomine/Cytomine-Web-UI/blob/master/src/vuelayers-suppl/rotate-interaction/interaction.vue#L61 )
With 0.11.7, it is possible to enable rotation but ...the undo doesn't work anymore -.-.

So as long as vue-layers is in version 0 (with potential breaking change with each release), I set the version to 0.11.4.
When there will be a version 1, we will need to test each frontend feature.

Cannot delete a vertex in modification mode.

Expected :
Able to delete a vertex in the modification mode with a click on the vertex with the Alt key down.

Current :
I can't.

During a debugging, I can see that I can't have the two event simultaneously.

terms cannot be deleted

Hello,

I have encountered an issue with terms in cytomine.
They cannot be deleted. Neither via the web UI nor via the API.
When I try to delete them via the web UI, a message says, that it is successfully deleted, but after a refresh the term reappears and is also still fetchable via the api.
I am logged in as the default admin.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.