Skip to content

Commit

Permalink
Merge pull request #366 from camicroscope/develop
Browse files Browse the repository at this point in the history
For 3.7.2
  • Loading branch information
birm authored Apr 17, 2020
2 parents 5843bbf + ffc0a90 commit 11789fb
Show file tree
Hide file tree
Showing 33 changed files with 3,328 additions and 1,308 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
51 changes: 51 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -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).
66 changes: 46 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
```
234 changes: 234 additions & 0 deletions apps/Info.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html>

<head>
<meta name="keywords" content="camicroscope, quip" />
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport'
content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<!-- common -->
<!-- <link rel='stylesheet' type='text/css' media='all' href='../css/style.css'/> -->
<!-- Check If we're logged in ok, otherwise, log in for us -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<script src='../common/authChecker.js'></script>
<script>
__auth_check(1)
</script>

<script src='../core/Store.js'></script>
<script src='../common/util.js'></script>
<script src='../common/ajv.js'></script>
<script src='../components/loading/loading.js'></script>
<script src="./loader/loader.js"></script>
<script src="./loader/chunked_upload.js"></script>
<title>CaMicroscope Data Table</title>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="../common/stacktable.css">
<style>
html,
body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
</style>
<script src='../common/stacktable.js'></script>
<link rel="stylesheet" href="./table.css" />
<link rel="stylesheet" href="./info.css" />
<link rel="shortcut icon" type="image/x-icon" href="/apps/landing/favicon.png">
</head>

<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="position: sticky;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item link">
<a class="nav-link" href="landing/landing.html"> <i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item link">
<a class="nav-link" href="table.html"> <i class="fas fa-list-ul"></i> Slides</a>
</li>
<li class="nav-item active link">
<a class="nav-link" href="Info.html"> <i class="fas fa-info-circle"></i> Info</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item link" style="font-family: sans-serif;">
<a class="nav-link" href="./signup/signup.html"> <i class="fas fa-user-plus"></i> Signup</a>
</li>
<li class="nav-item link">
<a class="nav-link" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform"> <i class="fas fa-comment"></i> Feedback</a>
</li>
</ul>
</div>
</nav>

<div class="header text-center text-white bg-info p-4">
<h1 class="h1">caMicroscope</h1>
<p>Digital pathology image viewer with support for human/machine generated annotations and markups.</p>
</div>

<div class="container">
<h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Information Dashboard</h3>
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input id="search-table" type="text" class="form-control" placeholder="Search">
</div>

<div class="table-responsive" id="summary">
<table class="table table-striped">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>

<div class="text-center text-white bg-dark p-3 mt-2 footer" style="position: static;bottom: 0;width: 100%;">
<p class="p">Copyright © 2020 caMicroscope</p>
</div>

</body>
<script>

var searching=false;

function addhead(){
var table = $('table thead');
let headingList=['ID','Name','Annotations','Heatmaps']
const headingMarkup = headingList.map((title,i) => `<th>${title}
<span class="sort-btn" data-order=${1} data-index=${i}>
<i class="fa fa-sort"/> </span>
</th>`);
table.append(`<tr>${headingMarkup}</tr>`);
}

function addbody(JSONdata){
var table = $('table tbody');
// console.log(JSONdata.annotations);
var annodisp=null;
var heatdisp=null;
if(JSONdata.annotations.length===0){
annodisp="<i class='fas fa-times' style='color:red;'></i>"
}
else{
annodisp="<i class='fas fa-check' style='color:green;'></i>"
}
if(JSONdata.heatmap.length===0){
heatdisp="<i class='fas fa-times' style='color:red;'></i>"
}
else{
heatdisp="<i class='fas fa-check' style='color:green;'></i>"
}
var markup = "<tr><td>"+JSONdata.id+"</td><td>"+JSONdata.name+"</td><td>"+annodisp+"</td><td>"+heatdisp+"</td></tr>"
table.append(markup);
}

function searchSummaryTable(e) {
var value = String($(this).val()).toLowerCase();
$("#summary table tbody tr").filter(function () {
var t = String($(this).text()).toLowerCase().indexOf(value);
if (t > -1) {
$(this).addClass("searched");
$(this).removeClass("d-none");
} else {
$(this).removeClass("searched");
$(this).addClass("d-none");
}
});
if (value == "") {
searching = false;
} else {
searching = true;
}
}

function sortSummaryTable(e) {
var index = e.currentTarget.dataset.index;
var order = parseInt(e.currentTarget.dataset.order);
var trs = "#summary table tbody tr";
if (searching) {
trs += ".searched";
}

$(trs).sort(function (a, b) {
let at = $(a).children('td').get(index).textContent;
let bt = $(b).children('td').get(index).textContent;
if(at&&bt)
{
at=at.toLowerCase();
bt=bt.toLowerCase();
}
else
{
at=$(a).children('td').get(index).childNodes[0].classList;
bt=$(b).children('td').get(index).childNodes[0].classList;
}
if (order === 1) {
e.currentTarget.dataset.order=2;
if (at > bt)
return 1;
else if (at < bt)
return -1;
else
return 0;
}
else {
e.currentTarget.dataset.order = 1;
if (at < bt)
return 1;
else if (at > bt)
return -1;
else
return 0;
}
}).appendTo("#summary table tbody");
}

function initialize() {
const params = getUrlVars();
const store = new Store('../data/');
store.findSlide()
.then(function (data) {
if (data.length == 0) {
var div = document.querySelector('.container');
div.textContent = `No Data Found ... x _ x`;
div.classList = `text-center p-4`;
return;
}
addhead();
$("#search-table").on("keyup",searchSummaryTable);
$(".sort-btn").on("click", sortSummaryTable);
for (var i = 0; i < data.length; i++) {
const JSONdata={};
JSONdata.id=data[i]._id.$oid;
JSONdata.name=data[i].name;
store.fetchMark(JSONdata.id).then(function(dataq){
JSONdata.annotations=dataq;
store.fetchHeatMap(JSONdata.id).then(function(dataqt){
JSONdata.heatmap=dataqt;
addbody(JSONdata);
});
});
// console.log(JSONdata);
}
});
}
document.addEventListener('DOMContentLoaded', initialize);
</script>

</html>
8 changes: 7 additions & 1 deletion apps/heatmap/init.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Loading

0 comments on commit 11789fb

Please sign in to comment.