"use strict";(globalThis.webpackChunkproject_public_docs=globalThis.webpackChunkproject_public_docs||[]).push([[413],{6785(e,i,r){r.r(i),r.d(i,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"overview","title":"Directory MapView","description":"Map-style directory navigator with zoom and pan - a reimagined file picker dialog.","source":"@site/docs/overview.md","sourceDirName":".","slug":"/","permalink":"/rob/dir-mapview/","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"slug":"/","sidebar_position":1},"sidebar":"docs"}');var s=r(4848),t=r(8453);const o={slug:"/",sidebar_position:1},l="Directory MapView",a={},d=[{value:"Vision",id:"vision",level:2},{value:"Interaction Model",id:"interaction-model",level:2},{value:"Use Cases",id:"use-cases",level:2},{value:"Technical Approach",id:"technical-approach",level:2},{value:"Inspiration",id:"inspiration",level:2},{value:"Related Projects",id:"related-projects",level:2}];function c(e){const i={a:"a",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(i.header,{children:(0,s.jsx)(i.h1,{id:"directory-mapview",children:"Directory MapView"})}),"\n",(0,s.jsx)(i.p,{children:"Map-style directory navigator with zoom and pan - a reimagined file picker dialog."}),"\n",(0,s.jsx)(i.h2,{id:"vision",children:"Vision"}),"\n",(0,s.jsx)(i.p,{children:"Traditional file dialogs show directories as indented trees or hierarchical lists. You see your current location and maybe what's above you, but you never really see:"}),"\n",(0,s.jsxs)(i.ul,{children:["\n",(0,s.jsx)(i.li,{children:"What's beside you (sibling directories)"}),"\n",(0,s.jsx)(i.li,{children:"The broader context of where you are in the filesystem"}),"\n",(0,s.jsx)(i.li,{children:"How your current path relates to other areas"}),"\n"]}),"\n",(0,s.jsxs)(i.p,{children:[(0,s.jsx)(i.strong,{children:"Directory MapView"})," displays the entire filesystem like a road map:"]}),"\n",(0,s.jsxs)(i.ul,{children:["\n",(0,s.jsx)(i.li,{children:"Directories appear as connected pathways/roads with labels"}),"\n",(0,s.jsx)(i.li,{children:"The current path is highlighted like a route"}),"\n",(0,s.jsx)(i.li,{children:'A prominent "you are here" marker shows your location'}),"\n",(0,s.jsx)(i.li,{children:"Zoom out to see the big picture, zoom in for details"}),"\n",(0,s.jsx)(i.li,{children:"Pan around to explore, just like a map application"}),"\n"]}),"\n",(0,s.jsx)(i.h2,{id:"interaction-model",children:"Interaction Model"}),"\n",(0,s.jsxs)(i.table,{children:[(0,s.jsx)(i.thead,{children:(0,s.jsxs)(i.tr,{children:[(0,s.jsx)(i.th,{children:"Action"}),(0,s.jsx)(i.th,{children:"Behavior"})]})}),(0,s.jsxs)(i.tbody,{children:[(0,s.jsxs)(i.tr,{children:[(0,s.jsx)(i.td,{children:"Mouse wheel"}),(0,s.jsx)(i.td,{children:"Zoom in/out"})]}),(0,s.jsxs)(i.tr,{children:[(0,s.jsx)(i.td,{children:"Left-click + drag"}),(0,s.jsx)(i.td,{children:"Pan the view"})]}),(0,s.jsxs)(i.tr,{children:[(0,s.jsx)(i.td,{children:"Click on directory"}),(0,s.jsx)(i.td,{children:"Navigate there"})]}),(0,s.jsxs)(i.tr,{children:[(0,s.jsx)(i.td,{children:"Hover"}),(0,s.jsx)(i.td,{children:"Show directory info/preview"})]})]})]}),"\n",(0,s.jsx)(i.h2,{id:"use-cases",children:"Use Cases"}),"\n",(0,s.jsxs)(i.ol,{children:["\n",(0,s.jsxs)(i.li,{children:[(0,s.jsx)(i.strong,{children:"File picker dialog"})," - Replace or augment standard open/save dialogs"]}),"\n",(0,s.jsxs)(i.li,{children:[(0,s.jsx)(i.strong,{children:"Directory overview"})," - Understand project structure at a glance"]}),"\n",(0,s.jsxs)(i.li,{children:[(0,s.jsx)(i.strong,{children:"Navigation widget"})," - Embed in file managers or IDEs"]}),"\n",(0,s.jsxs)(i.li,{children:[(0,s.jsx)(i.strong,{children:"Disk usage visualization"})," - Show directory sizes as road widths"]}),"\n"]}),"\n",(0,s.jsx)(i.h2,{id:"technical-approach",children:"Technical Approach"}),"\n",(0,s.jsx)(i.p,{children:"Likely implementation:"}),"\n",(0,s.jsxs)(i.ul,{children:["\n",(0,s.jsxs)(i.li,{children:[(0,s.jsx)(i.strong,{children:"PyQt6/PySide6"})," for the widget (integrates with existing tools)"]}),"\n",(0,s.jsxs)(i.li,{children:[(0,s.jsx)(i.strong,{children:"QGraphicsScene"})," for the zoomable/pannable canvas"]}),"\n",(0,s.jsxs)(i.li,{children:[(0,s.jsx)(i.strong,{children:"Graph layout algorithm"})," for positioning directories (tree layout or force-directed)"]}),"\n",(0,s.jsx)(i.li,{children:"Lazy loading for large filesystems"}),"\n",(0,s.jsx)(i.li,{children:"Caching for performance"}),"\n"]}),"\n",(0,s.jsx)(i.h2,{id:"inspiration",children:"Inspiration"}),"\n",(0,s.jsxs)(i.ul,{children:["\n",(0,s.jsx)(i.li,{children:"Google Maps / OpenStreetMap navigation"}),"\n",(0,s.jsx)(i.li,{children:"Code visualization tools (CodeCity, Gource)"}),"\n",(0,s.jsx)(i.li,{children:"Treemap visualizations"}),"\n",(0,s.jsx)(i.li,{children:"Metro/subway maps"}),"\n"]}),"\n",(0,s.jsx)(i.h2,{id:"related-projects",children:"Related Projects"}),"\n",(0,s.jsx)(i.p,{children:"This project is part of the development ecosystem:"}),"\n",(0,s.jsxs)(i.ul,{children:["\n",(0,s.jsxs)(i.li,{children:[(0,s.jsx)(i.a,{href:"../artifact-editor/overview",children:"Artifact Editor"})," - Could embed MapView for navigating to save locations"]}),"\n",(0,s.jsxs)(i.li,{children:[(0,s.jsx)(i.a,{href:"../cmdforge/overview",children:"CmdForge"})," - Could use MapView for tool configuration paths"]}),"\n"]})]})}function h(e={}){const{wrapper:i}={...(0,t.R)(),...e.components};return i?(0,s.jsx)(i,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},8453(e,i,r){r.d(i,{R:()=>o,x:()=>l});var n=r(6540);const s={},t=n.createContext(s);function o(e){const i=n.useContext(t);return n.useMemo(function(){return"function"==typeof e?e(i):{...i,...e}},[i,e])}function l(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),n.createElement(t.Provider,{value:i},e.children)}}}]);