From 164d7f93c0ae239e9cc5b7539866de23f641872f Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 10 Jun 2024 22:26:23 +0900 Subject: [PATCH 01/84] add a blank --- apps/viewer/init.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 0d3158be7..0d063ab43 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -222,6 +222,7 @@ 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; From f8cbeff0335ddbba1f37ac456f3887777416b593 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Thu, 13 Jun 2024 13:52:52 +0100 Subject: [PATCH 02/84] added aria-label to slides/page combo box --- apps/table.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/table.html b/apps/table.html index ae8075125..72b3f1ac3 100644 --- a/apps/table.html +++ b/apps/table.html @@ -109,7 +109,7 @@

caMicroscope

- From 0d906d51c2050e62b4b0d17394b8907e16821430 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Thu, 13 Jun 2024 14:00:29 +0100 Subject: [PATCH 03/84] Changed "Steps for uploading a slide" to ordered list. --- apps/table.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/table.html b/apps/table.html index ae8075125..9b5fa38cf 100644 --- a/apps/table.html +++ b/apps/table.html @@ -210,12 +210,12 @@
From 7bc36ccccd33b04611a31a5276a83ffc90393b03 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Thu, 13 Jun 2024 14:07:13 +0100 Subject: [PATCH 04/84] changed

to

in main section --- apps/landing/landing.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/landing/landing.html b/apps/landing/landing.html index 9507e142e..9ae492641 100644 --- a/apps/landing/landing.html +++ b/apps/landing/landing.html @@ -81,7 +81,7 @@

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
@@ -89,7 +89,7 @@

caMicroscope

-

Documentation

+

Documentation

Read documentation for using and developing caMicroscope.

More
From a1649483dc14a20ddf75cc3eebe939e019b2fe13 Mon Sep 17 00:00:00 2001 From: Birm Date: Fri, 14 Jun 2024 12:27:40 -0400 Subject: [PATCH 05/84] add chrome driver@126 --- .github/workflows/axe-a11y-check.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/axe-a11y-check.yml b/.github/workflows/axe-a11y-check.yml index d7e6123f2..cb2aeb8bb 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@126 - 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 From 29ae63127a0de5e5a2c304f6e2abcc7761c0a3eb Mon Sep 17 00:00:00 2001 From: Birm Date: Fri, 14 Jun 2024 12:40:25 -0400 Subject: [PATCH 06/84] try chromedriver 125 --- .github/workflows/axe-a11y-check.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/axe-a11y-check.yml b/.github/workflows/axe-a11y-check.yml index cb2aeb8bb..7c6058049 100644 --- a/.github/workflows/axe-a11y-check.yml +++ b/.github/workflows/axe-a11y-check.yml @@ -25,7 +25,7 @@ jobs: - run: npm run build --if-present - run: http-server -s & - name: Install specific version of ChromeDriver - run: npm install -g chromedriver@126 + run: npm install -g chromedriver@125 - name: Run axe run: | npm install -g @axe-core/cli From a2d41a98b3606a9134fe844ec222425f607a9729 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sun, 16 Jun 2024 17:28:31 +0900 Subject: [PATCH 07/84] Add log at Toolbar and logAnnotation callback --- README.md | 3 ++- apps/viewer/init.js | 11 ++++++++++- apps/viewer/uicallbacks.js | 5 +++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a8bc67900..3d0315875 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,8 @@ 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. | - +// TODO add Log icon +| ![](https://fonts.gstatic.com/s/i/materialicons/help/v4/24px.svg) | Log | Click to view a list of annotation. | ## Toolbar Shortcuts diff --git a/apps/viewer/init.js b/apps/viewer/init.js index c1ea2ea5a..875c1e1bd 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -224,7 +224,6 @@ function initCore() { const data = Array.isArray(e.data) ? e.data[e.data.selected] : e.data; const type = data.provenance.analysis.source; - let body; let attributes; let warning = null; @@ -669,6 +668,16 @@ async function initUIcomponents() { value: 'slCap', callback: captureSlide, }); + + // log + subToolsOpt.push({ + name: 'log', + icon: 'log', // material icons' name + title: 'LogAnnotaition', + type: 'btn', + callback: logAnnotaiton, + }); + subToolsOpt.push({ name: 'tutorial', icon: 'help', diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index e971fda34..f291ac7f4 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -2736,6 +2736,11 @@ async function captureSlide() { $UI.layersSideMenu.close(); } +/* Log annotaiton */ +function logAnnotaiton() { + alert('OK'); +} + function downloadSlideCapture(combiningCanvas) { const imageData = combiningCanvas.toDataURL('image/jpeg'); const downloadLink = document.createElement('a'); From 4cc89a364f5484244568e5c74ca1db3371374aeb Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Wed, 19 Jun 2024 17:02:06 +0100 Subject: [PATCH 08/84] added aria-label to "more" buttons --- apps/landing/landing.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/landing/landing.html b/apps/landing/landing.html index 9507e142e..d35d2ef6d 100644 --- a/apps/landing/landing.html +++ b/apps/landing/landing.html @@ -83,7 +83,7 @@

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
@@ -91,7 +91,7 @@

caMicroscope

Documentation

Read documentation for using and developing caMicroscope.

- More + More
From d7e88011bd41d1cc745739c157cf2fec0d4d3e0a Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Thu, 20 Jun 2024 15:34:14 +0100 Subject: [PATCH 09/84] changed tag to
Date: Thu, 20 Jun 2024 15:57:23 +0100 Subject: [PATCH 10/84] added aria-label to button element --- apps/dev-workbench/workbench.html | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html index 4c4321f35..de1973555 100644 --- a/apps/dev-workbench/workbench.html +++ b/apps/dev-workbench/workbench.html @@ -166,6 +166,7 @@ " type="button" class="btn btn-primary" + aria-label="Select or create your dataset" > From b38147d02d518f1ed99437fc17aa0992941e5f80 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Fri, 28 Jun 2024 14:44:16 +0100 Subject: [PATCH 11/84] updated landing.html --- apps/landing/landing.html | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/landing/landing.html b/apps/landing/landing.html index eb01cfba4..309db98c5 100644 --- a/apps/landing/landing.html +++ b/apps/landing/landing.html @@ -62,11 +62,9 @@
-
-
-

caMicroscope

-
-
+
+

caMicroscope

+
From fc7ba176fb04a4f61797540481062d9f8f72c384 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sun, 30 Jun 2024 14:11:09 +0900 Subject: [PATCH 12/84] add log side menu --- apps/viewer/init.js | 30 +++++++++++++++++++++++++----- apps/viewer/uicallbacks.js | 29 ++++++++++++++++++++++++++++- apps/viewer/viewer.html | 5 +++++ 3 files changed, 58 insertions(+), 6 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 875c1e1bd..2ac370671 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -136,6 +136,8 @@ function initialize() { layersLoader(); } }, 100); + console.log('$UI', $UI); + console.log('$D', $D); } // setting core functionalities @@ -674,7 +676,7 @@ async function initUIcomponents() { name: 'log', icon: 'log', // material icons' name title: 'LogAnnotaition', - type: 'btn', + type: 'multistates', callback: logAnnotaiton, }); @@ -747,11 +749,29 @@ async function initUIcomponents() { callback: toggleSideMenu, }); - const loading = `
loading layers...
`; - $UI.layersSideMenu.addContent(loading); - // TODO add layer viewer - + $UI.logSideMenu = new SideMenu({ + id: 'log_panel', + width: 250, + contentPadding: 5, + // , isOpen:true + callback: toggleSideMenu, + }); + $UI.logSideMenu.addContent(labelsTitle); + // $D.labels = await $CAMIC.store.getConfigByName('preset_label').then((list)=>list.length==0?null:list[0]); + $UI.logViewer = new LabelsViewer({ + id: 'logmanager', + data: $D.labels?$D.labels.configuration:[], + onAdd: addPresetLabelsHandler, + onEdit: editPresetLabelsHandler, + onRemove: removePresetLabelsHandler, + onSelected: selectedPresetLabelsHandler, + }, + ); + // $UI.logViewer.elt.parentNode.removeChild($UI.logViewer.elt); + // $UI.logSideMenu.addContent($UI.logViewer.elt); + // const loading = `
slideId ${$D.params.slideId}
`; + // $UI.logSideMenu.addContent(loading); /* annotation popup */ $UI.annotPopup = new PopupPanel({ footer: [ diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index f291ac7f4..fb5d158ff 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -2738,7 +2738,34 @@ async function captureSlide() { /* Log annotaiton */ function logAnnotaiton() { - alert('OK'); + alert('OK!!!'); + $UI.logSideMenu.open(); + let log = $CAMIC.store.fetchMark($D.params.slideId); + console.log('$CAMIC.fetchMark', log); + console.log('kotae', log); + let aa = []; + fetchAndSortAnnotations(); + // 注釈を取得する関数 + function fetchAndSortAnnotations(slideId= $D.params.slideId) { + // 注釈を取得するPromiseを返す + $CAMIC.store.fetchMark(slideId).then((annotations) => { + // 注釈が存在する場合にのみソートする + if (annotations && annotations.length > 0) { + // 新しい順にソート + annotations.sort((a, b) => { + return new Date(b.created_date) - new Date(a.created_date); + }); + } + console.log('annotations', annotations[0].states.x); + aa.push(annotations); + const jsonString = JSON.stringify(annotations[0].states.x, null, 2); + const loading = `
${jsonString}
`; + $UI.logSideMenu.addContent(loading); + }).catch((error) => { + console.error('Error fetching annotations:', error); + throw error; + }); + } } function downloadSlideCapture(combiningCanvas) { diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index 72b3fa822..a1ef20569 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -409,6 +409,9 @@
+ +
+
@@ -421,6 +424,8 @@
+ +
From cef9c57a88981ac3390b86fdf5bf23818987adb7 Mon Sep 17 00:00:00 2001 From: Joice-crypto Date: Mon, 1 Jul 2024 22:10:11 -0300 Subject: [PATCH 13/84] Add arial-label on buttons --- apps/table.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/table.js b/apps/table.js index a84ee48aa..7e8a8422b 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() { } ` : ` - ` From e1bafaeb0cfe65e03fb0a8acb17014ef17d94038 Mon Sep 17 00:00:00 2001 From: Joice-crypto Date: Mon, 1 Jul 2024 22:40:13 -0300 Subject: [PATCH 14/84] Add arial-label on buttons --- apps/table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/table.js b/apps/table.js index 7e8a8422b..73a5c89d8 100644 --- a/apps/table.js +++ b/apps/table.js @@ -328,7 +328,7 @@ function initialize() { ` : ` - From 91c09965988bb613f7b10d6489655ebf1e829972 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Wed, 3 Jul 2024 01:35:12 +0900 Subject: [PATCH 15/84] Added opening/closing of side menu/ header --- apps/viewer/init.js | 50 +++++++------------------------------- apps/viewer/uicallbacks.js | 10 ++++++-- 2 files changed, 17 insertions(+), 43 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 2ac370671..751d35145 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -676,7 +676,7 @@ async function initUIcomponents() { name: 'log', icon: 'log', // material icons' name title: 'LogAnnotaition', - type: 'multistates', + type: 'btn', callback: logAnnotaiton, }); @@ -749,29 +749,14 @@ async function initUIcomponents() { callback: toggleSideMenu, }); - $UI.logSideMenu = new SideMenu({ + $UI.logsSideMenu = new SideMenu({ id: 'log_panel', width: 250, contentPadding: 5, // , isOpen:true callback: toggleSideMenu, }); - $UI.logSideMenu.addContent(labelsTitle); - // $D.labels = await $CAMIC.store.getConfigByName('preset_label').then((list)=>list.length==0?null:list[0]); - $UI.logViewer = new LabelsViewer({ - id: 'logmanager', - data: $D.labels?$D.labels.configuration:[], - onAdd: addPresetLabelsHandler, - onEdit: editPresetLabelsHandler, - onRemove: removePresetLabelsHandler, - onSelected: selectedPresetLabelsHandler, - }, - ); - // $UI.logViewer.elt.parentNode.removeChild($UI.logViewer.elt); - // $UI.logSideMenu.addContent($UI.logViewer.elt); - // const loading = `
slideId ${$D.params.slideId}
`; - // $UI.logSideMenu.addContent(loading); /* annotation popup */ $UI.annotPopup = new PopupPanel({ footer: [ @@ -860,27 +845,6 @@ async function initUIcomponents() { data: [], }); - // create control - - // TODO move to add layers - // create main layer viewer items with states - // const mainViewerData = $D.overlayers.map((d) => { - // const isShow = - // $D.params.states && - // $D.params.states.l && - // $D.params.states.l.includes(d.id) ? - // true : - // false; - // return {item: d, isShow: isShow}; - // }); - - - // TODO move to add layers - // create monir layer viewer items - // const minorViewerData = $D.overlayers.map((d) => { - // return {item: d, isShow: false}; - // }); - $UI.AssistantViewer = new Assistant({ id: 'ml_assistant', viewer: $CAMIC.viewer, @@ -911,7 +875,6 @@ async function initUIcomponents() { 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) => @@ -944,7 +907,12 @@ async function initUIcomponents() { title.classList.add('item_head'); title.textContent = 'Layers Manager'; - $UI.layersSideMenu.addContent(title); + // add to layers side menu + const titleLog = document.createElement('div'); + titleLog.classList.add('item_head'); + titleLog.textContent = 'Log Annotations'; + + $UI.logsSideMenu.addContent(titleLog); // loading status $UI.loadStatus = document.createElement('div'); @@ -952,7 +920,7 @@ async function initUIcomponents() { $UI.loadStatus.classList.add('load-status'); $UI.loadStatus.innerHTML = `
cached
Loading
`; $UI.layersSideMenu.addContent($UI.loadStatus); - + // TODO logs // zoom locker control $UI.lockerPanel = document.createElement('div'); $UI.lockerPanel.classList.add('lock_panel'); diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index fb5d158ff..ebacf211b 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -2737,9 +2737,15 @@ async function captureSlide() { } /* Log annotaiton */ +let isSidemenuOpen = true; function logAnnotaiton() { - alert('OK!!!'); - $UI.logSideMenu.open(); + if (isSidemenuOpen == true) { + $UI.logsSideMenu.open(); + isSidemenuOpen = false; + } else { + $UI.logsSideMenu.close(); + isSidemenuOpen = true; + }; let log = $CAMIC.store.fetchMark($D.params.slideId); console.log('$CAMIC.fetchMark', log); console.log('kotae', log); From 3b288504e49f933a7f1f3498cc3cea23caef2365 Mon Sep 17 00:00:00 2001 From: Joice-crypto Date: Tue, 2 Jul 2024 21:34:35 -0300 Subject: [PATCH 16/84] Add aria-label on buttons --- apps/table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/table.js b/apps/table.js index 73a5c89d8..d85490cd9 100644 --- a/apps/table.js +++ b/apps/table.js @@ -336,7 +336,7 @@ function initialize() { } ` : ` - ` From c8e45a405afdd308597e8484699972044c086c6a Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Wed, 3 Jul 2024 12:36:02 +0100 Subject: [PATCH 17/84] changed home page title --- apps/landing/landing.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/landing/landing.html b/apps/landing/landing.html index 9507e142e..0457ca343 100644 --- a/apps/landing/landing.html +++ b/apps/landing/landing.html @@ -1,7 +1,7 @@ - caMicroscope + caMicroscope - Home From 9e52ebf2d9edcc84af3ef725c07988dae453f987 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Wed, 3 Jul 2024 12:44:02 +0100 Subject: [PATCH 18/84] changed info page title --- apps/Info.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/Info.html b/apps/Info.html index 7f964f635..97566ddf7 100644 --- a/apps/Info.html +++ b/apps/Info.html @@ -14,7 +14,7 @@ - CaMicroscope Data Table + caMicroscope - Information Dashboard From 9b3c53c1991702e12197c296cc4988d872fe965a Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Wed, 3 Jul 2024 12:46:34 +0100 Subject: [PATCH 19/84] changed slides page title --- apps/table.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/table.html b/apps/table.html index ae8075125..b3cb9afcc 100644 --- a/apps/table.html +++ b/apps/table.html @@ -25,7 +25,7 @@ - CaMicroscope Data Table + caMicroscope - Slides Data Table From c2e023197b6d0ba3499c18c1339a50487216e4b2 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Thu, 4 Jul 2024 01:48:32 +0900 Subject: [PATCH 20/84] add log annotation icon --- apps/viewer/init.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 751d35145..f0410db13 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -674,8 +674,9 @@ async function initUIcomponents() { // log subToolsOpt.push({ name: 'log', - icon: 'log', // material icons' name + icon: 'summarize', // material icons' name title: 'LogAnnotaition', + value: 'log', type: 'btn', callback: logAnnotaiton, }); From d9b78d5169ec223e8a802baa90be88f9e1551b3f Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sat, 6 Jul 2024 16:16:06 +0900 Subject: [PATCH 21/84] draft pull request --- apps/viewer/uicallbacks.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index ebacf211b..ec89eb3e8 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -2738,6 +2738,7 @@ async function captureSlide() { /* Log annotaiton */ let isSidemenuOpen = true; +// 他のものを全て閉じる処理を追加 function logAnnotaiton() { if (isSidemenuOpen == true) { $UI.logsSideMenu.open(); From a1f8279c2e02a7c5324b8318ea1813037c7cf4ac Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sat, 6 Jul 2024 18:55:05 +0900 Subject: [PATCH 22/84] add sideMenu on right --- apps/viewer/init.js | 2 ++ apps/viewer/viewer.html | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index f0410db13..5d9174362 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -754,6 +754,8 @@ async function initUIcomponents() { id: 'log_panel', width: 250, contentPadding: 5, + position: 'right', + height: '75vh', // , isOpen:true callback: toggleSideMenu, }); diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index a1ef20569..64fdc2b36 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -410,7 +410,7 @@
-
+
@@ -425,7 +425,7 @@
-
+
From 08ed4f3f2a6216a76066f87e72fc389f536a4c9c Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sun, 7 Jul 2024 02:16:59 +0900 Subject: [PATCH 23/84] add collapsiblelist in Log Panel --- apps/viewer/init.js | 39 ++++++++++++++++++++++++++++++++++++--- apps/viewer/viewer.html | 1 + 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 5d9174362..578d4c712 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -138,7 +138,6 @@ function initialize() { }, 100); console.log('$UI', $UI); console.log('$D', $D); -} // setting core functionalities function initCore() { @@ -904,16 +903,40 @@ async function initUIcomponents() { // console.log(e); }, }); + + $UI.logsList = new CollapsibleList({ + id: 'logslist', + list: [ + { + id: 'logsAnnotation', + title: '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'; - // add to layers side menu + // add to log side menu const titleLog = document.createElement('div'); titleLog.classList.add('item_head'); - titleLog.textContent = 'Log Annotations'; + titleLog.textContent = 'Log Panel'; + // add CSS + titleLog.style.color = '#365f9c'; + titleLog.style.fontSize = '20px'; + titleLog.style.backgroundColor = 'rgba(220, 220, 220, 1)'; $UI.logsSideMenu.addContent(titleLog); @@ -955,6 +978,16 @@ async function initUIcomponents() { $UI.layersList.elt.parentNode.removeChild($UI.layersList.elt); closeMinorControlPanel(); $UI.layersSideMenu.addContent($UI.layersList.elt); + + // logs + $UI.logsList.clearContent('logsAnnotation'); + $UI.logsList.addContent('logsAnnotation', $UI.layersViewer.elt); + $UI.logsList.clearContent('heatMap'); + $UI.logsList.addContent('heatMap', $UI.layersViewerMinor.elt); + + $UI.logsList.elt.parentNode.removeChild($UI.logsList.elt); + closeMinorControlPanel(); + $UI.logsSideMenu.addContent($UI.logsList.elt); } }, 300); diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index 64fdc2b36..edf2f1d63 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -417,6 +417,7 @@
+
From a154cbbe87e18dcd9b91662a1655440b8d5600b0 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sun, 7 Jul 2024 12:16:06 +0900 Subject: [PATCH 24/84] add collapsible list on right side menu --- apps/viewer/uicallbacks.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index ec89eb3e8..0d2bcde09 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.logsSideMenu.close(); + break; } } From 50f70a0ffb3b76a6dc4163df0cffa6f696bb642a Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sun, 7 Jul 2024 16:55:56 +0900 Subject: [PATCH 25/84] add collapsiblelist in Log Panel --- apps/viewer/init.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 578d4c712..e30cae4fa 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -138,7 +138,7 @@ function initialize() { }, 100); console.log('$UI', $UI); console.log('$D', $D); - +} // setting core functionalities function initCore() { // start initial From ce904b4a72a3311cf70e15aae902eace8dd4b41a Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Mon, 8 Jul 2024 12:03:26 +0100 Subject: [PATCH 26/84] improved email validation error msg --- apps/signup/signup.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 +} From 7efbf1dd880f749126690321ab6c9af7d6142ac5 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Mon, 8 Jul 2024 12:35:27 +0100 Subject: [PATCH 27/84] improved steps for uploading --- apps/table.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/table.html b/apps/table.html index ae8075125..b103ba266 100644 --- a/apps/table.html +++ b/apps/table.html @@ -213,7 +213,7 @@

