diff --git a/.github/workflows/axe-a11y-check.yml b/.github/workflows/axe-a11y-check.yml index d7e6123f2..7c6058049 100644 --- a/.github/workflows/axe-a11y-check.yml +++ b/.github/workflows/axe-a11y-check.yml @@ -24,8 +24,10 @@ jobs: - run: npm install -g http-server - run: npm run build --if-present - run: http-server -s & + - name: Install specific version of ChromeDriver + run: npm install -g chromedriver@125 - name: Run axe run: | npm install -g @axe-core/cli sleep 90 - axe http://127.0.0.1:8080 --exit + axe http://127.0.0.1:8080 --chromedriver-path $(npm root -g)/chromedriver/bin/chromedriver --exit diff --git a/README.md b/README.md index a8bc67900..e0e54d650 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ The toolbar is in the top-left of the main content window. Use the toolbar butto | ![](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/camera_enhance/v4/24px.svg) | Slide Capture | Click to take a screenshot of the slide and annotations on it. | | ![](https://fonts.gstatic.com/s/i/materialicons/help/v4/24px.svg) | Tutorial | Click to view a guided tour of the viewer tools. | - +| ![](https://fonts.gstatic.com/s/i/materialicons/auto_graph/v4/24px.svg) | Visualization | Click to view visualizations of annotations. | ## Toolbar Shortcuts diff --git a/apps/Info.html b/apps/Info.html index 7f964f635..800a10d72 100644 --- a/apps/Info.html +++ b/apps/Info.html @@ -14,7 +14,7 @@ - CaMicroscope Data Table + caMicroscope - Information Dashboard @@ -75,7 +75,7 @@

caMicroscope

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

