fastapi-voyager 0.9.1__py3-none-any.whl → 0.9.3__py3-none-any.whl

fastapi_voyager/version.py

@@ -1,2 +1,2 @@
 __all__ = ["__version__"]
-__version__ = "0.9.1"
+__version__ = "0.9.3"

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

@@ -3,14 +3,10 @@ const { defineComponent, ref, watch, onMounted } = window.Vue;
 // Component: RouteCodeDisplay
 // Props:
 //   routeId: route id key in routeItems
-//   modelValue: dialog visibility
-//   routes: object map { id: { id, name, source_code } }
 export default defineComponent({
   name: "RouteCodeDisplay",
   props: {
     routeId: { type: String, required: true },
-    modelValue: { type: Boolean, default: false },
-    routes: { type: Object, default: () => ({}) },
   },
   emits: ["close"],
   setup(props, { emit }) {
@@ -101,32 +97,26 @@ export default defineComponent({
       }
     }
 
-    watch(
-      () => props.modelValue,
-      (v) => {
-        if (v) load();
-      }
-    );
     watch(
       () => props.routeId,
       () => {
-        if (props.modelValue) load();
+        load();
       }
     );
 
     onMounted(() => {
-      if (props.modelValue) load();
+      load();
     });
 
     return { loading, code, error, close, link };
   },
   template: `
-  <div class="frv-route-code-display" style="border:1px solid #ccc; position:relative; width:50vw; max-width:50vw; height:100%; background:#fff;">
+  <div class="frv-route-code-display" style="border:1px solid #ccc; position:relative; background:#fff;">
     <q-btn dense flat round icon="close" @click="close" aria-label="Close" style="position:absolute; top:6px; right:6px; z-index:10; background:rgba(255,255,255,0.85)" />
     <div v-if="link" class="q-ml-md q-mt-md" style="padding-top:4px;">
       <a :href="link" target="_blank" rel="noopener" style="font-size:12px; color:#3b82f6;">Open in VSCode</a>
     </div>
-    <div style="padding:40px 16px 16px 16px; height:100%; box-sizing:border-box; overflow:auto;">
+    <div style="padding:40px 16px 16px 16px; box-sizing:border-box; overflow:auto;">
       <div v-if="loading" style="font-family:Menlo, monospace; font-size:12px;">Loading source...</div>
       <div v-else-if="error" style="color:#c10015; font-family:Menlo, monospace; font-size:12px;">{{ error }}</div>
       <pre v-else style="margin:0;"><code class="language-python">{{ code }}</code></pre>

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

@@ -13,23 +13,17 @@ export default defineComponent({
   name: "SchemaCodeDisplay",
   props: {
     schemaName: { type: String, required: true },
-    modelValue: { type: Boolean, default: false },
-    schemas: { type: Array, default: () => [] },
+    schemas: { type: Object, default: () => ({}) },
   },
-  emits: ["close"],
   setup(props, { emit }) {
-    const loading = ref(false);
     const code = ref("");
     const link = ref("");
     const error = ref("");
     const fields = ref([]); // schema fields list
     const tab = ref("source");
 
-    function close() {
-      emit("close");
-    }
 
-    function highlightLater() {
+    async function highlightLater() {
       // wait a tick for DOM update
       requestAnimationFrame(() => {
         try {
@@ -38,6 +32,10 @@ export default defineComponent({
               ".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");
+              }
               window.hljs.highlightElement(block);
             }
           }
@@ -50,7 +48,6 @@ export default defineComponent({
     async function loadSource() {
       if (!props.schemaName) return;
 
-      loading.value = true;
       error.value = null;
       code.value = "";
       link.value = "";
@@ -77,7 +74,6 @@ export default defineComponent({
       } catch (e) {
         error.value = "Failed to load source";
       } finally {
-        loading.value = false;
       }
 
       try {
@@ -99,10 +95,12 @@ export default defineComponent({
       } catch (e) {
         error.value = "Failed to load source";
       } finally {
-        loading.value = false;
       }
 
-      if (!error.value && tab.value === "source") {
+      const schema = props.schemas && props.schemas[props.schemaName];
+      fields.value = Array.isArray(schema?.fields) ? schema.fields : [];
+
+      if (tab.value === "source") {
         highlightLater();
       }
     }
@@ -118,25 +116,21 @@ export default defineComponent({
     );
 
     watch(
-      () => props.modelValue,
-      (val) => {
-        if (val) {
-          loadSource();
-        }
-      }
+      () => props.schemaName,
+      () => {
+        loadSource();
+      },
     );
 
     onMounted(() => {
-      if (props.modelValue) loadSource();
+      loadSource();
     });
 
-    return { loading, link, code, error, close, fields, tab };
+    return { link, code, error, fields, tab };
   },
   template: `
-  <div class="frv-code-display" style="border: 1px solid #ccc; border-left: none; position:relative; width:40vw; max-width:40vw; height:100%; background:#fff;">
-			<q-btn dense flat round icon="close" @click="close" aria-label="Close"
-				style="position:absolute; top:6px; right:6px; z-index:10; background:rgba(255,255,255,0.85)" />
-      <div v-if="link" class="q-ml-md q-mt-md">
+  <div class="frv-code-display" style="border: 1px solid #ccc; border-left: none; position:relative; height:100%; background:#fff;">
+      <div class="q-ml-lg q-mt-md">
         <a :href="link" target="_blank" rel="noopener" style="font-size:12px; color:#3b82f6;">
           Open in VSCode
         </a>
@@ -150,8 +144,7 @@ export default defineComponent({
       </div>
       <q-separator />
       <div style="padding:8px 16px 16px 16px; height:75%; box-sizing:border-box; overflow:auto;">
-        <div v-if="loading" style="font-family:Menlo, monospace; font-size:12px;">Loading source...</div>
-        <div v-else-if="error" style="color:#c10015; font-family:Menlo, monospace; font-size:12px;">{{ error }}</div>
+        <div v-if="error" style="color:#c10015; font-family:Menlo, monospace; font-size:12px;">{{ error }}</div>
         <template v-else>
           <div v-show="tab === 'source'">
             <pre style="margin:0;"><code class="language-python">{{ code }}</code></pre>

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

@@ -14,7 +14,8 @@ export default defineComponent({
   name: "SchemaFieldFilter",
   props: {
     schemaName: { type: String, default: null }, // external injection triggers auto-query
-    schemas: { type: Array, default: () => [] }, // externally provided schemas (state.rawSchemasFull or similar)
+    // externally provided schemas dict (state.rawSchemasFull): { [id]: schema }
+    schemas: { type: Object, default: () => ({}) },
   },
   emits: ["queried", "close"],
   setup(props, { emit }) {
@@ -39,9 +40,11 @@ export default defineComponent({
     let lastAppliedExternal = null;
 
     async function loadSchemas() {
-      // Refactored: use externally provided props.schemas directly; no network call.
+      // Use externally provided props.schemas dict directly; no network call.
       state.error = null;
-      state.schemas = Array.isArray(props.schemas) ? props.schemas : [];
+      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,

fastapi_voyager/web/graph-ui.js

@@ -69,23 +69,27 @@ export class GraphUI {
           const set = $();
           set.push(this);
           const obj = { set, direction: "bidirectional" };
-          // Shift+Click to trigger schema detail callback (if provided)
+
+          const schemaName = event.currentTarget.dataset.name;
           if (event.shiftKey && self.options.onSchemaClick) {
             // try data-name or title text
-            const schemaName = event.currentTarget.dataset.name;
             if (schemaName) {
               try {
-                self.options.onSchemaClick(schemaName);
+                self.options.onSchemaShiftClick(schemaName);
               } catch (e) {
-                console.warn("onSchemaClick callback failed", e);
+                console.warn("onSchemaShiftClick callback failed", e);
               }
             }
-          } else if (event.altKey && self.options.onSchemaAltClick) {
-            const schemaName = event.currentTarget.dataset.name;
-            self.options.onSchemaAltClick(schemaName);
           } else {
             self.currentSelection = [obj];
             self._highlight();
+            if (schemaName) {
+              try {
+                self.options.onSchemaClick(schemaName);
+              } catch (e) {
+                console.warn("onSchemaClick callback failed", e);
+              }
+            }
           }
         });
 

fastapi_voyager/web/index.html

@@ -55,51 +55,26 @@
       flex: 1 1 auto;
       overflow: auto;
     }
+
+    .adjust-fit {
+      height: calc(100% - 54px);
+    }
   </style>
   <body>
-    <div id="q-app" class="column" style="height: 100%">
-      <div
-        v-if="state.initializing"
-        style="
-          position: fixed;
-          inset: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          z-index: 2000;
-          background: rgba(255, 255, 255, 0.85);
-          font-size: 18px;
-          font-family: Roboto, sans-serif;
-          color: #444;
-        "
-      >
-        <div style="text-align: center">
-          <div class="q-mb-sm">Initializing...</div>
-          <q-spinner color="primary" size="32px" />
-        </div>
-      </div>
-      <div
-        style="
-          padding: 8px;
-          background-color: #fff;
-          border-bottom: 1px solid #ccc;
-          color: #211d1d;
-          flex: 0 0 auto;
-        "
-      >
-        <div class="row items-center q-col-gutter-md">
-          <div class="col-auto">
+    <div id="q-app">
+      <q-layout view="hHh lpR fff">
+        <q-header bordered class="bg-primary text-white">
+          <q-toolbar class="row text-grey-9 bg-white" style="width: 100%">
             <div
-              style="width: 282px; margin-left: 8px"
-              class="text-h6 text-primary"
+              class="col-auto text-primary"
+              style="font-size: 16px; font-weight: bold"
             >
               <q-icon class="q-mr-sm" name="satellite_alt"></q-icon>
               <span> FastAPI Voyager </span>
             </div>
-          </div>
-          <div class="col-auto">
-            <div class="column">
+            <div class="col-auto" style="font-size: 16px">
               <q-option-group
+                style="margin-left: 140px"
                 v-model="state.showFields"
                 :options="state.fieldOptions"
                 @update:model-value="(val) => toggleShowField(val)"
@@ -109,170 +84,189 @@
                 dense
               />
             </div>
-          </div>
-
-          <!-- <div class="col-auto">
-            <q-btn-dropdown
-              class="q-ml-md"
-              split
-              :loading="state.generating"
-              @click="onGenerate"
-              label="Generate"
-              outline
-            >
-              <q-list>
-                <q-item clickable v-close-popup @click="onDumpData">
-                  <q-item-section>Dump data</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup @click="openImportDialog">
-                  <q-item-section>Import data</q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
-          </div> -->
+            <div class="col-auto q-ml-auto">
+              <q-toggle
+                class="q-mr-md"
+                v-model="state.brief"
+                label="Brief Mode"
+                @update:model-value="(val) => toggleBrief(val)"
+                title="skip middle classes, config module_prefix to enable it"
+                dense
+              />
+            </div>
+            <div class="col-auto">
+              <q-toggle
+                v-model="state.hidePrimitiveRoute"
+                @update:model-value="(val) => toggleHidePrimitiveRoute(val)"
+                label="Hide Primitive"
+                title="hide routes return primitive"
+                class="q-mr-md"
+                dense
+              />
+            </div>
+            <div class="col-auto">
+              <q-btn
+                outline
+                @click="onReset"
+                title="may be very slow"
+                class="q-mr-md"
+                label="Show All"
+              />
+            </div>
+            <div class="col-auto">
+              <q-btn
+                outline
+                icon="search"
+                label="Search"
+                class="q-mr-md"
+                @click="showDialog()"
+              />
+            </div>
+            <div class="col-auto">
+              <q-btn
+                dense
+                round
+                flat
+                icon="help_outline"
+                aria-label="Help"
+                class="q-mr-sm"
+              >
+                <q-tooltip
+                  anchor="bottom middle"
+                  self="top middle"
+                  :offset="[0,8]"
+                >
+                  <div
+                    class="column items-start text-left"
+                    style="line-height: 1.4; font-size: 12px"
+                  >
+                    <ul>
+                      <li>scroll to zoom in/out</li>
+                      <li>
+                        click node to check highlight related nodes on the
+                        chart, esc to unselect
+                      </li>
+                      <li>
+                        shift + click to see schema's dependencies without
+                        unrelated nodes
+                      </li>
+                      <li>alt + click to see schema details</li>
+                    </ul>
+                  </div>
+                </q-tooltip>
+              </q-btn>
+            </div>
+            <!-- <q-toolbar-title class="text-primary row">
+            </q-toolbar-title> -->
+          </q-toolbar>
+        </q-header>
 
-          <div class="col-auto q-ml-auto">
-            <q-toggle
-              class="q-ml-md"
-              v-model="state.brief"
-              label="Brief Mode"
-              @update:model-value="(val) => toggleBrief(val)"
-              title="skip middle classes, config module_prefix to enable it"
-              dense
-            />
-          </div>
-          <div class="col-auto">
-            <q-toggle
-              v-model="state.hidePrimitiveRoute"
-              @update:model-value="(val) => toggleHidePrimitiveRoute(val)"
-              label="Hide Primitive"
-              title="hide routes return primitive"
-              dense
-            />
-          </div>
-          <div class="col-auto">
-            <q-btn
-              outline
-              @click="onReset"
-              title="may be very slow"
-              label="Show All"
-            />
-          </div>
-          <div class="col-auto">
-            <q-btn outline icon="search" label="Search" @click="showDialog()" />
-          </div>
-          <div class="col-auto">
+        <q-drawer
+          v-model="state.detailDrawer"
+          width="400"
+          side="right"
+          overlay
+          bordered
+        >
+          <div style="z-index: 1; position: absolute; left: -17px; top: 9px">
             <q-btn
-              dense
+              @click="state.detailDrawer = !state.detailDrawer"
               round
-              flat
-              icon="help_outline"
-              aria-label="Help"
-              class="q-mr-md"
-            >
-              <q-tooltip
-                anchor="bottom middle"
-                self="top middle"
-                :offset="[0,8]"
-              >
-                <div
-                  class="column items-start text-left"
-                  style="line-height: 1.4; font-size: 12px"
-                >
-                  <ul>
-                    <li>scroll to zoom in/out</li>
-                    <li>
-                      click node to check highlight related nodes on the chart,
-                      esc to unselect
-                    </li>
-                    <li>
-                      shift + click to see schema's dependencies without
-                      unrelated nodes
-                    </li>
-                    <li>alt + click to see schema details</li>
-                  </ul>
-                </div>
-              </q-tooltip>
-            </q-btn>
+              unelevated
+              color="primary"
+              dense
+              icon="chevron_right"
+            />
           </div>
-        </div>
-      </div>
-      <div style="flex: 1 1 auto; min-height: 0;">
-        <q-splitter
-          v-model="state.splitter"
-          unit="px"
-          :limits="[200, 800]"
-          class="fit"
-        >
-          <template #before>
-            <div
-              id="tag-navigator"
-              class="column no-wrap"
-              :style="{
+          <!-- move to bottom -->
+          <schema-code-display
+            :schema-name="schemaCodeName"
+            :schemas="state.rawSchemasFull"
+          />
+        </q-drawer>
+
+        <q-page-container>
+          <q-splitter
+            v-model="state.splitter"
+            unit="px"
+            :limits="[200, 800]"
+            class="adjust-fit"
+          >
+            <template #before>
+              <div
+                id="tag-navigator"
+                class="column no-wrap"
+                :style="{
                 borderRight: '1px solid #e0e0e0',
                 backgroundColor: '#fff',
                 minHeight: 0,
                 height: '100%'
               }"
-            >
-              <q-scroll-area class="fit">
-                <q-list dense separator>
-                  <q-expansion-item
-                    v-for="tag in state.rawTags"
-                    :key="tag.name"
-                    expand-separator
-                    :model-value="state.tag === tag.name"
-                    @update:model-value="(val) => toggleTag(tag.name, val)"
-                    :header-class="state.tag === tag.name ? 'text-primary text-bold' : ''"
-                    content-class="q-pa-none"
-                  >
-                    <template #header>
-                      <div class="row items-center" style="width: 100%">
-                        <div class="row items-end">
-                          <q-icon
-                            class="q-mr-sm"
-                            :name="state.tag == tag.name ? 'folder' : 'folder_open'"
-                          ></q-icon>
-                          <span>{{ tag.name }}</span>
+              >
+                <q-scroll-area class="fit">
+                  <q-list dense separator>
+                    <q-expansion-item
+                      v-for="tag in state.rawTags"
+                      :key="tag.name"
+                      expand-separator
+                      :model-value="state.tag === tag.name"
+                      @update:model-value="(val) => toggleTag(tag.name, val)"
+                      :header-class="state.tag === tag.name ? 'text-primary text-bold' : ''"
+                      content-class="q-pa-none"
+                    >
+                      <template #header>
+                        <div class="row items-center" style="width: 100%">
+                          <div class="row items-end">
+                            <q-icon
+                              class="q-mr-sm"
+                              :name="state.tag == tag.name ? 'folder' : 'folder_open'"
+                            ></q-icon>
+                            <span>{{ tag.name }}</span>
+                          </div>
                         </div>
-                      </div>
-                    </template>
+                      </template>
 
-                    <q-list separator>
-                      <q-item
-                        v-for="route in (state.hidePrimitiveRoute ? tag.routes.filter(r => !r.is_primitive) :tag.routes || [])"
-                        :key="route.id"
-                        clickable
-                        v-ripple
-                        :active="state.routeId === route.id"
-                        active-class=""
-                        @click="selectRoute(route.id)"
-                      >
-                        <q-item-section>
-                          <span class="q-ml-lg" style="white-space: nowrap">
-                            <q-icon class="q-mr-sm" name="data_object"></q-icon>
-                            {{ route.name }}
-                          </span>
-                        </q-item-section>
-                      </q-item>
-                      <q-item v-if="!tag.routes || tag.routes.length === 0" dense>
-                        <q-item-section class="text-grey-6"
-                          >No routes</q-item-section
+                      <q-list separator>
+                        <q-item
+                          v-for="route in (state.hidePrimitiveRoute ? tag.routes.filter(r => !r.is_primitive) :tag.routes || [])"
+                          :key="route.id"
+                          clickable
+                          v-ripple
+                          :active="state.routeId === route.id"
+                          active-class=""
+                          @click="selectRoute(route.id)"
                         >
-                      </q-item>
-                    </q-list>
-                  </q-expansion-item>
-                </q-list>
-              </q-scroll-area>
-            </div>
-          </template>
-
-          <template #after>
-            <div id="graph" class="fit"></div>
-          </template>
-        </q-splitter>
-      </div>
+                          <q-item-section>
+                            <span class="q-ml-lg" style="white-space: nowrap">
+                              <q-icon
+                                class="q-mr-sm"
+                                name="data_object"
+                              ></q-icon>
+                              {{ route.name }}
+                            </span>
+                          </q-item-section>
+                        </q-item>
+                        <q-item
+                          v-if="!tag.routes || tag.routes.length === 0"
+                          dense
+                        >
+                          <q-item-section class="text-grey-6"
+                            >No routes</q-item-section
+                          >
+                        </q-item>
+                      </q-list>
+                    </q-expansion-item>
+                  </q-list>
+                </q-scroll-area>
+              </div>
+            </template>
 
+            <template #after>
+              <div id="graph" class="fit"></div>
+            </template>
+          </q-splitter>
+        </q-page-container>
+      </q-layout>
       <!-- Detail Dialog -->
       <q-dialog v-model="showDetail" :persistent="true" :maximized="true">
         <detail-dialog
@@ -296,36 +290,10 @@
         />
       </q-dialog>
 
-      <!-- Schema Source Code Dialog (Ctrl + Click) -->
-      <q-dialog
-        v-model="showSchemaCode"
-        :maximized="true"
-        :persistent="false"
-        position="left"
-        :seamless="false"
-      >
-        <schema-code-display
-          :schema-name="schemaCodeName"
-          :model-value="showSchemaCode"
-          :schemas="state.rawSchemasFull"
-          @close="showSchemaCode = false"
-        />
-      </q-dialog>
-
-      <!-- Route Source Code Dialog (Alt + Click on route) -->
-      <q-dialog
-        v-model="showRouteCode"
-        :maximized="true"
-        :persistent="false"
-        position="right"
-        :seamless="false"
-      >
-        <route-code-display
-          :route-id="routeCodeId"
-          :model-value="showRouteCode"
-          :routes="state.routeItems"
-          @close="showRouteCode = false"
-        />
+      <q-dialog v-model="showRouteDetail" position="bottom">
+        <q-card style="width: 1100px; max-width: 1100px">
+          <route-code-display :route-id="routeCodeId" @close="showRouteDetail=false" />
+        </q-card>
       </q-dialog>
 
       <!-- Dump Core Data Dialog -->

fastapi_voyager/web/vue-main.js

@@ -9,16 +9,12 @@ const app = createApp({
   setup() {
     const state = reactive({
       // options and selections
-      tag: null,
-      tagOptions: [], // array of strings
-      routeId: null,
-      routeOptions: [], // [{ label, value }]
-      schemaId: null,
-      schemaOptions: [], // [{ label, value }]
-      routeItems: {}, // { id: { label, value } }
+      tag: null, // picked tag
+      routeId: null, // picked route
+      schemaId: null, // picked schema
       showFields: "object",
       fieldOptions: [
-        { label: "No fields", value: "single" },
+        { label: "No field", value: "single" },
         { label: "Object fields", value: "object" },
         { label: "All fields", value: "all" },
       ],
@@ -26,17 +22,16 @@ const app = createApp({
       hidePrimitiveRoute: false,
       generating: false,
       rawTags: [], // [{ name, routes: [{ id, name }] }]
-      rawSchemas: [], // [{ name, id }]
-      rawSchemasFull: [], // full objects with source_code & fields
+      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
     });
+
     const showDetail = ref(false);
     const showSchemaFieldFilter = ref(false);
-    const showSchemaCode = ref(false);
-    const showRouteCode = ref(false);
-    // Dump/Import dialogs and rendered graph dialog
     const showDumpDialog = ref(false);
     const dumpJson = ref("");
     const showImportDialog = ref(false);
@@ -47,6 +42,7 @@ const app = createApp({
     const schemaFieldFilterSchema = ref(null); // external schemaName for schema-field-filter
     const schemaCodeName = ref("");
     const routeCodeId = ref("");
+    const showRouteDetail = ref(false)
 
     function openDetail() {
       showDetail.value = true;
@@ -55,47 +51,18 @@ const app = createApp({
       showDetail.value = false;
     }
 
-    function onFilterTags(val, update) {
-      const normalized = (val || "").toLowerCase();
-      update(() => {
-        if (!normalized) {
-          state.tagOptions = state.rawTags.map((t) => t.name);
-          return;
-        }
-        state.tagOptions = state.rawTags
-          .map((t) => t.name)
-          .filter((n) => n.toLowerCase().includes(normalized));
-      });
-    }
-
-    function onFilterSchemas(val, update) {
-      const normalized = (val || "").toLowerCase();
-      update(() => {
-        const makeLabel = (s) => `${s.name} (${s.id})`;
-        let list = state.rawSchemas.map((s) => ({
-          label: makeLabel(s),
-          value: s.id,
-        }));
-        if (normalized) {
-          list = list.filter((opt) =>
-            opt.label.toLowerCase().includes(normalized)
-          );
-        }
-        state.schemaOptions = list;
-      });
-    }
-
     async function loadInitial() {
       state.initializing = true;
       try {
         const res = await fetch("dot");
         const data = await res.json();
         state.rawTags = Array.isArray(data.tags) ? data.tags : [];
-        state.rawSchemasFull = Array.isArray(data.schemas) ? data.schemas : [];
-        state.rawSchemas = state.rawSchemasFull.map((s) => ({
-          name: s.name,
-          id: s.id,
-        }));
+        const schemasArr = Array.isArray(data.schemas) ? data.schemas : [];
+        // Build dict keyed by id for faster lookups and simpler prop passing
+        state.rawSchemasFull = Object.fromEntries(
+          schemasArr.map((s) => [s.id, s])
+        );
+        state.rawSchemas = new Set(Object.keys(state.rawSchemasFull));
         state.routeItems = data.tags
           .map((t) => t.routes)
           .flat()
@@ -104,13 +71,7 @@ const app = createApp({
             return acc;
           }, {});
 
-        state.tagOptions = state.rawTags.map((t) => t.name);
-        state.schemaOptions = state.rawSchemas.map((s) => ({
-          label: `${s.name} (${s.id})`,
-          value: s.id,
-        }));
         // default route options placeholder
-        state.routeOptions = [];
       } catch (e) {
         console.error("Initial load failed", e);
       } finally {
@@ -139,23 +100,20 @@ const app = createApp({
 
         // create graph instance once
         const graphUI = new GraphUI("#graph", {
-          onSchemaClick: (id) => {
-            if (state.rawSchemas.find((s) => s.id === id)) {
+          onSchemaShiftClick: (id) => {
+            if (state.rawSchemas.has(id)) {
               schemaFieldFilterSchema.value = id;
               showSchemaFieldFilter.value = true;
             }
           },
-          onSchemaAltClick: (id) => {
-            // priority: schema id; else route id
-            if (state.rawSchemas.find((s) => s.id === id)) {
+          onSchemaClick: (id) => {
+            if (state.rawSchemas.has(id)) {
               schemaCodeName.value = id;
-              showSchemaCode.value = true;
-              return;
+              state.detailDrawer = true
             }
             if (id in state.routeItems) {
               routeCodeId.value = id;
-              showRouteCode.value = true;
-              return;
+              showRouteDetail.value = true
             }
           },
         });
@@ -282,19 +240,16 @@ const app = createApp({
       toggleBrief,
       toggleHidePrimitiveRoute,
       selectRoute,
-      onFilterTags,
-      onFilterSchemas,
       onGenerate,
       onReset,
       showDetail,
+      showRouteDetail,
       openDetail,
       closeDetail,
       schemaName,
       showSchemaFieldFilter,
       schemaFieldFilterSchema,
       showDialog,
-      showSchemaCode,
-      showRouteCode,
       schemaCodeName,
       routeCodeId,
       // dump/import

{fastapi_voyager-0.9.1.dist-info → fastapi_voyager-0.9.3.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.9.1
+Version: 0.9.3
 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
@@ -27,18 +27,15 @@ Description-Content-Type: text/markdown
 
 [![pypi](https://img.shields.io/pypi/v/fastapi-voyager.svg)](https://pypi.python.org/pypi/fastapi-voyager)
 ![Python Versions](https://img.shields.io/pypi/pyversions/fastapi-voyager)
-
-<p align="center"><img src="./voyager.jpg" alt="" /></p>
-
-
-[![IMAGE ALT TEXT](http://img.youtube.com/vi/PGlbQq1M-n8/0.jpg)](https://www.youtube.com/watch?v=PGlbQq1M-n8 "FastAPI Voyager")
+[![PyPI Downloads](https://static.pepy.tech/badge/fastapi-voyager/month)](https://pepy.tech/projects/fastapi-voyager)
 
 
-> This repo is still in early stage, currently it supports pydantic v2 only, previous name: fastapi-router-viz
+> This repo is still in early stage, it supports pydantic v2 only
 
-Inspect your API interactively
+Inspect your API interactively!
 
-<img width="1480" height="648" alt="image" src="https://github.com/user-attachments/assets/a6ccc9f1-cf06-493a-b99b-eb07767564bd" />
+<p align="center"><img src="./voyager.jpg" alt="" /></p>
+<p align="center"><a target="_blank" rel="" href="https://www.youtube.com/watch?v=PGlbQq1M-n8"><img src="http://img.youtube.com/vi/PGlbQq1M-n8/0.jpg" alt="" style="max-width: 100%;"></a></p>
 
 ## Installation
 
@@ -52,11 +49,6 @@ uv add fastapi-voyager
 voyager -m path.to.your.app.module --server
 ```
 
-## Dependencies
-
-- FastAPI
-- [pydantic-resolve](https://github.com/allmonday/pydantic-resolve)
-
 
 ## Feature
 
@@ -79,9 +71,9 @@ voyager -m tests.demo
 ```
 
 ### generate the graph
-after initialization, pick tag, rotue (optional) and click `generate`.
+after initialization, pick tag, rotue to render graph
 
-<img width="1919" height="898" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/05e321d0-49f3-4af6-a7c7-f4c9c6b1dbfd" />
+<img width="1628" height="765" alt="image" src="https://github.com/user-attachments/assets/b4712f82-e754-453b-aa69-24c932b8f48f" />
 
 ### highlight
 click a node to highlight it's upperstream and downstream nodes. figure out the related models of one page, or homw many pages are related with one model.
@@ -89,9 +81,9 @@ click a node to highlight it's upperstream and downstream nodes. figure out the
 <img width="1485" height="616" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/70c4095f-86c7-45da-a6f0-fd41ac645813" />
 
 ### filter related nodes
-`shift` click a node to check related node, pick a field to narrow the result.
+`shift` click a node to check related node, pick a field to narrow the result, picked node is marked as red.
 
-<img width="1917" height="800" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/e770dc70-f293-49e1-bcd7-d8dffa15d9ea" />
+<img width="1423" height="552" alt="image" src="https://github.com/user-attachments/assets/468a058d-afa1-4601-a7c5-c6aad6a8a557" />
 
 ### view source code
 `alt` click a node to show source code or open file in vscode.
@@ -168,7 +160,24 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 
 ## Plan before v1.0
 
-### features:
+
+### backlog
+- [ ] user can generate nodes/edges manually and connect to generated ones
+    - [ ] add owner
+    - [ ] add extra info for schema
+- [ ] display standard ER diagram `hard`
+    - [ ] display potential invalid links
+- [ ] support dataclass (pending)
+
+### in analysis
+- [ ] click field to highlight links
+- [ ] animation effect for edges
+- [ ] customrized right click panel
+    - [ ] show own dependencies
+- [ ] clean up fe code
+
+### plan:
+#### <0.9:
 - [x] group schemas by module hierarchy
 - [x] module-based coloring via Analytics(module_color={...})
 - [x] view in web browser
@@ -196,26 +205,6 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - [x] fix duplicated link from class and parent class, it also break clicking highlight
 - [x] refactor: abstract render module
 
-### backlog
-- [ ] user can generate nodes/edges manually and connect to generated ones
-    - [ ] add owner
-    - [ ] add extra info for schema
-- [ ] fixed left/right bar show field information
-- [ ] display standard ER diagram `hard`
-    - [ ] display potential invalid links
-
-bugs & non feature:
-- [ ] add tests
-- [ ] support dataclass (pending)
-
-### in analysis
-- [ ] click field to highlight links
-- [ ] animation effect for edges
-- [ ] customrized right click panel
-    - [ ] show own dependencies
-
-### plan:
-
 #### 0.9
 - [x] refactor: server.py
     - [x] rename create_app_with_fastapi -> create_voyager
@@ -223,19 +212,36 @@ bugs & non feature:
 - [x] improve initialization time cost
     - [x] query route / schema info through realtime api
     - [x] adjust fe
+- [x] adjust layout (0.9.3)
+    - [x] show field detail in right panel
+    - [x] show route info in bottom
 
 #### 0.10
-- [ ] logging information
-- [ ] open route in swagger
+- [ ] support opening route in swagger
     - config docs path
 - [ ] add http method for route
 - [ ] enable/disable module cluster  (may save space)
+- [ ] logging information
+- [ ] add tests
+- [ ] hide brief mode if not configured
+- [ ] optimize static resource
+- [ ] show route count in tag expansion item
+- [ ] route list show have a max height to trigger scrollable
+- [ ] fix layout issue when rendering huge graph
 
 #### 0.11
+- [ ] improve user experience
+    - double click to show detail
+    - improve search dialog
+
+#### 0.12
 - [ ] integration with pydantic-resolve
     - [ ] show hint for resolve, post fields
     - [ ] display loader as edges
 
+#### 0.13
+- [ ] config release pipeline
+- [ ]
 
 ## Using with pydantic-resolve
 
@@ -247,13 +253,25 @@ pydantic-resolve's @ensure_subset decorator is helpful to pick fields from `sour
 
 ## Credits
 
-- https://apis.guru/graphql-voyager/, for inspiration.
-- https://github.com/tintinweb/vscode-interactive-graphviz, for web visualization.
+- https://apis.guru/graphql-voyager/, thanks for inspiration.
+- https://github.com/tintinweb/vscode-interactive-graphviz, thanks for web visualization.
+
+
+## Dependencies
+
+- FastAPI
+- [pydantic-resolve](https://github.com/allmonday/pydantic-resolve)
+- Quasar
 
 
 ## Changelog
 
 - 0.9:
+    - 0.9.3:
+        - enhancement: better UI 
+    - 0.9.2:
+        - fix: missing fields in schema detail panel
+        - optimization: clean up fe codes.
     - 0.9.1:
         - api change: from `create_app_with_fastapi` to `create_voyager`, and expose as `from fastapi_voyager import create_voyager`
         - optimization: lazy load vscode link and source code, speed up the initialization.

{fastapi_voyager-0.9.1.dist-info → fastapi_voyager-0.9.3.dist-info}/RECORD

@@ -6,19 +6,19 @@ fastapi_voyager/render.py,sha256=qy3g1Rz1s8XkuR_6n1Q1YPwy_oMOjWjNswTHQjdz4N0,776
 fastapi_voyager/server.py,sha256=pg-LHDj4yU0usDA1b2X2Kt2_OCrexFA2G9ifGxb52Uc,6196
 fastapi_voyager/type.py,sha256=pWYKmgb9e0W_JeD7k54Mr2lxUZV_Ir9TNpewGRwHyHQ,1629
 fastapi_voyager/type_helper.py,sha256=hjBC4E0tgBpQDlYxGg74uK07SXjsrAgictEETJfIpYM,9231
-fastapi_voyager/version.py,sha256=jjAALUE-D-m7hgihxqGZyrZQPe4_Ch5MQPu89WFuVmw,48
+fastapi_voyager/version.py,sha256=Lt2a1ZjlXG3QcL31iJHgzvRFDSTSsCXmwjQNWNdNUMY,48
 fastapi_voyager/voyager.py,sha256=pXvA3ye5Jq6aJ6YrZFbTHjJ9MzdydqWllIgY8RFK_4A,10793
-fastapi_voyager/web/graph-ui.js,sha256=0hqMCzsPJfhgWDuwiXVXaGQL-_7urT_zryo4sXMN8jQ,4209
+fastapi_voyager/web/graph-ui.js,sha256=QYJXHOH4EWF2jbcX3usTKv4tNody0RjpnVz-eh0UKkU,4185
 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=AnsqXfzDrUPO12EWtiT_XJdJ6Kx3qBsRn1IfX393G48,14298
+fastapi_voyager/web/index.html,sha256=YtVoDRrgz64E7IHpcPJBzUb1DI1H5P7a-3ziTx5BHYA,13735
 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=p8akwqNf9sDM71xio0SN-3JznUOIksoy9SGRiqAeg2s,9459
+fastapi_voyager/web/vue-main.js,sha256=kQJpcQ2ENzA90v1XJ1P2bNGfeFC4drTGoG5dNhQKQqc,8105
 fastapi_voyager/web/component/render-graph.js,sha256=e8Xgh2Kl-nYU0P1gstEmAepCgFnk2J6UdxW8TlMafGs,2322
-fastapi_voyager/web/component/route-code-display.js,sha256=4VN88n_7FYHxvruP5AbgTdF6Lyj6v_7Ocqy8zOVMjVA,4065
-fastapi_voyager/web/component/schema-code-display.js,sha256=_Okkr8ceJsA_Xngyj_GpxJqdN01GzCjJTeAZamSA9Ks,6514
-fastapi_voyager/web/component/schema-field-filter.js,sha256=1llPkN8w-RrBPHVtjjMcObndaqPnmZ7e4iU6dMJMIaE,6224
+fastapi_voyager/web/component/route-code-display.js,sha256=8NJPPjNRUC21gjpY8XYEQs4RBbhX1pCiqEhJp39ku6k,3678
+fastapi_voyager/web/component/schema-code-display.js,sha256=B-NOAKQIDORvFlKrsWNFAMGweXYBXrpg6AjKt4TFQFI,6256
+fastapi_voyager/web/component/schema-field-filter.js,sha256=PR8d2_u1UiSLrS5zqAvY2UR8LbvjBqiUDt71tm1DJTs,6345
 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 +26,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.9.1.dist-info/METADATA,sha256=7yR9Wj87QH6f2kxA4QiqDnwWJPQ2-rGOhpC6ZYYfHfE,8914
-fastapi_voyager-0.9.1.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
-fastapi_voyager-0.9.1.dist-info/entry_points.txt,sha256=pEIKoUnIDXEtdMBq8EmXm70m16vELIu1VPz9-TBUFWM,53
-fastapi_voyager-0.9.1.dist-info/licenses/LICENSE,sha256=lNVRR3y_bFVoFKuK2JM8N4sFaj3m-7j29kvL3olFi5Y,1067
-fastapi_voyager-0.9.1.dist-info/RECORD,,
+fastapi_voyager-0.9.3.dist-info/METADATA,sha256=m7vs-SegP6z60WrAwoMBV-fqyrUwlg08_EktecMzcSM,9490
+fastapi_voyager-0.9.3.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+fastapi_voyager-0.9.3.dist-info/entry_points.txt,sha256=pEIKoUnIDXEtdMBq8EmXm70m16vELIu1VPz9-TBUFWM,53
+fastapi_voyager-0.9.3.dist-info/licenses/LICENSE,sha256=lNVRR3y_bFVoFKuK2JM8N4sFaj3m-7j29kvL3olFi5Y,1067
+fastapi_voyager-0.9.3.dist-info/RECORD,,