{Documentation} Add Colab buttons to website.

YLouWashU · meta-codesync[bot] · commit b6ba1f55c8cc · 2025-11-03T18:16:26.000-08:00
Summary: This diff adds the clickable Colab notebook buttons to the website.

Reviewed By: PiotrBrzyski

Differential Revision: D86066615

fbshipit-source-id: ec834cc87e15c0f34c51b1c70637f6e07dd2ea61
diff --git a/website/docs-research-tools/projectariatools/pythontutorials/calibration.mdx b/website/docs-research-tools/projectariatools/pythontutorials/calibration.mdx
@@ -9,7 +9,7 @@ import TutorialButtons from '@site/src/components/TutorialButtons';
 
 <TutorialButtons
   notebookUrl="https://github.com/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_2_device_calibration.ipynb"
-  colabDisabled={true}
+  colabUrl="https://colab.research.google.com/github/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_2_device_calibration.ipynb"
 />
 
 ## Introduction
diff --git a/website/docs-research-tools/projectariatools/pythontutorials/dataprovider.mdx b/website/docs-research-tools/projectariatools/pythontutorials/dataprovider.mdx
@@ -9,7 +9,7 @@ import TutorialButtons from '@site/src/components/TutorialButtons';
 
 <TutorialButtons
   notebookUrl="https://github.com/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_1_vrs_data_provider_basics.ipynb"
-  colabDisabled={true}
+  colabUrl="https://colab.research.google.com/github/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_1_vrs_data_provider_basics.ipynb"
 />
 
 ## Introduction
diff --git a/website/docs-research-tools/projectariatools/pythontutorials/eyetracking-handtracking.mdx b/website/docs-research-tools/projectariatools/pythontutorials/eyetracking-handtracking.mdx
@@ -9,7 +9,7 @@ import TutorialButtons from '@site/src/components/TutorialButtons';
 
 <TutorialButtons
   notebookUrl="https://github.com/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_4_on_device_eyetracking_handtracking.ipynb"
-  colabDisabled={true}
+  colabUrl="https://colab.research.google.com/github/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_4_on_device_eyetracking_handtracking.ipynb"
 />
 
 ## Introduction
diff --git a/website/docs-research-tools/projectariatools/pythontutorials/mps.mdx b/website/docs-research-tools/projectariatools/pythontutorials/mps.mdx
@@ -9,7 +9,7 @@ import TutorialButtons from '@site/src/components/TutorialButtons';
 
 <TutorialButtons
   notebookUrl="https://github.com/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_7_mps_data_provider_basics.ipynb"
-  colabDisabled={true}
+  colabUrl="https://colab.research.google.com/github/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_7_mps_data_provider_basics.ipynb"
 />
 
 ## Introduction
diff --git a/website/docs-research-tools/projectariatools/pythontutorials/queue.mdx b/website/docs-research-tools/projectariatools/pythontutorials/queue.mdx
@@ -9,7 +9,7 @@ import TutorialButtons from '@site/src/components/TutorialButtons';
 
 <TutorialButtons
   notebookUrl="https://github.com/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_3_sequential_access_multi_sensor_data.ipynb"
-  colabDisabled={true}
+  colabUrl="https://colab.research.google.com/github/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_3_sequential_access_multi_sensor_data.ipynb"
 />
 
 ## Introduction
diff --git a/website/docs-research-tools/projectariatools/pythontutorials/time-sync.mdx b/website/docs-research-tools/projectariatools/pythontutorials/time-sync.mdx
@@ -9,7 +9,7 @@ import TutorialButtons from '@site/src/components/TutorialButtons';
 
 <TutorialButtons
   notebookUrl="https://github.com/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_6_timestamp_alignment_in_aria_gen2.ipynb"
-  colabDisabled={true}
+  colabUrl="https://colab.research.google.com/github/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_6_timestamp_alignment_in_aria_gen2.ipynb"
 />
 
 ## Introduction
diff --git a/website/docs-research-tools/projectariatools/pythontutorials/vio.mdx b/website/docs-research-tools/projectariatools/pythontutorials/vio.mdx
@@ -9,7 +9,7 @@ import TutorialButtons from '@site/src/components/TutorialButtons';
 
 <TutorialButtons
   notebookUrl="https://github.com/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_5_on_device_vio.ipynb"
-  colabDisabled={true}
+  colabUrl="https://colab.research.google.com/github/facebookresearch/projectaria_tools/blob/main/examples/Gen2/python_notebooks/Tutorial_5_on_device_vio.ipynb"
 />
 
 ## Introduction