- +
diff --git a/apps/common.css b/apps/common.css index 4ac3be01d..7753854dd 100644 --- a/apps/common.css +++ b/apps/common.css @@ -29,6 +29,10 @@ color: whitesmoke; } +.report-link { + color: #e5c1ea; +} + .company-name { color: #e5c1ea; } diff --git a/apps/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html index 2cd832a60..de1973555 100644 --- a/apps/dev-workbench/workbench.html +++ b/apps/dev-workbench/workbench.html @@ -87,13 +87,13 @@ class="nav-item dropdown" > - Options
diff --git a/apps/info.css b/apps/info.css index 30bc35dc7..a90716473 100644 --- a/apps/info.css +++ b/apps/info.css @@ -18,7 +18,7 @@ footer{ background-color: #343a40 !important; } .bg-info { - background-color: #17a2b8!important; + background-color: #17a2b8 !important; } .page-container{ height:100vh; diff --git a/apps/landing/landing.html b/apps/landing/landing.html index 9507e142e..25921d9fd 100644 --- a/apps/landing/landing.html +++ b/apps/landing/landing.html @@ -1,7 +1,7 @@ - caMicroscope + caMicroscope - Home @@ -62,11 +62,9 @@
-
-
-

caMicroscope

-
-
+
+

caMicroscope

+
@@ -81,17 +79,17 @@

caMicroscope

-

caMicroscope

+

caMicroscope

Use camicroscope to explore and mark slides uploaded. If this is a restricted access deployment, you will be prompted to log in here.

- More + More
-

Documentation

+

Documentation

Read documentation for using and developing caMicroscope.

- More + More
diff --git a/apps/signup/signup.js b/apps/signup/signup.js index ddf6d1348..0c388e97a 100644 --- a/apps/signup/signup.js +++ b/apps/signup/signup.js @@ -14,7 +14,7 @@ function addUser(){ if (email === '') { emailErr.textContent = 'Please enter your email'; } else if (!(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email))) { - emailErr.textContent = 'Please enter a valid email'; + emailErr.textContent = 'Please enter a valid email address. For example: name@example.com'; } @@ -119,4 +119,4 @@ $(window).on('load', function() { function loginPage(){ const url = "/login.html"; window.location.href = url; -} \ No newline at end of file +} diff --git a/apps/table.html b/apps/table.html index 8bc04ce3f..f1884c0dd 100644 --- a/apps/table.html +++ b/apps/table.html @@ -25,7 +25,7 @@ - CaMicroscope Data Table + caMicroscope - Slides Data Table @@ -109,7 +109,7 @@

caMicroscope

- @@ -132,7 +132,7 @@

caMicroscope

@@ -210,12 +210,12 @@
@@ -262,7 +262,7 @@

Steps for uploading.

+ value="Finish Upload" onclick="validateForm(finishUpload)">Preview Slide
diff --git a/apps/table.js b/apps/table.js index a84ee48aa..d85490cd9 100644 --- a/apps/table.js +++ b/apps/table.js @@ -315,7 +315,7 @@ function initialize() { const btn = `
- ${slideDeleteRequests[counter] && slideDeleteRequests[counter].slideDetails && @@ -323,12 +323,12 @@ function initialize() { ` ${slideDeleteRequests.find((o) => o.requestedBy === sanitize(getUserId())) ? ` - ` : ` - @@ -336,7 +336,7 @@ function initialize() { } ` : ` - ` diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index de65438f5..4d47a06c6 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -97,15 +97,26 @@ function layersLoader() { console.error(error); }); } + + // visualization + function visualization() { + $CAMIC.store.findMark($D.params.slideId).then(function(layers) { + $D.visualizations = [...layers.map(covertToVisualization)]; + visualizationLayerItems($D.visualizations); + }).catch(function(error) { + $UI.message.addError('Loading visualizations is Error'); + console.error(error); + }); + } + var checkCoreIsReady = setInterval(function() { - if ($UI.layersViewer && $UI.layersViewerMinor) { + if ($UI.layersViewer && $UI.layersViewerMinor && $UI.visualizationViewer) { clearInterval(checkCoreIsReady); loadingHumanOverlayers(); loadingRulerOverlayers(); loadingHeatmapOverlayers(); loadingComputerOverlayers(); + visualization(); } }, 500); } - - diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 94f89c2b0..e297a591d 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -137,7 +137,6 @@ function initialize() { } }, 100); } - // setting core functionalities function initCore() { // start initial @@ -222,7 +221,6 @@ function initCore() { } // for support QUIP 2.0 const data = Array.isArray(e.data) ? e.data[e.data.selected] : e.data; - const type = data.provenance.analysis.source; let body; let attributes; @@ -258,11 +256,21 @@ function initCore() { if (area) attributes.area = area; if (circumference) attributes.circumference = circumference; - const states = StatesHelper.getCurrentStates(isImageCoordinate = true); - if (!states) return; - attributes.X = states.x; - attributes.Y = states.y; - attributes.zoom = states.z; + + // add center position and zoom + if (data.geometries.features[data.selected].viewerStates != null || + data.geometries.features[data.selected].viewerStates != undefined) { + const decimalPlaces = 3; + attributes.X = data.geometries.features[data.selected].viewerStates.x, + attributes.Y = data.geometries.features[data.selected].viewerStates.y, + attributes.zoom = roundTo(data.geometries.features[data.selected].viewerStates.z, decimalPlaces); + } + // Rounds a number to the specified number of decimal places. + function roundTo(num, decimalPlaces) { + const factor = 10 ** decimalPlaces; + return Math.round(num * factor) / factor; + } + body = convertHumanAnnotationToPopupBody(attributes); if ( @@ -438,6 +446,7 @@ async function initUIcomponents() { title: 'Home', type: 'btn', // btn/check/dropdown value: 'home', + ariaLabel: 'Home', callback: goHome, }); } @@ -447,6 +456,7 @@ async function initUIcomponents() { icon: 'create', // material icons' name title: 'Draw', type: 'multistates', + ariaLabel: 'Draw', callback: draw, }); @@ -456,6 +466,7 @@ async function initUIcomponents() { title: 'Preset Labels', type: 'check', value: 'prelabels', + ariaLabel: 'Preset labels', callback: drawLabel, }); @@ -466,6 +477,7 @@ async function initUIcomponents() { title: 'Magnifier', type: 'dropdown', value: 'magn', + ariaLabel: 'Magnifier', dropdownList: [ { value: 0.5, @@ -491,17 +503,20 @@ async function initUIcomponents() { title: 'Measurement', type: 'dropdown', value: 'measure', + ariaLabel: 'Measurement', dropdownList: [ { value: 'straight', title: 'straight', icon: 'straighten', + ariaLabel: 'straight', checked: true, }, { value: 'coordinate', title: 'coordinate', icon: 'square_foot', + ariaLabel: 'coordinate', }, ], callback: toggleMeasurement, @@ -514,6 +529,7 @@ async function initUIcomponents() { title: 'Download Selection', type: 'check', value: 'download', + ariaLabel: 'Download selection', callback: toggleDownloadSelection, }); // enhance @@ -523,27 +539,32 @@ async function initUIcomponents() { title: 'Enhance', type: 'dropdown', value: 'Enhance', + ariaLabel: 'Enhance', dropdownList: [ { value: 'Histogram Eq', title: 'Histogram Equalization', icon: 'leaderboard', + ariaLabel: 'Histogram equalization', checked: true, }, { value: 'Edge', title: 'Edge', icon: 'show_chart', + ariaLabel: 'Edge', }, { value: 'Sharpen', title: 'Sharpen', icon: 'change_history', + ariaLabel: 'Sharpen', }, { value: 'Custom', title: 'Custom', icon: 'api', + ariaLabel: 'Custom', }, ], callback: enhance, @@ -556,6 +577,7 @@ async function initUIcomponents() { title: 'Share View', type: 'btn', value: 'share', + ariaLabel: 'Share', callback: shareURL, }); } @@ -566,6 +588,7 @@ async function initUIcomponents() { title: 'Side By Side Viewer', value: 'dbviewers', type: 'check', + ariaLabel: 'Side by side viewer', callback: toggleViewerMode, }); // heatmap @@ -575,6 +598,7 @@ async function initUIcomponents() { title: 'Heat Map', value: 'heatmap', type: 'btn', + ariaLabel: 'Heat map', callback: openHeatmap, }); subToolsOpt.push({ @@ -583,6 +607,7 @@ async function initUIcomponents() { title: 'Labeling', value: 'labeling', type: 'btn', + ariaLabel: 'Labeling', callback: function() { window.location.href = `../labeling/labeling.html${window.location.search}`; }, @@ -593,6 +618,7 @@ async function initUIcomponents() { type: 'btn', value: 'rect', title: 'Segment', + ariaLabel: 'Segment', callback: function() { if (window.location.search.length > 0) { window.location.href = @@ -608,6 +634,7 @@ async function initUIcomponents() { type: 'btn', value: 'rect', title: 'Predict', + ariaLabel: 'Predict', callback: function() { if (window.location.search.length > 0) { window.location.href = '../model/model.html' + window.location.search; @@ -626,6 +653,7 @@ async function initUIcomponents() { title: 'Download Marks', type: 'btn', value: 'download', + ariaLabel: 'Download marks', callback: Store.prototype.DownloadMarksToFile, }); subToolsOpt.push({ @@ -634,6 +662,7 @@ async function initUIcomponents() { title: 'Load Marks', type: 'btn', value: 'upload', + ariaLabel: 'Load marks', callback: Store.prototype.LoadMarksFromFile, }); } @@ -647,6 +676,7 @@ async function initUIcomponents() { title: 'has reviewed', type: 'btn', value: 'review', + ariaLabel: 'Has reviewed', callback: updateSlideView, }); } @@ -657,14 +687,27 @@ async function initUIcomponents() { title: 'Slide Capture', type: 'btn', value: 'slCap', + ariaLabel: 'Slide capture', callback: captureSlide, }); + + // visualization panel + subToolsOpt.push({ + name: 'visualization', + icon: 'auto_graph', // material icons' name + title: 'visualization', + value: 'visualization', + type: 'btn', + callback: visualization, + }); + subToolsOpt.push({ name: 'tutorial', icon: 'help', title: 'Tutorial', value: 'tutorial', type: 'btn', + ariaLabel: 'Tutorial', callback: function() { tour.init(); tour.start(true); @@ -732,6 +775,15 @@ async function initUIcomponents() { $UI.layersSideMenu.addContent(loading); // TODO add layer viewer + $UI.visualizationSideMenu = new SideMenu({ + id: 'visualization_panel', + width: 250, + contentPadding: 5, + position: 'right', + height: '45vh', + // , isOpen:true + callback: toggleSideMenu, + }); /* annotation popup */ $UI.annotPopup = new PopupPanel({ @@ -841,7 +893,6 @@ async function initUIcomponents() { // const minorViewerData = $D.overlayers.map((d) => { // return {item: d, isShow: false}; // }); - $UI.AssistantViewer = new Assistant({ id: 'ml_assistant', viewer: $CAMIC.viewer, @@ -873,6 +924,21 @@ async function initUIcomponents() { rootCallback.bind('minor'), ); + $UI.visualizationViewer = createVisualizationViewer( + 'overvisuzalization', + null, + callback.bind('main'), + rootCallback.bind('main'), + ); + + // // create UI and set data - minor + // $UI.visualizationViewerMinor = createVisualizationViewer( + // 'overvisuzalizationMinor', + // null, + // callback.bind('minor'), + // rootCallback.bind('minor'), + // ); + // TODO move to add layers // if ($D.params.states && $D.params.states.l) { // $D.params.states.l.forEach((id) => @@ -899,13 +965,43 @@ async function initUIcomponents() { // console.log(e); }, }); + + $UI.visualizationList = new CollapsibleList({ + id: 'visualizationlist', + list: [ + { + id: 'visualizationlist', + title: 'Human:Draw Annotation', + content: 'No Template Loaded', // $UI.annotOptPanel.elt + // isExpand:true + }, + // { + // id: 'heatMap', + // title: 'HeatMap', + // content: 'No Template Loaded', // $UI.algOptPanel.elt, + // }, + ], + changeCallBack: function(e) { + // console.log(e); + }, + }); $UI.layersSideMenu.clearContent(); // add to layers side menu const title = document.createElement('div'); title.classList.add('item_head'); title.textContent = 'Layers Manager'; - $UI.layersSideMenu.addContent(title); + // add to log side menu + const titleVisualization = document.createElement('div'); + titleVisualization.classList.add('item_head'); + titleVisualization.textContent = 'Visualization Panel'; + // add CSS + titleVisualization.style.color = '#365f9c'; + titleVisualization.style.fontSize = '20px'; + titleVisualization.style.backgroundColor = 'rgba(220, 220, 220, 1)'; + titleVisualization.style.marginTop = '28px'; + + $UI.visualizationSideMenu.addContent(titleVisualization); // loading status $UI.loadStatus = document.createElement('div'); @@ -945,6 +1041,17 @@ async function initUIcomponents() { $UI.layersList.elt.parentNode.removeChild($UI.layersList.elt); closeMinorControlPanel(); $UI.layersSideMenu.addContent($UI.layersList.elt); + + // visualization + $UI.visualizationList.clearContent('visualizationlist'); + $UI.visualizationList.addContent('visualizationlist', $UI.visualizationViewer.elt); + // TODO Heatmap + // $UI.visualizationList.clearContent('heatMap'); + // $UI.visualizationList.addContent('heatMap', $UI.visualizationViewerMinor.elt); + + $UI.visualizationList.elt.parentNode.removeChild($UI.visualizationList.elt); + closeMinorControlPanel(); + $UI.visualizationSideMenu.addContent($UI.visualizationList.elt); } }, 300); @@ -1311,6 +1418,18 @@ function createLayerViewer(id, viewerData, callback, rootCallback) { return layersViewer; } +function createVisualizationViewer(id, viewerData, callback, rootCallback) { + const visualizationViewer = new VisualizationViewer({ + id: id, + data: viewerData, + removeCallback: removeCallback, + locationCallback: locationCallback, + callback: callback, + rootCallback: rootCallback, + }); + visualizationViewer.elt.parentNode.removeChild(visualizationViewer.elt); + return visualizationViewer; +} // create lay panel for side-by-side control function createLayPanelControl() { $UI.layCtrlbar = document.createElement('div'); @@ -1470,6 +1589,7 @@ function addHumanLayerItems() { $UI.layersViewerMinor.addHumanItems(minorViewerItems); } + function openLoadStatus(text) { const txt = $UI.loadStatus.querySelector('.text'); txt.textContent = `Loading ${text}`; @@ -1514,6 +1634,51 @@ function addHeatmapLayerItems(data) { $UI.layersViewerMinor.addItems(minorViewerData, 'heatmap'); } +function visualizationLayerItems(data) { + var initialZommingData = []; + + // Get initial data + $D.visualizations.map((d) => { + d.geometries.features.map((ditailData)=>{ + if (ditailData.viewerStates) { + initialZommingData.push(roundToSecondDecimalPlace(ditailData.viewerStates.z)); + } + }); + }); + let result = countOccurrences(initialZommingData); + + $UI.visualizationViewer.visualization('myChart', result); +} + +// Function to round to decimal places +function roundToSecondDecimalPlace(num) { + return Math.round(num * 100) / 100; +} + +function countOccurrences(arr) { + // Create objects for counting + let countMap = {}; + + // Count each element in the array + arr.forEach(function(value) { + if (countMap[value] === undefined) { + countMap[value] = 1; + } else { + countMap[value]++; + } + }); + + // Convert the result to a 2-dimensional array + let result = []; + for (let key in countMap) { + if (countMap.hasOwnProperty(key)) { + result.push([parseFloat(key), countMap[key]]); + } + }; + + return result; +} + // const mainViewerData = $D.overlayers.map((d) => { // const isShow = // $D.params.states && diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index 69a7b5e8f..9b42af641 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -323,6 +323,9 @@ function toolsOff() { case 'download_selection': downloadSelectionOff(); break; + case 'log': + $UI.visualizationSideMenu.close(); + break; } } @@ -891,6 +894,9 @@ function annoCallback(data) { } noteData.notes = resultString; + // get center position and zoom + let viewerStates = StatesHelper.getCurrentStates(true); + // save // provenance Loading.open($UI.annotOptPanel.elt, 'Saving Annotation...'); @@ -922,7 +928,7 @@ function annoCallback(data) { $CAMIC.store .addMark(annotJson) .then((data) => { - // server error + // server error if (data.error) { $UI.message.addError(`${data.text}:${data.url}`); Loading.close(); @@ -1474,6 +1480,7 @@ function loadAnnotationById(camic, layerData, parentType, callback) { } if (callback) callback.call(layerData); + return data; }) .catch((e) => { console.error(e); @@ -2727,6 +2734,19 @@ async function captureSlide() { $UI.layersSideMenu.close(); } +/* Log annotaiton */ +let isSidemenuOpen = true; + +function visualization() { + if (isSidemenuOpen == true) { + $UI.visualizationSideMenu.open(); + isSidemenuOpen = false; + } else { + $UI.visualizationSideMenu.close(); + isSidemenuOpen = true; + }; +} + function downloadSlideCapture(combiningCanvas) { const imageData = combiningCanvas.toDataURL('image/jpeg'); const downloadLink = document.createElement('a'); diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index 72b3fa822..6756f1d79 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -11,6 +11,8 @@ + + + + @@ -409,16 +423,24 @@
+ +
+
+
+
+ +
+
@@ -427,7 +449,6 @@ - diff --git a/common/util.js b/common/util.js index 087d17b4c..6ce662ebb 100644 --- a/common/util.js +++ b/common/util.js @@ -369,11 +369,11 @@ function getUrlVars() { return true; }, getOwnPropertyDescriptor(target, prop) { - return { configurable: true, enumerable: true }; + return {configurable: true, enumerable: true}; }, ownKeys: function(target) { - return Reflect.ownKeys(state) - } + return Reflect.ownKeys(state); + }, }); } /** @@ -418,11 +418,8 @@ function VieweportFeaturesToImageFeatures(viewer, geometries) { feature.bound.coordinates =[ Math.round(feature.bound.coordinates[0] * imgWidth), Math.round(feature.bound.coordinates[1] * imgHeight)]; - - - if (feature.geometry.type=='Circle') { - feature.geometry.radius = Math.round(feature.geometry.radius * imgWidth) + feature.geometry.radius = Math.round(feature.geometry.radius * imgWidth); } if (feature.geometry.type=='Ellipse') { feature.geometry.radius = [Math.round(feature.geometry.radius[0] * imgWidth), Math.round(feature.geometry.radius[1] * imgHeight)]; @@ -472,6 +469,11 @@ function covertToViewportFeature(width, height, og) { og.geometry.type; feature = { type: 'Feature', + viewerStates: { + x: og.viewerStates.x, + y: og.viewerStates.y, + z: og.viewerStates.z, + }, properties: { style: {}, area: null, @@ -530,7 +532,7 @@ function covertToHumanLayer(data) { const id = item.analysis.execution_id; const name = item.analysis.name || item.analysis.execution_id; - if (!item.shape) item.shape = ["Polygon"]; + if (!item.shape) item.shape = ['Polygon']; if (item.analysis.type&&item.analysis.type=='label') { // preset label return { id: id, @@ -566,7 +568,7 @@ function covertToRulerLayer(data) { name: data.name, typeId: data.type, typeName: data.source, - shape: "Polygon", + shape: 'Polygon', creator: data.creator, data: null, }; @@ -587,6 +589,42 @@ function covertToCumputerLayer(data) { }; } + +function covertToVisualization(data) { + const typeName = data.provenance.analysis.source; + const id = data.provenance.analysis.execution_id; + const name = data.provenance.analysis.name || data.provenance.analysis.execution_id; + const isGrid = data.provenance.analysis.isGrid || false; + const geometries = data.geometries; + + if (data.provenance.analysis.type&&data.provenance.analysis.type=='label') { // preset label + return { + id: id, + name: name, + typeId: typeName, + typeName: typeName, + creator: data.creator, + isGrid: isGrid, + label: { + id: data.provenance.analysis.labelled, + name: data.provenance.analysis.name, + }, + geometries: geometries, + data: null, + }; + } else { + return { + id: id, + name: name, + typeId: typeName, + typeName: typeName, + creator: data.creator, + isGrid: isGrid, + geometries: geometries, + data: null, + }; + } +} function eventFire(el, etype) { if (el.fireEvent) { el.fireEvent('on' + etype); @@ -649,7 +687,7 @@ function areaCircumferenceToGrids(points, size) { for (let centerX = topLeftCenter[0]; centerX < maxX; centerX += size[0]) { for (let centerY = topLeftCenter[1]; centerY < maxY; centerY += size[1]) { if (isPointInsidePolygon([centerX, centerY], points)) { - grids.push(getTopLeft([centerX, centerY], size)) + grids.push(getTopLeft([centerX, centerY], size)); } } } @@ -667,20 +705,20 @@ function closestPointOnLineSegment(px, py, x1, y1, x2, y2) { const dx = x2 - x1; const dy = y2 - y1; const t = ((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy); - + if (t < 0) { - return { x: x1, y: y1 }; + return {x: x1, y: y1}; } else if (t > 1) { - return { x: x2, y: y2 }; + return {x: x2, y: y2}; } else { - return { x: x1 + t * dx, y: y1 + t * dy }; + return {x: x1 + t * dx, y: y1 + t * dy}; } } function closestPointOnPolygon(polygon, px, py) { let closestDistance = Infinity; let closestIndex = null; - + // Find the closest point on each edge for (let i = 0; i < polygon.length; i++) { const nextIndex = (i + 1) % polygon.length; @@ -688,13 +726,13 @@ function closestPointOnPolygon(polygon, px, py) { const edgeEnd = polygon[nextIndex]; const closest = closestPointOnLineSegment(px, py, edgeStart[0], edgeStart[1], edgeEnd[0], edgeEnd[1]); const d = distance(px, py, closest.x, closest.y); - + if (d < closestDistance) { closestDistance = d; closestIndex = i; } } - + return closestIndex; } @@ -715,19 +753,19 @@ function isPointInsidePolygon(point, polygon) { let inside = false; for (let i = 0; i < n; i++) { - const [x1, y1] = polygon[i]; - const [x2, y2] = polygon[(i + 1) % n]; + const [x1, y1] = polygon[i]; + const [x2, y2] = polygon[(i + 1) % n]; - if (y === y1 && y1 === y2 && (x1 <= x && x <= x2 || x2 <= x && x <= x1)) { - return true; - } + if (y === y1 && y1 === y2 && (x1 <= x && x <= x2 || x2 <= x && x <= x1)) { + return true; + } - if ((y1 < y && y < y2 || y2 < y && y < y1) && x < Math.max(x1, x2)) { - const intersectionX = (y - y1) * (x2 - x1) / (y2 - y1) + x1; - if (x < intersectionX) { - inside = !inside; - } + if ((y1 < y && y < y2 || y2 < y && y < y1) && x < Math.max(x1, x2)) { + const intersectionX = (y - y1) * (x2 - x1) / (y2 - y1) + x1; + if (x < intersectionX) { + inside = !inside; } + } } return inside; @@ -1092,7 +1130,13 @@ class Tracker { z: image_zoom, time: new Date(), }); - } + + return { + x: Math.round(x), + y: Math.round(y), + z: image_zoom, + }; + }; } diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js index b0b69a891..798778eac 100644 --- a/components/toolbar/toolbar.js +++ b/components/toolbar/toolbar.js @@ -84,12 +84,14 @@ function CaToolbar(options) { title: 'Applications', type: 'check', value: 'apps', + ariaLabel: 'Applications', }, { icon: 'view_list', title: 'Layers', type: 'check', value: 'layers', + ariaLabel: 'Layers', }, ], }; @@ -211,6 +213,7 @@ CaToolbar.prototype.__createCheck = function(options) { icon.classList.add('material-icons'); icon.classList.add('md-24'); icon.textContent = options.icon; + if (options.ariaLabel) icon.ariaLabel = options.ariaLabel; icon.htmlFor = id; if (options.title) { tippy(icon, { @@ -273,6 +276,7 @@ CaToolbar.prototype.__createRadio = function(options) { if (options.icon) { icon.classList.add('material-icons'); icon.classList.add('md-24'); + if (options.ariaLabel) icon.ariaLabel = options.ariaLabel; icon.textContent = options.icon; } else { let _fitContent = 'fit-content'; @@ -330,6 +334,7 @@ CaToolbar.prototype.__createMultiStateBtns = function(options) { icon.id = randomId(); // create a timestamp id icon.classList.add('material-icons'); icon.classList.add('md-24'); + if (options.ariaLabel) icon.ariaLabel = options.ariaLabel; icon.classList.add(0); icon.dataset.state = 0; icon.textContent = options.icon; @@ -383,6 +388,7 @@ CaToolbar.prototype.__createMultiDropDown = function(options) { const icon = document.createElement('label'); icon.classList.add('material-icons'); icon.classList.add('md-24'); + if (options.ariaLabel) icon.ariaLabel = options.ariaLabel; icon.textContent = options.icon; icon.htmlFor = id; if (options.title) { @@ -510,6 +516,7 @@ CaToolbar.prototype.__createDropDown = function(options) { const icon = document.createElement('label'); icon.classList.add('material-icons'); icon.classList.add('md-24'); + if (options.ariaLabel) icon.ariaLabel = options.ariaLabel; icon.textContent = options.icon; icon.htmlFor = id; if (options.title) { diff --git a/components/visualizationviewer/visualiationviewer.js b/components/visualizationviewer/visualiationviewer.js new file mode 100644 index 000000000..4baf64546 --- /dev/null +++ b/components/visualizationviewer/visualiationviewer.js @@ -0,0 +1,127 @@ +/** + * CaMicroscope Visualization Viewer. A component that shows Visualization Graph of annotation . + * @constructor + * @param {Object} options + * All required and optional settings for instantiating a new instance of a Visualization Graph. +* @param {String} id + * ID for the visualization graph. + * @param {String} result + * result is data for visualization graph. + * + */ +function VisualizationViewer(options) { + this.className = 'VisualizationViewer'; + this.setting = { + // id: doc element + // data: layers dataset + // categoricalData + isSortableView: false, + }; + this.defaultType = ['human']; + // this.defaultType = ['human', 'ruler', 'segmentation', 'heatmap']; + // setting dataset + extend(this.setting, options); + this.elt = document.getElementById(this.setting.id); + if (!this.elt) { + console.error(`${this.className}: No Main Elements...`); + return; + } + this.elt.classList.add('logs_viewer'); + + this.setting.categoricalData = { + // heatmap: { + // item: {id: 'heatmap', name: 'heatmap'}, + // items: [], + // }, + // segmentation: { + // item: {id: 'segmentation', name: 'segmentation'}, + // items: [], + // }, + // ruler: { + // item: {id: 'ruler', name: 'ruler'}, + // items: [], + // }, + human: { + item: {id: 'human', name: 'human'}, + items: [], + }, + }; + + empty(this.elt); + const chartDiv = document.createElement('div'); + chartDiv.classList.add('chartlist'); + chartDiv.style.display = 'block'; + chartDiv.innerHTML = ``; + this.elt.appendChild(chartDiv); +} + + +VisualizationViewer.prototype.visualization = function(id, result) { + const ctx = document.getElementById(id); + const aa = result; + // define data + var data = { + datasets: [{ + label: 'Human:Draw Annotation ', + data: aa.map((item) => ({x: item[0], y: item[1]})), + backgroundColor: 'rgba(75, 192, 192, 1)', + pointRadius: 5, + }], + }; + + // Get the maximum value of the data set and add 1 to the maximum value + var maxYValue = Math.max(...data.datasets[0].data.map((d)=> d.y)) + 1; + + // setting option + var options = { + plugins: { + title: { + display: true, + text: 'Draw Annotation Count vs zooming', + }, + tooltip: { + callbacks: { + label: function(context) { + var xValue = context.raw.x; + var yValue = context.raw.y; + return '(count, zooming) = (' + yValue + ', ' + xValue + ')'; + }, + }, + }, + }, + scales: { + x: { + type: 'linear', + position: 'bottom', + title: { + display: true, + text: 'Zooming', + }, + }, + y: { + beginAtZero: true, // Set vertical axis to start from 0 + title: { + display: true, + text: 'Draw Annotation Count', + }, + ticks: { + stepSize: 1, // Set the step size displayed on the vertical axis to 1 + callback: function(value) { + if (value % 1 === 0) { + return value; + } + }, + }, + max: maxYValue, + }, + }, + }; + + // Create + new Chart(ctx, { + type: 'scatter', + data: data, + options: options, + }); +}; + diff --git a/components/visualizationviewer/visualizationviewer.css b/components/visualizationviewer/visualizationviewer.css new file mode 100644 index 000000000..64093a899 --- /dev/null +++ b/components/visualizationviewer/visualizationviewer.css @@ -0,0 +1,13 @@ +#canvasContainer { + background-color: rgb(255, 253, 253); + display: flex; + justify-content: center; + align-items: center; +} + +#myChart { + background-color: rgb(255, 253, 253); + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/core/Store.js b/core/Store.js index 5beead6fc..94f83ea5b 100644 --- a/core/Store.js +++ b/core/Store.js @@ -840,6 +840,23 @@ class Store { body: JSON.stringify(json), }).then(this.errorHandler); } + /** + * get log by id + ** @param {object} json - the log data + * @return {promise} - promise which resolves with data + **/ + getLog(id) { + const suffix = 'Log/find'; + const url = this.base + suffix; + const query = { + '_id': '65f564d7dd62a90013124d3e', + }; + + return fetch(url + '?' + objToParamStr(query), { + credentials: 'include', + mode: 'cors', + }).then(this.errorHandler).then((x) => this.filterBroken(x, 'log')); + } /** * get a config setting diff --git a/core/extension/openseadragon-canvas-draw-overlay.js b/core/extension/openseadragon-canvas-draw-overlay.js index 1bb203e82..8984c6fe6 100644 --- a/core/extension/openseadragon-canvas-draw-overlay.js +++ b/core/extension/openseadragon-canvas-draw-overlay.js @@ -1023,6 +1023,11 @@ if (this.drawMode == 'point') { this._current_path_ = { type: 'Feature', + viewerStates: { + x: StatesHelper.getCurrentStates(true).x, + y: StatesHelper.getCurrentStates(true).y, + z: StatesHelper.getCurrentStates(true).z + }, properties: { style: {}, }, @@ -1043,6 +1048,11 @@ properties: { style: {}, }, + viewerStates: { + x: StatesHelper.getCurrentStates(true).x, + y: StatesHelper.getCurrentStates(true).y, + z: StatesHelper.getCurrentStates(true).z, + }, geometry: { type: this.drawMode === 'line' || this.drawMode === 'grid' ?