fastapi-voyager 0.12.3__py3-none-any.whl → 0.12.5__py3-none-any.whl

fastapi_voyager/render.py

@@ -93,6 +93,8 @@ class Renderer:
 
         def render_module_schema(mod: ModuleNode, inherit_color: str | None=None, show_cluster:bool=True) -> str:
             color: str | None = inherit_color
+            cluster_color: str | None = None
+
 
             # recursively vist module from short to long:  'a', 'a.b', 'a.b.c'
             # color_flag: {'a', 'a.b.c'}
@@ -103,6 +105,7 @@ class Renderer:
                 if mod.fullname.startswith(k):  
                     module_color_flag.remove(k)
                     color = self.module_color[k]
+                    cluster_color = color if color != inherit_color else None
                     break
 
             inner_nodes = [ render_node(node, color) for node in mod.schema_nodes ]
@@ -117,7 +120,7 @@ class Renderer:
                         style="rounded"
                         label = "  {mod.name}"
                         labeljust = "l"
-                        {(f'pencolor = "{color}"' if color else 'pencolor="#ccc"')}
+                        {(f'pencolor = "{cluster_color}"' if cluster_color else 'pencolor="#ccc"')}
                         {('penwidth = 3' if color else 'penwidth=""')}
                         {inner_nodes_str}
                         {child_str}

fastapi_voyager/type_helper.py

@@ -260,7 +260,7 @@ def update_forward_refs(kls):
 
         local_attrs = getattr(shelled_type, '__dict__', {})
         if local_attrs.get(const.PYDANTIC_FORWARD_REF_UPDATED, False):
-            logger.debug(shelled_type.__qualname__, 'visited')
+            logger.debug("%s visited", shelled_type.__qualname__)
             continue
         if safe_issubclass(shelled_type, BaseModel):
             update_pydantic_forward_refs(shelled_type)

fastapi_voyager/version.py

@@ -1,2 +1,2 @@
 __all__ = ["__version__"]
-__version__ = "0.12.3"
+__version__ = "0.12.5"

fastapi_voyager/web/component/demo.js

@@ -0,0 +1,17 @@
+const { defineComponent, computed } = window.Vue;
+
+import { store } from '../store.js'
+
+export default defineComponent({
+  name: "Demo",
+  emits: ["close"],
+  setup() {
+    return { store };
+  },
+  template: `
+    <div>
+      <p>Count: {{ store.state.item.count }}</p>
+      <button @click="store.mutations.increment()">Add</button>
+    </div>
+  `
+});

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

