feature: style imported by section with link-cards on module pages (#…

…40)

* feature: add `AtlasModuleRef` type for `module.imports` and `module.importedBy`

* chore(webui): upgrade fixture with new `AtlasModuleRef` objects

* feature(webui): style `imported by` section on module pages

src/data/MetroGraphSource.ts

@@ -178,10 +178,13 @@ export function convertModule(
     path: module.path,
     package: getPackageNameFromPath(module.path),
     size: module.output.reduce((bytes, output) => bytes + Buffer.byteLength(output.data.code), 0),
-    imports: Array.from(module.dependencies.values()).map((module) => module.absolutePath),
-    importedBy: Array.from(module.inverseDependencies).filter((dependecy) =>
-      options.graph.dependencies.has(dependecy)
-    ),
+    imports: Array.from(module.dependencies.values()).map((module) => ({
+      path: module.absolutePath,
+      package: getPackageNameFromPath(module.absolutePath),
+    })),
+    importedBy: Array.from(module.inverseDependencies)
+      .filter((path) => options.graph.dependencies.has(path))
+      .map((path) => ({ path, package: getPackageNameFromPath(path) })),
     source: getModuleSourceContent(options, module),
     output: module.output.map((output) => ({
       type: output.type,

src/data/types.ts

@@ -54,11 +54,13 @@ export type AtlasModule = {
   /** The original module size, in bytes */
   size: number;
   /** Absolute file paths of modules imported inside this module */
-  imports: string[];
-  /** Absolute file paths of modules importing this module */
-  importedBy: string[];
+  imports: AtlasModuleRef[];
+  /** All modules importing this module */
+  importedBy: AtlasModuleRef[];
   /** The original source code, as a buffer or string */
   source?: string;
   /** The transformed output source code */
   output?: MixedOutput[];
 };
+
+export type AtlasModuleRef = Pick<AtlasModule, 'path' | 'package'>;

webui/src/app/(atlas)/[bundle]/modules/[path].tsx

@@ -1,17 +1,17 @@
 import { useQuery } from '@tanstack/react-query';
-import { Link, useLocalSearchParams } from 'expo-router';
+import { useLocalSearchParams } from 'expo-router';
 
 import { BreadcrumbLinks } from '~/components/BreadcrumbLinks';
 import { BundleSelectForm } from '~/components/BundleSelectForm';
 import { ModuleCode } from '~/components/ModuleCode';
+import { ModuleImportedBy } from '~/components/ModuleImportedBy';
 import { PropertySummary } from '~/components/PropertySummary';
 import { StateInfo } from '~/components/StateInfo';
 import { BundleDeltaToast, useBundle } from '~/providers/bundle';
 import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout';
 import { Skeleton } from '~/ui/Skeleton';
 import { Tag } from '~/ui/Tag';
 import { fetchApi } from '~/utils/api';
-import { relativeBundlePath } from '~/utils/bundle';
 import { formatFileSize } from '~/utils/formatString';
 import { type AtlasModule } from '~core/data/types';
 
@@ -48,28 +48,17 @@ export default function ModulePage() {
       ) : !module.data ? (
         <StateInfo title="Module not found.">Try another bundle</StateInfo>
       ) : (
-        <div className="mx-8 mb-4">
+        <div className="mx-6 mb-4">
           {!!module.data.importedBy?.length && (
-            <div className="my-4">
-              <p className="text-md">Imported from:</p>
-              <ul style={{ listStyle: 'initial' }} className="mb-6">
-                {module.data.importedBy.map((path) => (
-                  <li key={path} className="ml-4">
-                    <Link
-                      className="text-link hover:underline"
-                      href={{
-                        pathname: '/(atlas)/[bundle]/modules/[path]',
-                        params: { bundle: bundle.id, path },
-                      }}
-                    >
-                      {relativeBundlePath(bundle, path)}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
+            <div className="mb-2 my-6">
+              <h3 className="font-semibold mx-2">Imported by</h3>
+              <ModuleImportedBy bundle={bundle} module={module.data} />
             </div>
           )}
-          <ModuleCode module={module.data} />
+          <div className="mx-2 my-8">
+            <h3 className="font-semibold my-2">Module content</h3>
+            <ModuleCode module={module.data} />
+          </div>
         </div>
       )}
     </Layout>
@@ -103,6 +92,7 @@ function ModulePageSkeleton() {
     <div className="flex flex-col mx-8 gap-4">
       <Skeleton className="w-52 h-6 bg-selected" />
       <Skeleton className="w-96 h-6 bg-selected" />
+      <Skeleton className="w-52 h-6 bg-selected mt-4" />
       <Skeleton className="grow h-96 rounded-md" />
     </div>
   );

webui/src/components/ModuleImportedBy.tsx

@@ -0,0 +1,61 @@
+import { Link } from 'expo-router';
+// @ts-expect-error
+import PackageIcon from 'lucide-react/dist/esm/icons/box';
+// @ts-expect-error
+import FileIcon from 'lucide-react/dist/esm/icons/file';
+import { PropsWithChildren } from 'react';
+
+import { relativeBundlePath } from '~/utils/bundle';
+import type { AtlasModule, AtlasModuleRef, PartialAtlasBundle } from '~core/data/types';
+
+type ModuleImportedByProps = {
+  bundle: PartialAtlasBundle;
+  module: AtlasModule;
+};
+
+export function ModuleImportedBy(props: ModuleImportedByProps) {
+  return (
+    <>
+      {props.module.importedBy.map((moduleRef) => (
+        <div key={moduleRef.path} className="inline-block m-2">
+          <ModuleImportLink bundle={props.bundle} reference={moduleRef} />
+        </div>
+      ))}
+    </>
+  );
+}
+
+type ModuleImportLinkProps = PropsWithChildren<{
+  bundle: PartialAtlasBundle;
+  reference: AtlasModuleRef;
+}>;
+
+function ModuleImportLink(props: ModuleImportLinkProps) {
+  const relativePath = relativeBundlePath(props.bundle, props.reference.path);
+  const Icon = props.reference.package ? PackageIcon : FileIcon;
+
+  return (
+    <Link
+      asChild
+      href={{
+        pathname: '/(atlas)/[bundle]/modules/[path]',
+        params: {
+          bundle: props.bundle.id,
+          path: props.reference.path,
+        },
+      }}
+    >
+      <a
+        className="px-3 py-2 text-2xs border border-secondary rounded-md bg-default text-default inline-flex flex-row items-center group hover:bg-subtle transition-colors"
+        aria-label={`Open: ${relativePath}`}
+        title={`Open: ${relativePath}`}
+      >
+        <Icon size={14} />
+        <span className="mx-2 whitespace-nowrap overflow-hidden text-ellipsis group-hover:underline underline-offset-2">
+          {relativePath}
+        </span>
+        <span className="ml-2">→</span>
+      </a>
+    </Link>
+  );
+}

webui/src/ui/Code.tsx

@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export function CodeHeader(props: PropsWithChildren) {
   return (
-    <div className="flex justify-between items-center bg-default min-h-[40px] pl-4 border-b border-default">
+    <div className="flex justify-between items-center bg-default min-h-[40px] pl-4 border-b border-secondary">
       {props.children}
     </div>
   );
@@ -19,7 +19,7 @@ export function CodeAction({ className, ...props }: ComponentProps<typeof Button
   return (
     <Button
       variant="quaternary"
-      className={cn('m-0 border-l border-default rounded-none', className)}
+      className={cn('m-0 border-l border-secondary rounded-none', className)}
       {...props}
     />
   );

webui/src/ui/Panel.tsx

@@ -10,7 +10,7 @@ export function PanelGroup(props: PropsWithChildren) {
 
 export function Panel(props: PropsWithChildren) {
   return (
-    <div className="flex flex-col border-default bg-subtle border border-l-0 first:border-l first:rounded-l-md last:rounded-r-md overflow-hidden">
+    <div className="flex flex-col border-secondary bg-subtle border border-l-0 first:border-l first:rounded-l-md last:rounded-r-md overflow-hidden">
       {props.children}
     </div>
   );

webui/src/utils/shiki.ts

@@ -78,6 +78,7 @@ export function getLanguageFromPath(path: string): HighlightLanguage {
 export type HighlightOptions = {
   code: string;
   language: HighlightLanguage;
+  lineNumberStart?: number;
 };
 
 /**
@@ -89,6 +90,9 @@ export function getHighlightedHtml(highlighter: Highlighter | null, options: Hig
     lang: options.language,
     theme: 'expo-theme',
     transformers: [AtlasTransformer],
+    meta: {
+      lineNumberStart: options.lineNumberStart || 0,
+    },
   });
 }
 
@@ -123,6 +127,6 @@ const AtlasTransformer: ShikiTransformer = {
   },
 
   line(hast, line) {
-    hast.properties['data-atlas-line'] = line;
+    hast.properties['data-atlas-line'] = line + (this.options.meta?.lineNumberStart || 0);
   },
 };