Steps for uploading.

  • Select the file you wish to upload. The Token field should be automatically populated .
  • Enter the desired filename, including its extension, for the destination file.
    • -
  • Click on the button to preview the slide.
    • +
  • Click on the Preview Slide button to preview the slide.
  • Click on Finish Upload to complete the process and post the slide to caMicroscope.
From 7f7a6ce16394ffe3428d6cff8a1275ac298b316a Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Mon, 8 Jul 2024 12:59:33 +0100 Subject: [PATCH 28/84] added text to arrow icon --- apps/table.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/table.html b/apps/table.html index b103ba266..ab16d9a51 100644 --- a/apps/table.html +++ b/apps/table.html @@ -262,7 +262,7 @@

Steps for uploading.

+ value="Finish Upload" onclick="validateForm(finishUpload)">Preview Slide
From 78026e7084228a0066d53f754e666cdd68221310 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 8 Jul 2024 23:11:59 +0900 Subject: [PATCH 29/84] add layers on log panel using $UI.layers,$UI.layers.list --- apps/viewer/init.js | 43 ++++++++++++++++++++++++++++--- apps/viewer/uicallbacks.js | 52 +++++++++++++++++++------------------- apps/viewer/viewer.html | 4 +++ 3 files changed, 69 insertions(+), 30 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index e30cae4fa..53fe57e06 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -877,6 +877,20 @@ async function initUIcomponents() { callback.bind('minor'), rootCallback.bind('minor'), ); + // create UI and set data + $UI.logsViewer = createLogsViewer( + 'overlogs', + null, + callback.bind('main'), + rootCallback.bind('main'), + ); + // create UI and set data - minor + $UI.logsViewerMinor = createLogsViewer( + 'overlogsMinor', + 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) => @@ -979,11 +993,11 @@ async function initUIcomponents() { closeMinorControlPanel(); $UI.layersSideMenu.addContent($UI.layersList.elt); - // logs + // logs $UI.logsList.clearContent('logsAnnotation'); - $UI.logsList.addContent('logsAnnotation', $UI.layersViewer.elt); - $UI.logsList.clearContent('heatMap'); - $UI.logsList.addContent('heatMap', $UI.layersViewerMinor.elt); + $UI.logsList.addContent('logsAnnotation', $UI.logsViewer.elt); + // $UI.logsList.clearContent('heatMap'); + // $UI.logsList.addContent('heatMap', $UI.logsViewerMinor.elt); $UI.logsList.elt.parentNode.removeChild($UI.logsList.elt); closeMinorControlPanel(); @@ -1354,6 +1368,19 @@ function createLayerViewer(id, viewerData, callback, rootCallback) { return layersViewer; } +function createLogsViewer(id, viewerData, callback, rootCallback) { + const logsViewer = new LayersViewer({ + id: id, + data: viewerData, + removeCallback: removeCallback, + locationCallback: locationCallback, + callback: callback, + rootCallback: rootCallback, + + }); + logsViewer.elt.parentNode.removeChild(logsViewer.elt); + return logsViewer; +} // create lay panel for side-by-side control function createLayPanelControl() { $UI.layCtrlbar = document.createElement('div'); @@ -1472,6 +1499,7 @@ function addHumanLayerItems() { }, mainViewerItems); $UI.layersViewer.addHumanItems(mainViewerItems); + $UI.logsViewer.addHumanItems(mainViewerItems); // minor viewer minorViewer const minorViewerItems = { @@ -1512,6 +1540,7 @@ function addHumanLayerItems() { }, minorViewerItems); $UI.layersViewerMinor.addHumanItems(minorViewerItems); + $UI.logsViewerMinor.addHumanItems(minorViewerItems); } function openLoadStatus(text) { const txt = $UI.loadStatus.querySelector('.text'); @@ -1531,6 +1560,8 @@ function addRulerLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'ruler'); $UI.layersViewerMinor.addItems(minorViewerData, 'ruler'); + $UI.logsViewer.addItems(mainViewerData, 'ruler'); + $UI.logsViewerMinor.addItems(minorViewerData, 'ruler'); } function addComputerLayerItems(data) { @@ -1543,6 +1574,8 @@ function addComputerLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'segmentation'); $UI.layersViewerMinor.addItems(minorViewerData, 'segmentation'); + $UI.logsViewer.addItems(mainViewerData, 'segmentation'); + $UI.logsViewerMinor.addItems(minorViewerData, 'segmentation'); } function addHeatmapLayerItems(data) { @@ -1555,6 +1588,8 @@ function addHeatmapLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'heatmap'); $UI.layersViewerMinor.addItems(minorViewerData, 'heatmap'); + $UI.logsViewer.addItems(mainViewerData, 'heatmap'); + $UI.logsViewerMinor.addItems(minorViewerData, 'heatmap'); } // const mainViewerData = $D.overlayers.map((d) => { diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index 0d2bcde09..5108b72bc 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -2750,32 +2750,32 @@ function logAnnotaiton() { $UI.logsSideMenu.close(); isSidemenuOpen = true; }; - let log = $CAMIC.store.fetchMark($D.params.slideId); - console.log('$CAMIC.fetchMark', log); - console.log('kotae', log); - let aa = []; - fetchAndSortAnnotations(); - // 注釈を取得する関数 - function fetchAndSortAnnotations(slideId= $D.params.slideId) { - // 注釈を取得するPromiseを返す - $CAMIC.store.fetchMark(slideId).then((annotations) => { - // 注釈が存在する場合にのみソートする - if (annotations && annotations.length > 0) { - // 新しい順にソート - annotations.sort((a, b) => { - return new Date(b.created_date) - new Date(a.created_date); - }); - } - console.log('annotations', annotations[0].states.x); - aa.push(annotations); - const jsonString = JSON.stringify(annotations[0].states.x, null, 2); - const loading = `
${jsonString}
`; - $UI.logSideMenu.addContent(loading); - }).catch((error) => { - console.error('Error fetching annotations:', error); - throw error; - }); - } + // let log = $CAMIC.store.fetchMark($D.params.slideId); + // console.log('$CAMIC.fetchMark', log); + // console.log('kotae', log); + // let aa = []; + // fetchAndSortAnnotations(); + // // 注釈を取得する関数 + // function fetchAndSortAnnotations(slideId= $D.params.slideId) { + // // 注釈を取得するPromiseを返す + // $CAMIC.store.fetchMark(slideId).then((annotations) => { + // // 注釈が存在する場合にのみソートする + // if (annotations && annotations.length > 0) { + // // 新しい順にソート + // annotations.sort((a, b) => { + // return new Date(b.created_date) - new Date(a.created_date); + // }); + // } + // console.log('annotations', annotations[0].states.x); + // aa.push(annotations); + // const jsonString = JSON.stringify(annotations[0].states.x, null, 2); + // const loading = `
${jsonString}
`; + // $UI.logSideMenu.addContent(loading); + // }).catch((error) => { + // console.error('Error fetching annotations:', error); + // throw error; + // }); + // } } function downloadSlideCapture(combiningCanvas) { diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index edf2f1d63..9d4f8b670 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -423,6 +423,10 @@
+
+ +
+
From 71c3d1363c3758debdd076c63c47925f9143a272 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 9 Jul 2024 22:21:25 +0900 Subject: [PATCH 30/84] add original component --- apps/viewer/init.js | 56 ++++++++++++++++++---------- apps/viewer/viewer.html | 12 ++++++ components/logsviewer/logsviewer.css | 0 components/logsviewer/logsviewer.js | 42 +++++++++++++++++++++ 4 files changed, 91 insertions(+), 19 deletions(-) create mode 100644 components/logsviewer/logsviewer.css create mode 100644 components/logsviewer/logsviewer.js diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 53fe57e06..338e365ea 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -878,19 +878,25 @@ async function initUIcomponents() { rootCallback.bind('minor'), ); // create UI and set data + // $UI.logsViewer = createLogsViewer( + // 'overlogs', + // null, + // callback.bind('main'), + // rootCallback.bind('main'), + // ); + // // create UI and set data - minor + // $UI.logsViewerMinor = createLogsViewer( + // 'overlogsMinor', + // null, + // callback.bind('minor'), + // rootCallback.bind('minor'), + // ); $UI.logsViewer = createLogsViewer( 'overlogs', null, callback.bind('main'), rootCallback.bind('main'), ); - // create UI and set data - minor - $UI.logsViewerMinor = createLogsViewer( - 'overlogsMinor', - 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) => @@ -1368,15 +1374,27 @@ function createLayerViewer(id, viewerData, callback, rootCallback) { return layersViewer; } +// function createLogsViewer(id, viewerData, callback, rootCallback) { +// const logsViewer = new LayersViewer({ +// id: id, +// data: viewerData, +// removeCallback: removeCallback, +// locationCallback: locationCallback, +// callback: callback, +// rootCallback: rootCallback, + +// }); +// logsViewer.elt.parentNode.removeChild(logsViewer.elt); +// return logsViewer; +// } function createLogsViewer(id, viewerData, callback, rootCallback) { - const logsViewer = new LayersViewer({ + const logsViewer = new LogsViewer({ id: id, data: viewerData, removeCallback: removeCallback, locationCallback: locationCallback, callback: callback, rootCallback: rootCallback, - }); logsViewer.elt.parentNode.removeChild(logsViewer.elt); return logsViewer; @@ -1498,8 +1516,8 @@ function addHumanLayerItems() { return items; }, mainViewerItems); - $UI.layersViewer.addHumanItems(mainViewerItems); - $UI.logsViewer.addHumanItems(mainViewerItems); + // $UI.layersViewer.addHumanItems(mainViewerItems); + // $UI.logsViewer.addHumanItems(mainViewerItems); // minor viewer minorViewer const minorViewerItems = { @@ -1539,8 +1557,8 @@ function addHumanLayerItems() { return items; }, minorViewerItems); - $UI.layersViewerMinor.addHumanItems(minorViewerItems); - $UI.logsViewerMinor.addHumanItems(minorViewerItems); + // $UI.layersViewerMinor.addHumanItems(minorViewerItems); + // $UI.logsViewerMinor.addHumanItems(minorViewerItems); } function openLoadStatus(text) { const txt = $UI.loadStatus.querySelector('.text'); @@ -1560,8 +1578,8 @@ function addRulerLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'ruler'); $UI.layersViewerMinor.addItems(minorViewerData, 'ruler'); - $UI.logsViewer.addItems(mainViewerData, 'ruler'); - $UI.logsViewerMinor.addItems(minorViewerData, 'ruler'); + // $UI.logsViewer.addItems(mainViewerData, 'ruler'); + // $UI.logsViewerMinor.addItems(minorViewerData, 'ruler'); } function addComputerLayerItems(data) { @@ -1574,8 +1592,8 @@ function addComputerLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'segmentation'); $UI.layersViewerMinor.addItems(minorViewerData, 'segmentation'); - $UI.logsViewer.addItems(mainViewerData, 'segmentation'); - $UI.logsViewerMinor.addItems(minorViewerData, 'segmentation'); + // $UI.logsViewer.addItems(mainViewerData, 'segmentation'); + // $UI.logsViewerMinor.addItems(minorViewerData, 'segmentation'); } function addHeatmapLayerItems(data) { @@ -1588,8 +1606,8 @@ function addHeatmapLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'heatmap'); $UI.layersViewerMinor.addItems(minorViewerData, 'heatmap'); - $UI.logsViewer.addItems(mainViewerData, 'heatmap'); - $UI.logsViewerMinor.addItems(minorViewerData, 'heatmap'); + // $UI.logsViewer.addItems(mainViewerData, 'heatmap'); + // $UI.logsViewerMinor.addItems(minorViewerData, 'heatmap'); } // const mainViewerData = $D.overlayers.map((d) => { diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index 9d4f8b670..3412290b7 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -149,6 +149,13 @@ media="all" href="../../components/modalbox/modalbox.css" /> + + @@ -300,6 +307,11 @@ type="text/javascript" src="../../components/ml-assistant/ml-assistant.js" > + + diff --git a/components/logsviewer/logsviewer.css b/components/logsviewer/logsviewer.css new file mode 100644 index 000000000..e69de29bb diff --git a/components/logsviewer/logsviewer.js b/components/logsviewer/logsviewer.js new file mode 100644 index 000000000..4cf0f5c50 --- /dev/null +++ b/components/logsviewer/logsviewer.js @@ -0,0 +1,42 @@ +/** + * CaMicroscope Logs Viewer. A component that shows logs of annotation by timeline. + * @constructor + * @param {Object} options + * All required and optional settings for instantiating a new instance of a Layer Manager. + * @param {String} options.id + * Id of the element to append the Layer Manager's container element to. + * @param {Object[]} options.data + * the data set of the layers. + * @param {String} options.data.id + * layer's id + * @param {String} options.data.name + * layer's name + * @param {String} options.data.typeId + * layer's type id + * @param {String} options.data.typeName + * layer's type name + * + */ +function LogsViewer(options) { + this.className = 'LogsViewer'; + this.setting = { + // id: doc element + // data: layers dataset + // categoricalData + isSortableView: false, + }; + // 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'); + empty(this.elt); + const usuDiv = document.createElement('div'); + usuDiv.classList.add('usulist'); + usuDiv.style.display = 'block'; + usuDiv.innerHTML = `
Hello World!
`; + this.elt.appendChild(usuDiv); +} From 99499f305fb4d67c856d6aa63ae039db8b81ec36 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Thu, 11 Jul 2024 16:09:05 +0100 Subject: [PATCH 31/84] added aria-label to toolbar icons --- apps/viewer/init.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 94f89c2b0..cbfa11398 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -438,6 +438,7 @@ async function initUIcomponents() { title: 'Home', type: 'btn', // btn/check/dropdown value: 'home', + ariaLabel: 'Home', callback: goHome, }); } @@ -447,6 +448,7 @@ async function initUIcomponents() { icon: 'create', // material icons' name title: 'Draw', type: 'multistates', + ariaLabel: 'Draw', callback: draw, }); @@ -456,6 +458,7 @@ async function initUIcomponents() { title: 'Preset Labels', type: 'check', value: 'prelabels', + ariaLabel: 'Preset labels', callback: drawLabel, }); @@ -466,6 +469,7 @@ async function initUIcomponents() { title: 'Magnifier', type: 'dropdown', value: 'magn', + ariaLabel: 'Magnifier', dropdownList: [ { value: 0.5, @@ -491,17 +495,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 +521,7 @@ async function initUIcomponents() { title: 'Download Selection', type: 'check', value: 'download', + ariaLabel: 'Download selection', callback: toggleDownloadSelection, }); // enhance @@ -523,27 +531,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 +569,7 @@ async function initUIcomponents() { title: 'Share View', type: 'btn', value: 'share', + ariaLabel: 'Share', callback: shareURL, }); } @@ -566,6 +580,7 @@ async function initUIcomponents() { title: 'Side By Side Viewer', value: 'dbviewers', type: 'check', + ariaLabel: 'Side by side viewer', callback: toggleViewerMode, }); // heatmap @@ -575,6 +590,7 @@ async function initUIcomponents() { title: 'Heat Map', value: 'heatmap', type: 'btn', + ariaLabel: 'Heat map', callback: openHeatmap, }); subToolsOpt.push({ @@ -583,6 +599,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 +610,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 +626,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 +645,7 @@ async function initUIcomponents() { title: 'Download Marks', type: 'btn', value: 'download', + ariaLabel: 'Download marks', callback: Store.prototype.DownloadMarksToFile, }); subToolsOpt.push({ @@ -634,6 +654,7 @@ async function initUIcomponents() { title: 'Load Marks', type: 'btn', value: 'upload', + ariaLabel: 'Load marks', callback: Store.prototype.LoadMarksFromFile, }); } @@ -647,6 +668,7 @@ async function initUIcomponents() { title: 'has reviewed', type: 'btn', value: 'review', + ariaLabel: 'Has reviewed', callback: updateSlideView, }); } @@ -657,6 +679,7 @@ async function initUIcomponents() { title: 'Slide Capture', type: 'btn', value: 'slCap', + ariaLabel: 'Slide capture', callback: captureSlide, }); subToolsOpt.push({ @@ -665,6 +688,7 @@ async function initUIcomponents() { title: 'Tutorial', value: 'tutorial', type: 'btn', + ariaLabel: 'Tutorial', callback: function() { tour.init(); tour.start(true); From ab77a40fb0f934962ff79d80b22566df4ec80d39 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Thu, 11 Jul 2024 16:56:33 +0100 Subject: [PATCH 32/84] Update toolbar.js --- components/toolbar/toolbar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js index b0b69a891..1820c2e0a 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', }, ], }; From 0fd78dbe7733ac9bf5e409632c3e366bd208569f Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sat, 13 Jul 2024 22:23:01 +0900 Subject: [PATCH 33/84] =?UTF-8?q?log=E3=81=AE=E6=83=85=E5=A0=B1=E3=82=92?= =?UTF-8?q?=E5=8F=96=E3=82=8A=E5=87=BA=E3=81=99=20=E3=81=9F=E3=81=A0?= =?UTF-8?q?=E3=81=97=E3=80=81ID=E6=8C=87=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/viewer/uicallbacks.js | 6 ++++-- core/Store.js | 17 +++++++++++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index 5108b72bc..4b9446c4f 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -2750,8 +2750,10 @@ function logAnnotaiton() { $UI.logsSideMenu.close(); isSidemenuOpen = true; }; - // let log = $CAMIC.store.fetchMark($D.params.slideId); - // console.log('$CAMIC.fetchMark', log); + let log = $CAMIC.store.getLog($D.params.slideId).then((annotations) => { + console.log('テスト', annotations); + }); + // console.log('kotae', log); // let aa = []; // fetchAndSortAnnotations(); 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 From 144f139160c363af7269c493b55603ec99de8242 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sun, 14 Jul 2024 02:41:40 +0900 Subject: [PATCH 34/84] change function fetchMark : logAnnotaiton --- apps/viewer/uicallbacks.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index 4b9446c4f..6fd8735cc 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -2750,7 +2750,8 @@ function logAnnotaiton() { $UI.logsSideMenu.close(); isSidemenuOpen = true; }; - let log = $CAMIC.store.getLog($D.params.slideId).then((annotations) => { + + let log = $CAMIC.store.fetchMark($D.params.slideId).then((annotations) => { console.log('テスト', annotations); }); From 20038b6ea96ce6293ac86c39b0d96f1d1189f79c Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sun, 14 Jul 2024 04:05:27 +0900 Subject: [PATCH 35/84] add loadingLog function --- apps/viewer/dataloaders.js | 19 ++++++++++++++++-- common/util.js | 40 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+), 2 deletions(-) diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index de65438f5..9e19a4c53 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -97,6 +97,22 @@ function layersLoader() { console.error(error); }); } + + // logs + function loadingLogs() { + $CAMIC.store.findMark($D.params.slideId).then(function(layers) { + // convert part not nesscary + $D.logs = [...layers.map(covertToVisualization)]; + + // // add data and create ui item + // addHumanLayerItems(); + }).catch(function(error) { + // overlayers schema + $UI.message.addError('Loading Logs is Error'); + console.error(error); + }); + } + var checkCoreIsReady = setInterval(function() { if ($UI.layersViewer && $UI.layersViewerMinor) { clearInterval(checkCoreIsReady); @@ -104,8 +120,7 @@ function layersLoader() { loadingRulerOverlayers(); loadingHeatmapOverlayers(); loadingComputerOverlayers(); + loadingLogs(); } }, 500); } - - diff --git a/common/util.js b/common/util.js index fd50cadab..bd453c8d1 100644 --- a/common/util.js +++ b/common/util.js @@ -587,6 +587,46 @@ 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 states = data.states || null; + const shape = data.geometries.features[0].geometry.type || null; + const isGrid = data.provenance.analysis.isGrid || false; + + if (!shape) shape = ["Polygon"]; + if (data.provenance.analysis.type&&data.provenance.analysis.type=='label') { // preset label + return { + id: id, + name: name, + typeId: typeName, + typeName: typeName, + creator: data.creator, + shape: shape, + isGrid: isGrid, + label: { + id: data.provenance.analysis.labelled, + name: data.provenance.analysis.name, + }, + states: states, + data: null, + }; + } else { + return { + id: id, + name: name, + typeId: typeName, + typeName: typeName, + creator: data.creator, + shape: shape, + isGrid: isGrid, + states: states, + data: null, + }; + } +} function eventFire(el, etype) { if (el.fireEvent) { el.fireEvent('on' + etype); From 4013f34b9cca704b2fb860002b6e50c18e41734d Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sun, 14 Jul 2024 19:19:11 +0900 Subject: [PATCH 36/84] add visualizationLayerItems in dataloader --- apps/viewer/dataloaders.js | 1 + apps/viewer/init.js | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index 9e19a4c53..38a36103c 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -106,6 +106,7 @@ function layersLoader() { // // add data and create ui item // addHumanLayerItems(); + visualizationLayerItems($D.logs); }).catch(function(error) { // overlayers schema $UI.message.addError('Loading Logs is Error'); diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 338e365ea..76e9d2db6 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -1560,6 +1560,9 @@ function addHumanLayerItems() { // $UI.layersViewerMinor.addHumanItems(minorViewerItems); // $UI.logsViewerMinor.addHumanItems(minorViewerItems); } +// function addLogItems(){ + +// } function openLoadStatus(text) { const txt = $UI.loadStatus.querySelector('.text'); txt.textContent = `Loading ${text}`; @@ -1610,6 +1613,11 @@ function addHeatmapLayerItems(data) { // $UI.logsViewerMinor.addItems(minorViewerData, 'heatmap'); } +function visualizationLayerItems(data) { + console.log('hello!!', data); +} + + // const mainViewerData = $D.overlayers.map((d) => { // const isShow = // $D.params.states && From 3d8ef72a310233d31df3f9f3b85c96b779c92a86 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 15 Jul 2024 15:25:08 +0900 Subject: [PATCH 37/84] create graph in log panel --- apps/viewer/init.js | 7 +- apps/viewer/viewer.html | 4 +- components/logsviewer/logsviewer.js | 158 +++++++++++++++++++++++++++- 3 files changed, 164 insertions(+), 5 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 76e9d2db6..95c01f4fa 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -1008,6 +1008,9 @@ async function initUIcomponents() { $UI.logsList.elt.parentNode.removeChild($UI.logsList.elt); closeMinorControlPanel(); $UI.logsSideMenu.addContent($UI.logsList.elt); + const ctx = document.getElementById('myChart'); + console.log('ctx', ctx); + $UI.logsViewer.visualization(ctx); } }, 300); @@ -1516,7 +1519,7 @@ function addHumanLayerItems() { return items; }, mainViewerItems); - // $UI.layersViewer.addHumanItems(mainViewerItems); + $UI.layersViewer.addHumanItems(mainViewerItems); // $UI.logsViewer.addHumanItems(mainViewerItems); // minor viewer minorViewer @@ -1557,7 +1560,7 @@ function addHumanLayerItems() { return items; }, minorViewerItems); - // $UI.layersViewerMinor.addHumanItems(minorViewerItems); + $UI.layersViewerMinor.addHumanItems(minorViewerItems); // $UI.logsViewerMinor.addHumanItems(minorViewerItems); } // function addLogItems(){ diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index 3412290b7..fc5b89472 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -11,6 +11,8 @@ + + - diff --git a/components/logsviewer/logsviewer.js b/components/logsviewer/logsviewer.js index 4cf0f5c50..fe99a699f 100644 --- a/components/logsviewer/logsviewer.js +++ b/components/logsviewer/logsviewer.js @@ -25,6 +25,8 @@ function LogsViewer(options) { // 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); @@ -33,10 +35,164 @@ function LogsViewer(options) { 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 usuDiv = document.createElement('div'); usuDiv.classList.add('usulist'); usuDiv.style.display = 'block'; - usuDiv.innerHTML = `
Hello World!
`; + usuDiv.innerHTML = ``; this.elt.appendChild(usuDiv); } + +LogsViewer.prototype.addHumanItem = function( + item, + type, + parent, + isShow = true, +) { + if (!this.defaultType.includes(type)) { + console.warn('Error Type !!!'); + return; + } + + var cate = this.setting.categoricalData[type].items[parent]; + + if (!cate) { + // no parent node + const newCate = {}; + if (item.label) { + newCate[item.label.id] = { + item: { + id: item.label.id, + name: item.label.name, + }, + items: [], + }; + this.setting.categoricalData[type].items[parent] = newCate; + this.addHumanItems(newCate); + cate = this.setting.categoricalData[type].items[parent]; + } else { + console.error('Layersviewer.addHumanItem has error'); + } + } + + const data = {item, isShow}; + // add Data + cate.items.push(data); + // add item on UI + data.elt = document.createElement('li'); + data.elt.dataset.id = data.item.id; + data.elt.dataset.title = data.item.label ? + `${data.item.name}${data.item.id}` : + `${data.item.name}`; + data.elt.innerHTML = `
room
+ +
clear
+ `; + + // event: show/hidden layers for each annotation + const chk = data.elt.querySelector('input[type=checkbox][data-type=leaf]'); + chk.addEventListener('change', this.__change.bind(this)); + // + const removeDiv = data.elt.querySelector('div.material-icons.remove'); + removeDiv.addEventListener('click', () => { + this.setting.removeCallback.call(this, data, cate.item.id); + }); + const locationDiv = data.elt.querySelector('div.material-icons.location'); + locationDiv.addEventListener('click', () => { + this.setting.locationCallback.call(this, data); + }); + + cate.children.insertBefore(data.elt, cate.children.firstChild); + // update num + cate.num.textContent = cate.items.length; + cate.elt.style.display = 'flex'; + + // total human anotation nums + var humanNum = 0; + const obj = this.setting.categoricalData[type].items; + for (const key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + humanNum += obj[key].items.length; + } + } + this.setting.categoricalData[type].num.textContent = humanNum; +}; + +LogsViewer.prototype.addHumanItems = function(data) { + console.log(data); +}; + +LogsViewer.prototype.visualization = function(ctx) { + // データの定義 + var data = { + datasets: [{ + label: 'Scatter Dataset', + data: [ + {x: 1, y: 3}, + {x: 0.5, y: 5}, + {x: 3, y: 7}, + {x: 1.5, y: 10}, + {x: 5, y: 12}, + ], + backgroundColor: 'rgba(75, 192, 192, 1)', + pointRadius: 5, + }], + }; + + // オプションの設定 + var options = { + scales: { + x: { + type: 'linear', + position: 'bottom', + title: { + display: true, + text: 'Zooming', + }, + }, + y: { + title: { + display: true, + text: 'Layer Count', + }, + }, + }, + }; + + // 散布図の作成 + new Chart(ctx, { + type: 'scatter', + data: data, + options: options, + }); +}; From 7ff366efe94a87880a3439c994c17e850dff277c Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 15 Jul 2024 17:17:42 +0900 Subject: [PATCH 38/84] add data calculate --- apps/Info.html | 28 +++++++++++++++++++++++++ apps/viewer/dataloaders.js | 1 + apps/viewer/init.js | 43 +++++++++++++++++++++++++++++++++++++- common/util.js | 6 +++--- 4 files changed, 74 insertions(+), 4 deletions(-) diff --git a/apps/Info.html b/apps/Info.html index 7f964f635..4cb5598be 100644 --- a/apps/Info.html +++ b/apps/Info.html @@ -115,6 +115,34 @@

Heatmaps

+
+

Hello, World!!

+ + + +
+
diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index 38a36103c..f64e1c803 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -101,6 +101,7 @@ function layersLoader() { // logs function loadingLogs() { $CAMIC.store.findMark($D.params.slideId).then(function(layers) { + console.log('original data', layers); // convert part not nesscary $D.logs = [...layers.map(covertToVisualization)]; diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 95c01f4fa..add267867 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -1617,9 +1617,50 @@ function addHeatmapLayerItems(data) { } function visualizationLayerItems(data) { - console.log('hello!!', data); + var initialZommingData = []; + + // Get initial data + data.map((d) => { + if (d.states) { + for (let i = 0; i < d.geometries.features.length; i++) { + initialZommingData.push(roundToSecondDecimalPlace(d.states.zoom)); + console.log(initialZommingData); + } + } + }); + let result = countOccurrences(initialZommingData); + // 結果を出力 + console.log('result', result); } +// Function to round to decimal places +function roundToSecondDecimalPlace(num) { + return Math.round(num * 100) / 100; +} + +function countOccurrences(arr) { + // カウント用のオブジェクトを作成 + let countMap = {}; + + // 配列内の各要素をカウント + arr.forEach(function(value) { + if (countMap[value] === undefined) { + countMap[value] = 1; + } else { + countMap[value]++; + } + }); + + // 結果を2次元配列に変換 + 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 = diff --git a/common/util.js b/common/util.js index bd453c8d1..d49942231 100644 --- a/common/util.js +++ b/common/util.js @@ -595,8 +595,8 @@ function covertToVisualization(data) { const states = data.states || null; const shape = data.geometries.features[0].geometry.type || null; const isGrid = data.provenance.analysis.isGrid || false; + const geometries = data.geometries; - if (!shape) shape = ["Polygon"]; if (data.provenance.analysis.type&&data.provenance.analysis.type=='label') { // preset label return { id: id, @@ -604,13 +604,13 @@ function covertToVisualization(data) { typeId: typeName, typeName: typeName, creator: data.creator, - shape: shape, isGrid: isGrid, label: { id: data.provenance.analysis.labelled, name: data.provenance.analysis.name, }, states: states, + geometries: geometries, data: null, }; } else { @@ -620,9 +620,9 @@ function covertToVisualization(data) { typeId: typeName, typeName: typeName, creator: data.creator, - shape: shape, isGrid: isGrid, states: states, + geometries: geometries, data: null, }; } From c05437c2213eb12f9b8f21218d625b0800d0b1da Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 15 Jul 2024 23:07:38 +0900 Subject: [PATCH 39/84] create graph --- apps/viewer/dataloaders.js | 6 +--- apps/viewer/init.js | 9 ++---- apps/viewer/viewer.html | 7 +++++ components/logsviewer/logsviewer.css | 13 ++++++++ components/logsviewer/logsviewer.js | 47 +++++++++++++++++++++------- 5 files changed, 60 insertions(+), 22 deletions(-) diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index f64e1c803..4ab831331 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -102,11 +102,7 @@ function layersLoader() { function loadingLogs() { $CAMIC.store.findMark($D.params.slideId).then(function(layers) { console.log('original data', layers); - // convert part not nesscary $D.logs = [...layers.map(covertToVisualization)]; - - // // add data and create ui item - // addHumanLayerItems(); visualizationLayerItems($D.logs); }).catch(function(error) { // overlayers schema @@ -116,7 +112,7 @@ function layersLoader() { } var checkCoreIsReady = setInterval(function() { - if ($UI.layersViewer && $UI.layersViewerMinor) { + if ($UI.layersViewer && $UI.layersViewerMinor && $UI.logsViewer) { clearInterval(checkCoreIsReady); loadingHumanOverlayers(); loadingRulerOverlayers(); diff --git a/apps/viewer/init.js b/apps/viewer/init.js index add267867..ab47f65e1 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -1008,9 +1008,6 @@ async function initUIcomponents() { $UI.logsList.elt.parentNode.removeChild($UI.logsList.elt); closeMinorControlPanel(); $UI.logsSideMenu.addContent($UI.logsList.elt); - const ctx = document.getElementById('myChart'); - console.log('ctx', ctx); - $UI.logsViewer.visualization(ctx); } }, 300); @@ -1620,7 +1617,7 @@ function visualizationLayerItems(data) { var initialZommingData = []; // Get initial data - data.map((d) => { + $D.logs.map((d) => { if (d.states) { for (let i = 0; i < d.geometries.features.length; i++) { initialZommingData.push(roundToSecondDecimalPlace(d.states.zoom)); @@ -1629,8 +1626,8 @@ function visualizationLayerItems(data) { } }); let result = countOccurrences(initialZommingData); - // 結果を出力 - console.log('result', result); + + $UI.logsViewer.visualization('myChart', result); } // Function to round to decimal places diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index fc5b89472..52cc418ac 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -68,6 +68,13 @@ href="../../components/sidemenu/sidemenu.css" /> + + `; + usuDiv.innerHTML = ``; this.elt.appendChild(usuDiv); } @@ -152,25 +152,39 @@ LogsViewer.prototype.addHumanItems = function(data) { console.log(data); }; -LogsViewer.prototype.visualization = function(ctx) { +LogsViewer.prototype.visualization = function(id, result) { + const ctx = document.getElementById(id); + const aa = result; // データの定義 var data = { datasets: [{ - label: 'Scatter Dataset', - data: [ - {x: 1, y: 3}, - {x: 0.5, y: 5}, - {x: 3, y: 7}, - {x: 1.5, y: 10}, - {x: 5, y: 12}, - ], + label: 'Human:Draw Annotation ', + data: aa.map((item) => ({x: item[0], y: item[1]})), backgroundColor: 'rgba(75, 192, 192, 1)', pointRadius: 5, }], }; + // データセットの最大値を取得し、最大値に1を加算する + var maxYValue = Math.max(...data.datasets[0].data.map((d)=> d.y)) + 1; + // オプションの設定 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', @@ -181,10 +195,20 @@ LogsViewer.prototype.visualization = function(ctx) { }, }, y: { + beginAtZero: true, // 縦軸が0から始まるように設定 title: { display: true, - text: 'Layer Count', + text: 'Draw Annotation Count', + }, + ticks: { + stepSize: 1, // 縦軸に表示するステップサイズを1に設定 + callback: function(value) { + if (value % 1 === 0) { + return value; // 整数値のみを表示 + } + }, }, + max: maxYValue, // 縦軸の最大値を設定 }, }, }; @@ -196,3 +220,4 @@ LogsViewer.prototype.visualization = function(ctx) { options: options, }); }; + From 431550c51b0953f033196548336566abfb3ce995 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 15 Jul 2024 23:22:17 +0900 Subject: [PATCH 40/84] fix from log to visualization in subtool --- apps/viewer/init.js | 12 ++++++------ apps/viewer/uicallbacks.js | 31 +------------------------------ 2 files changed, 7 insertions(+), 36 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index ab47f65e1..348357e91 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -670,14 +670,14 @@ async function initUIcomponents() { callback: captureSlide, }); - // log + // visualization panel subToolsOpt.push({ - name: 'log', - icon: 'summarize', // material icons' name - title: 'LogAnnotaition', - value: 'log', + name: 'visualization', + icon: 'auto_graph', // material icons' name + title: 'visualization', + value: 'visualization', type: 'btn', - callback: logAnnotaiton, + callback: visualization, }); subToolsOpt.push({ diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index 6fd8735cc..fddcf7868 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -2742,7 +2742,7 @@ async function captureSlide() { /* Log annotaiton */ let isSidemenuOpen = true; // 他のものを全て閉じる処理を追加 -function logAnnotaiton() { +function visualization() { if (isSidemenuOpen == true) { $UI.logsSideMenu.open(); isSidemenuOpen = false; @@ -2750,35 +2750,6 @@ function logAnnotaiton() { $UI.logsSideMenu.close(); isSidemenuOpen = true; }; - - let log = $CAMIC.store.fetchMark($D.params.slideId).then((annotations) => { - console.log('テスト', annotations); - }); - - // console.log('kotae', log); - // let aa = []; - // fetchAndSortAnnotations(); - // // 注釈を取得する関数 - // function fetchAndSortAnnotations(slideId= $D.params.slideId) { - // // 注釈を取得するPromiseを返す - // $CAMIC.store.fetchMark(slideId).then((annotations) => { - // // 注釈が存在する場合にのみソートする - // if (annotations && annotations.length > 0) { - // // 新しい順にソート - // annotations.sort((a, b) => { - // return new Date(b.created_date) - new Date(a.created_date); - // }); - // } - // console.log('annotations', annotations[0].states.x); - // aa.push(annotations); - // const jsonString = JSON.stringify(annotations[0].states.x, null, 2); - // const loading = `
${jsonString}
`; - // $UI.logSideMenu.addContent(loading); - // }).catch((error) => { - // console.error('Error fetching annotations:', error); - // throw error; - // }); - // } } function downloadSlideCapture(combiningCanvas) { From 3b0f51bb118efe1a38875d80d64bf568b8e6348a Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 15 Jul 2024 23:24:36 +0900 Subject: [PATCH 41/84] fix id: 'visualization_panel' --- apps/viewer/init.js | 2 +- apps/viewer/viewer.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 348357e91..ef36adaa5 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -750,7 +750,7 @@ async function initUIcomponents() { }); $UI.logsSideMenu = new SideMenu({ - id: 'log_panel', + id: 'visualization_panel', width: 250, contentPadding: 5, position: 'right', diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index 52cc418ac..b9db3ad3b 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -430,8 +430,8 @@
- -
+ +
From 1d78faa64d7bd1c7428cda7c37c66f4b37d9c976 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 15 Jul 2024 23:27:29 +0900 Subject: [PATCH 42/84] fix:visualizationSideMenu --- apps/viewer/init.js | 6 +++--- apps/viewer/uicallbacks.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index ef36adaa5..d199e324c 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -749,7 +749,7 @@ async function initUIcomponents() { callback: toggleSideMenu, }); - $UI.logsSideMenu = new SideMenu({ + $UI.visualizationSideMenu = new SideMenu({ id: 'visualization_panel', width: 250, contentPadding: 5, @@ -958,7 +958,7 @@ async function initUIcomponents() { titleLog.style.fontSize = '20px'; titleLog.style.backgroundColor = 'rgba(220, 220, 220, 1)'; - $UI.logsSideMenu.addContent(titleLog); + $UI.visualizationSideMenu.addContent(titleLog); // loading status $UI.loadStatus = document.createElement('div'); @@ -1007,7 +1007,7 @@ async function initUIcomponents() { $UI.logsList.elt.parentNode.removeChild($UI.logsList.elt); closeMinorControlPanel(); - $UI.logsSideMenu.addContent($UI.logsList.elt); + $UI.visualizationSideMenu.addContent($UI.logsList.elt); } }, 300); diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index fddcf7868..74dcd9a5d 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -324,7 +324,7 @@ function toolsOff() { downloadSelectionOff(); break; case 'log': - $UI.logsSideMenu.close(); + $UI.visualizationSideMenu.close(); break; } } @@ -2744,10 +2744,10 @@ let isSidemenuOpen = true; // 他のものを全て閉じる処理を追加 function visualization() { if (isSidemenuOpen == true) { - $UI.logsSideMenu.open(); + $UI.visualizationSideMenu.open(); isSidemenuOpen = false; } else { - $UI.logsSideMenu.close(); + $UI.visualizationSideMenu.close(); isSidemenuOpen = true; }; } From 15e43e17b24ffaedc3f22dc5a8fe1575866d1cd7 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 15 Jul 2024 23:39:22 +0900 Subject: [PATCH 43/84] fix id and $UI.visualizationList (CollapsibleList ) --- apps/viewer/init.js | 18 +++++++++--------- apps/viewer/viewer.html | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index d199e324c..6f525a625 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -924,8 +924,8 @@ async function initUIcomponents() { }, }); - $UI.logsList = new CollapsibleList({ - id: 'logslist', + $UI.visualizationList = new CollapsibleList({ + id: 'visualizationlist', list: [ { id: 'logsAnnotation', @@ -999,15 +999,15 @@ async function initUIcomponents() { closeMinorControlPanel(); $UI.layersSideMenu.addContent($UI.layersList.elt); - // logs - $UI.logsList.clearContent('logsAnnotation'); - $UI.logsList.addContent('logsAnnotation', $UI.logsViewer.elt); - // $UI.logsList.clearContent('heatMap'); - // $UI.logsList.addContent('heatMap', $UI.logsViewerMinor.elt); + // visualization + $UI.visualizationList.clearContent('logsAnnotation'); + $UI.visualizationList.addContent('logsAnnotation', $UI.logsViewer.elt); + // $UI.visualizationList.clearContent('heatMap'); + // $UI.visualizationList.addContent('heatMap', $UI.logsViewerMinor.elt); - $UI.logsList.elt.parentNode.removeChild($UI.logsList.elt); + $UI.visualizationList.elt.parentNode.removeChild($UI.visualizationList.elt); closeMinorControlPanel(); - $UI.visualizationSideMenu.addContent($UI.logsList.elt); + $UI.visualizationSideMenu.addContent($UI.visualizationList.elt); } }, 300); diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index b9db3ad3b..38fcd3966 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -438,7 +438,7 @@
-
+
From 7ef73f6149e1d8ac36cbe59a343064fe8b228fb2 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 15 Jul 2024 23:41:12 +0900 Subject: [PATCH 44/84] fix visualizationlist --- apps/viewer/init.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 6f525a625..99eb8c275 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -928,7 +928,7 @@ async function initUIcomponents() { id: 'visualizationlist', list: [ { - id: 'logsAnnotation', + id: 'visualizationlist', title: 'Annotation', content: 'No Template Loaded', // $UI.annotOptPanel.elt // isExpand:true @@ -1000,8 +1000,8 @@ async function initUIcomponents() { $UI.layersSideMenu.addContent($UI.layersList.elt); // visualization - $UI.visualizationList.clearContent('logsAnnotation'); - $UI.visualizationList.addContent('logsAnnotation', $UI.logsViewer.elt); + $UI.visualizationList.clearContent('visualizationlist'); + $UI.visualizationList.addContent('visualizationlist', $UI.logsViewer.elt); // $UI.visualizationList.clearContent('heatMap'); // $UI.visualizationList.addContent('heatMap', $UI.logsViewerMinor.elt); From 84650dcd5c5152258adcadb0fb3376626f60efd9 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 00:05:07 +0900 Subject: [PATCH 45/84] fix side menu size --- apps/viewer/init.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 99eb8c275..bf7e130e4 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -754,7 +754,7 @@ async function initUIcomponents() { width: 250, contentPadding: 5, position: 'right', - height: '75vh', + height: '40vh', // , isOpen:true callback: toggleSideMenu, }); From bc73fef45bf23dc3c62f5abd6a6c813cc2a35a67 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 00:13:12 +0900 Subject: [PATCH 46/84] fix titleVisualization --- apps/viewer/init.js | 19 +- .../visualizationviewer/visualiationviewer.js | 223 ++++++++++++++++++ .../visualizationviewer.css | 13 + 3 files changed, 246 insertions(+), 9 deletions(-) create mode 100644 components/visualizationviewer/visualiationviewer.js create mode 100644 components/visualizationviewer/visualizationviewer.css diff --git a/apps/viewer/init.js b/apps/viewer/init.js index bf7e130e4..298189e8c 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -754,7 +754,7 @@ async function initUIcomponents() { width: 250, contentPadding: 5, position: 'right', - height: '40vh', + height: '45vh', // , isOpen:true callback: toggleSideMenu, }); @@ -929,7 +929,7 @@ async function initUIcomponents() { list: [ { id: 'visualizationlist', - title: 'Annotation', + title: 'Human:Draw Annotation', content: 'No Template Loaded', // $UI.annotOptPanel.elt // isExpand:true }, @@ -950,15 +950,16 @@ async function initUIcomponents() { title.textContent = 'Layers Manager'; // add to log side menu - const titleLog = document.createElement('div'); - titleLog.classList.add('item_head'); - titleLog.textContent = 'Log Panel'; + const titleVisualization = document.createElement('div'); + titleVisualization.classList.add('item_head'); + titleVisualization.textContent = 'Visualization Panel'; // add CSS - titleLog.style.color = '#365f9c'; - titleLog.style.fontSize = '20px'; - titleLog.style.backgroundColor = 'rgba(220, 220, 220, 1)'; + titleVisualization.style.color = '#365f9c'; + titleVisualization.style.fontSize = '20px'; + titleVisualization.style.backgroundColor = 'rgba(220, 220, 220, 1)'; + titleVisualization.style.marginTop = '28px'; - $UI.visualizationSideMenu.addContent(titleLog); + $UI.visualizationSideMenu.addContent(titleVisualization); // loading status $UI.loadStatus = document.createElement('div'); diff --git a/components/visualizationviewer/visualiationviewer.js b/components/visualizationviewer/visualiationviewer.js new file mode 100644 index 000000000..dc91a33e8 --- /dev/null +++ b/components/visualizationviewer/visualiationviewer.js @@ -0,0 +1,223 @@ +/** + * CaMicroscope Logs Viewer. A component that shows logs of annotation by timeline. + * @constructor + * @param {Object} options + * All required and optional settings for instantiating a new instance of a Layer Manager. + * @param {String} options.id + * Id of the element to append the Layer Manager's container element to. + * @param {Object[]} options.data + * the data set of the layers. + * @param {String} options.data.id + * layer's id + * @param {String} options.data.name + * layer's name + * @param {String} options.data.typeId + * layer's type id + * @param {String} options.data.typeName + * layer's type name + * + */ +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 usuDiv = document.createElement('div'); + usuDiv.classList.add('usulist'); + usuDiv.style.display = 'block'; + usuDiv.innerHTML = ``; + this.elt.appendChild(usuDiv); +} + +VisualizationViewer.prototype.addHumanItem = function( + item, + type, + parent, + isShow = true, +) { + if (!this.defaultType.includes(type)) { + console.warn('Error Type !!!'); + return; + } + + var cate = this.setting.categoricalData[type].items[parent]; + + if (!cate) { + // no parent node + const newCate = {}; + if (item.label) { + newCate[item.label.id] = { + item: { + id: item.label.id, + name: item.label.name, + }, + items: [], + }; + this.setting.categoricalData[type].items[parent] = newCate; + this.addHumanItems(newCate); + cate = this.setting.categoricalData[type].items[parent]; + } else { + console.error('Layersviewer.addHumanItem has error'); + } + } + + const data = {item, isShow}; + // add Data + cate.items.push(data); + // add item on UI + data.elt = document.createElement('li'); + data.elt.dataset.id = data.item.id; + data.elt.dataset.title = data.item.label ? + `${data.item.name}${data.item.id}` : + `${data.item.name}`; + data.elt.innerHTML = `
room
+ +
clear
+ `; + + // event: show/hidden layers for each annotation + const chk = data.elt.querySelector('input[type=checkbox][data-type=leaf]'); + chk.addEventListener('change', this.__change.bind(this)); + // + const removeDiv = data.elt.querySelector('div.material-icons.remove'); + removeDiv.addEventListener('click', () => { + this.setting.removeCallback.call(this, data, cate.item.id); + }); + const locationDiv = data.elt.querySelector('div.material-icons.location'); + locationDiv.addEventListener('click', () => { + this.setting.locationCallback.call(this, data); + }); + + cate.children.insertBefore(data.elt, cate.children.firstChild); + // update num + cate.num.textContent = cate.items.length; + cate.elt.style.display = 'flex'; + + // total human anotation nums + var humanNum = 0; + const obj = this.setting.categoricalData[type].items; + for (const key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + humanNum += obj[key].items.length; + } + } + this.setting.categoricalData[type].num.textContent = humanNum; +}; + +VisualizationViewer.prototype.addHumanItems = function(data) { + console.log(data); +}; + +VisualizationViewer.prototype.visualization = function(id, result) { + const ctx = document.getElementById(id); + const aa = result; + // データの定義 + 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, + }], + }; + + // データセットの最大値を取得し、最大値に1を加算する + var maxYValue = Math.max(...data.datasets[0].data.map((d)=> d.y)) + 1; + + // オプションの設定 + 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, // 縦軸が0から始まるように設定 + title: { + display: true, + text: 'Draw Annotation Count', + }, + ticks: { + stepSize: 1, // 縦軸に表示するステップサイズを1に設定 + callback: function(value) { + if (value % 1 === 0) { + return value; // 整数値のみを表示 + } + }, + }, + max: maxYValue, // 縦軸の最大値を設定 + }, + }, + }; + + // 散布図の作成 + 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..e68d6ae9f --- /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 From 3c71ed3c99a237d72ec578ab35a133d04098a8dd Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 00:34:30 +0900 Subject: [PATCH 47/84] fix createVisualizationViewer --- apps/viewer/init.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 298189e8c..2963057aa 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -878,20 +878,20 @@ async function initUIcomponents() { rootCallback.bind('minor'), ); // create UI and set data - // $UI.logsViewer = createLogsViewer( + // $UI.logsViewer = createVisualizationViewer( // 'overlogs', // null, // callback.bind('main'), // rootCallback.bind('main'), // ); // // create UI and set data - minor - // $UI.logsViewerMinor = createLogsViewer( + // $UI.logsViewerMinor = createVisualizationViewer( // 'overlogsMinor', // null, // callback.bind('minor'), // rootCallback.bind('minor'), // ); - $UI.logsViewer = createLogsViewer( + $UI.logsViewer = createVisualizationViewer( 'overlogs', null, callback.bind('main'), @@ -1375,7 +1375,7 @@ function createLayerViewer(id, viewerData, callback, rootCallback) { return layersViewer; } -// function createLogsViewer(id, viewerData, callback, rootCallback) { +// function createVisualizationViewer(id, viewerData, callback, rootCallback) { // const logsViewer = new LayersViewer({ // id: id, // data: viewerData, @@ -1388,7 +1388,7 @@ function createLayerViewer(id, viewerData, callback, rootCallback) { // logsViewer.elt.parentNode.removeChild(logsViewer.elt); // return logsViewer; // } -function createLogsViewer(id, viewerData, callback, rootCallback) { +function createVisualizationViewer(id, viewerData, callback, rootCallback) { const logsViewer = new LogsViewer({ id: id, data: viewerData, From d919cb810978985ac319d61a7d258f3c342684be Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 00:57:29 +0900 Subject: [PATCH 48/84] fix VisualizationViewer (is logsViewer instance) --- apps/viewer/init.js | 4 ++-- components/logsviewer/logsviewer.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 2963057aa..4592a5a2f 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -878,7 +878,7 @@ async function initUIcomponents() { rootCallback.bind('minor'), ); // create UI and set data - // $UI.logsViewer = createVisualizationViewer( + // $UI.VisualizationViewer = createVisualizationViewer( // 'overlogs', // null, // callback.bind('main'), @@ -1389,7 +1389,7 @@ function createLayerViewer(id, viewerData, callback, rootCallback) { // return logsViewer; // } function createVisualizationViewer(id, viewerData, callback, rootCallback) { - const logsViewer = new LogsViewer({ + const logsViewer = new VisualizationViewer({ id: id, data: viewerData, removeCallback: removeCallback, diff --git a/components/logsviewer/logsviewer.js b/components/logsviewer/logsviewer.js index 1257ab37b..c872b95ed 100644 --- a/components/logsviewer/logsviewer.js +++ b/components/logsviewer/logsviewer.js @@ -17,7 +17,7 @@ * layer's type name * */ -function LogsViewer(options) { +function VisualizationViewer(options) { this.className = 'LogsViewer'; this.setting = { // id: doc element @@ -63,7 +63,7 @@ function LogsViewer(options) { this.elt.appendChild(usuDiv); } -LogsViewer.prototype.addHumanItem = function( +VisualizationViewer.prototype.addHumanItem = function( item, type, parent, @@ -148,11 +148,11 @@ LogsViewer.prototype.addHumanItem = function( this.setting.categoricalData[type].num.textContent = humanNum; }; -LogsViewer.prototype.addHumanItems = function(data) { +VisualizationViewer.prototype.addHumanItems = function(data) { console.log(data); }; -LogsViewer.prototype.visualization = function(id, result) { +VisualizationViewer.prototype.visualization = function(id, result) { const ctx = document.getElementById(id); const aa = result; // データの定義 From ffd169a103e63ff123f0f9d240ecdba5eb20c2ab Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 01:01:00 +0900 Subject: [PATCH 49/84] fix $UI.visualizatiomViewer --- apps/viewer/dataloaders.js | 2 +- apps/viewer/init.js | 38 +++++++++++++++++++------------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index 4ab831331..a5fa4d75f 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -112,7 +112,7 @@ function layersLoader() { } var checkCoreIsReady = setInterval(function() { - if ($UI.layersViewer && $UI.layersViewerMinor && $UI.logsViewer) { + if ($UI.layersViewer && $UI.layersViewerMinor && $UI.visualizatiomViewer) { clearInterval(checkCoreIsReady); loadingHumanOverlayers(); loadingRulerOverlayers(); diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 4592a5a2f..5181595a6 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -885,13 +885,13 @@ async function initUIcomponents() { // rootCallback.bind('main'), // ); // // create UI and set data - minor - // $UI.logsViewerMinor = createVisualizationViewer( + // $UI.visualizatiomViewerMinor = createVisualizationViewer( // 'overlogsMinor', // null, // callback.bind('minor'), // rootCallback.bind('minor'), // ); - $UI.logsViewer = createVisualizationViewer( + $UI.visualizatiomViewer = createVisualizationViewer( 'overlogs', null, callback.bind('main'), @@ -1002,9 +1002,9 @@ async function initUIcomponents() { // visualization $UI.visualizationList.clearContent('visualizationlist'); - $UI.visualizationList.addContent('visualizationlist', $UI.logsViewer.elt); + $UI.visualizationList.addContent('visualizationlist', $UI.visualizatiomViewer.elt); // $UI.visualizationList.clearContent('heatMap'); - // $UI.visualizationList.addContent('heatMap', $UI.logsViewerMinor.elt); + // $UI.visualizationList.addContent('heatMap', $UI.visualizatiomViewerMinor.elt); $UI.visualizationList.elt.parentNode.removeChild($UI.visualizationList.elt); closeMinorControlPanel(); @@ -1376,7 +1376,7 @@ function createLayerViewer(id, viewerData, callback, rootCallback) { } // function createVisualizationViewer(id, viewerData, callback, rootCallback) { -// const logsViewer = new LayersViewer({ +// const visualizatiomViewer = new LayersViewer({ // id: id, // data: viewerData, // removeCallback: removeCallback, @@ -1385,11 +1385,11 @@ function createLayerViewer(id, viewerData, callback, rootCallback) { // rootCallback: rootCallback, // }); -// logsViewer.elt.parentNode.removeChild(logsViewer.elt); -// return logsViewer; +// visualizatiomViewer.elt.parentNode.removeChild(visualizatiomViewer.elt); +// return visualizatiomViewer; // } function createVisualizationViewer(id, viewerData, callback, rootCallback) { - const logsViewer = new VisualizationViewer({ + const visualizatiomViewer = new VisualizationViewer({ id: id, data: viewerData, removeCallback: removeCallback, @@ -1397,8 +1397,8 @@ function createVisualizationViewer(id, viewerData, callback, rootCallback) { callback: callback, rootCallback: rootCallback, }); - logsViewer.elt.parentNode.removeChild(logsViewer.elt); - return logsViewer; + visualizatiomViewer.elt.parentNode.removeChild(visualizatiomViewer.elt); + return visualizatiomViewer; } // create lay panel for side-by-side control function createLayPanelControl() { @@ -1518,7 +1518,7 @@ function addHumanLayerItems() { }, mainViewerItems); $UI.layersViewer.addHumanItems(mainViewerItems); - // $UI.logsViewer.addHumanItems(mainViewerItems); + // $UI.visualizatiomViewer.addHumanItems(mainViewerItems); // minor viewer minorViewer const minorViewerItems = { @@ -1559,7 +1559,7 @@ function addHumanLayerItems() { }, minorViewerItems); $UI.layersViewerMinor.addHumanItems(minorViewerItems); - // $UI.logsViewerMinor.addHumanItems(minorViewerItems); + // $UI.visualizatiomViewerMinor.addHumanItems(minorViewerItems); } // function addLogItems(){ @@ -1582,8 +1582,8 @@ function addRulerLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'ruler'); $UI.layersViewerMinor.addItems(minorViewerData, 'ruler'); - // $UI.logsViewer.addItems(mainViewerData, 'ruler'); - // $UI.logsViewerMinor.addItems(minorViewerData, 'ruler'); + // $UI.visualizatiomViewer.addItems(mainViewerData, 'ruler'); + // $UI.visualizatiomViewerMinor.addItems(minorViewerData, 'ruler'); } function addComputerLayerItems(data) { @@ -1596,8 +1596,8 @@ function addComputerLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'segmentation'); $UI.layersViewerMinor.addItems(minorViewerData, 'segmentation'); - // $UI.logsViewer.addItems(mainViewerData, 'segmentation'); - // $UI.logsViewerMinor.addItems(minorViewerData, 'segmentation'); + // $UI.visualizatiomViewer.addItems(mainViewerData, 'segmentation'); + // $UI.visualizatiomViewerMinor.addItems(minorViewerData, 'segmentation'); } function addHeatmapLayerItems(data) { @@ -1610,8 +1610,8 @@ function addHeatmapLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'heatmap'); $UI.layersViewerMinor.addItems(minorViewerData, 'heatmap'); - // $UI.logsViewer.addItems(mainViewerData, 'heatmap'); - // $UI.logsViewerMinor.addItems(minorViewerData, 'heatmap'); + // $UI.visualizatiomViewer.addItems(mainViewerData, 'heatmap'); + // $UI.visualizatiomViewerMinor.addItems(minorViewerData, 'heatmap'); } function visualizationLayerItems(data) { @@ -1628,7 +1628,7 @@ function visualizationLayerItems(data) { }); let result = countOccurrences(initialZommingData); - $UI.logsViewer.visualization('myChart', result); + $UI.visualizatiomViewer.visualization('myChart', result); } // Function to round to decimal places From 48b84a8f93c8cb1a6cda21e7a4c7fd2ee9e9a62e Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 01:02:35 +0900 Subject: [PATCH 50/84] fix id overvisuzalization --- apps/viewer/init.js | 6 +++--- apps/viewer/viewer.html | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 5181595a6..d4366b7da 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -879,20 +879,20 @@ async function initUIcomponents() { ); // create UI and set data // $UI.VisualizationViewer = createVisualizationViewer( - // 'overlogs', + // 'overvisuzalization', // null, // callback.bind('main'), // rootCallback.bind('main'), // ); // // create UI and set data - minor // $UI.visualizatiomViewerMinor = createVisualizationViewer( - // 'overlogsMinor', + // 'overvisuzalizationMinor', // null, // callback.bind('minor'), // rootCallback.bind('minor'), // ); $UI.visualizatiomViewer = createVisualizationViewer( - 'overlogs', + 'overvisuzalization', null, callback.bind('main'), rootCallback.bind('main'), diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index 38fcd3966..9915aa7a9 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -444,9 +444,9 @@
-
+
-
+
From 302db07f9f1389630bc20c055a02ed7031be51ad Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 01:22:36 +0900 Subject: [PATCH 51/84] fix css , js pass --- apps/viewer/viewer.html | 13 +- components/logsviewer/logsviewer.css | 13 -- components/logsviewer/logsviewer.js | 223 --------------------------- 3 files changed, 3 insertions(+), 246 deletions(-) delete mode 100644 components/logsviewer/logsviewer.css delete mode 100644 components/logsviewer/logsviewer.js diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index 9915aa7a9..d59c59b25 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -68,13 +68,6 @@ href="../../components/sidemenu/sidemenu.css" /> - - - + @@ -319,7 +312,7 @@ diff --git a/components/logsviewer/logsviewer.css b/components/logsviewer/logsviewer.css deleted file mode 100644 index e68d6ae9f..000000000 --- a/components/logsviewer/logsviewer.css +++ /dev/null @@ -1,13 +0,0 @@ -#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/components/logsviewer/logsviewer.js b/components/logsviewer/logsviewer.js deleted file mode 100644 index c872b95ed..000000000 --- a/components/logsviewer/logsviewer.js +++ /dev/null @@ -1,223 +0,0 @@ -/** - * CaMicroscope Logs Viewer. A component that shows logs of annotation by timeline. - * @constructor - * @param {Object} options - * All required and optional settings for instantiating a new instance of a Layer Manager. - * @param {String} options.id - * Id of the element to append the Layer Manager's container element to. - * @param {Object[]} options.data - * the data set of the layers. - * @param {String} options.data.id - * layer's id - * @param {String} options.data.name - * layer's name - * @param {String} options.data.typeId - * layer's type id - * @param {String} options.data.typeName - * layer's type name - * - */ -function VisualizationViewer(options) { - this.className = 'LogsViewer'; - 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 usuDiv = document.createElement('div'); - usuDiv.classList.add('usulist'); - usuDiv.style.display = 'block'; - usuDiv.innerHTML = ``; - this.elt.appendChild(usuDiv); -} - -VisualizationViewer.prototype.addHumanItem = function( - item, - type, - parent, - isShow = true, -) { - if (!this.defaultType.includes(type)) { - console.warn('Error Type !!!'); - return; - } - - var cate = this.setting.categoricalData[type].items[parent]; - - if (!cate) { - // no parent node - const newCate = {}; - if (item.label) { - newCate[item.label.id] = { - item: { - id: item.label.id, - name: item.label.name, - }, - items: [], - }; - this.setting.categoricalData[type].items[parent] = newCate; - this.addHumanItems(newCate); - cate = this.setting.categoricalData[type].items[parent]; - } else { - console.error('Layersviewer.addHumanItem has error'); - } - } - - const data = {item, isShow}; - // add Data - cate.items.push(data); - // add item on UI - data.elt = document.createElement('li'); - data.elt.dataset.id = data.item.id; - data.elt.dataset.title = data.item.label ? - `${data.item.name}${data.item.id}` : - `${data.item.name}`; - data.elt.innerHTML = `
room
- -
clear
- `; - - // event: show/hidden layers for each annotation - const chk = data.elt.querySelector('input[type=checkbox][data-type=leaf]'); - chk.addEventListener('change', this.__change.bind(this)); - // - const removeDiv = data.elt.querySelector('div.material-icons.remove'); - removeDiv.addEventListener('click', () => { - this.setting.removeCallback.call(this, data, cate.item.id); - }); - const locationDiv = data.elt.querySelector('div.material-icons.location'); - locationDiv.addEventListener('click', () => { - this.setting.locationCallback.call(this, data); - }); - - cate.children.insertBefore(data.elt, cate.children.firstChild); - // update num - cate.num.textContent = cate.items.length; - cate.elt.style.display = 'flex'; - - // total human anotation nums - var humanNum = 0; - const obj = this.setting.categoricalData[type].items; - for (const key in obj) { - if (Object.prototype.hasOwnProperty.call(obj, key)) { - humanNum += obj[key].items.length; - } - } - this.setting.categoricalData[type].num.textContent = humanNum; -}; - -VisualizationViewer.prototype.addHumanItems = function(data) { - console.log(data); -}; - -VisualizationViewer.prototype.visualization = function(id, result) { - const ctx = document.getElementById(id); - const aa = result; - // データの定義 - 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, - }], - }; - - // データセットの最大値を取得し、最大値に1を加算する - var maxYValue = Math.max(...data.datasets[0].data.map((d)=> d.y)) + 1; - - // オプションの設定 - 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, // 縦軸が0から始まるように設定 - title: { - display: true, - text: 'Draw Annotation Count', - }, - ticks: { - stepSize: 1, // 縦軸に表示するステップサイズを1に設定 - callback: function(value) { - if (value % 1 === 0) { - return value; // 整数値のみを表示 - } - }, - }, - max: maxYValue, // 縦軸の最大値を設定 - }, - }, - }; - - // 散布図の作成 - new Chart(ctx, { - type: 'scatter', - data: data, - options: options, - }); -}; - From da45fb227c79ebc618bc6e720c89e52dd7ad5d00 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 01:24:35 +0900 Subject: [PATCH 52/84] delete addHumanItem in visualizationviewer.js --- .../visualizationviewer/visualiationviewer.js | 88 ------------------- 1 file changed, 88 deletions(-) diff --git a/components/visualizationviewer/visualiationviewer.js b/components/visualizationviewer/visualiationviewer.js index dc91a33e8..a63eb1dab 100644 --- a/components/visualizationviewer/visualiationviewer.js +++ b/components/visualizationviewer/visualiationviewer.js @@ -63,94 +63,6 @@ function VisualizationViewer(options) { this.elt.appendChild(usuDiv); } -VisualizationViewer.prototype.addHumanItem = function( - item, - type, - parent, - isShow = true, -) { - if (!this.defaultType.includes(type)) { - console.warn('Error Type !!!'); - return; - } - - var cate = this.setting.categoricalData[type].items[parent]; - - if (!cate) { - // no parent node - const newCate = {}; - if (item.label) { - newCate[item.label.id] = { - item: { - id: item.label.id, - name: item.label.name, - }, - items: [], - }; - this.setting.categoricalData[type].items[parent] = newCate; - this.addHumanItems(newCate); - cate = this.setting.categoricalData[type].items[parent]; - } else { - console.error('Layersviewer.addHumanItem has error'); - } - } - - const data = {item, isShow}; - // add Data - cate.items.push(data); - // add item on UI - data.elt = document.createElement('li'); - data.elt.dataset.id = data.item.id; - data.elt.dataset.title = data.item.label ? - `${data.item.name}${data.item.id}` : - `${data.item.name}`; - data.elt.innerHTML = `
room
- -
clear
- `; - - // event: show/hidden layers for each annotation - const chk = data.elt.querySelector('input[type=checkbox][data-type=leaf]'); - chk.addEventListener('change', this.__change.bind(this)); - // - const removeDiv = data.elt.querySelector('div.material-icons.remove'); - removeDiv.addEventListener('click', () => { - this.setting.removeCallback.call(this, data, cate.item.id); - }); - const locationDiv = data.elt.querySelector('div.material-icons.location'); - locationDiv.addEventListener('click', () => { - this.setting.locationCallback.call(this, data); - }); - - cate.children.insertBefore(data.elt, cate.children.firstChild); - // update num - cate.num.textContent = cate.items.length; - cate.elt.style.display = 'flex'; - - // total human anotation nums - var humanNum = 0; - const obj = this.setting.categoricalData[type].items; - for (const key in obj) { - if (Object.prototype.hasOwnProperty.call(obj, key)) { - humanNum += obj[key].items.length; - } - } - this.setting.categoricalData[type].num.textContent = humanNum; -}; - -VisualizationViewer.prototype.addHumanItems = function(data) { - console.log(data); -}; VisualizationViewer.prototype.visualization = function(id, result) { const ctx = document.getElementById(id); From be6e49d1cc0ece217df3566b202985306165e932 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 01:29:33 +0900 Subject: [PATCH 53/84] fix comment --- .../visualizationviewer/visualiationviewer.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/components/visualizationviewer/visualiationviewer.js b/components/visualizationviewer/visualiationviewer.js index a63eb1dab..137eb4f94 100644 --- a/components/visualizationviewer/visualiationviewer.js +++ b/components/visualizationviewer/visualiationviewer.js @@ -56,18 +56,18 @@ function VisualizationViewer(options) { }; empty(this.elt); - const usuDiv = document.createElement('div'); - usuDiv.classList.add('usulist'); - usuDiv.style.display = 'block'; - usuDiv.innerHTML = ``; - this.elt.appendChild(usuDiv); + 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 ', @@ -77,10 +77,10 @@ VisualizationViewer.prototype.visualization = function(id, result) { }], }; - // データセットの最大値を取得し、最大値に1を加算する + // 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: { @@ -107,20 +107,20 @@ VisualizationViewer.prototype.visualization = function(id, result) { }, }, y: { - beginAtZero: true, // 縦軸が0から始まるように設定 + beginAtZero: true, // Set vertical axis to start from 0 title: { display: true, text: 'Draw Annotation Count', }, ticks: { - stepSize: 1, // 縦軸に表示するステップサイズを1に設定 + stepSize: 1, // Set the step size displayed on the vertical axis to 1 callback: function(value) { if (value % 1 === 0) { - return value; // 整数値のみを表示 + return value; } }, }, - max: maxYValue, // 縦軸の最大値を設定 + max: maxYValue, }, }, }; From 2bc6ec98e4f4652d8584af0b411786aace39cdd2 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 01:30:36 +0900 Subject: [PATCH 54/84] add comment --- components/visualizationviewer/visualiationviewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/visualizationviewer/visualiationviewer.js b/components/visualizationviewer/visualiationviewer.js index 137eb4f94..a8fe5a7ba 100644 --- a/components/visualizationviewer/visualiationviewer.js +++ b/components/visualizationviewer/visualiationviewer.js @@ -125,7 +125,7 @@ VisualizationViewer.prototype.visualization = function(id, result) { }, }; - // 散布図の作成 + // Create scatter diagram new Chart(ctx, { type: 'scatter', data: data, From 4d9c5587468ba709b5e1186e781d8df8aae287dd Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 01:40:49 +0900 Subject: [PATCH 55/84] delete console.log --- apps/viewer/dataloaders.js | 1 - apps/viewer/init.js | 3 --- 2 files changed, 4 deletions(-) diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index a5fa4d75f..046b6e743 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -101,7 +101,6 @@ function layersLoader() { // logs function loadingLogs() { $CAMIC.store.findMark($D.params.slideId).then(function(layers) { - console.log('original data', layers); $D.logs = [...layers.map(covertToVisualization)]; visualizationLayerItems($D.logs); }).catch(function(error) { diff --git a/apps/viewer/init.js b/apps/viewer/init.js index d4366b7da..4bf0baa22 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -136,8 +136,6 @@ function initialize() { layersLoader(); } }, 100); - console.log('$UI', $UI); - console.log('$D', $D); } // setting core functionalities function initCore() { @@ -1622,7 +1620,6 @@ function visualizationLayerItems(data) { if (d.states) { for (let i = 0; i < d.geometries.features.length; i++) { initialZommingData.push(roundToSecondDecimalPlace(d.states.zoom)); - console.log(initialZommingData); } } }); From 9b9f79eb748adeb337be789cd54814a0f5cf6d25 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 01:46:14 +0900 Subject: [PATCH 56/84] fix dataloader and $D --- apps/viewer/dataloaders.js | 10 +++++----- apps/viewer/init.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index 046b6e743..28919b539 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -98,11 +98,11 @@ function layersLoader() { }); } - // logs - function loadingLogs() { + // visualization + function visualization() { $CAMIC.store.findMark($D.params.slideId).then(function(layers) { - $D.logs = [...layers.map(covertToVisualization)]; - visualizationLayerItems($D.logs); + $D.visualizations = [...layers.map(covertToVisualization)]; + visualizationLayerItems($D.visualizations); }).catch(function(error) { // overlayers schema $UI.message.addError('Loading Logs is Error'); @@ -117,7 +117,7 @@ function layersLoader() { loadingRulerOverlayers(); loadingHeatmapOverlayers(); loadingComputerOverlayers(); - loadingLogs(); + visualization(); } }, 500); } diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 4bf0baa22..bf8dffba9 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -1616,7 +1616,7 @@ function visualizationLayerItems(data) { var initialZommingData = []; // Get initial data - $D.logs.map((d) => { + $D.visualizations.map((d) => { if (d.states) { for (let i = 0; i < d.geometries.features.length; i++) { initialZommingData.push(roundToSecondDecimalPlace(d.states.zoom)); From ced2289bef53fcd2cc272617e27bcc6e01799152 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 01:50:11 +0900 Subject: [PATCH 57/84] add comment --- apps/viewer/init.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index bf8dffba9..0ed5f42a8 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -1634,10 +1634,10 @@ function roundToSecondDecimalPlace(num) { } 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; @@ -1646,7 +1646,7 @@ function countOccurrences(arr) { } }); - // 結果を2次元配列に変換 + // Convert the result to a 2-dimensional array let result = []; for (let key in countMap) { if (countMap.hasOwnProperty(key)) { From 08cad766942920f2d375379f705144028746082e Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Mon, 15 Jul 2024 18:21:38 +0100 Subject: [PATCH 58/84] added color for 'report it' link --- apps/common.css | 4 ++++ 1 file changed, 4 insertions(+) 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; } From 5d0604cca0b9c6da8fe9217977240ea59cc80ff9 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 19:06:01 +0900 Subject: [PATCH 59/84] fix comments --- README.md | 3 +-- apps/viewer/init.js | 23 ++++++++++++++++++- apps/viewer/uicallbacks.js | 2 +- .../visualizationviewer/visualiationviewer.js | 4 ++-- .../visualizationviewer.css | 4 ++-- 5 files changed, 28 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 3d0315875..e0e54d650 100644 --- a/README.md +++ b/README.md @@ -46,8 +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. | -// TODO add Log icon -| ![](https://fonts.gstatic.com/s/i/materialicons/help/v4/24px.svg) | Log | Click to view a list of annotation. | +| ![](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/viewer/init.js b/apps/viewer/init.js index 0ed5f42a8..f2042a099 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -178,6 +178,7 @@ function initCore() { $D.pages.table = '../../../'; } + console.log($D); try { const slideQuery = {}; slideQuery.id = $D.params.slideId; @@ -845,6 +846,26 @@ async function initUIcomponents() { data: [], }); + // create control + + // TODO move to add layers + // create main layer viewer items with states + // const mainViewerData = $D.overlayers.map((d) => { + // const isShow = + // $D.params.states && + // $D.params.states.l && + // $D.params.states.l.includes(d.id) ? + // true : + // false; + // return {item: d, isShow: isShow}; + // }); + + + // TODO move to add layers + // create monir layer viewer items + // const minorViewerData = $D.overlayers.map((d) => { + // return {item: d, isShow: false}; + // }); $UI.AssistantViewer = new Assistant({ id: 'ml_assistant', viewer: $CAMIC.viewer, @@ -965,7 +986,7 @@ async function initUIcomponents() { $UI.loadStatus.classList.add('load-status'); $UI.loadStatus.innerHTML = `
cached
Loading
`; $UI.layersSideMenu.addContent($UI.loadStatus); - // TODO logs + // zoom locker control $UI.lockerPanel = document.createElement('div'); $UI.lockerPanel.classList.add('lock_panel'); diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index 74dcd9a5d..d273b5533 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -2741,7 +2741,7 @@ async function captureSlide() { /* Log annotaiton */ let isSidemenuOpen = true; -// 他のものを全て閉じる処理を追加 + function visualization() { if (isSidemenuOpen == true) { $UI.visualizationSideMenu.open(); diff --git a/components/visualizationviewer/visualiationviewer.js b/components/visualizationviewer/visualiationviewer.js index a8fe5a7ba..d101198a6 100644 --- a/components/visualizationviewer/visualiationviewer.js +++ b/components/visualizationviewer/visualiationviewer.js @@ -85,7 +85,7 @@ VisualizationViewer.prototype.visualization = function(id, result) { plugins: { title: { display: true, - text: 'Draw Annotation Count vs zooming', // 図のタイトル + text: 'Draw Annotation Count vs zooming', }, tooltip: { callbacks: { @@ -125,7 +125,7 @@ VisualizationViewer.prototype.visualization = function(id, result) { }, }; - // Create scatter diagram + // Create new Chart(ctx, { type: 'scatter', data: data, diff --git a/components/visualizationviewer/visualizationviewer.css b/components/visualizationviewer/visualizationviewer.css index e68d6ae9f..64093a899 100644 --- a/components/visualizationviewer/visualizationviewer.css +++ b/components/visualizationviewer/visualizationviewer.css @@ -1,12 +1,12 @@ #canvasContainer { - background-color: rgb(255, 253, 253); /* 背景色を設定 */ + background-color: rgb(255, 253, 253); display: flex; justify-content: center; align-items: center; } #myChart { - background-color: rgb(255, 253, 253); /* 背景色を設定 */ + background-color: rgb(255, 253, 253); display: flex; justify-content: center; align-items: center; From 88d1846fa65974d03c343f5ee00b3eadb0b6d9c7 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Tue, 16 Jul 2024 19:48:20 +0900 Subject: [PATCH 60/84] delete graph in info page --- apps/Info.html | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/apps/Info.html b/apps/Info.html index 4cb5598be..7f964f635 100644 --- a/apps/Info.html +++ b/apps/Info.html @@ -115,34 +115,6 @@

Heatmaps

-
-

Hello, World!!

- - - -
-
From 109316d5df5a6a85a397833ffb2c3d6a1761594f Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Tue, 16 Jul 2024 14:27:16 +0100 Subject: [PATCH 61/84] changed bg-info color --- apps/info.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/info.css b/apps/info.css index 30bc35dc7..c14f685c5 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: #0d6efd!important; } .page-container{ height:100vh; From b91f0ea97c16ea7edac41c3aca05a1cfe187eed1 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Tue, 16 Jul 2024 16:18:07 +0100 Subject: [PATCH 62/84] change bg-info color From c8ad34dd68e15557ff07d5f784e18002ff1aaa93 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Tue, 16 Jul 2024 16:18:39 +0100 Subject: [PATCH 63/84] change bg-info color --- apps/info.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/info.css b/apps/info.css index c14f685c5..a90716473 100644 --- a/apps/info.css +++ b/apps/info.css @@ -18,7 +18,7 @@ footer{ background-color: #343a40 !important; } .bg-info { - background-color: #0d6efd!important; + background-color: #17a2b8 !important; } .page-container{ height:100vh; From 5b9c292eb94b080cac9ff002d630c0c6e9555769 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Tue, 16 Jul 2024 16:20:40 +0100 Subject: [PATCH 64/84] changed slide button bg color --- apps/Info.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/Info.html b/apps/Info.html index 7f964f635..412d7f41b 100644 --- a/apps/Info.html +++ b/apps/Info.html @@ -75,7 +75,7 @@

caMicroscope

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

- +
From 3d20b02a589a2268b882d2b41353527dcb59cc75 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Tue, 16 Jul 2024 16:21:51 +0100 Subject: [PATCH 65/84] changed info button bg color --- apps/table.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/table.html b/apps/table.html index ae8075125..010003b77 100644 --- a/apps/table.html +++ b/apps/table.html @@ -81,7 +81,7 @@

caMicroscope

-
+
From a3422927167f8f4b0f835cee59483bbb4233de25 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Tue, 16 Jul 2024 16:28:28 +0100 Subject: [PATCH 66/84] changed DICOM button bg color --- apps/table.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/table.html b/apps/table.html index 010003b77..10a87ded2 100644 --- a/apps/table.html +++ b/apps/table.html @@ -132,7 +132,7 @@

caMicroscope

From 10a8801a0bef3d0a4219e03653da426b1dee21ee Mon Sep 17 00:00:00 2001 From: YukaUU Date: Thu, 18 Jul 2024 19:51:06 +0900 Subject: [PATCH 67/84] change name from states to viewerStates --- apps/viewer/init.js | 19 ++++++++++--------- apps/viewer/uicallbacks.js | 10 +++++----- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index f2042a099..0356e4510 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -260,16 +260,17 @@ function initCore() { // add center position and zoom - if (data.states != undefined) { - // Rounds a number to the specified number of decimal places. - function roundTo(num, decimalPlaces) { - const factor = 10 ** decimalPlaces; - return Math.round(num * factor) / factor; - } + console.log('data', data); + if (data.viewerStates != undefined) { const decimalPlaces = 3; - attributes.X = data.states.x, - attributes.Y = data.states.y, - attributes.zoom = roundTo(data.states.zoom, decimalPlaces); + attributes.X = data.viewerStates.x, + attributes.Y = data.viewerStates.y, + attributes.zoom = roundTo(data.viewerStates.zoom, 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; } diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index d273b5533..2b3360e4e 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -895,7 +895,7 @@ function annoCallback(data) { noteData.notes = resultString; // get center position and zoom - let states = StatesHelper.getCurrentStates(true); + let viewerStates = StatesHelper.getCurrentStates(true); // save // provenance @@ -922,10 +922,10 @@ function annoCallback(data) { $CAMIC.viewer, $CAMIC.viewer.canvasDrawInstance.getImageFeatureCollection(), ), - states: { - x: states.x, - y: states.y, - zoom: states.z, + viewerStates: { + x: viewerStates.x, + y: viewerStates.y, + zoom: viewerStates.z, }, }; From 29e4a084f00cffc164e5592cca3fbaba0786f6a4 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Thu, 18 Jul 2024 21:41:16 +0900 Subject: [PATCH 68/84] fix --- apps/viewer/init.js | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 0356e4510..e13696ea7 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -260,7 +260,6 @@ function initCore() { // add center position and zoom - console.log('data', data); if (data.viewerStates != undefined) { const decimalPlaces = 3; attributes.X = data.viewerStates.x, From 67c0196a292463a89c777bbc294a523e11adacb6 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Thu, 18 Jul 2024 23:10:58 +0900 Subject: [PATCH 69/84] add zooming in each annotation at Multi mode --- core/extension/openseadragon-canvas-draw-overlay.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core/extension/openseadragon-canvas-draw-overlay.js b/core/extension/openseadragon-canvas-draw-overlay.js index 1bb203e82..ffe279428 100644 --- a/core/extension/openseadragon-canvas-draw-overlay.js +++ b/core/extension/openseadragon-canvas-draw-overlay.js @@ -1023,6 +1023,7 @@ if (this.drawMode == 'point') { this._current_path_ = { type: 'Feature', + zoom: StatesHelper.getCurrentStates(true).z, properties: { style: {}, }, @@ -1043,6 +1044,7 @@ properties: { style: {}, }, + zoom: StatesHelper.getCurrentStates(true).z, geometry: { type: this.drawMode === 'line' || this.drawMode === 'grid' ? From 467755e8d3f434207c6433906e024b02879fcf54 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Thu, 18 Jul 2024 23:23:17 +0900 Subject: [PATCH 70/84] ad zoom data each annotation --- apps/viewer/uicallbacks.js | 1 + common/util.js | 1 + core/extension/openseadragon-canvas-draw-overlay.js | 1 + 3 files changed, 3 insertions(+) diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index 2b3360e4e..807fdab7a 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -929,6 +929,7 @@ function annoCallback(data) { }, }; + console.log('annotJson', annotJson); // save annotation $CAMIC.store .addMark(annotJson) diff --git a/common/util.js b/common/util.js index d49942231..c347b8a87 100644 --- a/common/util.js +++ b/common/util.js @@ -472,6 +472,7 @@ function covertToViewportFeature(width, height, og) { og.geometry.type; feature = { type: 'Feature', + zooming: og.zoom, properties: { style: {}, area: null, diff --git a/core/extension/openseadragon-canvas-draw-overlay.js b/core/extension/openseadragon-canvas-draw-overlay.js index ffe279428..235d22b6f 100644 --- a/core/extension/openseadragon-canvas-draw-overlay.js +++ b/core/extension/openseadragon-canvas-draw-overlay.js @@ -1011,6 +1011,7 @@ // const featrue = this._draws_data_[i].feature; rs.features = this._draws_data_.slice(0, this._path_index); // } + console.log('rs', rs); return rs; }, From 7204c13ec7975156e94c2262df34ca41379698c2 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Thu, 18 Jul 2024 23:39:46 +0900 Subject: [PATCH 71/84] add viewerStates in each annotation at multi mode --- apps/viewer/init.js | 1 + core/extension/openseadragon-canvas-draw-overlay.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index e13696ea7..599d081c8 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -222,6 +222,7 @@ function initCore() { } // for support QUIP 2.0 const data = Array.isArray(e.data) ? e.data[e.data.selected] : e.data; + console.log('data', data); const type = data.provenance.analysis.source; let body; diff --git a/core/extension/openseadragon-canvas-draw-overlay.js b/core/extension/openseadragon-canvas-draw-overlay.js index 235d22b6f..fcb06e558 100644 --- a/core/extension/openseadragon-canvas-draw-overlay.js +++ b/core/extension/openseadragon-canvas-draw-overlay.js @@ -1024,7 +1024,7 @@ if (this.drawMode == 'point') { this._current_path_ = { type: 'Feature', - zoom: StatesHelper.getCurrentStates(true).z, + viewerStates: StatesHelper.getCurrentStates(true), properties: { style: {}, }, @@ -1045,7 +1045,7 @@ properties: { style: {}, }, - zoom: StatesHelper.getCurrentStates(true).z, + viewerStates: StatesHelper.getCurrentStates(true), geometry: { type: this.drawMode === 'line' || this.drawMode === 'grid' ? From 277397e78e3836b617f9805633c71d43273ed103 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Thu, 18 Jul 2024 23:47:13 +0900 Subject: [PATCH 72/84] add viewerStates in each annotation at multi mode --- common/util.js | 53 ++++++++++++++++++++++++-------------------------- 1 file changed, 25 insertions(+), 28 deletions(-) diff --git a/common/util.js b/common/util.js index c347b8a87..39c23ccc4 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,7 +469,7 @@ function covertToViewportFeature(width, height, og) { og.geometry.type; feature = { type: 'Feature', - zooming: og.zoom, + viewerStates: og.viewerStates, properties: { style: {}, area: null, @@ -531,7 +528,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, @@ -567,7 +564,7 @@ function covertToRulerLayer(data) { name: data.name, typeId: data.type, typeName: data.source, - shape: "Polygon", + shape: 'Polygon', creator: data.creator, data: null, }; @@ -690,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)); } } } @@ -708,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; @@ -729,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; } @@ -756,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; From 17e6f8068e0ff0854e2a57f3893cee95e7696300 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Fri, 19 Jul 2024 00:17:23 +0900 Subject: [PATCH 73/84] fix Multi mode on the pencil tool seems to save all annotations --- apps/viewer/init.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 599d081c8..94dfb4ba1 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -222,8 +222,6 @@ function initCore() { } // for support QUIP 2.0 const data = Array.isArray(e.data) ? e.data[e.data.selected] : e.data; - console.log('data', data); - const type = data.provenance.analysis.source; let body; let attributes; @@ -261,11 +259,11 @@ function initCore() { // add center position and zoom - if (data.viewerStates != undefined) { + if (data.geometries.features[data.selected].viewerStates != null || data.geometries.features[data.selected].viewerStates != undefined) { const decimalPlaces = 3; - attributes.X = data.viewerStates.x, - attributes.Y = data.viewerStates.y, - attributes.zoom = roundTo(data.viewerStates.zoom, decimalPlaces); + 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) { From 037c693b24ef11b28c4ad3a89cae175a0c9f2c7b Mon Sep 17 00:00:00 2001 From: YukaUU Date: Fri, 19 Jul 2024 00:35:46 +0900 Subject: [PATCH 74/84] fix error This line has a length of 148. Maximum allowed is 125 --- apps/viewer/init.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 94dfb4ba1..530451766 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -259,7 +259,8 @@ function initCore() { // add center position and zoom - if (data.geometries.features[data.selected].viewerStates != null || data.geometries.features[data.selected].viewerStates != undefined) { + 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, From 27c7fd369feba98224623a4f821e3320d4bfec8c Mon Sep 17 00:00:00 2001 From: YukaUU Date: Fri, 19 Jul 2024 01:01:33 +0900 Subject: [PATCH 75/84] delete viewerStates ( previuos commit :added viewerStates each annotation --- apps/viewer/uicallbacks.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index 807fdab7a..e87c68520 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -922,11 +922,6 @@ function annoCallback(data) { $CAMIC.viewer, $CAMIC.viewer.canvasDrawInstance.getImageFeatureCollection(), ), - viewerStates: { - x: viewerStates.x, - y: viewerStates.y, - zoom: viewerStates.z, - }, }; console.log('annotJson', annotJson); From e748f61d72c1fa63e973151337a2a860028bdd04 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Fri, 19 Jul 2024 02:19:19 +0900 Subject: [PATCH 76/84] fix visualization panel using $D.visualizations.geometries.features --- apps/viewer/dataloaders.js | 1 - apps/viewer/init.js | 9 ++++----- common/util.js | 4 ---- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index 28919b539..d95f68e83 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -104,7 +104,6 @@ function layersLoader() { $D.visualizations = [...layers.map(covertToVisualization)]; visualizationLayerItems($D.visualizations); }).catch(function(error) { - // overlayers schema $UI.message.addError('Loading Logs is Error'); console.error(error); }); diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 530451766..b786c3590 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -178,7 +178,6 @@ function initCore() { $D.pages.table = '../../../'; } - console.log($D); try { const slideQuery = {}; slideQuery.id = $D.params.slideId; @@ -1638,11 +1637,11 @@ function visualizationLayerItems(data) { // Get initial data $D.visualizations.map((d) => { - if (d.states) { - for (let i = 0; i < d.geometries.features.length; i++) { - initialZommingData.push(roundToSecondDecimalPlace(d.states.zoom)); + d.geometries.features.map((sd)=>{ + if (features.viewerStates) { + initialZommingData.push(roundToSecondDecimalPlace(features.viewerStates.z)); } - } + }); }); let result = countOccurrences(initialZommingData); diff --git a/common/util.js b/common/util.js index 39c23ccc4..8df6069ea 100644 --- a/common/util.js +++ b/common/util.js @@ -590,8 +590,6 @@ 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 states = data.states || null; - const shape = data.geometries.features[0].geometry.type || null; const isGrid = data.provenance.analysis.isGrid || false; const geometries = data.geometries; @@ -607,7 +605,6 @@ function covertToVisualization(data) { id: data.provenance.analysis.labelled, name: data.provenance.analysis.name, }, - states: states, geometries: geometries, data: null, }; @@ -619,7 +616,6 @@ function covertToVisualization(data) { typeName: typeName, creator: data.creator, isGrid: isGrid, - states: states, geometries: geometries, data: null, }; From a0939307fbb85ce869e20bed2acfeda5a35e53e6 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Fri, 19 Jul 2024 02:27:51 +0900 Subject: [PATCH 77/84] fix small bug --- apps/viewer/dataloaders.js | 2 +- apps/viewer/init.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index d95f68e83..33ad204c1 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -104,7 +104,7 @@ function layersLoader() { $D.visualizations = [...layers.map(covertToVisualization)]; visualizationLayerItems($D.visualizations); }).catch(function(error) { - $UI.message.addError('Loading Logs is Error'); + $UI.message.addError('Loading visualizations is Error'); console.error(error); }); } diff --git a/apps/viewer/init.js b/apps/viewer/init.js index b786c3590..7ec7280be 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -1637,9 +1637,9 @@ function visualizationLayerItems(data) { // Get initial data $D.visualizations.map((d) => { - d.geometries.features.map((sd)=>{ - if (features.viewerStates) { - initialZommingData.push(roundToSecondDecimalPlace(features.viewerStates.z)); + d.geometries.features.map((ditailData)=>{ + if (ditailData.viewerStates) { + initialZommingData.push(roundToSecondDecimalPlace(ditailData.viewerStates.z)); } }); }); From 4e6f4805c4474a33c1089483e75fbada70b69e31 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Fri, 19 Jul 2024 02:43:13 +0900 Subject: [PATCH 78/84] remove viewerStates:image --- common/util.js | 6 +++++- core/extension/openseadragon-canvas-draw-overlay.js | 12 ++++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/common/util.js b/common/util.js index 8df6069ea..6a1b08212 100644 --- a/common/util.js +++ b/common/util.js @@ -469,7 +469,11 @@ function covertToViewportFeature(width, height, og) { og.geometry.type; feature = { type: 'Feature', - viewerStates: og.viewerStates, + viewerStates: { + x: og.viewerStates.x, + y: og.viewerStates.y, + z: og.viewerStates.z, + }, properties: { style: {}, area: null, diff --git a/core/extension/openseadragon-canvas-draw-overlay.js b/core/extension/openseadragon-canvas-draw-overlay.js index fcb06e558..a55e2f472 100644 --- a/core/extension/openseadragon-canvas-draw-overlay.js +++ b/core/extension/openseadragon-canvas-draw-overlay.js @@ -1024,7 +1024,11 @@ if (this.drawMode == 'point') { this._current_path_ = { type: 'Feature', - viewerStates: StatesHelper.getCurrentStates(true), + viewerStates: { + x: StatesHelper.getCurrentStates(true).x, + y: StatesHelper.getCurrentStates(true).y, + z: StatesHelper.getCurrentStates(true).y + }, properties: { style: {}, }, @@ -1045,7 +1049,11 @@ properties: { style: {}, }, - viewerStates: StatesHelper.getCurrentStates(true), + viewerStates: { + x: StatesHelper.getCurrentStates(true).x, + y: StatesHelper.getCurrentStates(true).y, + z: StatesHelper.getCurrentStates(true).z, + }, geometry: { type: this.drawMode === 'line' || this.drawMode === 'grid' ? From 0076c4d8784813363d955fe1edda5962354e5a4e Mon Sep 17 00:00:00 2001 From: YukaUU Date: Fri, 19 Jul 2024 23:56:48 +0900 Subject: [PATCH 79/84] fix point viewerStates --- core/extension/openseadragon-canvas-draw-overlay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/extension/openseadragon-canvas-draw-overlay.js b/core/extension/openseadragon-canvas-draw-overlay.js index a55e2f472..a54681c26 100644 --- a/core/extension/openseadragon-canvas-draw-overlay.js +++ b/core/extension/openseadragon-canvas-draw-overlay.js @@ -1027,7 +1027,7 @@ viewerStates: { x: StatesHelper.getCurrentStates(true).x, y: StatesHelper.getCurrentStates(true).y, - z: StatesHelper.getCurrentStates(true).y + z: StatesHelper.getCurrentStates(true).z }, properties: { style: {}, From 6dafdf62178f34384c4819c5cc96a1fb24d4fa36 Mon Sep 17 00:00:00 2001 From: Birm Date: Fri, 19 Jul 2024 11:07:59 -0400 Subject: [PATCH 80/84] render toolbar ariaLabel --- components/toolbar/toolbar.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js index 1820c2e0a..798778eac 100644 --- a/components/toolbar/toolbar.js +++ b/components/toolbar/toolbar.js @@ -213,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, { @@ -275,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'; @@ -332,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; @@ -385,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) { @@ -512,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) { From 591a2659ca101cfe8a9b09c9413863fbeb802ba3 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sat, 20 Jul 2024 17:02:00 +0900 Subject: [PATCH 81/84] fix small bug --- apps/viewer/dataloaders.js | 2 +- apps/viewer/init.js | 64 +++++++++++++------------------------- 2 files changed, 22 insertions(+), 44 deletions(-) diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js index 33ad204c1..4d47a06c6 100644 --- a/apps/viewer/dataloaders.js +++ b/apps/viewer/dataloaders.js @@ -110,7 +110,7 @@ function layersLoader() { } var checkCoreIsReady = setInterval(function() { - if ($UI.layersViewer && $UI.layersViewerMinor && $UI.visualizatiomViewer) { + if ($UI.layersViewer && $UI.layersViewerMinor && $UI.visualizationViewer) { clearInterval(checkCoreIsReady); loadingHumanOverlayers(); loadingRulerOverlayers(); diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 7ec7280be..62ee9097e 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -747,6 +747,10 @@ async function initUIcomponents() { callback: toggleSideMenu, }); + const loading = `
loading layers...
`; + $UI.layersSideMenu.addContent(loading); + // TODO add layer viewer + $UI.visualizationSideMenu = new SideMenu({ id: 'visualization_panel', width: 250, @@ -895,26 +899,22 @@ async function initUIcomponents() { callback.bind('minor'), rootCallback.bind('minor'), ); - // create UI and set data - // $UI.VisualizationViewer = createVisualizationViewer( - // 'overvisuzalization', - // null, - // callback.bind('main'), - // rootCallback.bind('main'), - // ); + + $UI.visualizationViewer = createVisualizationViewer( + 'overvisuzalization', + null, + callback.bind('main'), + rootCallback.bind('main'), + ); + // // create UI and set data - minor - // $UI.visualizatiomViewerMinor = createVisualizationViewer( + // $UI.visualizationViewerMinor = createVisualizationViewer( // 'overvisuzalizationMinor', // null, // callback.bind('minor'), // rootCallback.bind('minor'), // ); - $UI.visualizatiomViewer = createVisualizationViewer( - 'overvisuzalization', - null, - callback.bind('main'), - rootCallback.bind('main'), - ); + // TODO move to add layers // if ($D.params.states && $D.params.states.l) { // $D.params.states.l.forEach((id) => @@ -1020,9 +1020,10 @@ async function initUIcomponents() { // visualization $UI.visualizationList.clearContent('visualizationlist'); - $UI.visualizationList.addContent('visualizationlist', $UI.visualizatiomViewer.elt); + $UI.visualizationList.addContent('visualizationlist', $UI.visualizationViewer.elt); + // TODO Heatmap // $UI.visualizationList.clearContent('heatMap'); - // $UI.visualizationList.addContent('heatMap', $UI.visualizatiomViewerMinor.elt); + // $UI.visualizationList.addContent('heatMap', $UI.visualizationViewerMinor.elt); $UI.visualizationList.elt.parentNode.removeChild($UI.visualizationList.elt); closeMinorControlPanel(); @@ -1393,21 +1394,8 @@ function createLayerViewer(id, viewerData, callback, rootCallback) { return layersViewer; } -// function createVisualizationViewer(id, viewerData, callback, rootCallback) { -// const visualizatiomViewer = new LayersViewer({ -// id: id, -// data: viewerData, -// removeCallback: removeCallback, -// locationCallback: locationCallback, -// callback: callback, -// rootCallback: rootCallback, - -// }); -// visualizatiomViewer.elt.parentNode.removeChild(visualizatiomViewer.elt); -// return visualizatiomViewer; -// } function createVisualizationViewer(id, viewerData, callback, rootCallback) { - const visualizatiomViewer = new VisualizationViewer({ + const visualizationViewer = new VisualizationViewer({ id: id, data: viewerData, removeCallback: removeCallback, @@ -1415,8 +1403,8 @@ function createVisualizationViewer(id, viewerData, callback, rootCallback) { callback: callback, rootCallback: rootCallback, }); - visualizatiomViewer.elt.parentNode.removeChild(visualizatiomViewer.elt); - return visualizatiomViewer; + visualizationViewer.elt.parentNode.removeChild(visualizationViewer.elt); + return visualizationViewer; } // create lay panel for side-by-side control function createLayPanelControl() { @@ -1536,7 +1524,6 @@ function addHumanLayerItems() { }, mainViewerItems); $UI.layersViewer.addHumanItems(mainViewerItems); - // $UI.visualizatiomViewer.addHumanItems(mainViewerItems); // minor viewer minorViewer const minorViewerItems = { @@ -1577,11 +1564,8 @@ function addHumanLayerItems() { }, minorViewerItems); $UI.layersViewerMinor.addHumanItems(minorViewerItems); - // $UI.visualizatiomViewerMinor.addHumanItems(minorViewerItems); } -// function addLogItems(){ -// } function openLoadStatus(text) { const txt = $UI.loadStatus.querySelector('.text'); txt.textContent = `Loading ${text}`; @@ -1600,8 +1584,6 @@ function addRulerLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'ruler'); $UI.layersViewerMinor.addItems(minorViewerData, 'ruler'); - // $UI.visualizatiomViewer.addItems(mainViewerData, 'ruler'); - // $UI.visualizatiomViewerMinor.addItems(minorViewerData, 'ruler'); } function addComputerLayerItems(data) { @@ -1614,8 +1596,6 @@ function addComputerLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'segmentation'); $UI.layersViewerMinor.addItems(minorViewerData, 'segmentation'); - // $UI.visualizatiomViewer.addItems(mainViewerData, 'segmentation'); - // $UI.visualizatiomViewerMinor.addItems(minorViewerData, 'segmentation'); } function addHeatmapLayerItems(data) { @@ -1628,8 +1608,6 @@ function addHeatmapLayerItems(data) { }); $UI.layersViewer.addItems(mainViewerData, 'heatmap'); $UI.layersViewerMinor.addItems(minorViewerData, 'heatmap'); - // $UI.visualizatiomViewer.addItems(mainViewerData, 'heatmap'); - // $UI.visualizatiomViewerMinor.addItems(minorViewerData, 'heatmap'); } function visualizationLayerItems(data) { @@ -1645,7 +1623,7 @@ function visualizationLayerItems(data) { }); let result = countOccurrences(initialZommingData); - $UI.visualizatiomViewer.visualization('myChart', result); + $UI.visualizationViewer.visualization('myChart', result); } // Function to round to decimal places From eb64052ff6bd070ed0b894dc01d69d52f0189568 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sat, 20 Jul 2024 17:09:08 +0900 Subject: [PATCH 82/84] Remove unused code from viewer.html --- apps/viewer/viewer.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html index d59c59b25..6756f1d79 100644 --- a/apps/viewer/viewer.html +++ b/apps/viewer/viewer.html @@ -443,8 +443,6 @@
- -
From 179d08a06cccbe5becaa5fc32197fe27c4733869 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Sat, 20 Jul 2024 17:30:53 +0900 Subject: [PATCH 83/84] delete unused code --- apps/viewer/uicallbacks.js | 1 - core/extension/openseadragon-canvas-draw-overlay.js | 1 - 2 files changed, 2 deletions(-) diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js index e87c68520..9b42af641 100644 --- a/apps/viewer/uicallbacks.js +++ b/apps/viewer/uicallbacks.js @@ -924,7 +924,6 @@ function annoCallback(data) { ), }; - console.log('annotJson', annotJson); // save annotation $CAMIC.store .addMark(annotJson) diff --git a/core/extension/openseadragon-canvas-draw-overlay.js b/core/extension/openseadragon-canvas-draw-overlay.js index a54681c26..8984c6fe6 100644 --- a/core/extension/openseadragon-canvas-draw-overlay.js +++ b/core/extension/openseadragon-canvas-draw-overlay.js @@ -1011,7 +1011,6 @@ // const featrue = this._draws_data_[i].feature; rs.features = this._draws_data_.slice(0, this._path_index); // } - console.log('rs', rs); return rs; }, From 01ffbd958b27e2ae3e1b195db15be66c33eeb996 Mon Sep 17 00:00:00 2001 From: YukaUU Date: Mon, 22 Jul 2024 20:38:36 +0900 Subject: [PATCH 84/84] fix comment in visualizationviewer --- .../visualizationviewer/visualiationviewer.js | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/components/visualizationviewer/visualiationviewer.js b/components/visualizationviewer/visualiationviewer.js index d101198a6..4baf64546 100644 --- a/components/visualizationviewer/visualiationviewer.js +++ b/components/visualizationviewer/visualiationviewer.js @@ -1,20 +1,12 @@ /** - * CaMicroscope Logs Viewer. A component that shows logs of annotation by timeline. + * 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 Layer Manager. - * @param {String} options.id - * Id of the element to append the Layer Manager's container element to. - * @param {Object[]} options.data - * the data set of the layers. - * @param {String} options.data.id - * layer's id - * @param {String} options.data.name - * layer's name - * @param {String} options.data.typeId - * layer's type id - * @param {String} options.data.typeName - * layer's type name + * 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) {