diff --git a/frontend/src/components/NGLinks.tsx b/frontend/src/components/NGLinks.tsx
index b62e05f16..7369e32e8 100644
--- a/frontend/src/components/NGLinks.tsx
+++ b/frontend/src/components/NGLinks.tsx
@@ -103,28 +103,32 @@ export default function NGLinks() {
return (
<>
-
- Neuroglancer Links
-
-
- Store your Neuroglancer states for easy sharing. Create a short link and
- share it with internal collaborators. You can update the link later if
- needed.
-
-
-
+
+
+ Neuroglancer Links
+
+
+ Store your Neuroglancer states for easy sharing. Create a short link
+ and share it with internal collaborators. You can update the link
+ later if needed.
+
+
+
+
+
+
+
-
{showDialog ? (
{
@@ -267,6 +268,17 @@ export default function StartTour({
}
];
+ workflowButtons.push({
+ text: 'Neuroglancer Links',
+ action: async function (this: any) {
+ const currentTour = shepherd.activeTour as Tour;
+ navigate('/nglinks');
+ await waitForElement('[data-tour="nglinks-page"]');
+ setupCompletionButtons(currentTour);
+ currentTour.show('nglinks-start');
+ }
+ });
+
// Only add File Conversion option if tasks are enabled
if (tasksEnabled) {
workflowButtons.push({
diff --git a/frontend/src/components/tours/tourSteps.ts b/frontend/src/components/tours/tourSteps.ts
index 68b5fd533..5fc163a20 100644
--- a/frontend/src/components/tours/tourSteps.ts
+++ b/frontend/src/components/tours/tourSteps.ts
@@ -132,6 +132,29 @@ export const tourSteps: StepOptions[] = [
buttons: [backButton, takeAnotherTourButton, exitButton]
},
+ // NG Links workflow
+ {
+ id: 'nglinks-start',
+ title: 'Neuroglancer Links',
+ text: 'On this page, you can create and manage short links for Neuroglancer viewer states. Short links make it easy to share specific views with collaborators.',
+ attachTo: { element: '[data-tour="nglinks-page"]', on: 'top' },
+ buttons: [backButton, nextButton, exitButton]
+ },
+ {
+ id: 'nglinks-new-link',
+ title: 'Create a New Link',
+ text: 'Click this button to open the link creation dialog.
In URL Mode, paste a full Neuroglancer URL.
In State Mode, paste a Neuroglancer JSON state object and specify a base URL.
Optionally add a Title (appears in the browser tab) and a Name (used in the shortened link URL).',
+ attachTo: { element: '[data-tour="nglinks-new-button"]', on: 'bottom' },
+ buttons: [backButton, nextButton, exitButton]
+ },
+ {
+ id: 'nglinks-table',
+ title: 'Managing Your Links',
+ text: 'Your created links appear in this table. You can click a short link to open it in Neuroglancer, use the actions menu to copy, edit, or delete links.',
+ attachTo: { element: '[data-tour="nglinks-table"]', on: 'top' },
+ buttons: [backButton, takeAnotherTourButton, exitButton]
+ },
+
// File Conversion workflow
{
id: 'conversion-start',