Code Monkey home page Code Monkey logo

camicroscope's Issues

Consider adding a watermark (back)

previously:

        // add small watermark
        viewer.addHandler('update-viewport', function() {
             viewer.drawer.context.fillText('caMicroscope', document.documentElement.clientWidth-100, document.documentElement.clientHeight-20)
        });

It sometimes acted really strangely (maybe only in safari??)

Support filenames with strange characters

I noticed that when ingesting images with strange filenames, such as:
EX10-0218-4-CK818-[Boon's]-AV.svs
EX10-0218DV-1-[NBF]-CK8
18-AV.svs
the QUIP viewer wouldn't display the images. If I first renamed the files to something more standard, then QUIP would work just fine.

Harmonize attribute names

We need to be consistent in our naming of common attributes such as patient/subject, specimen, and image/case.
ID, case-id, case_id, imageID etc., are all names that point to the same thing - a UID for the image. Lets clean this up in the upcoming 1.0 release

User specific heatmaps and markups

Once user is logged in the session variable $_SESSION["email"] has the email address of the user and can be used to identify it.
It is available across all PHP files in camicroscope and can be used to add user information to POST requests.

Spyglass does not show annotations

  1. When an algorithm is selected, spyglass should show those annotations. Or, we need to be able to explain why not.
  2. (Related to spyglass) Figure out why camic_state.get_url_state() is undefined at StateSchema.js (line 23), and what is it used for?

Relative path issue

Enough of the codebase looks for absolute paths, so rev proxy deployments fail.

Image uploader changes ndpi file extension to dpi.

When a Hamamatsu file with extension ndpi is uploaded using the Image Uploader, the resulting file has a dpi extension. The file is then not recognized by the server as an openslide compatible format.

I am running sbubmi/quip_*:1.0 images.

Debug docker hub automated build fail

s/w Ashish, looks like build is failing due to some artifacts residing in ViewerDockerContainer/html/. According to the Dockerfile, camicroscope is being pulled in from the camicroscope repository. Same thing with Security.

Doing simple test – removing camicroscope from html dir to trigger auto-build, and see if the removal of the directory fixes the error.

Example error.

Related to #96.

Save Zoom Mode Preference

As a proof of concept for indexedDB and configuration persistence, save whether or not to disable the scroll wheel as zoom.

missing apis

Three files use getProperties.php, but the file is missing. If that section of code is ever called, it will fail:

geoJSONHandler_Lymph.js
geoJSONHandler.js
geoJSONHandler_sc.js

Noted: a api/Data/getPropertiesClone.php was created, but I'm having a hard time tracking down the deletion of aforementioned getProperties.php.

Note: In the context of this code, "getProperties" seems to be a misnomer and should be renamed appropriately. This file is actually used for deletion purposes.

Related: #95

QUIP 2 Issue - Delete Markup Button

Someone tried to delete a markup, and the normal shortcut wouldn't work. On QUIP1, the shortcut is (CTRL + Left Click ) on the annotation, but on QUIP2, that doesn't work.

Instructions for Composite

The composite tools don't seem to make any sense to me. In most interactions, I get "select one and only one algorithm" regardless of if I've done so or not.

Saving and loading from state

We have the ability to store and load view state(i.e. zoom and pan position). The viewer gives a sharable link that can be used to launch camicroscope from this old state.

We need to document the types of state we want to support, example:
viewport, algorithms etc. so that external agents can push this state information too.

Use templates properly

Our sliders should be templated. Here is an example of code that should have been templated. During our refactoring, we should be able to push the template into Mongo, and then populate the form from a separate file that relies on that template.

panel.html(function () {
return "<div id='panelHeader'><h4 id='workOrderTitle'> Work Order </h4><a href='#' id='cancelOrderTitle'><div id='cancelWorkOrder'> <img src='images/ic_close_white_24px.svg' /> </div></a></div><div id='panelBody'><form id='workOrderForm' action='#'></form></div>";
});
var schema = {
"range1": {
"type": "number",
"title": "Threshold Gain",
//"description": "Threshold gain for calling something in the image as nucleus. Run as default value 1.0",
"default": r,
"minimum": 0.5,
"exclusiveMinimum": false,
"maximum": 1.5
},
"result1": {
"type": "number",
"maxLength": 3,
"notitle": true,
"required": true,
"placeholder": r,
"readonly": false
},
"range2": {
"type": "number",
"title": "Expected Roundness/Smoothness",
//"description": "Threshold gain for calling something in the image as nucleus. Run as default value 1.0",
"default": w,
"minimum": 0.0,
"exclusiveMinimum": false,
"maximum": 10.0
},
"result2": {
"type": "number",
"maxLength": 3,
"notitle": true,
"required": true,
"placeholder": w,
"readonly": false
},
"range3": {
"type": "number",
"title": "Size Lower Threshold",
//"description": "Threshold gain for calling something in the image as nucleus. Run as default value 1.0",
"default": l,
"minimum": 1.0,
"exclusiveMinimum": false,
"maximum": 30.0
},
"result3": {
"type": "number",
"maxLength": 3,
"notitle": true,
"required": true,
"placeholder": l,
"readonly": false
},
"range4": {
"type": "number",
"title": "Size Upper Threshold",
"default": u,
"minimum": 1.0,
"maximum": 500.0
},
"result4": {
"type": "number",
"maxLength": 3,
"notitle": true,
"required": true,
"placeholder": u,
"readonly": false
},
"range5": {
"type": "number",
"title": "Kernel Size",
"default": k,
"minimum": 1.0,
"maximum": 30.0
},
"result5": {
"type": "number",
"maxLength": 3,
"notitle": true,
"required": true,
"placeholder": k,
"readonly": false
},
"radios6": {
"type": "integer",
"title": "Choose declumping method",
"enum": [0, 1, 2],
default: pj
}
};
// console.log('Schema: ' + JSON.stringify(schema, null, 4));
var formSchema = {
'schema': schema,
'form': [{
'type': 'fieldset',
//'legend': 'Parameters',
'expendable': true,
'items': [
{
"key": "range1",
"type": "range",
"step": 0.1,
"onChange": function (evt) {
var valueRange1 = jQuery(evt.target).val();
r = valueRange1;
jQuery('[id*="-result1"]').val(r);
/*
if(valueRange1) {
document.getElementById("jsonform-0-elt-result1").value = valueRange1;
}
document.getElementById("jsonform-0-elt-result1").value = valueRange1;
*/
},
"otherField": {"key": "result1", "inline": true}
},
"result1",
{
"key": "range2",
"type": "range",
"step": 0.1,
"onChange": function (evt) {
var valueRange2 = jQuery(evt.target).val();
w = valueRange2;
jQuery('[id*="-result2"]').val(w);
/*
if(valueRange2) {
document.getElementById("jsonform-0-elt-result2").value = valueRange2;
}
*/
}
},
"result2",
{
"key": "range3",
"type": "range",
"step": 0.1,
"onChange": function (evt) {
var valueRange3 = jQuery(evt.target).val();
l = valueRange3;
jQuery('[id*="-result3"]').val(l);
/*
if(valueRange3) {
document.getElementById("jsonform-0-elt-result3").value = valueRange3;
} */
}
},
"result3",
{
"key": "range4",
"type": "range",
"step": 0.1,
"onChange": function (evt) {
var valueRange4 = jQuery(evt.target).val();
u = valueRange4;
jQuery('[id*="-result4"]').val(u);
/*
if(valueRange4) {
document.getElementById("jsonform-0-elt-result4").value = valueRange4;
} */
}
},
"result4",
{
"key": "range5",
"type": "range",
"step": 0.1,
"onChange": function (evt) {
var valueRange5 = jQuery(evt.target).val();
k = valueRange5;
console.log("valueRange5:", k);
jQuery('[id*="-result5"]').val(k);
/*
if(valueRange5) {
document.getElementById("jsonform-0-elt-result5").value = valueRange5;
}
*/
}
},
"result5",
{
"key": "radios6",
"type": "radios",
"titleMap": {
0: "--- No Declumping",
1: "--- Mean Shift Declumping",
2: "--- Watershed Declumping"
},
"onChange": function (e) {
// console.log(e);
var radio_value = jQuery(e.target).val();
// console.log("radio_value is : "+radio_value);
//pj=parseInt(radio_value);
pj = radio_value;
// console.log("pj is : "+pj);
}
}
]
}],
"params": {
"fieldHtmlClass": "input-small"
}
};

Algorithm Usability Improvements

(In addition to the ux fixes)

  • Save presets for algorithms for session
  • Show a low quality representative preview at start quickly (to help with tuning before running)

UI Improvements/Fixes

General

  • Universal Design Document/Spec for caMic and related apps
  • Header Redesign

Image Loader

  • “Problem with Uploading” should probably be bigger or have border/box
  • change 100% color on progress bar

Feature Scape

  • Move where scatter plots are and/or show/hide the matrix on click.
  • On hover, show mini plot if possible, else correlation coefficient.
  • On click, show modal plot with correlation coefficient.

caMicroscope

  • Image analysis button seems to change opacity of a non-visible div
  • Make workflow on “work order panel” more apparent.
  • Contextual (in place) menus/commands for annotation

caMic Lymphocyte

  • Having two home buttons makes no sense
  • Blue plus and minus icons can’t be seen well
  • There should be a way to exit draw thin line from the menu
  • Zoom on scroll doesn’t seem to work, also can’t zoom out
  • Plus and minus should be functionally replaced with an opacity slider, not two head buttons

Separate Magnifier

GOAL: A way to see high detail in a region without changing the main view.

Possible Implementation: Open a separate window or div and keep its x and y position matched with the crosshair/pointer position.

Refactor Dynamic services UI code

Currently there are some hardcoded assumptions about the order, also there are a few unnecessary callback that can be refactored out.

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.