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',