feat: distinguish types of dependencies (#103)

* fix: `http` url in workspace Fixes and closes #101 * feat: distinguish dev from transitive dependencies - feat: add Dependency Graph section to the module detail page, which shows accordion sections for transitive dependencies, dev dependencies, and dependents, respectively - feat: show count of transitive, dev, and dependent dependencies - feat: show transitive dependencies accordion as open by default Fixes and closes #62 Signed-off-by: Sam Gammon <[email protected]> --------- Signed-off-by: Sam Gammon <[email protected]>
bazel-contrib · Sep 8, 2023 · 0210757 · 0210757
1 parent 515df61
commit 0210757
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 50 deletions.
diff --git a/data/utils.ts b/data/utils.ts
@@ -132,6 +132,7 @@ export interface ModuleInfo {
 }
 
 interface Dependency {
+  dev: boolean
   module: string
   version: string
 }
@@ -176,16 +177,25 @@ export const extractModuleInfo = async (
     ['print version', ':%bazel_dep'],
     { cwd: directory }
   )
+  const { stdout: listDepDevOut } = await execa(
+    BUILDOZER_BIN,
+    ['print dev_dependency', ':%bazel_dep'],
+    { cwd: directory }
+  )
   const depNames = listDepNamesOut.split(/\r?\n/)
   const depVersions = listDepVersionsOut.split(/\r?\n/)
+  const depDevStatuses = listDepDevOut.split(/\r?\n/)
 
   const dependencies: Dependency[] = []
 
   if (listDepVersionsOut !== '') {
     depNames.forEach((name, i) => {
       const version = depVersions[i]
+      const dev = depDevStatuses[i] === 'True'
+
       dependencies.push({
         module: name,
+        dev,
         version,
       } as Dependency)
     })

diff --git a/pages/modules/[module].tsx b/pages/modules/[module].tsx
@@ -198,59 +198,101 @@ const ModulePage: NextPage<ModulePageProps> = ({
                     </button>
                   )}
                 </div>
-                <h2 className="text-2xl font-bold mt-4">
-                  Dependencies{' '}
-                  <small className="text-sm font-normal text-gray-500">
-                    (of version {selectedVersion})
-                  </small>
-                </h2>
-                <div>
-                  <ul className="mt-4">
-                    {versionInfo.moduleInfo.dependencies.map((dependency) => (
-                      <Link
-                        key={dependency.module}
-                        href={`/modules/${dependency.module}/${dependency.version}`}
-                      >
-                        <li className="border rounded p-2 mt-2 flex items-center gap-4 hover:border-gray-800">
-                          <div className="rounded-full border h-14 w-14 grid place-items-center">
-                            {dependency.version}
-                          </div>
-                          <div>{dependency.module}</div>
-                        </li>
-                      </Link>
-                    ))}
-                    {versionInfo.moduleInfo.dependencies.length === 0 && (
-                      <span>No dependencies</span>
-                    )}
-                  </ul>
+                <div className="mt-4">
+                  <h2 className="text-2xl font-bold mt-4">Dependency graph</h2>
                 </div>
-                <h2 className="text-2xl font-bold mt-4">Dependents</h2>
-                <div>
-                  <ul className="mt-4">
-                    {shownReverseDependencies.map((revDependency) => (
-                      <Link
-                        key={revDependency}
-                        href={`/modules/${revDependency}`}
+                <div className="mt-4">
+                  <details open>
+                    <summary>
+                      <span role="heading" aria-level={2} className="text-1xl mt-4">
+                        <span className="font-bold">Direct</span> ({versionInfo.moduleInfo.dependencies.filter((d) => !d.dev).length || 'None'}){' '}
+                        <small className="text-sm font-normal text-gray-500">
+                          at version {selectedVersion}
+                        </small>
+                      </span>
+                    </summary>
+                    <ul className="mt-4">
+                      {versionInfo.moduleInfo.dependencies.filter((d) => !d.dev).map((dependency) => (
+                        <Link
+                          key={dependency.module}
+                          href={`/modules/${dependency.module}/${dependency.version}`}
+                        >
+                          <li className="border rounded p-2 mt-2 flex items-center gap-4 hover:border-gray-800">
+                            <div className="rounded-full border h-14 w-14 grid place-items-center">
+                              {dependency.version}
+                            </div>
+                            <div>{dependency.module}</div>
+                          </li>
+                        </Link>
+                      ))}
+                      {versionInfo.moduleInfo.dependencies.filter((d) => !d.dev).length === 0 && (
+                        <span>No dependencies</span>
+                      )}
+                    </ul>
+                  </details>
+                </div>
+                <div className="mt-4">
+                  <details>
+                    <summary>
+                      <span role="heading" aria-level={2} className="text-1xl mt-4">
+                        <span className="font-bold">
+                          Dev Dependencies
+                        </span> ({versionInfo.moduleInfo.dependencies.filter((d) => d.dev).length || 'None'}){' '}
+                      </span>
+                    </summary>
+                    <ul className="mt-4">
+                      {versionInfo.moduleInfo.dependencies.filter((d) => d.dev).map((dependency) => (
+                        <Link
+                          key={dependency.module}
+                          href={`/modules/${dependency.module}/${dependency.version}`}
+                        >
+                          <li className="border rounded p-2 mt-2 flex items-center gap-4 hover:border-gray-800">
+                            <div className="rounded-full border h-14 w-14 grid place-items-center">
+                              {dependency.version}
+                            </div>
+                            <div>{dependency.module}</div>
+                          </li>
+                        </Link>
+                      ))}
+                      {versionInfo.moduleInfo.dependencies.length === 0 && (
+                        <span>No dependencies</span>
+                      )}
+                    </ul>
+                  </details>
+                </div>
+                <div className="mt-4">
+                  <details>
+                    <summary>
+                      <span role="heading" aria-level={2} className="text-1xl mt-4">
+                        <span className="font-bold">Dependents</span> {shownReverseDependencies.length > 0 ? `(${shownReverseDependencies.length})` : ''}
+                      </span>
+                    </summary>
+                    <ul className="mt-4">
+                      {shownReverseDependencies.map((revDependency) => (
+                        <Link
+                          key={revDependency}
+                          href={`/modules/${revDependency}`}
+                        >
+                          <li className="border rounded p-2 mt-2 flex items-center gap-4 hover:border-gray-800">
+                            <div>{revDependency}</div>
+                          </li>
+                        </Link>
+                      ))}
+                      {reverseDependencies.length === 0 && (
+                        <span>No dependent modules yet</span>
+                      )}
+                    </ul>
+                    {displayShowAllReverseDependenciesButton && (
+                      <button
+                        className="font-semibold border rounded p-2 mt-4 w-full hover:shadow-lg"
+                        onClick={() =>
+                          setTriggeredShowAllReverseDependencies(true)
+                        }
                       >
-                        <li className="border rounded p-2 mt-2 flex items-center gap-4 hover:border-gray-800">
-                          <div>{revDependency}</div>
-                        </li>
-                      </Link>
-                    ))}
-                    {reverseDependencies.length === 0 && (
-                      <span>No dependent modules</span>
+                        Show all {reverseDependencies.length} dependent modules
+                      </button>
                     )}
-                  </ul>
-                  {displayShowAllReverseDependenciesButton && (
-                    <button
-                      className="font-semibold border rounded p-2 mt-4 w-full hover:shadow-lg"
-                      onClick={() =>
-                        setTriggeredShowAllReverseDependencies(true)
-                      }
-                    >
-                      Show all {reverseDependencies.length} dependent modules
-                    </button>
-                  )}
+                  </details>
                 </div>
               </div>
               <div id="metadata" className="mt-4 sm:pl-2 basis-8 grow">