@@ -37,11 +37,13 @@ const modulesMap = computed(() => {
3737})
3838
3939const importers = computed (() => {
40- return props .module .importers ?.map (x => modulesMap .value .get (x ))
40+ return props .module .importers
41+ ?.map (x => modulesMap .value .get (x ))
42+ .filter ((module ): module is ModuleListItem => !! module )
4143})
4244
4345const normalizedMaxLinks = computed (() => {
44- return Math .min (Math .max (props . module . importers ?.length || 0 , props .module .imports ?.length || 0 ), MAX_LINKS )
46+ return Math .min (Math .max (importers . value ?.length || 0 , props .module .imports ?.length || 0 ), MAX_LINKS )
4547})
4648
4749const importersMaxLength = computed (() => Math .min (importers .value ?.length || 0 , MAX_LINKS ))
@@ -140,89 +142,96 @@ onMounted(() => {
140142 ref =" container"
141143 w-full relative select-none mt4
142144 >
143- <!-- nodes -->
144- <div flex px2 >
145- <!-- importers -->
146- <div
147- v-if =" importers?.length"
148- py1
149- :style =" {
150- width: `${SPACING.width}px`,
151- marginTop: `${importersVerticalOffset}px`,
152- }"
153- >
154- <template v-for =" (importer , i ) of importers " :key =" importer ! .id " >
155- <DisplayModuleId
156- :id =" importer ! .id "
157- hover="bg-active" block px2 p1 bg-base ws-nowrap
158- z-graph-node
159- border="~ base rounded"
160- :link =" true "
161- :session =" session "
162- :minimal =" true "
163- :style =" {
164- width: ` ${SPACING .width }px ` ,
165- height: ` ${SPACING .height }px ` ,
166- overflow: ' hidden' ,
167- marginBottom: ` ${i === importers ! .length - 1 ? 0 : SPACING .padding }px ` ,
168- } "
169- />
170- </template >
145+ <template v-if =" importers ?.length || module .imports ?.length " >
146+ <!-- nodes -->
147+ <div flex px2 >
148+ <!-- importers -->
149+ <div
150+ v-if =" importers?.length"
151+ py1
152+ :style =" {
153+ width: `${SPACING.width}px`,
154+ marginTop: `${importersVerticalOffset}px`,
155+ }"
156+ >
157+ <template v-for =" (importer , i ) of importers " :key =" importer .id " >
158+ <DisplayModuleId
159+ :id =" importer .id "
160+ hover="bg-active" block px2 p1 bg-base ws-nowrap
161+ z-graph-node
162+ border="~ base rounded"
163+ :link =" true "
164+ :session =" session "
165+ :minimal =" true "
166+ :style =" {
167+ width: ` ${SPACING .width }px ` ,
168+ height: ` ${SPACING .height }px ` ,
169+ overflow: ' hidden' ,
170+ marginBottom: ` ${i === importers ! .length - 1 ? 0 : SPACING .padding }px ` ,
171+ } "
172+ />
173+ </template >
174+ </div >
175+ <!-- dot: current module -->
176+ <div
177+ bg-base rounded-full border-3 font-mono border-active flex-shrink-0 :style =" {
178+ margin: dotNodeMargin,
179+ width: `${SPACING.dot}px`,
180+ height: `${SPACING.dot}px`,
181+ }"
182+ />
183+ <!-- imports -->
184+ <div
185+ v-if =" module.imports?.length"
186+ py1
187+ :style =" {
188+ width: `${SPACING.width}px`,
189+ marginTop: `${importsVerticalOffset}px`,
190+ }"
191+ >
192+ <template v-for =" (_import , i ) of module .imports " :key =" _import .module_id " >
193+ <DisplayModuleId
194+ :id =" _import ! .module_id "
195+ hover="bg-active" block px2 p1 bg-base ws-nowrap
196+ z-graph-node
197+ border="~ base rounded"
198+ :link =" true "
199+ :session =" session "
200+ :minimal =" true "
201+ :style =" {
202+ width: ` ${SPACING .width }px ` ,
203+ height: ` ${SPACING .height }px ` ,
204+ overflow: ' hidden' ,
205+ marginBottom: ` ${i === module .imports ! .length - 1 ? 0 : SPACING .padding }px ` ,
206+ } "
207+ />
208+ </template >
209+ </div >
171210 </div >
172- <!-- dot: current module -->
173- <div
174- bg-base rounded-full border-3 font-mono border-active flex-shrink-0 :style =" {
175- margin: dotNodeMargin,
176- width: `${SPACING.dot}px`,
177- height: `${SPACING.dot}px`,
178- }"
179- />
180- <!-- imports -->
181- <div
182- v-if =" module.imports?.length"
183- py1
211+
212+ <!-- links -->
213+ <svg
214+ pointer-events-none absolute left-0 top-0 z-graph-link w-full
184215 :style =" {
185- width: `${SPACING.width}px`,
186- marginTop: `${importsVerticalOffset}px`,
216+ height: `${nodesHeight}px`,
187217 }"
188218 >
189- <template v-for =" (_import , i ) of module .imports " :key =" _import .module_id " >
190- <DisplayModuleId
191- :id =" _import ! .module_id "
192- hover="bg-active" block px2 p1 bg-base ws-nowrap
193- z-graph-node
194- border="~ base rounded"
195- :link =" true "
196- :session =" session "
197- :minimal =" true "
198- :style =" {
199- width: ` ${SPACING .width }px ` ,
200- height: ` ${SPACING .height }px ` ,
201- overflow: ' hidden' ,
202- marginBottom: ` ${i === module .imports ! .length - 1 ? 0 : SPACING .padding }px ` ,
203- } "
219+ <g >
220+ <path
221+ v-for =" link of links"
222+ :key =" link.id"
223+ :d =" generateModuleGraphLink<ModuleListItem, ModuleImport>(link)!"
224+ :class =" getModuleGraphLinkColor<ModuleListItem, ModuleImport>(link)"
225+ :stroke-dasharray =" link.import?.kind === 'dynamic-import' ? '3 6' : undefined"
226+ fill =" none"
204227 />
205- </template >
206- </div >
228+ </g >
229+ </svg >
230+ </template >
231+ <div v-else w-full h-48 flex =" ~ items-center justify-center" op50 italic >
232+ <p >
233+ No data
234+ </p >
207235 </div >
208-
209- <!-- links -->
210- <svg
211- pointer-events-none absolute left-0 top-0 z-graph-link w-full
212- :style =" {
213- height: `${nodesHeight}px`,
214- }"
215- >
216- <g >
217- <path
218- v-for =" link of links"
219- :key =" link.id"
220- :d =" generateModuleGraphLink<ModuleListItem, ModuleImport>(link)!"
221- :class =" getModuleGraphLinkColor<ModuleListItem, ModuleImport>(link)"
222- :stroke-dasharray =" link.import?.kind === 'dynamic-import' ? '3 6' : undefined"
223- fill =" none"
224- />
225- </g >
226- </svg >
227236 </div >
228237</template >
0 commit comments