fastapi-voyager 0.12.6__tar.gz → 0.12.8__tar.gz

{fastapi_voyager-0.12.6 → fastapi_voyager-0.12.8}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.12.6
+Version: 0.12.8
 Summary: Visualize FastAPI application's routing tree and dependencies
 Project-URL: Homepage, https://github.com/allmonday/fastapi-voyager
 Project-URL: Source, https://github.com/allmonday/fastapi-voyager

{fastapi_voyager-0.12.6 → fastapi_voyager-0.12.8}/docs/changelog.md

@@ -120,8 +120,12 @@
     - [x] click link(edge) to highlight related nodes
     - [x] on hover cursor effect
 - 0.12.7
+    - [x] remove search component, integrated into main page
+- 0.12.8
+    - [x] optimize ui elements, change icons, update reset behavior
+- 0.12.9
+    - [ ] refactor vue-main.js, move methods to store
     - [ ] refactor render.py
-    - [ ] remove search component, integrated into main page
 
 ## 0.13
 - 0.13.2

{fastapi_voyager-0.12.6 → fastapi_voyager-0.12.8}/src/fastapi_voyager/server.py

@@ -34,6 +34,8 @@ def _build_ga_snippet(ga_id: str | None) -> str:
 
 INITIAL_PAGE_POLICY = Literal['first', 'full', 'empty']
 
+# ---------- setup ----------
+
 class OptionParam(BaseModel):
 	tags: list[Tag]
 	schemas: list[SchemaNode]
@@ -49,11 +51,21 @@ class Payload(BaseModel):
 	schema_field: str | None = None
 	route_name: str | None = None
 	show_fields: str = 'object'
-	show_meta: bool = False
 	brief: bool = False
 	hide_primitive_route: bool = False
 	show_module: bool = True
 
