create visualization graph

README.md

@@ -46,7 +46,7 @@ The toolbar is in the top-left of the main content window. Use the toolbar butto
 | ![](https://fonts.gstatic.com/s/i/materialicons/bug_report/v4/24px.svg)      | Bug Report      | Report a bug or give feedback. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/camera_enhance/v4/24px.svg)      | Slide Capture      | Click to take a screenshot of the slide and annotations on it. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/help/v4/24px.svg)      | Tutorial      | Click to view a guided tour of the viewer tools. |
-
+| ![](https://fonts.gstatic.com/s/i/materialicons/auto_graph/v4/24px.svg)      | Visualization   | Click to view visualizations of annotations. |
 
 ## Toolbar Shortcuts
 

apps/viewer/dataloaders.js

@@ -97,15 +97,26 @@ function layersLoader() {
       console.error(error);
     });
   }
+
+  // visualization
+  function visualization() {
+    $CAMIC.store.findMark($D.params.slideId).then(function(layers) {
+      $D.visualizations = [...layers.map(covertToVisualization)];
+      visualizationLayerItems($D.visualizations);
+    }).catch(function(error) {
+      $UI.message.addError('Loading visualizations is Error');
+      console.error(error);
+    });
+  }
+
   var checkCoreIsReady = setInterval(function() {
-    if ($UI.layersViewer && $UI.layersViewerMinor) {
+    if ($UI.layersViewer && $UI.layersViewerMinor && $UI.visualizatiomViewer) {
       clearInterval(checkCoreIsReady);
       loadingHumanOverlayers();
       loadingRulerOverlayers();
       loadingHeatmapOverlayers();
       loadingComputerOverlayers();
+      visualization();
     }
   }, 500);
 }
-
-

apps/viewer/init.js

@@ -137,7 +137,6 @@ function initialize() {
     }
   }, 100);
 }
-
 // setting core functionalities
 function initCore() {
   // start initial
@@ -223,7 +222,6 @@ function initCore() {
         // for support QUIP 2.0
         const data = Array.isArray(e.data) ? e.data[e.data.selected] : e.data;
         const type = data.provenance.analysis.source;
-
         let body;
         let attributes;
         let warning = null;
@@ -260,16 +258,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;
-              }
+            if (data.geometries.features[data.selected].viewerStates != null ||
+              data.geometries.features[data.selected].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.geometries.features[data.selected].viewerStates.x,
+              attributes.Y = data.geometries.features[data.selected].viewerStates.y,
+              attributes.zoom = roundTo(data.geometries.features[data.selected].viewerStates.z, decimalPlaces);
+            }
+            // Rounds a number to the specified number of decimal places.
+            function roundTo(num, decimalPlaces) {
+              const factor = 10 ** decimalPlaces;
+              return Math.round(num * factor) / factor;
             }
 
 
@@ -668,6 +667,17 @@ async function initUIcomponents() {
     value: 'slCap',
     callback: captureSlide,
   });
