fastapi-voyager 0.15.0__py3-none-any.whl → 0.15.2__py3-none-any.whl

fastapi_voyager/web/component/schema-code-display.js

@@ -1,4 +1,4 @@
-const { defineComponent, ref, watch, onMounted } = window.Vue;
+const { defineComponent, ref, watch, onMounted } = window.Vue
 
 // Component: SchemaCodeDisplay
 // Props:
@@ -18,55 +18,52 @@ export default defineComponent({
     modelValue: { type: Boolean, default: true },
   },
   setup(props, { emit }) {
-    const code = ref("");
-    const link = ref("");
-    const error = ref("");
-    const fields = ref([]); // schema fields list
-    const tab = ref("fields");
-    const loading = ref(false);
-
+    const code = ref("")
+    const link = ref("")
+    const error = ref("")
+    const fields = ref([]) // schema fields list
+    const tab = ref("fields")
+    const loading = ref(false)
 
     async function highlightLater() {
       // wait a tick for DOM update
       requestAnimationFrame(() => {
         try {
           if (window.hljs) {
-            const block = document.querySelector(
-              ".frv-code-display pre code.language-python"
-            );
+            const block = document.querySelector(".frv-code-display pre code.language-python")
             if (block) {
               // If already highlighted by highlight.js, remove the flag so it can be highlighted again
               if (block.dataset && block.dataset.highlighted) {
-                block.removeAttribute("data-highlighted");
+                block.removeAttribute("data-highlighted")
               }
-              window.hljs.highlightElement(block);
+              window.hljs.highlightElement(block)
             }
           }
         } catch (e) {
-          console.warn("highlight failed", e);
+          console.warn("highlight failed", e)
         }
-      });
+      })
     }
 
     function resetState() {
-      code.value = "";
-      link.value = "";
-      error.value = null;
-      fields.value = [];
+      code.value = ""
+      link.value = ""
+      error.value = null
+      fields.value = []
       // tab.value = "fields";
-      loading.value = true;
+      loading.value = true
     }
 
     async function loadSource() {
-      if (!props.schemaName) return;
+      if (!props.schemaName) return
 
-      error.value = null;
-      code.value = "";
-      link.value = "";
-      loading.value = true;
+      error.value = null
+      code.value = ""
+      link.value = ""
+      loading.value = true
 
       // try to fetch from server: /source/{schema_name}
-      const payload = { schema_name: props.schemaName };
+      const payload = { schema_name: props.schemaName }
       try {
         // validate input: ensure we have a non-empty schemaName
         const resp = await fetch(`source`, {
@@ -76,13 +73,13 @@ export default defineComponent({
             "Content-Type": "application/json",
           },
           body: JSON.stringify(payload),
-        });
+        })
         // surface server-side validation message for bad request
-        const data = await resp.json().catch(() => ({}));
+        const data = await resp.json().catch(() => ({}))
         if (resp.ok) {
-          code.value = data.source_code || "// no source code available";
+          code.value = data.source_code || "// no source code available"
         } else {
-          error.value = (data && data.error) || "Failed to load source";
+          error.value = (data && data.error) || "Failed to load source"
         }
 
         const resp2 = await fetch(`vscode-link`, {
@@ -92,24 +89,24 @@ export default defineComponent({
             "Content-Type": "application/json",
           },
           body: JSON.stringify(payload),
-        });
-        const data2 = await resp2.json().catch(() => ({}));
+        })
+        const data2 = await resp2.json().catch(() => ({}))
         if (resp2.ok) {
-          link.value = data2.link || "// no vscode link available";
+          link.value = data2.link || "// no vscode link available"
         } else {
-          error.value = (error.value || "") + ((data2 && data2.error) || "Failed to load source");
+          error.value = (error.value || "") + ((data2 && data2.error) || "Failed to load source")
         }
       } catch (e) {
-        error.value = "Failed to load source";
+        error.value = "Failed to load source"
       } finally {
-        loading.value = false;
+        loading.value = false
       }
 