@@ -14,7 +14,6 @@ export default defineComponent({
   name: "SchemaFieldFilter",
   props: {
     schemaName: { type: String, default: null }, // external injection triggers auto-query
-    // externally provided schemas dict (state.rawSchemasFull): { [id]: schema }
     schemas: { type: Object, default: () => ({}) },
   },
   emits: ["queried", "close"],

fastapi_voyager/web/graph-ui.js

@@ -82,9 +82,7 @@ export class GraphUI {
           }
           const set = $();
           set.push(this);
-          // const obj = { set, direction: "bidirectional" };
           const schemaName = event.currentTarget.dataset.name;
-          // self.currentSelection = [obj];
           if (schemaName) {
             try {
               self.options.onSchemaClick(schemaName);
@@ -93,6 +91,17 @@ export class GraphUI {
             }
           }
         });
+
+        self.gv.edges().click(function (event) {
+          // const set = $();
+          // const downStreamNode = event.currentTarget.dataset.name.split("->")[1];
+          // const nodes = self.gv.nodesByName();
+          // set.push(nodes[downStreamNode]);
+          // const obj = { set, direction: "single" };
+          // self.currentSelection = [obj];
+          // todo highlight edge and downstream node
+        })
+
         self.gv.nodes().click(function (event) {
           const set = $();
           set.push(this);
@@ -100,7 +109,6 @@ export class GraphUI {
 
           const schemaName = event.currentTarget.dataset.name;
           if (event.shiftKey && self.options.onSchemaClick) {
-            // try data-name or title text
             if (schemaName) {
               try {
                 self.options.onSchemaShiftClick(schemaName);
@@ -123,20 +131,15 @@ export class GraphUI {
           const set = $();
           set.push(this);
           const obj = { set, direction: "single" };
-          if (event.ctrlKey || event.metaKey || event.shiftKey) {
-            self.currentSelection.push(obj);
-          } else {
-            self.currentSelection = [obj];
-          }
+          self.currentSelection = [obj];
           self._highlight();
         });
 
-        // svg 背景点击高亮清空
-
+        // click background to reset highlight 
         $(document)
           .off("click.graphui")
           .on("click.graphui", function (evt) {
-            // 如果点击目标不在 graph 容器内，直接退出
+            // if outside container, do nothing
             const graphContainer = $(self.selector)[0];
             if (
               !graphContainer ||

fastapi_voyager/web/index.html

@@ -105,13 +105,13 @@
             >
               <q-icon class="q-mr-sm" name="satellite_alt"></q-icon>
               <span> FastAPI Voyager </span>
-              <span v-if="state.version" style="font-size: 12px; margin-left: 8px; font-weight: normal;">{{ state.version }}</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" style="font-size: 16px">
               <q-option-group
                 style="margin-left: 80px"
-                v-model="state.showFields"
-                :options="state.fieldOptions"
+                v-model="store.state.filter.showFields"
+                :options="store.state.fieldOptions"
                 @update:model-value="(val) => toggleShowField(val)"
                 color="primary"
                 type="radio"
@@ -137,7 +137,7 @@
                 flat
                 label="Search"
                 class="q-mr-md"
-                @click="showDialog()"
+                @click="showSearchDialog()"
               />
             </div>
             <div class="col-auto">
@@ -176,8 +176,8 @@
         </q-header>
 
         <q-drawer
-          v-model="state.detailDrawer"
-          :width="state.drawerWidth"
+          v-model="store.state.rightDrawer.drawer"
+          :width="store.state.rightDrawer.width"
           side="right"
           style="border-left: 1px solid #888;"
           bordered
@@ -201,7 +201,7 @@
           
           <div style="z-index: 11; position: absolute; left: -17px; top: 9px">
             <q-btn
-              @click="state.detailDrawer = !state.detailDrawer"
+              @click="store.state.rightDrawer.drawer = !store.state.rightDrawer.drawer"
               round
               unelevated
               color="primary"
@@ -210,14 +210,14 @@
             />
           </div>
           <schema-code-display
-            :schema-name="schemaCodeName"
-            :schemas="state.rawSchemasFull"
+            :schema-name="store.state.schemaDetail.schemaCodeName"
+            :schemas="store.state.graph.schemaMap"
           />
         </q-drawer>
 
         <q-page-container>
           <q-splitter
-            v-model="state.splitter"
+            v-model="store.state.leftPanel.width"
             unit="px"
             :limits="[200, 800]"
             class="adjust-fit"
@@ -236,12 +236,12 @@
                 <q-scroll-area class="fit">
                   <q-list dense separator>
                     <q-expansion-item
-                      v-for="tag in state.rawTags"
+                      v-for="tag in store.state.leftPanel.tags"
                       :key="tag.name"
                       expand-separator
-                      :model-value="state._tag === tag.name"
+                      :model-value="store.state.leftPanel._tag === tag.name"
                       @update:model-value="(val) => toggleTag(tag.name, val)"
-                      :header-class="state.tag === tag.name ? 'text-primary text-bold' : ''"
+                      :header-class="store.state.leftPanel.tag === tag.name ? 'text-primary text-bold' : ''"
                       content-class="q-pa-none"
                     >
                       <template #header>
@@ -249,21 +249,21 @@
                             <q-icon
                               style="vertical-align: top;"
                               class="q-mr-sm"
-                              :name="state.tag == tag.name ? 'folder' : 'folder_open'"
+                              :name="store.state.leftPanel.tag == tag.name ? 'folder' : 'folder_open'"
                             ></q-icon>
                             <span>{{ tag.name }} <q-chip style="position:relative; top: -1px;" class="q-ml-md" dense>{{ tag.routes.length }}</q-chip></span>
-                            <a v-if="state._tag == tag.name" target="_blank" class="q-ml-sm" v-if="state.swaggerUrl" :href="state.swaggerUrl + '#/' + tag.name">
+                            <a v-if="store.state.leftPanel._tag == tag.name" target="_blank" class="q-ml-sm" v-if="store.state.swagger.url" :href="store.state.swagger.url + '#/' + tag.name">
                               <q-icon color="primary" size="" name="link" title="open in swagger"></q-icon>
                             </a>
                         </div>
                       </template>
                         <q-list separator style="overflow: auto; max-height: 60vh;">
                           <q-item
-                            v-for="route in (state.hidePrimitiveRoute ? tag.routes.filter(r => !r.is_primitive) :tag.routes || [])"
+                            v-for="route in (store.state.filter.hidePrimitiveRoute ? tag.routes.filter(r => !r.is_primitive) :tag.routes || [])"
                             :key="route.id"
                             clickable
                             v-ripple
-                            :active="state.routeId === route.id"
+                            :active="store.state.leftPanel.routeId === route.id"
                             active-class=""
                             @click="selectRoute(route.id)"
                           >
@@ -274,7 +274,7 @@
                                   name="data_object"
                                 ></q-icon>
                                 {{ route.name }}
-                                <a v-if="state.routeId == route.id" target="_blank" class="q-ml-md" v-if="state.swaggerUrl" :href="state.swaggerUrl + '#/' + tag.name + '/' + route.unique_id">
+                                <a v-if="store.state.leftPanel.routeId == route.id" target="_blank" class="q-ml-md" v-if="store.state.swagger.url" :href="store.state.swagger.url + '#/' + tag.name + '/' + route.unique_id">
                                   <q-icon color="primary" size="" name="link" title="open in swagger"></q-icon>
                                 </a>
                               </span>
@@ -298,22 +298,12 @@
             <template #after>
               <div style="position: relative; width: 100%; height: 100%;">
                 <div id="graph" class="adjust-fit"></div>
-                <div style="position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 2px 8px;">
+                <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">
                     <q-toggle
-                      v-model="state.focus"
-                      v-show="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 class="q-mt-sm">
-                    <q-toggle
-                      v-if="state.enableBriefMode"
+                      v-if="store.state.modeControl.briefModeEnabled"
                       dense
-                      v-model="state.brief"
+                      v-model="store.state.filter.brief"
                       label="Brief Mode"
                       @update:model-value="(val) => toggleBrief(val)"
                       title="skip middle classes, config module_prefix to enable it"
@@ -321,7 +311,7 @@
                   </div>
                   <div class="q-mt-sm">
                     <q-toggle
-                      v-model="state.hidePrimitiveRoute"
+                      v-model="store.state.filter.hidePrimitiveRoute"
                       @update:model-value="(val) => toggleHidePrimitiveRoute(val)"
                       label="Hide Primitive"
                       dense
@@ -330,120 +320,53 @@
                   </div>
                   <div class="q-mt-sm">
                     <q-toggle
-                      v-model="state.showModule"
+                      v-model="store.state.filter.showModule"
                       @update:model-value="(val) => toggleShowModule(val)"
                       label="Show Module Cluster"
                       dense
                       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>
         </q-page-container>
       </q-layout>
-      <!-- Detail Dialog -->
-      <q-dialog v-model="showDetail" :persistent="true" :maximized="true">
-        <detail-dialog
-          :schema-name="schemaName"
-          :show-fields="state.showFields"
-          :model-value="showDetail"
-          @close="closeDetail"
-        />
-      </q-dialog>
 
       <!-- Schema Field Filter Dialog -->
       <q-dialog
-        v-model="showSchemaFieldFilter"
+        v-model="store.state.searchDialog.show"
         :persistent="true"
         :maximized="true"
       >
         <schema-field-filter
-          :schemas="state.rawSchemasFull"
-          :schema-name="schemaFieldFilterSchema"
-          @close="showSchemaFieldFilter = false"
+          :schemas="store.state.graph.schemaMap"
+          :schema-name="store.state.searchDialog.schema"
+          @close="store.state.searchDialog.show = false"
         />
       </q-dialog>
 
-      <q-dialog v-model="showRouteDetail" seamless position="bottom">
+      <q-dialog v-model="store.state.routeDetail.show" seamless position="bottom">
         <q-card style="width: 1100px; max-width: 1100px; max-height: 40vh">
           <route-code-display
-            :route-id="routeCodeId"
-            @close="showRouteDetail=false"
+            :route-id="store.state.routeDetail.routeCodeId"
+            @close="store.state.routeDetail.show = false"
           />
         </q-card>
       </q-dialog>
 
-      <!-- Dump Core Data Dialog -->
-      <q-dialog v-model="showDumpDialog" :maximized="true" :persistent="false">
-        <div style="height: 100%; position: relative; background: #fff">
-          <q-btn
-            flat
-            dense
-            round
-            icon="content_copy"
-            aria-label="Copy"
-            @click="copyDumpJson"
-            style="
-              position: absolute;
-              top: 6px;
-              right: 62px;
-              z-index: 11;
-              background: rgba(255, 255, 255, 0.85);
-            "
-          ></q-btn>
-          <q-btn
-            flat
-            dense
-            round
-            icon="close"
-            aria-label="Close"
-            @click="showDumpDialog = false"
-            style="
-              position: absolute;
-              top: 6px;
-              right: 6px;
-              z-index: 11;
-              background: rgba(255, 255, 255, 0.85);
-            "
-          ></q-btn>
-          <div>
-            <pre
-              style="padding: 20px; overflow: auto"
-            ><code>{{ dumpJson }}</code></pre>
-          </div>
-        </div>
-      </q-dialog>
-
-      <!-- Import Core Data Dialog -->
-      <q-dialog v-model="showImportDialog" :persistent="true">
-        <q-card style="min-width: 70vw; max-width: 90vw">
-          <q-card-section class="text-h6">Import core data JSON</q-card-section>
-          <q-card-section>
-            <q-btn color="primary" label="Render" @click="onImportConfirm" />
-          </q-card-section>
-          <q-card-section>
-            <q-input
-              v-model="importJsonText"
-              type="textarea"
-              autogrow
-              filled
-              label="Paste JSON here"
-            />
-          </q-card-section>
-        </q-card>
-      </q-dialog>
-
-      <!-- Render Graph Dialog (from imported core data) -->
-      <q-dialog v-model="showRenderGraph" :maximized="true" :persistent="false">
-        <render-graph
-          :core-data="renderCoreData"
-          @close="showRenderGraph = false"
-        />
-      </q-dialog>
     </div>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
     <script src="fastapi-voyager-static/quasar.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" integrity="sha512-egJ/Y+22P9NQ9aIyVCh0VCOsfydyn8eNmqBy+y2CnJG+fpRIxXMS6jbWP8tVKp0jp+NO5n8WtMUAnNnGoJKi4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script

fastapi_voyager/web/store.js

@@ -0,0 +1,101 @@
+const { reactive } = window.Vue;
+
+const state = reactive({
+    item: {
+        count: 0
+    },
+
+    version: '',
+
+    swagger: {
+        url: ''
+    },
+
+    rightDrawer: {
+        drawer: false,
+        width: 300
+    },
+
+    fieldOptions: [
+        { label: "No field", value: "single" },
+        { label: "Object fields", value: "object" },
+        { label: "All fields", value: "all" },
+    ],
+
+    // tags and routes
+    leftPanel: {  
+        width: 300,
+        tags: null,
+        tag: null,
+        _tag: null,
+        routeId: null,
+    },
+
+    graph: {
+        schemaId: null,
+        schemaKeys: new Set(),
+        schemaMap: {},
+        routeItems: []
+    },
+
+    leftPanelFiltered: {
+
+    },
+
+    // schema options, schema, fields
+    search: {  
+     
+    },
+
+
+    // route information
+    routeDetail: {  
+        show: false,
+        routeCodeId: ''
+    },
+
+    // schema information
+    schemaDetail: {  
+        show: false,
+        schemaCodeName: '',
+    },
+
+    searchDialog: {
+        show: false,
+        schema: null
+    },
+
+    // global status
+    status: {  
+        generating: false,
+        loading: false,
+        initializing: true,
+    },
+
+    // brief, hide primitive ...
+    modeControl: {  
+        focus: false,  // control the schema param
+        briefModeEnabled: false,  // show brief mode toggle
+    },
+
+    // api filters
+    filter: {
+        hidePrimitiveRoute: false,
+        showFields: 'object',
+        brief: false,
+        showModule: true,
+    }
+
+})
+
+const mutations = {
+    increment() {
+        state.item.count += 1
+    }
+}
+
+
+export const store = {
+    state,
+    mutations
+}

fastapi_voyager/web/vue-main.js

@@ -1,64 +1,17 @@
 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 RenderGraph from "./component/render-graph.js";
 import { GraphUI } from "./graph-ui.js";
-const { createApp, reactive, onMounted, watch, ref } = window.Vue;
+import { store } from './store.js'
+
+const { createApp, onMounted, ref } = window.Vue;
 
 const app = createApp({
   setup() {
-    const state = reactive({
-      // options and selections
-      tag: null, // picked tag
-      _tag: null, // display tag
-      routeId: null, // picked route
-      schemaId: null, // picked schema
-      showFields: "object",
-      fieldOptions: [
-        { label: "No field", value: "single" },
-        { label: "Object fields", value: "object" },
-        { label: "All fields", value: "all" },
-      ],
-      enableBriefMode: false,
-      brief: false,
-      focus: false,
-      hidePrimitiveRoute: false,
-      generating: false,
-      swaggerUrl: null,
-      rawTags: [], // [{ name, routes: [{ id, name }] }]
-      rawSchemas: new Set(), // [{ name, id }]
-      rawSchemasFull: {}, // full schemas dict: { [schema.id]: schema }
-      initializing: true,
-      // Splitter size (left panel width in px)
-      splitter: 300,
-      detailDrawer: false,
-      drawerWidth: 300, // drawer 宽度
-      version: "", // version from backend
-      showModule: true,
-    });
-
-    const showDetail = ref(false);
-    const showSchemaFieldFilter = ref(false);
-    const showDumpDialog = ref(false);
-    const dumpJson = ref("");
-    const showImportDialog = ref(false);
-    const importJsonText = ref("");
-    const showRenderGraph = ref(false);
-    const renderCoreData = ref(null);
-    const schemaName = ref(""); // used by detail dialog
-    const schemaFieldFilterSchema = ref(null); // external schemaName for schema-field-filter
-    const schemaCodeName = ref("");
-    const routeCodeId = ref("");
-    const showRouteDetail = ref(false);
     let graphUI = null;
 
-    function openDetail() {
-      showDetail.value = true;
-    }
-    function closeDetail() {
-      showDetail.value = false;
-    }
-
     function readQuerySelection() {
       if (typeof window === "undefined") {
         return { tag: null, route: null };
@@ -72,7 +25,7 @@ const app = createApp({
 
     function findTagByRoute(routeId) {
       return (
-        state.rawTags.find((tag) =>
+        store.state.leftPanel.tags.find((tag) =>
           (tag.routes || []).some((route) => route.id === routeId)
         )?.name || null
       );
@@ -83,13 +36,13 @@ const app = createApp({
         return;
       }
       const params = new URLSearchParams(window.location.search);
-      if (state.tag) {
-        params.set("tag", state.tag);
+      if (store.state.leftPanel.tag) {
+        params.set("tag", store.state.leftPanel.tag);
       } else {
         params.delete("tag");
       }
-      if (state.routeId) {
-        params.set("route", state.routeId);
+      if (store.state.leftPanel.routeId) {
+        params.set("route", store.state.leftPanel.routeId);
       } else {
         params.delete("route");
       }
@@ -102,45 +55,47 @@ const app = createApp({
 
     function applySelectionFromQuery(selection) {
       let applied = false;
-      if (selection.tag && state.rawTags.some((tag) => tag.name === selection.tag)) {
-        state.tag = selection.tag;
-        state._tag = 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;
       }
-      if (selection.route && state.routeItems?.[selection.route]) {
-        state.routeId = selection.route;
+      if (selection.route && store.state.graph.routeItems?.[selection.route]) {
+        store.state.leftPanel.routeId = selection.route;
         applied = true;
         const inferredTag = findTagByRoute(selection.route);
         if (inferredTag) {
-          state.tag = inferredTag;
-          state._tag = inferredTag;
+          store.state.leftPanel.tag = inferredTag;
+          store.state.leftPanel._tag = inferredTag;
         }
       }
       return applied;
     }
 
     async function loadInitial() {
-      state.initializing = true;
+      store.state.initializing = true;
       try {
         const res = await fetch("dot");
         const data = await res.json();
-        state.rawTags = Array.isArray(data.tags) ? data.tags : [];
+        store.state.leftPanel.tags = Array.isArray(data.tags) ? data.tags : [];
+
         const schemasArr = Array.isArray(data.schemas) ? data.schemas : [];
         // Build dict keyed by id for faster lookups and simpler prop passing
-        state.rawSchemasFull = Object.fromEntries(
+        const schemaMap = Object.fromEntries(
           schemasArr.map((s) => [s.id, s])
         );
-        state.rawSchemas = new Set(Object.keys(state.rawSchemasFull));
-        state.routeItems = data.tags
+        store.state.graph.schemaMap = schemaMap
+        store.state.graph.schemaKeys = new Set(Object.keys(schemaMap));
+        store.state.graph.routeItems = data.tags
           .map((t) => t.routes)
           .flat()
           .reduce((acc, r) => {
             acc[r.id] = r;
             return acc;
           }, {});
-        state.enableBriefMode = data.enable_brief_mode || false;
-        state.version = data.version || "";
-        state.swaggerUrl = data.swagger_url || null
+        store.state.modeControl.briefModeEnabled = data.enable_brief_mode || false;
+        store.state.version = data.version || "";
+        store.state.swagger.url = data.swagger_url || null
 
         const querySelection = readQuerySelection();
         const restoredFromQuery = applySelectionFromQuery(querySelection);
@@ -157,8 +112,8 @@ const app = createApp({
           case "empty":
             return
           case "first":
-            state.tag = state.rawTags.length > 0 ? state.rawTags[0].name : null;
-            state._tag = state.tag;
+            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
         }
@@ -167,7 +122,7 @@ const app = createApp({
       } catch (e) {
         console.error("Initial load failed", e);
       } finally {
-        state.initializing = false;
+        store.state.initializing = false;
       }
     }
 
@@ -177,24 +132,24 @@ const app = createApp({
       } else {
         await onGenerate(false);
         setTimeout(() => {
-          const ele = $(`[data-name='${schemaCodeName.value}'] polygon`);
+          const ele = $(`[data-name='${store.state.schemaDetail.schemaCodeName}'] polygon`);
           ele.dblclick();
         }, 1);
       }
     }
 
     async function onGenerate(resetZoom = true) {
-      const schema_name = state.focus ? schemaCodeName.value : null;
-      state.generating = true;
+      const schema_name = store.state.modeControl.focus ? store.state.schemaDetail.schemaCodeName : null;
+      store.state.generating = true;
       try {
         const payload = {
-          tags: state.tag ? [state.tag] : null,
+          tags: store.state.leftPanel.tag ? [store.state.leftPanel.tag] : null,
           schema_name: schema_name || null,
-          route_name: state.routeId || null,
-          show_fields: state.showFields,
-          brief: state.brief,
-          hide_primitive_route: state.hidePrimitiveRoute,
-          show_module: state.showModule,
+          route_name: store.state.leftPanel.routeId || null,
+          show_fields: store.state.filter.showFields,
+          brief: store.state.modeControl.brief,
+          hide_primitive_route: store.state.filter.hidePrimitiveRoute,
+          show_module: store.state.filter.showModule,
         };
         const res = await fetch("dot", {
           method: "POST",
@@ -207,21 +162,21 @@ const app = createApp({
         if (!graphUI) {
           graphUI = new GraphUI("#graph", {
             onSchemaShiftClick: (id) => {
-              if (state.rawSchemas.has(id)) {
+              if (store.state.graph.schemaKeys.has(id)) {
                 resetDetailPanels();
-                schemaFieldFilterSchema.value = id;
-                showSchemaFieldFilter.value = true;
+                store.state.searchDialog.show = true;
+                store.state.searchDialog.schema = id;
               }
             },
             onSchemaClick: (id) => {
               resetDetailPanels();
-              if (state.rawSchemas.has(id)) {
-                schemaCodeName.value = id;
-                state.detailDrawer = true;
+              if (store.state.graph.schemaKeys.has(id)) {
+                store.state.schemaDetail.schemaCodeName = id;
+                store.state.rightDrawer.drawer = true;
               }
-              if (id in state.routeItems) {
-                routeCodeId.value = id;
-                showRouteDetail.value = true;
+              if (id in store.state.graph.routeItems) {
+                store.state.routeDetail.routeCodeId = id;
+                store.state.routeDetail.show = true;
               }
             },
             resetCb: () => {
@@ -233,149 +188,95 @@ const app = createApp({
       } catch (e) {
         console.error("Generate failed", e);
       } finally {
-        state.generating = false;
+        store.state.generating = false;
       }
     }
 
-    async function onDumpData() {
-      try {
-        const payload = {
-          tags: state.tag ? [state.tag] : null,
-          schema_name: state.schemaId || null,
-          route_name: state.routeId || null,
-          show_fields: state.showFields,
-          brief: state.brief,
-        };
-        const res = await fetch("dot-core-data", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-        });
-        const json = await res.json();
-        dumpJson.value = JSON.stringify(json, null, 2);
-        showDumpDialog.value = true;
-      } catch (e) {
-        console.error("Dump data failed", e);
-      }
-    }
-
-    async function copyDumpJson() {
-      try {
-        await navigator.clipboard.writeText(dumpJson.value || "");
-        if (window.Quasar?.Notify) {
-          window.Quasar.Notify.create({ type: "positive", message: "Copied" });
-        }
-      } catch (e) {
-        console.error("Copy failed", e);
-      }
-    }
-
-    function openImportDialog() {
-      importJsonText.value = "";
-      showImportDialog.value = true;
-    }
-
-    async function onImportConfirm() {
-      let payloadObj = null;
-      try {
-        payloadObj = JSON.parse(importJsonText.value || "{}");
-      } catch (e) {
-        if (window.Quasar?.Notify) {
-          window.Quasar.Notify.create({
-            type: "negative",
-            message: "Invalid JSON",
-          });
-        }
-        return;
-      }
-      // Move the request into RenderGraph component: pass the parsed object and let the component call /dot-render-core-data
-      renderCoreData.value = payloadObj;
-      showRenderGraph.value = true;
-      showImportDialog.value = false;
-    }
-
-    function showDialog() {
-      schemaFieldFilterSchema.value = null;
-      showSchemaFieldFilter.value = true;
+    function showSearchDialog() {
+      store.state.searchDialog.show = true;
+      store.state.searchDialog.schema = null;
     }
 
     function resetDetailPanels() {
-      state.detailDrawer = false;
-      showRouteDetail.value = false;
-      schemaCodeName.value = "";
+      store.state.rightDrawer.drawer = false;
+      store.state.routeDetail.show = false
+      store.state.schemaDetail.schemaCodeName = "";
     }
 
     async function onReset() {
-      state.tag = null;
-      state._tag = null;
-      state.routeId = "";
-      state.schemaId = null;
+      store.state.leftPanel.tag = null;
+      store.state.leftPanel._tag = null;
+      store.state.leftPanel.routeId = null;
+
+      store.state.graph.schemaId = null;
+
       // state.showFields = "object";
-      state.focus = false;
-      schemaCodeName.value = "";
+      store.state.modeControl.focus = false;
+      store.state.schemaDetail.schemaCodeName = "";
       onGenerate();
       syncSelectionToUrl();
     }
 
     function toggleTag(tagName, expanded = null) {
       if (expanded === true) {
-        state._tag = tagName;
-        state.tag = tagName;
-        state.routeId = "";
-        state.focus = false;
-        schemaCodeName.value = "";
+        store.state.leftPanel._tag = tagName;
+        store.state.leftPanel.tag = tagName;
+        store.state.leftPanel.routeId = "";
+
+        store.state.modeControl.focus = false;
+        store.state.schemaDetail.schemaCodeName = "";
         onGenerate();
       } else {
-        state._tag = null;
+        store.state.leftPanel._tag = null;
       }
 
-      state.detailDrawer = false;
-      showRouteDetail.value = false;
+      store.state.rightDrawer.drawer = false;
+      store.state.routeDetail.show = false
       syncSelectionToUrl();
     }
 
     function selectRoute(routeId) {
-      if (state.routeId === routeId) {
-        state.routeId = "";
+      if (store.state.leftPanel.routeId === routeId) {
+        store.state.leftPanel.routeId = "";
       } else {
-        state.routeId = routeId;
+        store.state.leftPanel.routeId = routeId;
       }
-      state.detailDrawer = false;
-      showRouteDetail.value = false;
-      state.focus = false;
-      schemaCodeName.value = "";
+      store.state.rightDrawer.drawer = false;
+      store.state.routeDetail.show = false
+      store.state.modeControl.focus = false;
+      store.state.schemaDetail.schemaCodeName = "";
       onGenerate();
       syncSelectionToUrl();
     }
 
     function toggleShowModule(val) {
-      state.showModule = val;
+      store.state.filter.showModule = val;
       onGenerate()
     }
 
     function toggleShowField(field) {
-      state.showFields = field;
+      store.state.filter.showFields = field;
       onGenerate(false);
     }
 
     function toggleBrief(val) {
-      state.brief = val;
+      store.state.modeControl.brief = val;
       onGenerate();
     }
 
     function toggleHidePrimitiveRoute(val) {
-      state.hidePrimitiveRoute = val;
+      store.state.filter.hidePrimitiveRoute = val;
       onGenerate(false);
     }
 
     function startDragDrawer(e) {
       const startX = e.clientX;
-      const startWidth = state.drawerWidth;
+      const startWidth = store.state.rightDrawer.width;
 
       function onMouseMove(moveEvent) {
         const deltaX = startX - moveEvent.clientX;
         const newWidth = Math.max(300, Math.min(800, startWidth + deltaX));
-        state.drawerWidth = newWidth;
+        store.state.rightDrawer.width = newWidth;
       }
 
       function onMouseUp() {
@@ -399,49 +300,33 @@ const app = createApp({
     });
 
     return {
-      state,
+      store,
       toggleTag,
       toggleBrief,
       toggleHidePrimitiveRoute,
       selectRoute,
       onGenerate,
       onReset,
-      showDetail,
-      showRouteDetail,
-      openDetail,
-      closeDetail,
-      schemaName,
-      showSchemaFieldFilter,
-      schemaFieldFilterSchema,
-      showDialog,
-      schemaCodeName,
-      routeCodeId,
-      // dump/import
-      showDumpDialog,
-      dumpJson,
-      copyDumpJson,
-      onDumpData,
-      showImportDialog,
-      importJsonText,
-      openImportDialog,
-      onImportConfirm,
-      // render graph dialog
-      showRenderGraph,
-      renderCoreData,
+      showSearchDialog,
       toggleShowField,
       startDragDrawer,
       onFocusChange,
-      toggleShowModule
+      toggleShowModule,
     };
   },
 });
+
 app.use(window.Quasar);
+
 // Set Quasar primary theme color to green
 if (window.Quasar && typeof window.Quasar.setCssVar === "function") {
   window.Quasar.setCssVar("primary", "#009485");
 }
-app.component("schema-field-filter", SchemaFieldFilter);
-app.component("schema-code-display", SchemaCodeDisplay);
-app.component("route-code-display", RouteCodeDisplay);
-app.component("render-graph", RenderGraph);
+
+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.mount("#q-app");

{fastapi_voyager-0.12.3.dist-info → fastapi_voyager-0.12.5.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.12.3
+Version: 0.12.5
 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
@@ -31,14 +31,31 @@ Description-Content-Type: text/markdown
 [![PyPI Downloads](https://static.pepy.tech/badge/fastapi-voyager/month)](https://pepy.tech/projects/fastapi-voyager)
 
 
-> This repo is still in early stage, it supports pydantic v2 only
 
 Visualize your FastAPI endpoints, and explore them interactively.
 
-[visit online demo](https://www.newsyeah.fun/voyager/) of project: [composition oriented development pattern](https://github.com/allmonday/composition-oriented-development-pattern)
+> This repo is still in early stage, it supports pydantic v2 only
+
+[live demo](https://www.newsyeah.fun/voyager/) of project: [composition oriented development pattern](https://github.com/allmonday/composition-oriented-development-pattern)
 
 <img width="1600" height="986" alt="image" src="https://github.com/user-attachments/assets/8829cda0-f42d-4c84-be2f-b019bb5fe7e1" />
 
+with configuration:
+
+```python
+app.mount('/voyager', 
+          create_voyager(
+            app, 
+            module_color={'src.services': 'tomato'}, 
+            module_prefix='src.services', 
+            swagger_url="/docs",
+            ga_id="G-R64S7Q49VL",
+            initial_page_policy='first',
+            online_repo_url='https://github.com/allmonday/composition-oriented-development-pattern/blob/master'))
+```
+
+https://github.com/allmonday/composition-oriented-development-pattern/blob/master/src/main.py#L48
+
 ## Plan & Raodmap
 - [ideas](./docs/idea.md)
 - [changelog & roadmap](./docs/changelog.md)

{fastapi_voyager-0.12.3.dist-info → fastapi_voyager-0.12.5.dist-info}/RECORD

@@ -2,23 +2,25 @@ fastapi_voyager/__init__.py,sha256=kqwzThE1YhmQ_7jPKGlnWvqRGC-hFrRqq_lKhKaleYU,2
 fastapi_voyager/cli.py,sha256=td3yIIigEomhSdDO-Xkh-CgpEwCafwlwnpvxnT9QsBo,10488
 fastapi_voyager/filter.py,sha256=AN_HIu8-DtKisIq5mFt7CnqRHtxKewedNGyyaI82hSY,11529
 fastapi_voyager/module.py,sha256=h9YR3BpS-CAcJW9WCdVkF4opqwY32w9T67g9GfdLytk,3425
-fastapi_voyager/render.py,sha256=1S9GFQ4LnNC_Qd-yiM8Jw8FkTxt2huREppc2sO0dFxA,9820
+fastapi_voyager/render.py,sha256=7jSChISqTV2agaO55thhwyrOhqVOMux4x7k8rSQROnU,9960
 fastapi_voyager/server.py,sha256=MZNRpcXor2q8Rj3OSf6EH8NkgDChxfzUtnIY8ilRkaY,7053
 fastapi_voyager/type.py,sha256=7EL1zaIwKVRGpLig7fqaOrZGN5k0Rm31C9COfck3CSs,1750
-fastapi_voyager/type_helper.py,sha256=quQPV0dbb5JwpfpC5tL2Zad73f_fJXF2-k46ZMuXrZs,9716
-fastapi_voyager/version.py,sha256=TeMwxEaDOniKVMHjL1Q1lrmHL9cdAEzO838ewxqUUAU,49
+fastapi_voyager/type_helper.py,sha256=JXD_OE_xTARkGjWDsnO_xfvyZ0vcwViYyqCp6oEHBTM,9719
+fastapi_voyager/version.py,sha256=0gsRRMzt46OBC-7IuF0VTu6UPwKs_X7qmw7KMjDhIeo,49
 fastapi_voyager/voyager.py,sha256=LiRUb0ZG2cfnyY_pwRqoeZjxb6Pu6xy_lqPiMupxoKM,13510
-fastapi_voyager/web/graph-ui.js,sha256=9ONPxQHvk4HxYq6KtKc_2VbJmUgd-gh7i3Biv1rkqC4,5734
+fastapi_voyager/web/graph-ui.js,sha256=NiwUFHCZPE4C-Hx4qwFvHwPyXw_lu2ar3WnPkmVGQN0,5850
 fastapi_voyager/web/graphviz.svg.css,sha256=zDCjjpT0Idufu5YOiZI76PL70-avP3vTyzGPh9M85Do,1563
 fastapi_voyager/web/graphviz.svg.js,sha256=lvAdbjHc-lMSk4GQp-iqYA2PCFX4RKnW7dFaoe0LUHs,16005
-fastapi_voyager/web/index.html,sha256=8cmlwQzE5tonHj_QozdKcr3z-7JFsvE7cjf70dye0y8,19377
+fastapi_voyager/web/index.html,sha256=3HixCgVF9VtTx89G3usDXpEh7NZnLk_p9siz4OUVUHE,17444
 fastapi_voyager/web/quasar.min.css,sha256=F5jQe7X2XT54VlvAaa2V3GsBFdVD-vxDZeaPLf6U9CU,203145
 fastapi_voyager/web/quasar.min.js,sha256=h0ftyPMW_CRiyzeVfQqiup0vrVt4_QWojpqmpnpn07E,502974
-fastapi_voyager/web/vue-main.js,sha256=m6U24ythzjQuAYXUm9BsTdFrApFNqW26B0Bf7TsybqQ,13275
+fastapi_voyager/web/store.js,sha256=fW-3uUwWNUsW8vXbTqltHvvlIroBeZTJvFkMSjuWdVg,1630
+fastapi_voyager/web/vue-main.js,sha256=H50LbB-g3jWaz3Xv2O8RgajlibjtoiHu1HDTumjf7sY,10766
+fastapi_voyager/web/component/demo.js,sha256=bQb16Un4XZ3Mf8qL6gvyrXe_mmA3V3mSIRMQAWg2MNk,352
 fastapi_voyager/web/component/render-graph.js,sha256=e8Xgh2Kl-nYU0P1gstEmAepCgFnk2J6UdxW8TlMafGs,2322
 fastapi_voyager/web/component/route-code-display.js,sha256=8NJPPjNRUC21gjpY8XYEQs4RBbhX1pCiqEhJp39ku6k,3678
 fastapi_voyager/web/component/schema-code-display.js,sha256=qKUMV2RFQzR8deof2iC4vyp65UaWadtVsDAXjY-i3vE,7042
-fastapi_voyager/web/component/schema-field-filter.js,sha256=c--XiXJrhIS7sYo1x8ZwMoqak0k9xLkNYTWoli-zd38,6253
+fastapi_voyager/web/component/schema-field-filter.js,sha256=i6Zp02wfSBWQb4AJ7H_Q9vgCVzLaVnH1I2JIot0sV-0,6172
 fastapi_voyager/web/icon/android-chrome-192x192.png,sha256=35sBy6jmUFJCcquStaafHH1qClZIbd-X3PIKSeLkrNo,37285
 fastapi_voyager/web/icon/android-chrome-512x512.png,sha256=eb2eDjCwIruc05029_0L9hcrkVkv8KceLn1DJMYU0zY,210789
 fastapi_voyager/web/icon/apple-touch-icon.png,sha256=gnWK46tPnvSw1-oYZjgI02wpoO4OrIzsVzGHC5oKWO0,33187
@@ -26,8 +28,8 @@ fastapi_voyager/web/icon/favicon-16x16.png,sha256=JC07jEzfIYxBIoQn_FHXvyHuxESdhW
 fastapi_voyager/web/icon/favicon-32x32.png,sha256=C7v1h58cfWOsiLp9yOIZtlx-dLasBcq3NqpHVGRmpt4,1859
 fastapi_voyager/web/icon/favicon.ico,sha256=tZolYIXkkBcFiYl1A8ksaXN2VjGamzcSdes838dLvNc,15406
 fastapi_voyager/web/icon/site.webmanifest,sha256=ep4Hzh9zhmiZF2At3Fp1dQrYQuYF_3ZPZxc1KcGBvwQ,263
-fastapi_voyager-0.12.3.dist-info/METADATA,sha256=zCZqZOPMmQMh0guXA7dmVHP0QD1M8ZJKFT6dyR_hWRo,6009
-fastapi_voyager-0.12.3.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
-fastapi_voyager-0.12.3.dist-info/entry_points.txt,sha256=pEIKoUnIDXEtdMBq8EmXm70m16vELIu1VPz9-TBUFWM,53
-fastapi_voyager-0.12.3.dist-info/licenses/LICENSE,sha256=lNVRR3y_bFVoFKuK2JM8N4sFaj3m-7j29kvL3olFi5Y,1067
-fastapi_voyager-0.12.3.dist-info/RECORD,,
+fastapi_voyager-0.12.5.dist-info/METADATA,sha256=QO3zauma0JaAR_DyhX5yQqNkDf868_2cAw1mHHKY3o0,6523
+fastapi_voyager-0.12.5.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
+fastapi_voyager-0.12.5.dist-info/entry_points.txt,sha256=pEIKoUnIDXEtdMBq8EmXm70m16vELIu1VPz9-TBUFWM,53
+fastapi_voyager-0.12.5.dist-info/licenses/LICENSE,sha256=lNVRR3y_bFVoFKuK2JM8N4sFaj3m-7j29kvL3olFi5Y,1067
+fastapi_voyager-0.12.5.dist-info/RECORD,,

{fastapi_voyager-0.12.3.dist-info → fastapi_voyager-0.12.5.dist-info}/WHEEL

@@ -1,4 +1,4 @@
 Wheel-Version: 1.0
-Generator: hatchling 1.27.0
+Generator: hatchling 1.28.0
 Root-Is-Purelib: true
 Tag: py3-none-any