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

[Enhancement] replace alerts to toasts in viewer #383

Merged
merged 3 commits into from
Apr 18, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/model/model.js
Original file line number Diff line number Diff line change
Expand Up @@ -740,8 +740,8 @@ function uploadModel() {
}

async function deleteModel(name) {
modelName = name.split('/').pop().split('_').splice(2).join('_').slice(0, -3);
if (confirm('Are you sure you want to delete ' + modelName + ' model?')) {
deletedmodelName = name.split('/').pop().split('_').splice(2).join('_').slice(0, -3);
if (confirm('Are you sure you want to delete ' + deletedmodelName + ' model?')) {
const res = await tf.io.removeModel(IDB_URL + name);
console.log(res);
const tx = db.transaction('models_store', 'readwrite');
Expand All @@ -758,7 +758,7 @@ async function deleteModel(name) {
if (popups.childElementCount < 2) {
let popupBox = document.createElement('div');
popupBox.classList.add('popup-msg', 'slide-in');
popupBox.innerHTML = `<i class="small material-icons">info</i>` + modelName + ` model deleted successfully`;
popupBox.innerHTML = `<i class="small material-icons">info</i>` + deletedmodelName + ` model deleted successfully`;
popups.insertBefore(popupBox, popups.childNodes[0]);
setTimeout(function() {
popups.removeChild(popups.lastChild);
Expand Down
5 changes: 3 additions & 2 deletions apps/segment/segment.js
Original file line number Diff line number Diff line change
Expand Up @@ -1120,7 +1120,8 @@ function watershed(inn, out, save=null, thresh) {
M.delete();
}
async function deleteModel(name) {
if (confirm('Are you sure you want to delete this model?')) {
deletedmodelName = name.split('/').pop().split('_').splice(2).join('_').slice(0, -3);
if (confirm('Are you sure you want to delete ' + deletedmodelName + ' model?')) {
const res = await tf.io.removeModel(IDB_URL + name);
console.log(res);
const tx = db.transaction('models_store', 'readwrite');
Expand All @@ -1138,7 +1139,7 @@ async function deleteModel(name) {
if (popups.childElementCount < 2) {
let popupBox = document.createElement('div');
popupBox.classList.add('popup-msg', 'slide-in');
popupBox.innerHTML = `<i class="small material-icons">info</i>` + modelName + ` model deleted successfully`;
popupBox.innerHTML = `<i class="small material-icons">info</i>` + deletedmodelName + ` model deleted successfully`;
popups.insertBefore(popupBox, popups.childNodes[0]);
setTimeout(function() {
popups.removeChild(popups.lastChild);
Expand Down
144 changes: 129 additions & 15 deletions apps/viewer/uicallbacks.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
// UI and Core callback and hook
// all functions help the UI and Core part together that makes workflows.
/*
UI and Core callback and hook
all functions help the UI and Core part together that makes workflows.
*/

// UI callback functions list

/* UI callback functions list */
/**
* Toggles side-by-side viewer
* @param {Object} opt
*/
function toggleViewerMode(opt) {
const canvasDraw = $CAMIC.viewer.canvasDrawInstance;
if (opt.checked) {
// turn off preset label
toolsOff();
Expand Down Expand Up @@ -35,7 +41,10 @@ function toggleViewerMode(opt) {
}
}

// mainfest
/**
* Finds the slide for minor-viewer in side-by-side viewer
* @param {Object} size object with height and width
*/
function multSelectorAction(size) {
// hidden main viewer's bottom right control and get navigator
$CAMIC.viewer.controls.bottomright.style.display = 'none';
Expand Down Expand Up @@ -155,6 +164,9 @@ function synchornicView2(data) {
active2 = false;
}

/**
* Opens the side-by-side secondary viewer
*/
function openSecondaryViewer() {
// ui changed
const main = document.getElementById('main_viewer');
Expand All @@ -177,6 +189,9 @@ function openSecondaryViewer() {
}, 100);
}

/**
* Closes the side-by-side secondary viewer
*/
function closeSecondaryViewer() {
// ui changed
const main = document.getElementById('main_viewer');
Expand Down Expand Up @@ -208,15 +223,21 @@ function closeSecondaryViewer() {
$UI.layersViewerMinor.setting.data.forEach((d) => delete d.layer);
}

// side menu close callback
/**
* side menu toggle callback, called from layerManager and annotation side menu
* @param {Object} opt
*/
function toggleSideMenu(opt) {
if (!opt.isOpen) {
const id = opt.target.id.split('_')[1];
$UI.toolbar.changeMainToolStatus(id, false);
}
}

// go home callback
/**
* Home callback for redirecting to table page
* @param {Object} data
*/
function goHome(data) {
redirect($D.pages.home, `GO Home Page`, 0);
}
Expand Down Expand Up @@ -350,6 +371,9 @@ function presetLabelOff() {
}
}

/**
* utility function for switching off given tool
*/
function toolsOff() {
switch ($CAMIC.status) {
case 'magnifier':
Expand Down Expand Up @@ -531,6 +555,10 @@ function brushOff() {
}

// --- Measurement Tool ---//
/**
* Callback measurement tool to toggle measurement tool
* @param {Object} data
*/
function toggleMeasurement(data) {
if (!$CAMIC.viewer.measureInstance) {
console.warn('No Measurement Tool');
Expand Down Expand Up @@ -560,6 +588,9 @@ function toggleMeasurement(data) {
}
}

/**
* switches measuring tool on, called from toggleMeasurement
*/
function measurementOn() {
if (!$CAMIC.viewer.measureInstance) return;
$CAMIC.viewer.measureInstance.on();
Expand All @@ -568,6 +599,9 @@ function measurementOn() {
$CAMIC.status = 'measure';
}

/**
* switches measuring tool off, called from toggleMeasurement
*/
function measurementOff() {
if (!$CAMIC.viewer.measureInstance) return;
$CAMIC.viewer.measureInstance.off();
Expand All @@ -576,7 +610,11 @@ function measurementOff() {
$CAMIC.status = null;
}

// --- toggle magnifier callback ---//
// --- Magnifier tool ---//
/**
* Callback magnifier tool to toggle measurement tool
* @param {Object} data
*/
function toggleMagnifier(data) {
if (data.checked) {
if ($CAMIC.status == 'magnifier') {
Expand Down Expand Up @@ -610,6 +648,9 @@ function toggleMagnifier(data) {
}
}

/**
* switches magnifier tool on, called from toggleMagnifier
*/
function magnifierOn(factor = 1, x = 0, y = 0) {
if (!$UI.spyglass) return;
$UI.spyglass.factor = factor;
Expand All @@ -619,6 +660,9 @@ function magnifierOn(factor = 1, x = 0, y = 0) {
$CAMIC.status = 'magnifier';
}

/**
* switches magnifier tool off, called from toggleMagnifier
*/
function magnifierOff() {
if (!$UI.spyglass) return;
$UI.spyglass.close();
Expand All @@ -634,12 +678,19 @@ function imageDownload(data) {
console.log(data);
}

// share url
/**
* share url callback
* @param {Object} data
*/
function shareURL(data) {
const URL = StatesHelper.getCurrentStatesURL(true);
window.prompt('Share this link', URL);
}
// main menu changed

/**
* main menu changed callback, toggles Layer Manager side app
* @param {Object} data
*/
function mainMenuChange(data) {
if (data.apps) {
$UI.appsSideMenu.open();
Expand Down Expand Up @@ -669,6 +720,11 @@ function convertHumanAnnotationToPopupBody(notes) {
return rs;
}

/**
* Deletes the annotation with given data
* called from removeCallback
* @param {Object} data
*/
function annoDelete(data) {
if (!data.id) return;
const annotationData = $D.overlayers.find(
Expand Down Expand Up @@ -717,6 +773,11 @@ function annoDelete(data) {
// console.log('delete end');
});
}

/**
* Callback for deleting annotation
* @param {Object} data
*/
function deleteCallback(data) {
// remove overlay
$D.overlayers.splice(data.index, 1);
Expand Down Expand Up @@ -932,7 +993,17 @@ function saveBrushLabel(isOff) {

function savePresetLabel() {
if ($CAMIC.viewer.canvasDrawInstance._path_index === 0) {
alert('No Markup On Annotation. Try holding and dragging.');
// toast
let popups = document.getElementById('popup-container');
if (popups.childElementCount < 2) {
let popupBox = document.createElement('div');
popupBox.classList.add('popup-msg', 'slide-in');
popupBox.innerHTML = `<i class="small material-icons">info</i> No Markup On Annotation. Try holding and dragging.`;
popups.insertBefore(popupBox, popups.childNodes[0]);
setTimeout(function() {
popups.removeChild(popups.lastChild);
}, 3000);
}
return;
}
// save
Expand Down Expand Up @@ -1100,6 +1171,11 @@ function saveLabelAnnotCallback() {
// $CAMIC.status = null;
}

/**
* Callback for saving annotations
* called from saveAnnotation
* @param {Object} data
*/
function annoCallback(data) {
// is form ok?
const noteData = $UI.annotOptPanel._form_.value;
Expand All @@ -1121,7 +1197,17 @@ function annoCallback(data) {
// has Path?

if ($CAMIC.viewer.canvasDrawInstance._path_index === 0) {
alert('No Markup On Annotation. Try holding and dragging.');
// toast
let popups = document.getElementById('popup-container');
if (popups.childElementCount < 2) {
let popupBox = document.createElement('div');
popupBox.classList.add('popup-msg', 'slide-in');
popupBox.innerHTML = `<i class="small material-icons">info</i> No Markup On Annotation. Try holding and dragging.`;
popups.insertBefore(popupBox, popups.childNodes[0]);
setTimeout(function() {
popups.removeChild(popups.lastChild);
}, 3000);
}
return;
}

Expand Down Expand Up @@ -1244,7 +1330,10 @@ function algoCallback(data) {
console.log(data);
}

// overlayer manager callback function for show or hide
/**
* overlayer manager callback function for show or hide
* @param {Object} data
*/
async function callback(data) {
const viewerName = this.toString();
let camic = null;
Expand Down Expand Up @@ -1525,7 +1614,10 @@ function loadAnnotationById(camic, layerData, callback) {
});
}

// delete annotation from layer manager view
/**
* Deletes annotation from layer manager view
* @param {Object} layerData
*/
function removeCallback(layerData) {
item = layerData.item;
if (item.typeName !== 'human') return;
Expand All @@ -1547,6 +1639,10 @@ function removeCallback(layerData) {
}
}

/**
* Callback for locating annotation on image
* @param {Object} layerData
*/
function locationCallback(layerData) {
item = layerData.item;
if (item.typeName !== 'human' || item.data == null) return;
Expand All @@ -1563,6 +1659,11 @@ function locationCallback(layerData) {
}
}

/**
* Locates annotation on the image
* called from locationCallback
* @param {Object} bound
*/
function locateAnnotation(bound) {
// if(){

Expand Down Expand Up @@ -1609,6 +1710,9 @@ function algoRun() {
$UI.message.add('Algo is running...');
}

/**
* Saves annotation after drawing is stopped
*/
function saveAnnotation() {
annoCallback.call(null, {
id:
Expand Down Expand Up @@ -1690,7 +1794,17 @@ function hostedHeatmap() {
}
// get heatmap data
if (!list.length) {
alert(`${slideName} Has No Heatmap Data.`);
// No heatmap data
let popups = document.getElementById('popup-container');
if (popups.childElementCount < 2) {
let popupBox = document.createElement('div');
popupBox.classList.add('popup-msg', 'slide-in');
popupBox.innerHTML = `<i class="small material-icons">info</i> ${slideName} Has No Heatmap Data.`;
popups.insertBefore(popupBox, popups.childNodes[0]);
setTimeout(function() {
popups.removeChild(popups.lastChild);
}, 3000);
}
return;
}
createHeatMapList(list);
Expand Down