feat: favourite node

Vis4Sense · May 26, 2024 · 9ae9d66 · 9ae9d66
1 parent 6d71fbf
commit 9ae9d66
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 8 deletions.
diff --git a/src/historymap/hmControllerTree.js b/src/historymap/hmControllerTree.js
@@ -48,3 +48,7 @@ function createTab(url, callback) {
         chrome.windows.update(tab.windowId, {focused: true});
     });
 }
+
+function handleFavoriteNode(page) {
+    updatePage(page.pageId, 'toggleTag', { tag: 'favorite' });
+}
diff --git a/src/historymap/hmControllerUtils.js b/src/historymap/hmControllerUtils.js
@@ -44,6 +44,16 @@ function updatePage(pageId, type, data=null) {
       case 'toggleCollapse': // update page attributes
          page.update({ isCollapsed: !page.isCollapsed });
          break;
+      case 'toggleTag':
+         let tags = page.tags;
+         const tag = data.tag;
+         if (tags.includes(tag)) {
+            tags = tags.filter(d => d !== tag);
+         } else {
+            tags.push(tag);
+         }
+         page.update({ tags });
+         break;
       case 'beforeReopen': // before page reopened (from hm tree)
          page.update({ incomingTabId: data.tabId });
          break;

diff --git a/src/historymap/hmModel.js b/src/historymap/hmModel.js
@@ -2,7 +2,7 @@
 
 // A opened webpage
 class hmPage {
-   constructor({ pageId, tabId, time, pageObj, parentPageId, docId=null, isOpened=true, isCollapsed=false, forwardBack={forward: 0, back: 0}, highlights=[], incomingTabId=null }) {
+   constructor({ pageId, tabId, time, pageObj, parentPageId, docId=null, isOpened=true, isCollapsed=false, forwardBack={forward: 0, back: 0}, highlights=[], tags=[], incomingTabId=null }) {
       this.pageId = pageId;
       this.docId = docId; // a UUID of the document loaded, get from webNavigation API, needed for locating the page to update pageObj after navigation completed
       this.tabId = tabId;
@@ -14,6 +14,7 @@ class hmPage {
       // this.clicked = false;
       this.forwardBack = forwardBack;
       this.highlights = highlights;
+      this.tags = tags;
 
       // optional
       this.incomingTabId = incomingTabId; // the tabId of the incoming page, needed for locating the page that is reopened from hm tree

diff --git a/src/historymap/hmTree/nodeMenu.js b/src/historymap/hmTree/nodeMenu.js
@@ -2,7 +2,7 @@
  * @fileoverview Draw menu when hovering on a hmTree node
  */
 
-function hmNodeMenu() {
+function hmNodeMenu(node) {
     var menu,
         container;
 
@@ -34,8 +34,12 @@ function hmNodeMenu() {
             .on('click', (e, d) => {
                 // prevent event bubbling
                 e.stopPropagation();
-
-                console.log(d.title);
+                let nodeData = selection.data()[0];
+                if (d.title === 'favorite') {
+                    const isFav = !nodeData.tags.includes('favorite');
+                    handleFavoriteNode(nodeData);
+                    node.classed('favorite', isFav);
+                }
             });
 
         item.append('xhtml:img')

diff --git a/src/historymap/hmTree/tree.css b/src/historymap/hmTree/tree.css
@@ -163,6 +163,10 @@
     opacity: 1;
 }
 
+.hm-tree-node.favorite {
+    background-color: #fde047;
+}
+
 .btn-group {
     display: flex;
     flex-direction: row;

diff --git a/src/historymap/hmTree/view.js b/src/historymap/hmTree/view.js
@@ -140,16 +140,15 @@ function hmTreeView({
             .attr('width', (d) => d.width)
             .attr('height', (d) => d.height)
             .html((d) => hmTreeNode(d).node().outerHTML);
-
-        // Node Menu
-        const menu = hmNodeMenu();
 
         // Interaction
         node
             .style('cursor', 'pointer')
             .on('click', (_, d) => handleOpenPage(d))
             .on('mouseenter', function () {
                 // Append menu
+                const nodeContent = d3.select(this).select('.hm-tree-node');
+                const menu = hmNodeMenu(nodeContent);
                 d3.select(this)
                     .append('g')
                     .attr('transform', d => `translate(${d.width}, 0)`)
@@ -159,7 +158,7 @@ function hmTreeView({
             .on('mouseleave', function () {
                 d3.select(this).select('.menu').remove();
             });
-        
+
         // Collapse node
         node.select('.icon-collapse')
             .on('click', function (e, d) {
@@ -255,6 +254,7 @@ function hmTreeNode(hmPage) {
             title: hmPage.pageObj.title,
             favIconUrl: hmPage.pageObj.favIconUrl,
             highlights: hmPage.highlights,
+            tags: hmPage.tags,
             isLeaf: hmPage.isLeaf,
             isCollapsed: hmPage.isCollapsed,
             isDescendantOpened: hmPage.isDescendantOpened,
@@ -273,6 +273,7 @@ function hmTreeNode(hmPage) {
             && !d.isOpened
             && d.isDescendantOpened
         );
+        node.classed('favorite', d => d.tags.includes('favorite'));
 
         appendHeader();
     }