-      const schema = props.schemas && props.schemas[props.schemaName];
-      fields.value = Array.isArray(schema?.fields) ? schema.fields : [];
+      const schema = props.schemas && props.schemas[props.schemaName]
+      fields.value = Array.isArray(schema?.fields) ? schema.fields : []
 
       if (tab.value === "source") {
-        highlightLater();
+        highlightLater()
       }
     }
 
@@ -118,38 +115,38 @@ export default defineComponent({
       () => tab.value,
       (val) => {
         if (val === "source") {
-          highlightLater();
+          highlightLater()
         }
       }
-    );
+    )
 
     watch(
       () => props.schemaName,
       () => {
-        resetState();
-        loadSource();
-      },
-    );
+        resetState()
+        loadSource()
+      }
+    )
 
     // respond to visibility changes: when shown, clear old data and reload
     watch(
       () => props.modelValue,
       (val) => {
         if (val) {
-          resetState();
-          loadSource();
+          resetState()
+          loadSource()
         }
       }
-    );
+    )
 
     onMounted(() => {
       if (props.modelValue) {
-        resetState();
-        loadSource();
+        resetState()
+        loadSource()
       }
-    });
+    })
 
-    return { link, code, error, fields, tab, loading };
+    return { link, code, error, fields, tab, loading }
   },
   template: `
   <div class="frv-code-display" style="border: 1px solid #ccc; border-left: none; position:relative; height:100%; background:#fff;">
@@ -203,4 +200,4 @@ export default defineComponent({
       </div>
 	</div>
 	`,
-});
+})

fastapi_voyager/web/graph-ui.js

@@ -1,193 +1,182 @@
 export class GraphUI {
   constructor(selector = "#graph", options = {}) {
-    this.selector = selector;
-    this.options = options; // e.g. { onSchemaClick: (name) => {} }
-    this.graphviz = d3.select(this.selector).graphviz();
+    this.selector = selector
+    this.options = options // e.g. { onSchemaClick: (name) => {} }
+    this.graphviz = d3.select(this.selector).graphviz()
 
-    this.gv = null;
-    this.currentSelection = [];
-    this._init();
+    this.gv = null
+    this.currentSelection = []
+    this._init()
   }
 
   _highlight(mode = "bidirectional") {
-    let highlightedNodes = $();
+    let highlightedNodes = $()
     for (const selection of this.currentSelection) {
-      const nodes = this._getAffectedNodes(selection.set, mode);
-      highlightedNodes = highlightedNodes.add(nodes);
+      const nodes = this._getAffectedNodes(selection.set, mode)
+      highlightedNodes = highlightedNodes.add(nodes)
     }
     if (this.gv) {
-      this.gv.highlight(highlightedNodes, true);
-      this.gv.bringToFront(highlightedNodes);
+      this.gv.highlight(highlightedNodes, true)
+      this.gv.bringToFront(highlightedNodes)
     }
   }
 
   _highlightEdgeNodes() {
-    let highlightedNodes = $();
+    let highlightedNodes = $()
     const [up, down, edge] = this.currentSelection
-    highlightedNodes = highlightedNodes.add(
-      this._getAffectedNodes(up.set, up.direction)
-    );
-    highlightedNodes = highlightedNodes.add(
-      this._getAffectedNodes(down.set, down.direction)
-    );
+    highlightedNodes = highlightedNodes.add(this._getAffectedNodes(up.set, up.direction))
+    highlightedNodes = highlightedNodes.add(this._getAffectedNodes(down.set, down.direction))
     highlightedNodes = highlightedNodes.add(edge.set)
     if (this.gv) {
-      this.gv.highlight(highlightedNodes, true);
-      this.gv.bringToFront(highlightedNodes);
+      this.gv.highlight(highlightedNodes, true)
+      this.gv.bringToFront(highlightedNodes)
     }
   }
 
   _getAffectedNodes($set, mode = "bidirectional") {
-    let $result = $().add($set);
+    let $result = $().add($set)
     if (mode === "bidirectional" || mode === "downstream") {
       $set.each((i, el) => {
         if (el.className.baseVal === "edge") {
-          const edge = $(el).data("name");
-          const nodes = this.gv.nodesByName();
-          const downStreamNode = edge.split("->")[1];
+          const edge = $(el).data("name")
+          const nodes = this.gv.nodesByName()
+          const downStreamNode = edge.split("->")[1]
           if (downStreamNode) {
-            $result.push(nodes[downStreamNode]);
-            $result = $result.add(
-              this.gv.linkedFrom(nodes[downStreamNode], true)
-            );
+            $result.push(nodes[downStreamNode])
+            $result = $result.add(this.gv.linkedFrom(nodes[downStreamNode], true))
           }
         } else {
-          $result = $result.add(this.gv.linkedFrom(el, true));
+          $result = $result.add(this.gv.linkedFrom(el, true))
         }
-      });
+      })
     }
     if (mode === "bidirectional" || mode === "upstream") {
       $set.each((i, el) => {
         if (el.className.baseVal === "edge") {
-          const edge = $(el).data("name");
-          const nodes = this.gv.nodesByName();
-          const upStreamNode = edge.split("->")[0];
+          const edge = $(el).data("name")
+          const nodes = this.gv.nodesByName()
+          const upStreamNode = edge.split("->")[0]
           if (upStreamNode) {
-            $result.push(nodes[upStreamNode]);
-            $result = $result.add(this.gv.linkedTo(nodes[upStreamNode], true));
+            $result.push(nodes[upStreamNode])
+            $result = $result.add(this.gv.linkedTo(nodes[upStreamNode], true))
           }
         } else {
-          $result = $result.add(this.gv.linkedTo(el, true));
+          $result = $result.add(this.gv.linkedTo(el, true))
         }
-      });
+      })
     }