+
+  // visualization panel
+  subToolsOpt.push({
+    name: 'visualization',
+    icon: 'auto_graph', // material icons' name
+    title: 'visualization',
+    value: 'visualization',
+    type: 'btn',
+    callback: visualization,
+  });
+
   subToolsOpt.push({
     name: 'tutorial',
     icon: 'help',
@@ -737,10 +747,15 @@ async function initUIcomponents() {
     callback: toggleSideMenu,
   });
 
-  const loading = `<div class="cover" style="z-index: 500;"><div class="block"><span>loading layers...</span><div class="bar"></div></div></div>`;
-  $UI.layersSideMenu.addContent(loading);
-  // TODO add layer viewer
-
+  $UI.visualizationSideMenu = new SideMenu({
+    id: 'visualization_panel',
+    width: 250,
+    contentPadding: 5,
+    position: 'right',
+    height: '45vh',
+    // , isOpen:true
+    callback: toggleSideMenu,
+  });
 
   /* annotation popup */
   $UI.annotPopup = new PopupPanel({
@@ -850,7 +865,6 @@ async function initUIcomponents() {
       // const minorViewerData = $D.overlayers.map((d) => {
       //   return {item: d, isShow: false};
       // });
-
       $UI.AssistantViewer = new Assistant({
         id: 'ml_assistant',
         viewer: $CAMIC.viewer,
@@ -881,7 +895,26 @@ 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'),
+      // );
+      // // create UI and set data - minor
+      // $UI.visualizatiomViewerMinor = 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) =>
@@ -908,13 +941,43 @@ async function initUIcomponents() {
           // console.log(e);
         },
       });
+
+      $UI.visualizationList = new CollapsibleList({
+        id: 'visualizationlist',
+        list: [
+          {
+            id: 'visualizationlist',
+            title: 'Human:Draw Annotation',
+            content: 'No Template Loaded', // $UI.annotOptPanel.elt
+            // isExpand:true
+          },
+          // {
+          //   id: 'heatMap',
+          //   title: 'HeatMap',
+          //   content: 'No Template Loaded', // $UI.algOptPanel.elt,
+          // },
+        ],
+        changeCallBack: function(e) {
+          // console.log(e);
+        },
+      });
       $UI.layersSideMenu.clearContent();
       // add to layers side menu
       const title = document.createElement('div');
       title.classList.add('item_head');
       title.textContent = 'Layers Manager';
 
-      $UI.layersSideMenu.addContent(title);
+      // add to log side menu
+      const titleVisualization = document.createElement('div');
+      titleVisualization.classList.add('item_head');
+      titleVisualization.textContent = 'Visualization Panel';
+      // add CSS
+      titleVisualization.style.color = '#365f9c';
+      titleVisualization.style.fontSize = '20px';
+      titleVisualization.style.backgroundColor = 'rgba(220, 220, 220, 1)';
+      titleVisualization.style.marginTop = '28px';
+
+      $UI.visualizationSideMenu.addContent(titleVisualization);
 
       // loading status
       $UI.loadStatus = document.createElement('div');
@@ -954,6 +1017,16 @@ async function initUIcomponents() {
       $UI.layersList.elt.parentNode.removeChild($UI.layersList.elt);
       closeMinorControlPanel();
       $UI.layersSideMenu.addContent($UI.layersList.elt);
+
+      // visualization
+      $UI.visualizationList.clearContent('visualizationlist');
+      $UI.visualizationList.addContent('visualizationlist', $UI.visualizatiomViewer.elt);
+      // $UI.visualizationList.clearContent('heatMap');
+      // $UI.visualizationList.addContent('heatMap', $UI.visualizatiomViewerMinor.elt);
+
+      $UI.visualizationList.elt.parentNode.removeChild($UI.visualizationList.elt);
+      closeMinorControlPanel();
+      $UI.visualizationSideMenu.addContent($UI.visualizationList.elt);
     }
   }, 300);
 
@@ -1320,6 +1393,31 @@ 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({
+    id: id,
+    data: viewerData,
+    removeCallback: removeCallback,
+    locationCallback: locationCallback,
+    callback: callback,
+    rootCallback: rootCallback,
+  });
+  visualizatiomViewer.elt.parentNode.removeChild(visualizatiomViewer.elt);
+  return visualizatiomViewer;
+}
 // create lay panel for side-by-side control
 function createLayPanelControl() {
   $UI.layCtrlbar = document.createElement('div');
@@ -1438,6 +1536,7 @@ function addHumanLayerItems() {
   }, mainViewerItems);
 
   $UI.layersViewer.addHumanItems(mainViewerItems);
+  // $UI.visualizatiomViewer.addHumanItems(mainViewerItems);
 
   // minor viewer minorViewer
   const minorViewerItems = {
@@ -1478,7 +1577,11 @@ 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}`;
@@ -1497,6 +1600,8 @@ 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) {
@@ -1509,6 +1614,8 @@ 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) {
@@ -1521,6 +1628,53 @@ 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) {
+  var initialZommingData = [];
+
+  // Get initial data
+  $D.visualizations.map((d) => {
+    d.geometries.features.map((ditailData)=>{
+      if (ditailData.viewerStates) {
+        initialZommingData.push(roundToSecondDecimalPlace(ditailData.viewerStates.z));
+      }
+    });
+  });
+  let result = countOccurrences(initialZommingData);
+
+  $UI.visualizatiomViewer.visualization('myChart', result);
+}
+
+// Function to round to decimal places
+function roundToSecondDecimalPlace(num) {
+  return Math.round(num * 100) / 100;
+}
+
+function countOccurrences(arr) {
+  // Create objects for counting
+  let countMap = {};
+
+  // Count each element in the array
+  arr.forEach(function(value) {
+    if (countMap[value] === undefined) {
+      countMap[value] = 1;
+    } else {
+      countMap[value]++;
+    }
+  });
+
+  // Convert the result to a 2-dimensional array
+  let result = [];
+  for (let key in countMap) {
+    if (countMap.hasOwnProperty(key)) {
+      result.push([parseFloat(key), countMap[key]]);
+    }
+  };
+
+  return result;
 }
 
 // const mainViewerData = $D.overlayers.map((d) => {

apps/viewer/uicallbacks.js

@@ -323,6 +323,9 @@ function toolsOff() {
     case 'download_selection':
       downloadSelectionOff();
       break;
+    case 'log':
+      $UI.visualizationSideMenu.close();
+      break;
   }
 }
 
@@ -892,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
@@ -919,13 +922,9 @@ function annoCallback(data) {
         $CAMIC.viewer,
         $CAMIC.viewer.canvasDrawInstance.getImageFeatureCollection(),
     ),
-    states: {
-      x: states.x,
-      y: states.y,
-      zoom: states.z,
-    },
   };
 
+  console.log('annotJson', annotJson);
   // save annotation
   $CAMIC.store
       .addMark(annotJson)
@@ -2736,6 +2735,19 @@ async function captureSlide() {
   $UI.layersSideMenu.close();
 }
 
+/* Log annotaiton */
+let isSidemenuOpen = true;
+
+function visualization() {
+  if (isSidemenuOpen == true) {
+    $UI.visualizationSideMenu.open();
+    isSidemenuOpen = false;
+  } else {
+    $UI.visualizationSideMenu.close();
+    isSidemenuOpen = true;
+  };
+}
+
 function downloadSlideCapture(combiningCanvas) {
   const imageData = combiningCanvas.toDataURL('image/jpeg');
   const downloadLink = document.createElement('a');