diff --git a/.eslintignore b/.eslintignore index 98859d482..964c7135b 100644 --- a/.eslintignore +++ b/.eslintignore @@ -11,3 +11,4 @@ apps/landing/jquery.dropotron.min.js apps/landing/jquery.min.js apps/landing/jquery.scrollex.min.js apps/segment/opencv.js +common/bootstrap-tour-standalone/bootstrap-tour-standalone.min.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 000000000..4151ad49a --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,51 @@ +# Contributing to caMicroscope +We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's: + +- Reporting a bug +- Discussing the current state of the code +- Submitting a fix +- Proposing new features +- Becoming a maintainer + +## We Develop with Github +We use github to host code, to track issues and feature requests, as well as accept pull requests. + +## We Use [Github Flow](https://guides.github.com/introduction/flow/index.html), So All Code Changes Happen Through Pull Requests +Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests: + +1. Fork the repo and create your branch from `develop`. +2. If you've added code that should be tested, add tests. +3. If you've changed APIs, update the documentation. +4. Ensure the test suite passes. +5. Make sure your code [lints](#Use-a-Consistent-Coding-Style). +6. Issue that pull request! (If it's a development related update or fix, make sure you pull request into the `develop` branch) + +## Any contributions you make will be under the BSD-3 Clause Software License +In short, when you submit code changes, your submissions are understood to be under the same [BSD-3 Clause License](https://opensource.org/licenses/BSD-3-Clause) that covers the project. Feel free to contact the maintainers if that's a concern. + +## Report bugs using Github's [issues](https://github.com/camicroscope/caMicroscope/issues) +We use GitHub issues to track public bugs. Report a bug by [opening a new issue](https://github.com/camicroscope/caMicroscope/issues/new/choose). + +**Great Bug Reports** tend to have: + +- A quick summary and/or background +- Steps to reproduce + - Be specific! + - Give sample code if you can. +- What you expected would happen. +- What actually happens. +- If applicable, add screenshots to help explain your problem. +- State the device, platform and versions you are running on. +- Notes (possibly including why you think this might be happening, or stuff you tried that didn't work). + +## Use a Consistent Coding Style +The coding style is based on [Google's Guidelines](https://github.com/google/styleguide). + +* Run `npm install` to install the dependencies +* Then try running `npm run lint` for style unification + +## License +By contributing, you agree that your contributions will be licensed under its [BSD-3 Clause License](https://github.com/camicroscope/.github/blob/master/LICENSE). + +## References +This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/a9316a723f9e918afde44dea68b5f9f39b7d9b00/CONTRIBUTING.md). diff --git a/README.md b/README.md index d20589269..fc89bfb63 100644 --- a/README.md +++ b/README.md @@ -21,19 +21,20 @@ The toolbar is in the top-left of the main content window. Use the toolbar butto | Tool | Name | Function | | ----- |-------------| -----| -| | Annotations | Opens the Annotation panel, where you can select which annotation set to view, name that annotation set, add optional notes about the annotation set, save the annotation set, and reset the panel to its original state. | -| | Layer Manager | Opens the Layers Manager panel, where you can select which layers to view. | -| | Home | Return to the data table so that you can open another slide.| -| | Draw | Draw thin lines, thick lines, or polygons on the image. To maintain the integrity of measurements, avoid drawing shapes that overlap or intersect one another. | -| | Magnifier |The Magnifier works like a magnifying glass and allows you to see the slide at normal magnification (1.0), low magnification (0.5), or high magnification (2.0). Click a magnification level and place the bounding box on the area of the slide you want to magnify. | -| | Measurement | Drag this tool on the slide to learn the measurement in micrometers. | -| | Share View |Opens a window with a URL to the current presentation state of the slide including the magnification level, layers that are currently open, and your position on the image.| -| | Side by Side Viewer |Shows the Layer Manager panel, the left and right layers, and inset window. For the right and left layer, select which layer you want to view. | -| | Heatmap | For a slide with heatmap data, opens the choices of heatmaps available, as well as ways of displaying the heatmaps. The gradient shows all of the values on the selected spectrum for the field you selected. Contains a heatmap edit pen function.| -| | Labeling |Use this tool to draw a circle or rectangle around a tumor region, measure an area on the slide, download labels, and submit a bug report. The Labeling tool has its own toolbar with tools in the following order from left to right: return to the previous slide, place a square on the slide, place a circle on the slide, measure an area, download labels, and submit a bug report. Click the left arrow at the far right of the toolbar to hide it, then click the right arrow to show it. | -| | Segment | This tool allows you to display, count, and export nuclear segmentations on the image. Clicking this tool opens the following custom toolbar. | -| | Model | Show results from a pre-trained tensorflow compatible model on a ROI of the slide. | -| | Bug Report | Report a bug or give feedback. | +| ![](https://fonts.gstatic.com/s/i/materialicons/apps/v4/24px.svg) | Annotations | Opens the Annotation panel, where you can select which annotation set to view, name that annotation set, add optional notes about the annotation set, save the annotation set, and reset the panel to its original state. | +| ![](https://fonts.gstatic.com/s/i/materialicons/view_list/v4/24px.svg) | Layer Manager | Opens the Layers Manager panel, where you can select which layers to view. | +| ![](https://fonts.gstatic.com/s/i/materialicons/home/v4/24px.svg) | Home | Return to the data table so that you can open another slide.| +| ![](https://fonts.gstatic.com/s/i/materialicons/create/v4/24px.svg) | Draw | Draw thin lines, thick lines, or polygons on the image. To maintain the integrity of measurements, avoid drawing shapes that overlap or intersect one another. | +| ![](https://fonts.gstatic.com/s/i/materialicons/search/v4/24px.svg) | Magnifier |The Magnifier works like a magnifying glass and allows you to see the slide at normal magnification (1.0), low magnification (0.5), or high magnification (2.0). Click a magnification level and place the bounding box on the area of the slide you want to magnify. | +| ![](https://fonts.gstatic.com/s/i/materialicons/space_bar/v4/24px.svg) | Measurement | Drag this tool on the slide to learn the measurement in micrometers. | +| ![](https://fonts.gstatic.com/s/i/materialicons/share/v4/24px.svg) | Share View |Opens a window with a URL to the current presentation state of the slide including the magnification level, layers that are currently open, and your position on the image.| +| ![](https://fonts.gstatic.com/s/i/materialicons/view_carousel/v4/24px.svg) | Side by Side Viewer |Shows the Layer Manager panel, the left and right layers, and inset window. For the right and left layer, select which layer you want to view. | +| ![](https://fonts.gstatic.com/s/i/materialicons/satellite/v4/24px.svg) | Heatmap | For a slide with heatmap data, opens the choices of heatmaps available, as well as ways of displaying the heatmaps. The gradient shows all of the values on the selected spectrum for the field you selected. Contains a heatmap edit pen function.| +| ![](https://fonts.gstatic.com/s/i/materialicons/label/v4/24px.svg) | Labeling |Use this tool to draw a circle or rectangle around a tumor region, measure an area on the slide, download labels, and submit a bug report. The Labeling tool has its own toolbar with tools in the following order from left to right: return to the previous slide, place a square on the slide, place a circle on the slide, measure an area, download labels, and submit a bug report. Click the left arrow at the far right of the toolbar to hide it, then click the right arrow to show it. | +| ![](https://fonts.gstatic.com/s/i/materialicons/timeline/v6/24px.svg) | Segment | This tool allows you to display, count, and export nuclear segmentations on the image. Clicking this tool opens the following custom toolbar. | +| ![](https://fonts.gstatic.com/s/i/materialicons/aspect_ratio/v4/24px.svg) | Model | Show results from a pre-trained tensorflow compatible model on a ROI of the slide. | +| ![](https://fonts.gstatic.com/s/i/materialicons/bug_report/v4/24px.svg) | Bug Report | Report a bug or give feedback. | +| ![](https://fonts.gstatic.com/s/i/materialicons/help/v4/24px.svg) | Tutorial | Click to view a guided tour of the viewer tools. | ## Toolbar Shortcuts @@ -74,13 +75,38 @@ caMicroscope is open source software. Any involvement and contribution with the It is highly recommended to make any changes off of the develop branch of a repository, and, when ready, create a PR to the develop branch of the source repository. Before sending the PR, make sure that there are no linting errors by running ```npm install``` and then ```npm run lint``` in the repository folder. ## Fast Local Changes -When using the [hosted setup](https://github.com/camicroscope/Distro/), you can have the distribution host the changes from your local. Clone this repository and the distribution in the same parent directory, in this repo, `mv .nocache.htaccess .htaccess` then replace the viewer section of develop.yml with something like this: +When using the hosted setup, you can have the distribution host the changes from your local. Follow these steps : +- Clone this repository, the [Caracal repository](https://github.com/camicroscope/Caracal/) and [the distribution](https://github.com/camicroscope/Distro/) in the same parent directory +- In this repo, `mv .nocache.htaccess .htaccess` +- Replace the 'back' section of develop.yml in Distro repository with something like this: ``` - viewer: - build: "https://github.com/caMicroscope/caMicroscope.git#develop" - container_name: ca-front - environment: - - cacheoff=true + back: + build: + context: "../Caracal" + args: + viewer: "develop" + depends_on: + - "mongo" + ports: + - "4010:4010" + container_name: ca-back volumes: - - ../caMicroscope/:/usr/local/apache2/htdocs/ + - ./config/login.html:/root/src/static/login.html + - ./jwt_keys/:/root/src/keys/ + - ../caMicroscope:/root/src/camicroscope + environment: + JWK_URL: "https://www.googleapis.com/oauth2/v3/certs" + IIP_PATH: "http://ca-iip/fcgi-bin/iipsrv.fcgi" + MONGO_URI: "mongodb://ca-mongo" + DISABLE_SEC: "true" + ALLOW_PUBLIC: "true" +``` +- Remove this line from 'Dockerfile' in Caracal repository : +``` +RUN if [ -z ${viewer} ]; then git clone https://github.com/camicroscope/camicroscope.git; else git clone https://github.com/camicroscope/camicroscope.git --branch=$viewer; fi +``` +- In Distro repository, enter the following commands : +``` +docker-compose -f develop.yml build +docker-compose -f develop.yml up ``` diff --git a/apps/Info.html b/apps/Info.html new file mode 100644 index 000000000..b82830229 --- /dev/null +++ b/apps/Info.html @@ -0,0 +1,234 @@ + + + + + + + + + + + + + + + + + + + + + + + + CaMicroscope Data Table + + + + + + + + + + + + + + + +
+