diff --git a/website/src/components/TutorialButtons.tsx b/website/src/components/TutorialButtons.tsx
@@ -18,11 +18,13 @@ import React from 'react';
 
 interface TutorialButtonsProps {
   notebookUrl: string;
+  colabUrl?: string;
   colabDisabled?: boolean;
 }
 
 const TutorialButtons: React.FC<TutorialButtonsProps> = ({
   notebookUrl,
+  colabUrl,
   colabDisabled = false,
 }) => {
   const handleColabClick = () => {
@@ -31,6 +33,15 @@ const TutorialButtons: React.FC<TutorialButtonsProps> = ({
     );
   };
 
+  const ColabIcon = () => (
+    <svg
+      style={{marginRight: '8px', width: '16px', height: '16px'}}
+      fill="currentColor"
+      viewBox="0 0 24 24">
+      <path d="M16.9414 4.9757a7.033 7.033 0 0 0-4.9308 2.0324 7.033 7.033 0 0 0-.1232 9.8068l2.395-2.395a3.6455 3.6455 0 0 1 5.1497-5.1478l2.397-2.3989a7.033 7.033 0 0 0-4.8877-1.9175zM7.07 4.9855a7.033 7.033 0 0 0-4.8878 1.9175l2.395 2.3989a3.6434 3.6434 0 0 1 5.1497 5.1478l2.395 2.395a7.033 7.033 0 0 0-.1232-9.8068A7.033 7.033 0 0 0 7.07 4.9855zm15.0191 2.5923l-2.395 2.395a3.6455 3.6455 0 0 1-5.1497 5.1497l-2.395 2.395a7.033 7.033 0 0 0 9.9397-.123z" />
+    </svg>
+  );
+
   return (
     <div
       style={{
@@ -71,39 +82,53 @@ const TutorialButtons: React.FC<TutorialButtonsProps> = ({
         View Notebook on GitHub
       </a>
 
-      <button
-        onClick={handleColabClick}
-        style={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          padding: '8px 16px',
-          backgroundColor: colabDisabled ? '#f6f8fa' : '#f9ab00',
-          border: '1px solid #d0d7de',
-          borderRadius: '6px',
-          color: colabDisabled ? '#656d76' : '#fff',
-          fontSize: '14px',
-          fontWeight: '500',
-          cursor: colabDisabled ? 'not-allowed' : 'pointer',
-          transition: 'background-color 0.2s',
-        }}
-        onMouseEnter={(e) => {
-          if (!colabDisabled) {
+      {!colabDisabled && colabUrl ? (
+        <a
+          href={colabUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            padding: '8px 16px',
+            backgroundColor: '#f9ab00',
+            border: '1px solid #d0d7de',
+            borderRadius: '6px',
+            textDecoration: 'none',
+            color: '#fff',
+            fontSize: '14px',
+            fontWeight: '500',
+            transition: 'background-color 0.2s',
+          }}
+          onMouseEnter={(e) => {
             (e.target as HTMLElement).style.backgroundColor = '#e8a500';
-          }
-        }}
-        onMouseLeave={(e) => {
-          if (!colabDisabled) {
+          }}
+          onMouseLeave={(e) => {
             (e.target as HTMLElement).style.backgroundColor = '#f9ab00';
-          }
-        }}>
-        <svg
-          style={{marginRight: '8px', width: '16px', height: '16px'}}
-          fill="currentColor"
-          viewBox="0 0 24 24">
-          <path d="M16.9414 4.9757a7.033 7.033 0 0 0-4.9308 2.0324 7.033 7.033 0 0 0-.1232 9.8068l2.395-2.395a3.6455 3.6455 0 0 1 5.1497-5.1478l2.397-2.3989a7.033 7.033 0 0 0-4.8877-1.9175zM7.07 4.9855a7.033 7.033 0 0 0-4.8878 1.9175l2.395 2.3989a3.6434 3.6434 0 0 1 5.1497 5.1478l2.395 2.395a7.033 7.033 0 0 0-.1232-9.8068A7.033 7.033 0 0 0 7.07 4.9855zm15.0191 2.5923l-2.395 2.395a3.6455 3.6455 0 0 1-5.1497 5.1497l-2.395 2.395a7.033 7.033 0 0 0 9.9397-.123z" />
-        </svg>
-        {colabDisabled ? 'Colab (Coming Soon)' : 'Run in Google Colab'}
-      </button>
+          }}>
+          <ColabIcon />
+          Run in Google Colab
+        </a>
+      ) : (
+        <button
+          onClick={handleColabClick}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            padding: '8px 16px',
+            backgroundColor: '#f6f8fa',
+            border: '1px solid #d0d7de',
+            borderRadius: '6px',
+            color: '#656d76',
+            fontSize: '14px',
+            fontWeight: '500',
+            cursor: 'not-allowed',
+            transition: 'background-color 0.2s',
+          }}>
+          <ColabIcon />
+          Colab (Coming Soon)
+        </button>
+      )}
     </div>
   );
 };
