Merge pull request #4 from daxcore/feature/just-related-edges-graph

just related edges in graph in sidebar

Author: daxcore

README.md

@@ -32,6 +32,8 @@ extra_css:
 ## Graph Javascript by Apache ECharts
 A `interactive_graph.js` example can be downloaded from [here](https://raw.githubusercontent.com/daxcore/mkdocs-obsidian-interactive-graph-plugin/main/docs/ObsidianVault/assets/javascripts/interactive_graph.js) and must be located into the docs directory under `docs/YourSiteName/assets/javascripts/interactive_graph.js`.
 
+Beginning from version 0.3.0 the default graph inside the sidebar was minimized to egdes related to the current page only. The previous behavior can be restored by setting `global` to `true` at line `draw_graph_sidebar(myChart, global=false)` at top of javascript file.
+
 # Docker
 Adapt the `.env` and `mkdocs.yml` files to your needs. `DEV=ON` will rebuild the `mkdocs-obsidian-interactive-graph-plugin` from local files. If `DEV != ON` the upstream packages of PyPI will be used. Build and start the Docker container via `docker compose up --build [-d]`.
 

compose.yml

@@ -1,5 +1,3 @@
-version: '3.4'
-
 services:
   mkdocs:
     build:

docs/ObsidianVault/assets/javascripts/interactive_graph.js

@@ -1,3 +1,13 @@
+// draw graph in sidebar, change global to true if prefered
+function draw_graph_sidebar(myChart, global=false) {
+  draw_graph(myChart, global)
+}
+
+// draw graph in modal view
+function draw_graph_modal(myChart, global=true) {
+  draw_graph(myChart, global)
+}
+
 // add graph button next to light/dark mode switch if activated, but before search
 $('.md-search').before('<form class="md-header__option"> \
                           <label id="graph_button" class="md-header__button md-icon"> \
@@ -27,9 +37,14 @@ function init_graph(params) {
 
 var myChart = init_graph();
 
-function draw_graph(myChart) {
+function draw_graph(myChart, global=true) {
+  var _option = $.extend(true, {}, option);
+  if(!global) {
+    _option.series[0].data = graph_nodes();
+    _option.series[0].links = graph_links();
+  }
   // draw the graph
-  myChart.setOption(option);
+  myChart.setOption(_option);
 
   // add click event for nodes
   myChart.on('click', function (params) {
@@ -44,6 +59,21 @@ function draw_graph(myChart) {
 
 var option;
 
+function graph_links() {
+  id = option.series[0].data.find(it => it.value === window.location.pathname).id;
+  return option.series[0].links.filter(it => it.source === id || it.target === id);
+}
+
+function graph_nodes() {
+  id = option.series[0].data.find(it => it.value === window.location.pathname).id;
+  links = option.series[0].links.filter(it => it.source === id || it.target === id);
+  ids = [];
+  links.forEach(function (link) {
+    ids.push(link.source, link.target);
+  });
+  return option.series[0].data.filter(it => [...new Set(ids)].includes(it.id));
+}
+
 $.getJSON(document.currentScript.src + '/../graph.json', function (graph) {
   myChart.hideLoading();
 
@@ -111,7 +141,8 @@ $.getJSON(document.currentScript.src + '/../graph.json', function (graph) {
       }
     ]
   };
-  draw_graph(myChart);
+  // initial draw in sidebar
+  draw_graph_sidebar(myChart);
 });
 
 $("#__palette_0").change(function(){
@@ -134,9 +165,10 @@ $('#graph_button').on('click', function (params) {
       $('#modal_background').remove();
       add_graph_div();
       myChart = init_graph();
-      draw_graph(myChart);
+      // re-draw sidebar, e.g. switch back from modal view
+      draw_graph_sidebar(myChart);
     }
   });
   myChart = init_graph();
-  draw_graph(myChart);
+  draw_graph_modal(myChart);
 });