fastapi-voyager 0.12.4__tar.gz → 0.12.5__tar.gz

{fastapi_voyager-0.12.4 → fastapi_voyager-0.12.5}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.12.4
+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

{fastapi_voyager-0.12.4 → fastapi_voyager-0.12.5}/docs/changelog.md

@@ -113,9 +113,12 @@
     - [x] fix logger exception 
 - 0.12.5
     - [x] fix nested cluster with same color
+    - [x] refactor fe with store based on reactive
+    - [x] fix duplicated focus toggle
+- 0.12.6
     - [ ] refactor render.py
-    - [ ] refactor fe with store based on reactive (demo.js)
     - [ ] remove search component, integrated into main page
+    - [ ] click link to highlight related nodes
 
 ## 0.13
 - 0.13.2

{fastapi_voyager-0.12.4 → fastapi_voyager-0.12.5}/src/fastapi_voyager/version.py

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

{fastapi_voyager-0.12.4 → fastapi_voyager-0.12.5}/src/fastapi_voyager/web/component/demo.js

@@ -10,7 +10,7 @@ export default defineComponent({
   },
   template: `
     <div>
-      <p>Count: {{ store.state.count }}</p>
+      <p>Count: {{ store.state.item.count }}</p>
       <button @click="store.mutations.increment()">Add</button>
     </div>
   `

{fastapi_voyager-0.12.4 → fastapi_voyager-0.12.5}/src/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-0.12.4 → fastapi_voyager-0.12.5}/src/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,19 +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-0.12.4 → fastapi_voyager-0.12.5}/src/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>
@@ -301,19 +301,9 @@
                 <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"
+                      v-if="store.state.modeControl.briefModeEnabled"
                       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"
-                      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,7 +320,7 @@
                   </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
@@ -339,17 +329,13 @@
                   </div>
                   <div class="q-mt-sm">
                     <q-toggle
-                      v-model="state.focus"
-                      v-show="schemaCodeName"
+                      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 class="q-mt-sm">
-                  <demo-component></demo-component>
-                  </div> -->
                 </div>
               </div>
             </template>
@@ -359,95 +345,28 @@
 
       <!-- 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-0.12.5/src/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
+}