+# ---------- search ----------
+class SearchResultOptionParam(BaseModel):
+	tags: list[Tag]
+
+class SchemaSearchPayload(BaseModel):  # leave tag, route out
+	schema_name: str | None = None
+	schema_field: str | None = None
+	show_fields: str = 'object'
+	brief: bool = False
+	hide_primitive_route: bool = False
+	show_module: bool = True
 
 def create_voyager(
 	target_app: FastAPI,
@@ -91,6 +103,25 @@ def create_voyager(
 			swagger_url=swagger_url,
 			initial_page_policy=initial_page_policy)
 
+	@router.post("/dot-search", response_model=SearchResultOptionParam)
+	def get_search_dot(payload: SchemaSearchPayload):
+		voyager = Voyager(
+			schema=payload.schema_name,
+			schema_field=payload.schema_field,
+			show_fields=payload.show_fields,
+			module_color=module_color,
+			hide_primitive_route=payload.hide_primitive_route,
+			show_module=payload.show_module,
+		)
+		voyager.analysis(target_app)
+		tags = voyager.calculate_filtered_tag_and_route()
+
+		for t in tags:
+			t.routes.sort(key=lambda r: r.name)
+		tags.sort(key=lambda t: t.name)
+
+		return SearchResultOptionParam(tags=tags)
+
 	@router.post("/dot", response_class=PlainTextResponse)
 	def get_filtered_dot(payload: Payload) -> str:
 		voyager = Voyager(

{fastapi_voyager-0.12.6 → fastapi_voyager-0.12.8}/src/fastapi_voyager/version.py

@@ -1,2 +1,2 @@
 __all__ = ["__version__"]
-__version__ = "0.12.6"
+__version__ = "0.12.8"

{fastapi_voyager-0.12.6 → fastapi_voyager-0.12.8}/src/fastapi_voyager/voyager.py

@@ -297,6 +297,22 @@ class Voyager:
         else:
             return tags, routes, links
     
+    def calculate_filtered_tag_and_route(self):
+        _tags, _routes, _, _ = filter_graph(
+            schema=self.schema,
+            schema_field=self.schema_field,
+            tags=self.tags,
+            routes=self.routes,
+            nodes=self.nodes,
+            links=self.links,
+            node_set=self.node_set,
+        )
+        # filter tag.routes based by _routes
+        route_ids = {r.id for r in _routes}
+        for t in _tags:
+            t.routes = [r for r in t.routes if r.id in route_ids]
+        return _tags
+
     def render_dot(self):
         _tags, _routes, _nodes, _links = filter_graph(
             schema=self.schema,

{fastapi_voyager-0.12.6 → fastapi_voyager-0.12.8}/src/fastapi_voyager/web/index.html

@@ -55,6 +55,12 @@
       flex: 1 1 auto;
       overflow: auto;
     }
+    .tag-bg {
+      /* background-color: #287e75; */
+      /* border-bottom: 2px solid #009485;
+      border-left: 2px solid #009485;
+      border-top: 0; */
+    }
 
     .adjust-fit {
       height: calc(100vh - 54px);
@@ -107,9 +113,20 @@
               <span> FastAPI Voyager </span>
               <span v-if="store.state.version" style="font-size: 12px; margin-left: 8px; font-weight: normal;">{{ store.state.version }}</span>
             </div>
+            <div class="col-auto">
+              <q-btn
+                style="margin-left: 80px"
+                outline
+                @click="onReset"
+                title="clear tag, route selection"
+                icon="open_in_full"
+                color="primary"
+                flat
+                class="q-mx-md"
+              />
+            </div>
             <div class="col-auto" style="font-size: 16px">
               <q-option-group
-                style="margin-left: 80px"
                 v-model="store.state.filter.showFields"
                 :options="store.state.fieldOptions"
                 @update:model-value="(val) => toggleShowField(val)"
@@ -120,25 +137,40 @@
               />
             </div>
             <div class="col-auto q-ml-auto">
-              <q-btn
-                outline
-                @click="onReset"
-                title="may be very slow"
-                icon="border_all"
-                flat
-                class="q-mr-sm"
-                label="Full Graph"
-              />
             </div>
-            <div class="col-auto">
-              <q-btn
-                outline
-                icon="search"
-                flat
-                label="Search"
-                class="q-mr-md"
-                @click="showSearchDialog()"
-              />
+            <div class="col-auto row items-center q-gutter-sm">
+              <q-select
+                dense
+                outlined
+                use-input
+                fill-input
+                hide-selected
+                input-debounce="200"
+                v-model="store.state.search.schemaName"
+                :options="store.state.search.schemaOptions"
+                option-label="label"
+                option-value="value"
+                emit-value
+                map-options
+                style="min-width: 320px;"
+                clearable
+                label="Select schema"
+                @update:model-value="onSearchSchemaChange"
+                @filter="filterSearchSchemas"
+                @clear="resetSearch"
+              ></q-select>
+              
+              <q-select
+                dense
+                outlined
+                v-model="store.state.search.fieldName"
+                :disable="!store.state.search.schemaName || store.state.search.fieldOptions.length===0"
+                :options="store.state.search.fieldOptions"
+                @update:model-value="onSearch"
+                style="min-width: 180px"
+                clearable
+                label="Select field (optional)"
+              ></q-select>
             </div>
             <div class="col-auto">
               <q-btn
@@ -147,7 +179,7 @@
                 flat
                 icon="help_outline"
                 aria-label="Help"
-                style="margin-right: 40px"
+                style="margin-right: 50px; margin-left: 20px"
               >
                 <q-tooltip
                   anchor="bottom middle"
@@ -164,7 +196,7 @@
                         double click node to view details.
                       </li>
                       <li>
-                        shift + click to see schema's dependencies without unrelated nodes.
+                        shift + click to search the schema and highlight related nodes.
                       </li>
                     </ul>
                   </div>
@@ -183,7 +215,6 @@
           bordered
           overlay
         >
-          <!-- 可拖拽的调整栏 -->
           <div 
             @mousedown="startDragDrawer"
             style="
@@ -239,9 +270,10 @@
                       v-for="tag in store.state.leftPanel.tags"
                       :key="tag.name"
                       expand-separator
-                      :model-value="store.state.leftPanel._tag === tag.name"
+                      :model-value="store.state.leftPanel._tag === tag.name || store.state.search.mode"
                       @update:model-value="(val) => toggleTag(tag.name, val)"
-                      :header-class="store.state.leftPanel.tag === tag.name ? 'text-primary text-bold' : ''"
+                      @click="() => toggleTag(tag.name, true)"
+                      :header-class="store.state.leftPanel.tag === tag.name ? 'text-primary text-bold tag-bg' : 'tag-bg'"
                       content-class="q-pa-none"
                     >
                       <template #header>
@@ -299,7 +331,7 @@
               <div style="position: relative; width: 100%; height: 100%;">
                 <div id="graph" class="adjust-fit"></div>
                 <div style="position: absolute; left: 8px; top: 8px; z-index: 10; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 2px 8px;">
-                  <div class="q-mt-sm">
+                  <div class="q-mt-sm" v-if="store.state.modeControl.briefModeEnabled && store.state.search.mode === false">
                     <q-toggle
                       v-if="store.state.modeControl.briefModeEnabled"
                       dense
@@ -309,7 +341,7 @@
                       title="skip middle classes, config module_prefix to enable it"
                     />
                   </div>
-                  <div class="q-mt-sm">
+                  <div class="q-mt-sm" v-if="store.state.modeControl.briefModeEnabled && store.state.search.mode === false">
                     <q-toggle
                       v-model="store.state.filter.hidePrimitiveRoute"
                       @update:model-value="(val) => toggleHidePrimitiveRoute(val)"
@@ -327,16 +359,6 @@
                       title="show module cluster"
                     />
                   </div>
-                  <div class="q-mt-sm">
-                    <q-toggle
-                      v-model="store.state.modeControl.focus"
-                      v-show="store.state.schemaDetail.schemaCodeName"
-                      @update:model-value="val => onFocusChange(val)"
-                      label="Focus"
-                      dense
-                      title="pick a schema and toggle focus on to display related nodes only"
-                    />
-                </div>
               </div>
             </template>
           </q-splitter>

{fastapi_voyager-0.12.6 → fastapi_voyager-0.12.8}/src/fastapi_voyager/web/store.js

@@ -6,6 +6,9 @@ const state = reactive({
     },
 
     version: '',
+    config: {
+        initial_page_policy: 'first'
+    },
 
     swagger: {
         url: ''
@@ -38,13 +41,14 @@ const state = reactive({
         routeItems: []
     },
 
-    leftPanelFiltered: {
-
-    },
 
     // schema options, schema, fields
     search: {  
-     
+        mode: false,  
+        schemaName: null,
+        fieldName: null,
+        schemaOptions: [],
+        fieldOptions: [],
     },
 
 

{fastapi_voyager-0.12.6 → fastapi_voyager-0.12.8}/src/fastapi_voyager/web/vue-main.js

@@ -1,16 +1,71 @@
-import SchemaFieldFilter from "./component/schema-field-filter.js";
 import SchemaCodeDisplay from "./component/schema-code-display.js";
 import RouteCodeDisplay from "./component/route-code-display.js";
-import Demo from './component/demo.js'
+import Demo from "./component/demo.js";
 import RenderGraph from "./component/render-graph.js";
 import { GraphUI } from "./graph-ui.js";
-import { store } from './store.js'
+import { store } from "./store.js";
 
-const { createApp, onMounted, ref } = window.Vue;
+const { createApp, onMounted, ref, watch } = window.Vue;
 
 const app = createApp({
   setup() {
     let graphUI = null;
+    const allSchemaOptions = ref([]);
+
+    const NBSP = String.fromCharCode(160);
+    const formatSchemaLabel = (name, id) =>
+      `${name}${NBSP}${NBSP}${NBSP}-${NBSP}${NBSP}${NBSP}${id}`;
+
+    function rebuildSchemaOptions() {
+      const dict = store.state.graph.schemaMap || {};
+      const opts = Object.values(dict).map((s) => ({
+        label: formatSchemaLabel(s.name, s.id),
+        value: s.id,
+      }));
+      allSchemaOptions.value = opts;
+      store.state.search.schemaOptions = opts.slice();
+      populateFieldOptions(store.state.search.schemaName);
+    }
+
+    function populateFieldOptions(schemaId) {
+      if (!schemaId) {
+        store.state.search.fieldOptions = [];
+        store.state.search.fieldName = null;
+        return;
+      }
+      const schema = store.state.graph.schemaMap?.[schemaId];
+      if (!schema) {
+        store.state.search.fieldOptions = [];
+        store.state.search.fieldName = null;
+        return;
+      }
+      const fields = Array.isArray(schema.fields)
+        ? schema.fields.map((f) => f.name)
+        : [];
+      store.state.search.fieldOptions = fields;
+      if (!fields.includes(store.state.search.fieldName)) {
+        store.state.search.fieldName = null;
+      }
+    }
+
+    function filterSearchSchemas(val, update) {
+      const needle = (val || "").toLowerCase();
+      update(() => {
+        if (!needle) {
+          store.state.search.schemaOptions = allSchemaOptions.value.slice();
+          return;
+        }
+        store.state.search.schemaOptions = allSchemaOptions.value.filter((option) =>
+          option.label.toLowerCase().includes(needle)
+        );
+      });
+    }
+
+    function onSearchSchemaChange(val) {
+      store.state.search.schemaName = val;
+      store.state.search.mode = false;
+      onSearch()
+    }
 
     function readQuerySelection() {
       if (typeof window === "undefined") {
@@ -55,7 +110,10 @@ const app = createApp({
 
     function applySelectionFromQuery(selection) {
       let applied = false;
-      if (selection.tag && store.state.leftPanel.tags.some((tag) => tag.name === selection.tag)) {
+      if (
+        selection.tag &&
+        store.state.leftPanel.tags.some((tag) => tag.name === selection.tag)
+      ) {
         store.state.leftPanel.tag = selection.tag;
         store.state.leftPanel._tag = selection.tag;
         applied = true;
@@ -72,6 +130,51 @@ const app = createApp({
       return applied;
     }
 
+    async function resetSearch() {
+      store.state.search.mode = false;
+      store.state.leftPanel.tag = null;
+      store.state.leftPanel._tag = null;
+      store.state.leftPanel.routeId = null;
+      syncSelectionToUrl()
+      await loadSearchedTags();
+      renderBasedOnInitialPolicy()
+    }
+
+    async function onSearch() {
+      console.log('start search')
+      store.state.search.mode = true;
+      store.state.leftPanel.tag = null;
+      store.state.leftPanel._tag = null;
+      store.state.leftPanel.routeId = null;
+      syncSelectionToUrl()
+      await loadSearchedTags();
+      await onGenerate();
+    }
+    async function loadSearchedTags() {
+      try {
+        const payload = {
+          schema_name: store.state.search.schemaName,
+          schema_field: store.state.search.fieldName || null,
+          show_fields: store.state.filter.showFields,
+          brief: store.state.filter.brief,
+          hide_primitive_route: store.state.filter.hidePrimitiveRoute,
+          show_module: store.state.filter.showModule,
+        };
+        const res = await fetch("dot-search", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+        if (res.ok) {
+          const data = await res.json();
+          const tags = Array.isArray(data.tags) ? data.tags : [];
+          store.state.leftPanel.tags = tags;
+        }
+      } catch (err) {
+        console.error("dot-search failed", err);
+      }
+    }
+
     async function loadInitial() {
       store.state.initializing = true;
       try {
@@ -81,10 +184,8 @@ const app = createApp({
 
         const schemasArr = Array.isArray(data.schemas) ? data.schemas : [];
         // Build dict keyed by id for faster lookups and simpler prop passing
-        const schemaMap = Object.fromEntries(
-          schemasArr.map((s) => [s.id, s])
-        );
-        store.state.graph.schemaMap = schemaMap
+        const schemaMap = Object.fromEntries(schemasArr.map((s) => [s.id, s]));
+        store.state.graph.schemaMap = schemaMap;
         store.state.graph.schemaKeys = new Set(Object.keys(schemaMap));
         store.state.graph.routeItems = data.tags
           .map((t) => t.routes)
@@ -93,9 +194,12 @@ const app = createApp({
             acc[r.id] = r;
             return acc;
           }, {});
-        store.state.modeControl.briefModeEnabled = data.enable_brief_mode || false;
+        store.state.modeControl.briefModeEnabled =
+          data.enable_brief_mode || false;
         store.state.version = data.version || "";
-        store.state.swagger.url = data.swagger_url || null
+        store.state.swagger.url = data.swagger_url || null;
+
+        rebuildSchemaOptions();
 
         const querySelection = readQuerySelection();
         const restoredFromQuery = applySelectionFromQuery(querySelection);
@@ -103,19 +207,9 @@ const app = createApp({
           syncSelectionToUrl();
           onGenerate();
           return;
-        }
-
-        switch (data.initial_page_policy) {
-          case "full":
-            onGenerate()
-            return
-          case "empty":
-            return
-          case "first":
-            store.state.leftPanel.tag = store.state.leftPanel.tags.length > 0 ? store.state.leftPanel.tags[0].name : null;
-            store.state.leftPanel._tag = store.state.leftPanel.tag;
-            onGenerate();
-            return
+        } else {
+          store.state.config.initial_page_policy = data.initial_page_policy
+          renderBasedOnInitialPolicy()
         }
 
         // default route options placeholder
@@ -126,28 +220,41 @@ const app = createApp({
       }
     }
 
-    async function onFocusChange(val) {
-      if (val) {
-        await onGenerate(true); // target could be out of view when switchingfrom big to small
-      } else {
-        await onGenerate(false);
-        setTimeout(() => {
-          const ele = $(`[data-name='${store.state.schemaDetail.schemaCodeName}'] polygon`);
-          ele.dblclick();
-        }, 1);
-      }
+    async function renderBasedOnInitialPolicy() {
+        switch (store.state.config.initial_page_policy) {
+          case "full":
+            onGenerate();
+            return;
+          case "empty":
+            return;
+          case "first":
+            store.state.leftPanel.tag =
+              store.state.leftPanel.tags.length > 0
+                ? store.state.leftPanel.tags[0].name
+                : null;
+            store.state.leftPanel._tag = store.state.leftPanel.tag;
+            syncSelectionToUrl()
+            onGenerate();
+            return;
+        }
     }
 
     async function onGenerate(resetZoom = true) {
-      const schema_name = store.state.modeControl.focus ? store.state.schemaDetail.schemaCodeName : null;
+      const activeSchema = store.state.search.mode
+        ? store.state.search.schemaName
+        : null;
+      const activeField = store.state.search.mode
+        ? store.state.search.fieldName
+        : null;
       store.state.generating = true;
       try {
         const payload = {
           tags: store.state.leftPanel.tag ? [store.state.leftPanel.tag] : null,
-          schema_name: schema_name || null,
+          schema_name: activeSchema || null,
+          schema_field: activeField || null,
           route_name: store.state.leftPanel.routeId || null,
           show_fields: store.state.filter.showFields,
-          brief: store.state.modeControl.brief,
+          brief: store.state.filter.brief,
           hide_primitive_route: store.state.filter.hidePrimitiveRoute,
           show_module: store.state.filter.showModule,
         };
@@ -163,9 +270,9 @@ const app = createApp({
           graphUI = new GraphUI("#graph", {
             onSchemaShiftClick: (id) => {
               if (store.state.graph.schemaKeys.has(id)) {
-                resetDetailPanels();
-                store.state.searchDialog.show = true;
-                store.state.searchDialog.schema = id;
+                store.state.search.mode = true;
+                store.state.search.schemaName = id;
+                onSearch();
               }
             },
             onSchemaClick: (id) => {
@@ -192,29 +299,18 @@ const app = createApp({
       }
     }
 
-    function showSearchDialog() {
-      store.state.searchDialog.show = true;
-      store.state.searchDialog.schema = null;
-    }
-
     function resetDetailPanels() {
       store.state.rightDrawer.drawer = false;
-      store.state.routeDetail.show = false
+      store.state.routeDetail.show = false;
       store.state.schemaDetail.schemaCodeName = "";
     }
 
     async function onReset() {
-      store.state.leftPanel.tag = null;
-      store.state.leftPanel._tag = null;
-      store.state.leftPanel.routeId = null;
-
-      store.state.graph.schemaId = null;
-
-      // state.showFields = "object";
-      store.state.modeControl.focus = false;
-      store.state.schemaDetail.schemaCodeName = "";
-      onGenerate();
-      syncSelectionToUrl();
+        store.state.leftPanel.tag = null;
+        store.state.leftPanel._tag = null;
+        store.state.leftPanel.routeId = null;
+        syncSelectionToUrl()
+        onGenerate()
     }
 
     function toggleTag(tagName, expanded = null) {
@@ -223,7 +319,6 @@ const app = createApp({
         store.state.leftPanel.tag = tagName;
         store.state.leftPanel.routeId = "";
 
-        store.state.modeControl.focus = false;
         store.state.schemaDetail.schemaCodeName = "";
         onGenerate();
       } else {
@@ -231,7 +326,7 @@ const app = createApp({
       }
 
       store.state.rightDrawer.drawer = false;
-      store.state.routeDetail.show = false
+      store.state.routeDetail.show = false;
       syncSelectionToUrl();
     }
 
@@ -242,8 +337,7 @@ const app = createApp({
         store.state.leftPanel.routeId = routeId;
       }
       store.state.rightDrawer.drawer = false;
-      store.state.routeDetail.show = false
-      store.state.modeControl.focus = false;
+      store.state.routeDetail.show = false;
       store.state.schemaDetail.schemaCodeName = "";
       onGenerate();
       syncSelectionToUrl();
@@ -251,7 +345,7 @@ const app = createApp({
 
     function toggleShowModule(val) {
       store.state.filter.showModule = val;
-      onGenerate()
+      onGenerate();
     }
 
     function toggleShowField(field) {
@@ -260,7 +354,7 @@ const app = createApp({
     }
 
     function toggleBrief(val) {
-      store.state.modeControl.brief = val;
+      store.state.filter.brief = val;
       onGenerate();
     }
 
@@ -293,24 +387,45 @@ const app = createApp({
       e.preventDefault();
     }
 
+    watch(
+      () => store.state.graph.schemaMap,
+      () => {
+        rebuildSchemaOptions();
+      },
+      { deep: false }
+    );
+
+    watch(
+      () => store.state.search.schemaName,
+      (schemaId) => {
+        store.state.search.schemaOptions = allSchemaOptions.value.slice();
+        populateFieldOptions(schemaId);
+        if (!schemaId) {
+          store.state.search.mode = false;
+        }
+      }
+    );
+
     onMounted(async () => {
-      document.body.classList.remove("app-loading")
+      document.body.classList.remove("app-loading");
       await loadInitial();
       // Reveal app content only after initial JS/data is ready
     });
 
     return {
       store,
+      onSearch,
+      resetSearch,
+      filterSearchSchemas,
+      onSearchSchemaChange,
       toggleTag,
       toggleBrief,
       toggleHidePrimitiveRoute,
       selectRoute,
       onGenerate,
       onReset,
-      showSearchDialog,
       toggleShowField,
       startDragDrawer,
-      onFocusChange,
       toggleShowModule,
     };
   },
@@ -323,10 +438,9 @@ if (window.Quasar && typeof window.Quasar.setCssVar === "function") {
   window.Quasar.setCssVar("primary", "#009485");
 }
 
-app.component("schema-field-filter", SchemaFieldFilter);  // shift click and see relationships
-app.component("schema-code-display", SchemaCodeDisplay);  // double click to see node details
-app.component("route-code-display", RouteCodeDisplay);  // double click to see route details
-app.component("render-graph", RenderGraph);   // for debug, render pasted dot content
-app.component('demo-component', Demo)
+app.component("schema-code-display", SchemaCodeDisplay); // double click to see node details
+app.component("route-code-display", RouteCodeDisplay); // double click to see route details
+app.component("render-graph", RenderGraph); // for debug, render pasted dot content
+app.component("demo-component", Demo);
 
 app.mount("#q-app");

{fastapi_voyager-0.12.6 → fastapi_voyager-0.12.8}/tests/programatic.py

@@ -6,7 +6,7 @@ app.mount(
     '/voyager', 
     create_voyager(
         app, 
-        module_color={"tests.service": "purple", "tests.demo": "#00b1cc", "tests": "green"}, 
+        module_color={"tests.service": "purple"}, 
         module_prefix="tests.service", 
         swagger_url="/docs",
         initial_page_policy='first',

fastapi_voyager-0.12.6/src/fastapi_voyager/web/component/schema-field-filter.js

@@ -1,190 +0,0 @@
-import { GraphUI } from "../graph-ui.js";
-const { defineComponent, reactive, ref, onMounted, nextTick, watch } =
-  window.Vue;
-
-// SchemaFieldFilter component
-// Features:
-//  - Fetch initial schemas list (GET /dot) and build schema options
-//  - Second selector lists fields of the chosen schema
-//  - Query button disabled until a schema is selected
-//  - On query: POST /dot with schema_name + optional schema_field; render returned DOT in #graph-schema-field
-//  - Uses GraphUI once and re-renders
-//  - Emits 'queried' event after successful render (payload: { schemaName, fieldName })
-export default defineComponent({
-  name: "SchemaFieldFilter",
-  props: {
-    schemaName: { type: String, default: null }, // external injection triggers auto-query
-    schemas: { type: Object, default: () => ({}) },
-  },
-  emits: ["queried", "close"],
-  setup(props, { emit }) {
-    const state = reactive({
-      loadingSchemas: false,
-      querying: false,
-      schemas: [], // [{ name, fullname, fields: [{name,...}] }]
-      schemaOptions: [], // [{ label, value }]
-      fieldOptions: [], // [ field.name ]
-      schemaFullname: null,
-      fieldName: null,
-      error: null,
-      showFields: "object",
-      showFieldOptions: [
-        { label: "No fields", value: "single" },
-        { label: "Object fields", value: "object" },
-        { label: "All fields", value: "all" },
-      ],
-    });
-
-    let graphInstance = null;
-    let lastAppliedExternal = null;
-
-    async function loadSchemas() {
-      // Use externally provided props.schemas dict directly; no network call.
-      state.error = null;
-      const dict =
-        props.schemas && typeof props.schemas === "object" ? props.schemas : {};
-      // Flatten to array for local operations
-      state.schemas = Object.values(dict);
-      state.schemaOptions = state.schemas.map((s) => ({
-        label: `${s.name} - ${s.id}`,
-        value: s.id,
-      }));
-      // Maintain compatibility: loadingSchemas flag toggled quickly (no async work)
-      state.loadingSchemas = false;
-    }
-
-    function onFilterSchemas(val, update) {
-      const needle = (val || "").toLowerCase();
-      update(() => {
-        let opts = state.schemas.map((s) => ({
-          label: `${s.name} - ${s.id}`,
-          value: s.id,
-        }));
-        if (needle) {
-          opts = opts.filter((o) => o.label.toLowerCase().includes(needle));
-        }
-        state.schemaOptions = opts;
-      });
-    }
-
-    function onSchemaChange(val) {
-      state.schemaFullname = val;
-      state.fieldName = null;
-      const schema = state.schemas.find((s) => s.id === val);
-      state.fieldOptions = schema ? schema.fields.map((f) => f.name) : [];
-    }
-
-    async function onQuery() {
-      if (!state.schemaFullname) return;
-      state.querying = true;
-      state.error = null;
-      try {
-        const payload = {
-          schema_name: state.schemaFullname,
-          schema_field: state.fieldName || null,
-          show_fields: state.showFields,
-        };
-        const res = await fetch("dot", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-        });
-        const dotText = await res.text();
-        if (!graphInstance) {
-          graphInstance = new GraphUI("#graph-schema-field");
-        }
-        await graphInstance.render(dotText);
-        emit("queried", {
-          schemaName: state.schemaFullname,
-          fieldName: state.fieldName,
-        });
-      } catch (e) {
-        state.error = "Query failed";
-        console.error("SchemaFieldFilter query failed", e);
-      } finally {
-        state.querying = false;
-      }
-    }
-
-    function applyExternalSchema(name) {
-      if (!name || !state.schemas.length) return;
-      if (lastAppliedExternal === name) return; // avoid duplicate
-      const schema = state.schemas.find((s) => s.id === name);
-      if (!schema) return;
-      state.schemaFullname = schema.id;
-      state.fieldOptions = schema.fields.map((f) => f.name);
-      state.fieldName = null; // reset field for external injection
-      lastAppliedExternal = name;
-      // auto query
-      onQuery();
-    }
-
-    onMounted(async () => {
-      await nextTick();
-      await loadSchemas();
-      if (props.schemaName) {
-        applyExternalSchema(props.schemaName);
-      }
-    });
-
-    function close() {
-      emit("close");
-    }
-
-    return { state, onSchemaChange, onQuery, close, onFilterSchemas };
-  },
-  template: `
-	<div style="height:100%; position:relative; background:#fff;">
-				<div style="position:absolute; top:8px; left:8px; z-index:10; background:rgba(255,255,255,0.95); padding:8px 10px; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.15);" class="q-gutter-sm row items-center">
-			<q-select 
-				dense outlined use-input input-debounce="0"
-				v-model="state.schemaFullname"
-				:options="state.schemaOptions"
-				option-label="label"
-				option-value="value"
-				emit-value 
-        map-options
-				:loading="state.loadingSchemas"
-				style="min-width:220px"
-				clearable
-				label="Select schema"
-				@update:model-value="onSchemaChange"
-        @filter="onFilterSchemas"
-			/>
-			<q-select 
-				dense outlined
-				v-model="state.fieldName"
-				:disable="!state.schemaFullname || state.fieldOptions.length===0"
-				:options="state.fieldOptions"
-				style="min-width:180px"
-				clearable
-				label="Select field (optional)"
-			/>
-					<q-option-group
-						v-model="state.showFields"
-						:options="state.showFieldOptions"
-						type="radio"
-						inline
-						dense
-						color="primary"
-						style="min-width:260px"
-					/>
-			<q-btn 
-          class="q-ml-md"
-          icon="search"
-				  label="Search" 
-          outline
-				:disable="!state.schemaFullname" 
-				:loading="state.querying" 
-				@click="onQuery" />
-				<q-btn
-					flat dense round icon="close"
-					aria-label="Close"
-					@click="close"
-				/>
-		</div>
-		<div v-if="state.error" style="position:absolute; top:52px; left:8px; z-index:10; color:#c10015; font-size:12px;">{{ state.error }}</div>
-		<div id="graph-schema-field" style="width:100%; height:100%; overflow:auto; background:#fafafa"></div>
-	</div>
-	`,
-});