init tagGraph 2.0

stg-annon · May 26, 2024 · a5cad9e · a5cad9e
1 parent 865d777
commit a5cad9e
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 0 deletions.
diff --git a/plugins/tagGraph/README.md b/plugins/tagGraph/README.md
@@ -0,0 +1,7 @@
+# Tag Graph psuedo-plugin
+
+## This renders a graph with physics in realtime, it is not lightweight
+
+This plugin does not run in stash, but instead runs in your browser
+
+To view, go to `http://localhost:9999/plugin/tag-graph/assets/graph/`
diff --git a/plugins/tagGraph/graph/index.html b/plugins/tagGraph/graph/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+  body {
+    margin: 0
+  }
+  #taggraph {
+    background-color: #202b33;
+  }
+</style>
+<script src="./vis.min.js"></script>
+<script src="./parse.js"></script>
+<body onload="draw()">
+  <div id="taggraph"></div>
+</body>
diff --git a/plugins/tagGraph/graph/parse.js b/plugins/tagGraph/graph/parse.js
@@ -0,0 +1,81 @@
+function parse(source) {
+    const nodes = []
+    const edges = []
+    for (const tag of source.data.findTags.tags) {
+      nodes.push({
+          id: tag.id,
+          shape: "circularImage", // could also just use "image" here
+          image: tag.image_path,
+          label: tag.name
+      })
+      for (const child of tag.children) {
+          edges.push({from:tag.id, to:child.id})
+      }
+    }
+    return { nodes, edges }
+}
+
+async function getTags() {
+
+  const query = `query FindTags($filter: FindFilterType, $tag_filter: TagFilterType) {
+      findTags(filter: $filter, tag_filter: $tag_filter) {
+              count
+              tags {
+                  id
+                  name
+                  image_path
+                  parents { id }
+                  children { id }
+              }
+      }
+  }`
+  const variables = {
+      "tag_filter": {
+          "child_count": {"modifier": "GREATER_THAN", "value": 0},
+          "OR": {"parent_count": {"modifier": "GREATER_THAN", "value": 0}},
+      },
+      "filter": {"q": "", "per_page": -1},
+  }
+  const source = await fetch("/graphql", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ query:query, variables:variables })
+  }).then(r => r.json())
+  console.log(`Found ${source.data.findTags.count} tags with parents/children`)
+  return parse(source)
+
+}
+var network = null;
+
+async function draw() {
+
+  var container = document.getElementById("taggraph");
+  var data = await getTags();
+
+  console.log(data)
+
+  var options = {
+    autoResize: true,
+    height: `${window.screen.height}px`, //100% does not seem to work here
+    width: "100%",
+    configure: { enabled: false }, //set to true to enable config options
+    nodes: {
+      color: {
+        border: "#adb5bd",
+        background: "#394b59",
+        highlight: {
+          border: "#137cbd",
+          background: "#FFFFFF"
+        }
+      },
+      font: { color: "white" },
+    },
+    edges: {
+      color: "#FFFFFF"
+    },
+    layout: {
+      improvedLayout: false
+    }
+  };
+  network = new vis.Network(container, data, options);
+}
diff --git a/plugins/tagGraph/graph/vis.min.js b/plugins/tagGraph/graph/vis.min.js
diff --git a/plugins/tagGraph/tag-graph.yml b/plugins/tagGraph/tag-graph.yml
@@ -0,0 +1,7 @@
+name: tag-graph
+description: Interactive tag graph with vis.js
+version: 2.0
+url: https://github.com/stg-annon/StashScripts/tree/main/plugins/tagGraph
+ui:
+  assets:
+    /: .