Enhance App component with wiki link functionality (#23)

Summary:
- Added a utility function `checkFbDirectoryExists` to detect the existence of the fb directory.
- Integrated the check into the App component to conditionally display an internal wiki link based on the directory's existence.
- Updated the header to include GitHub and Wiki links, along with the new internal wiki link, improving navigation options for users.
- Enhanced comments for clarity and added new state variables to manage the internal wiki URL.

This update improves user experience by providing access to internal documentation when available.

Pull Request resolved: #23

Reviewed By: davidberard98

Differential Revision: D77885091

Pulled By: FindHao

fbshipit-source-id: ff44962ac0930db2a9ad336290d30783b3b54ca4

Author: FindHao

website/src/App.tsx

@@ -7,11 +7,13 @@ import {
   processKernelData,
   getIRType,
 } from "./utils/dataLoader";
+import { checkFbDirectoryExists } from "./utils/fbDetection";
 import CodeView from "./pages/CodeView";
 import SingleCodeViewer from "./components/SingleCodeViewer";
 import KernelOverview from "./pages/KernelOverview";
 import DataSourceSelector from "./components/DataSourceSelector";
 import WelcomeScreen from "./components/WelcomeScreen";
+import ExternalLink from "./components/ExternalLink";
 import { mapLanguageToHighlighter } from "./components/CodeViewer";
 
 /**
@@ -35,6 +37,11 @@ function App() {
   const [dataLoaded, setDataLoaded] = useState<boolean>(false);
   // Track the loaded data source URL
   const [loadedUrl, setLoadedUrl] = useState<string | null>(null);
+  // Track if fb directory exists for internal wiki link
+  const [fbDirectoryExists, setFbDirectoryExists] = useState<boolean>(false);
+
+  // Internal wiki URL - will be loaded dynamically if fb directory exists
+  const [internalWikiUrl, setInternalWikiUrl] = useState<string>('');
 
   /**
    * Helper function to find a kernel by its hash
@@ -45,7 +52,7 @@ function App() {
     );
   };
 
-  // Check URL parameters when component mounts
+  // Check URL parameters and fb directory when component mounts
   useEffect(() => {
     // Parse URL parameters
     const params = new URLSearchParams(window.location.search);
@@ -61,6 +68,21 @@ function App() {
       newUrl.searchParams.set("json_url", jsonUrl);
       window.history.replaceState({}, "", newUrl.toString());
     }
+
+    // Check if fb directory exists and load internal utils if available
+    checkFbDirectoryExists().then(async (exists) => {
+      setFbDirectoryExists(exists);
+      if (exists) {
+        try {
+          // Dynamically import internal utils only if fb directory exists
+          const { getInternalWikiUrl } = await import('./utils/fb/internal_utils');
+          const url = getInternalWikiUrl();
+          setInternalWikiUrl(url);
+        } catch (error) {
+          console.warn('Failed to load internal utils:', error);
+        }
+      }
+    });
   }, []); // Empty dependency array means this runs once on mount
 
   /**
@@ -340,21 +362,62 @@ function App() {
       <header className="bg-white border-b border-gray-200">
         <div className="w-full px-6 py-4">
           <div className="flex justify-between items-center">
-            <h1
-              className="text-gray-800 text-2xl font-bold cursor-pointer hover:text-indigo-600 transition-colors"
-              onClick={() => {
-                // Reset app state to show welcome page
-                if (dataLoaded) {
-                  setDataLoaded(false);
-                  setSelectedIR(null);
-                  setSelectedKernel(-1);
-                  setError(null);
-                }
-              }}
-              title="Back to home"
-            >
-              TritonParse
-            </h1>
+            <div className="flex items-center space-x-6">
+              <h1
+                className="text-gray-800 text-2xl font-bold cursor-pointer hover:text-indigo-600 transition-colors"
+                onClick={() => {
+                  // Reset app state to show welcome page
+                  if (dataLoaded) {
+                    setDataLoaded(false);
+                    setSelectedIR(null);
+                    setSelectedKernel(-1);
+                    setError(null);
+                  }
+                }}
+                title="Back to home"
+              >
+                TritonParse
+              </h1>
+
+              {/* GitHub and Wiki Links */}
+              <div className="flex items-center space-x-4">
+                <ExternalLink
+                  href="https://github.com/pytorch-labs/tritonparse"
+                  title="View on GitHub"
+                  text="GitHub"
+                  icon={
+                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                    </svg>
+                  }
+                />
+
+                <ExternalLink
+                  href="https://github.com/pytorch-labs/tritonparse/wiki"
+                  title="View Wiki"
+                  text="Wiki"
+                  icon={
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                    </svg>
+                  }
+                />
+
+                {/* Internal Wiki Link - only show if fb directory exists */}
+                {fbDirectoryExists && (
+                  <ExternalLink
+                    href={internalWikiUrl}
+                    title="View Internal Wiki"
+                    text="Internal Wiki"
+                    icon={
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                      </svg>
+                    }
+                  />
+                )}
+              </div>
+            </div>
 
             {/* Data source selector (only show when data is loaded or when on the welcome screen) */}
             <DataSourceSelector

website/src/components/ExternalLink.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface ExternalLinkProps {
+  href: string;
+  title: string;
+  text: string;
+  icon: React.ReactNode;
+}
+
+/**
+ * A reusable external link component with consistent styling.
+ * Used for navigation links in the header (GitHub, Wiki, Internal Wiki, etc.)
+ */
+const ExternalLink: React.FC<ExternalLinkProps> = ({ href, title, text, icon }) => {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-gray-600 hover:text-gray-800 transition-colors flex items-center space-x-1"
+      title={title}
+    >
+      {icon}
+      <span className="text-sm font-medium">{text}</span>
+    </a>
+  );
+};
+
+export default ExternalLink;

website/src/utils/fbDetection.ts

@@ -0,0 +1,15 @@
+/**
+ * Utility to detect if the fb directory exists
+ * This checks for the existence of the exists marker file in the fb directory
+ */
+
+export const checkFbDirectoryExists = async (): Promise<boolean> => {
+  try {
+    // Try to fetch the exists marker file in the fb directory
+    const response = await fetch('/fb/exists', { method: 'HEAD' });
+    return response.ok;
+  } catch (error) {
+    // If the request fails, the directory likely doesn't exist
+    return false;
+  }
+}; 

website/vite.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
     {
       name: 'strip-module-attr',
       enforce: 'post',
+      apply: 'build', // only apply this plugin during build
       transformIndexHtml(html) {
         return html.replace(
           /<script\s+type=["']module["']\s+([^>]*?)src=/g,