-    return $result;
+    return $result
   }
 
   highlightSchemaBanner(node) {
-    const polygons = node.querySelectorAll("polygon");
-    const ele = polygons[2]; // select the second polygon
+    const polygons = node.querySelectorAll("polygon")
+    const ele = polygons[2] // select the second polygon
     if (ele) {
-      ele.setAttribute('stroke-width', '3.5');
+      ele.setAttribute("stroke-width", "3.5")
     }
   }
 
-
   _init() {
-    const self = this;
+    const self = this
     $(this.selector).graphviz({
       shrink: null,
       zoom: false,
       ready: function () {
-        self.gv = this;
+        self.gv = this
 
-        const nodes = self.gv.nodes();
-        const edges = self.gv.edges();
+        const nodes = self.gv.nodes()
+        const edges = self.gv.edges()
 
-        nodes.off(".graphui");
-        edges.off(".graphui");
+        nodes.off(".graphui")
+        edges.off(".graphui")
 
         nodes.on("dblclick.graphui", function (event) {
-          event.stopPropagation();
+          event.stopPropagation()
           try {
             self.highlightSchemaBanner(this)
-          } catch(e) {
+          } catch (e) {
             console.log(e)
           }
-          const set = $();
-          set.push(this);
-          const schemaName = event.currentTarget.dataset.name;
+          const set = $()
+          set.push(this)
+          const schemaName = event.currentTarget.dataset.name
           if (schemaName) {
             try {
-              self.options.onSchemaClick(schemaName);
+              self.options.onSchemaClick(schemaName)
             } catch (e) {
-              console.warn("onSchemaClick callback failed", e);
+              console.warn("onSchemaClick callback failed", e)
             }
           }
-        });
+        })
 
         edges.on("click.graphui", function (event) {
-          const up = $();
-          const down = $();
-          const edge = $();
-          const [upStreamNode, downStreamNode] = event.currentTarget.dataset.name.split("->");
-          const nodes = self.gv.nodesByName();
-          up.push(nodes[upStreamNode]);
-          down.push(nodes[downStreamNode]);
+          const up = $()
+          const down = $()
+          const edge = $()
+          const [upStreamNode, downStreamNode] = event.currentTarget.dataset.name.split("->")
+          const nodes = self.gv.nodesByName()
+          up.push(nodes[upStreamNode])
+          down.push(nodes[downStreamNode])
           edge.push(this)
-          const upObj = { set: up, direction: "upstream" };
-          const downObj = { set: down, direction: "downstream" };
-          const edgeOjb = { set: edge, direction: "single"};
-          self.currentSelection = [upObj, downObj, edgeOjb];
+          const upObj = { set: up, direction: "upstream" }
+          const downObj = { set: down, direction: "downstream" }
+          const edgeOjb = { set: edge, direction: "single" }
+          self.currentSelection = [upObj, downObj, edgeOjb]
 
-          self._highlightEdgeNodes();
+          self._highlightEdgeNodes()
         })
 
         nodes.on("click.graphui", function (event) {
-          const set = $();
-          set.push(this);
-          const obj = { set, direction: "bidirectional" };
+          const set = $()
+          set.push(this)
+          const obj = { set, direction: "bidirectional" }
 
-          const schemaName = event.currentTarget.dataset.name;
-          console.log("shift click detected");
+          const schemaName = event.currentTarget.dataset.name
+          console.log("shift click detected")
           if (event.shiftKey && self.options.onSchemaShiftClick) {
             if (schemaName) {
               try {
-                self.options.onSchemaShiftClick(schemaName);
+                self.options.onSchemaShiftClick(schemaName)
               } catch (e) {
-                console.warn("onSchemaShiftClick callback failed", e);
+                console.warn("onSchemaShiftClick callback failed", e)
               }
             }
           } else {
-            self.currentSelection = [obj];
-            self._highlight();
+            self.currentSelection = [obj]
+            self._highlight()
           }
-        });
+        })
 
         $(document)
           .off("click.graphui")
           .on("click.graphui", function (evt) {
             // if outside container, do nothing
-            const graphContainer = $(self.selector)[0];
-            if (
-              !graphContainer ||
-              !evt.target ||
-              !graphContainer.contains(evt.target)
-            ) {
-              return;
+            const graphContainer = $(self.selector)[0]
+            if (!graphContainer || !evt.target || !graphContainer.contains(evt.target)) {
+              return
             }
 
-            let isNode = false;
-            const $everything = self.gv.$nodes.add(self.gv.$edges).add(self.gv.$clusters);
-            const node = evt.target.parentNode;
+            let isNode = false
+            const $everything = self.gv.$nodes.add(self.gv.$edges).add(self.gv.$clusters)
+            const node = evt.target.parentNode
             $everything.each(function () {
               if (this === node) {
-                isNode = true;
+                isNode = true
               }
-            });
+            })
             if (!isNode && self.gv) {
-              self.gv.highlight();
+              self.gv.highlight()
               if (self.options.resetCb) {
-                self.options.resetCb();
+                self.options.resetCb()
               }
             }
-          });
+          })
       },
-    });
+    })
   }
 
   async render(dotSrc, resetZoom = true) {
-    const height = this.options.height || "100%";
+    const height = this.options.height || "100%"
     return new Promise((resolve, reject) => {
       try {
         this.graphviz
@@ -201,13 +190,13 @@ export class GraphUI {
           .fit(true)
           .renderDot(dotSrc)
           .on("end", () => {
-            $(this.selector).data("graphviz.svg").setup();
-            if (resetZoom) this.graphviz.resetZoom();
-            resolve();
-          });
+            $(this.selector).data("graphviz.svg").setup()
+            if (resetZoom) this.graphviz.resetZoom()
+            resolve()
+          })
       } catch (err) {
-        reject(err);
+        reject(err)
       }
-    });
+    })
   }
 }

fastapi_voyager/web/graphviz.svg.css

@@ -22,21 +22,21 @@
 
 /* this element needs tooltip positioning to work */
 .graphviz-svg {
-    position: relative;
+  position: relative;
 }
 
 /* stop tooltips wrapping */
 .graphviz-svg .tooltip-inner {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 /* stop people selecting text on nodes */
 .graphviz-svg text {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default;
-}
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}