caMicroscope

+

Digital pathology image viewer with support for human/machine generated annotations and markups.

+
+ +
+

Information Dashboard

+
+ + +
+ +
+ + + +
+
+
+ +
+

Copyright © 2020 caMicroscope

+
+ + + + + diff --git a/apps/heatmap/init.js b/apps/heatmap/init.js index 424b9373d..fba9bcc5c 100644 --- a/apps/heatmap/init.js +++ b/apps/heatmap/init.js @@ -123,11 +123,17 @@ function initCore() { editedData: $D.editedDataClusters, size: $D.heatMapData.provenance.analysis.size, fields: $D.heatMapData.provenance.analysis.fields, - color: '#253494', // inputs[3].value + color: '#1034A6', // inputs[3].value }; if ($D.heatMapData.provenance.analysis.setting) { opt.mode = $D.heatMapData.provenance.analysis.setting.mode; + if (opt.mode === 'binal') { + opt.color = $D.heatMapData.provenance.analysis.setting.colors[0]; + } else if (opt.mode === 'gradient') { + opt.colors = $D.heatMapData.provenance.analysis.setting.colors; + opt.steps = $D.heatMapData.provenance.analysis.setting.colors.length + 1; + } if ($D.heatMapData.provenance.analysis.setting.field) { opt.currentFieldName = $D.heatMapData.provenance.analysis.setting.field; } diff --git a/apps/heatmap/uicallbacks.js b/apps/heatmap/uicallbacks.js index f7f315202..233ee2ea1 100644 --- a/apps/heatmap/uicallbacks.js +++ b/apps/heatmap/uicallbacks.js @@ -372,7 +372,12 @@ async function onUpdateHeatmapFields() { mode: $CAMIC.viewer.heatmap.mode, }; - if ($CAMIC.viewer.heatmap.mode=='gradient') setting.field = $CAMIC.viewer.heatmap._currentField.name; + if ($CAMIC.viewer.heatmap.mode=='gradient') { + setting.field = $CAMIC.viewer.heatmap._currentField.name; + setting.colors = $CAMIC.viewer.heatmap._colors; + } else if ($CAMIC.viewer.heatmap.mode=='binal') { + setting.colors = [$CAMIC.viewer.heatmap._color]; + } const fields = $D.heatMapData.provenance.analysis.fields; const specimen = $D.heatMapData.provenance.image.specimen; diff --git a/apps/info.css b/apps/info.css new file mode 100644 index 000000000..34731a46b --- /dev/null +++ b/apps/info.css @@ -0,0 +1,33 @@ +html, +body { + width: 100%; + height: 100%; + min-height: 100%; + display: flex; + flex-direction: column; +} + +.sort-btn +{ + cursor: pointer; +} + +.has-search .form-control { + padding-left: 2.375rem; +} + +.has-search .form-control-feedback { + position: absolute; + z-index: 2; + display: block; + width: 2.375rem; + height: 2.375rem; + line-height: 2.375rem; + text-align: center; + pointer-events: none; + color: #aaa; +} + +.footer { + margin-top: auto !important; +} \ No newline at end of file diff --git a/apps/landing/landing.html b/apps/landing/landing.html index 497e469ec..0b4313d3f 100644 --- a/apps/landing/landing.html +++ b/apps/landing/landing.html @@ -31,7 +31,7 @@
  • Slides
  • Signup
  • Feedback
    • - + @@ -50,6 +50,9 @@
  • Slides
    • +
  • + Info +