From 834616b90bb0077b4632f4195eeab11df4c3bffb Mon Sep 17 00:00:00 2001 From: Gonzalo Vidal <35148159+Gonza10V@users.noreply.github.com> Date: Tue, 14 Apr 2026 11:07:43 -0600 Subject: [PATCH] Add structured tooltips for activities and panel tabs --- frontend/src/activities.js | 49 ++++++++++++++++++- .../src/components/activities/Activities.jsx | 47 ++++++++++++++++-- frontend/src/components/panels/Panel.jsx | 27 ++++++++-- frontend/src/panels.js | 32 ++++++++++++ 4 files changed, 145 insertions(+), 10 deletions(-) diff --git a/frontend/src/activities.js b/frontend/src/activities.js index 515c148..296c909 100644 --- a/frontend/src/activities.js +++ b/frontend/src/activities.js @@ -19,6 +19,10 @@ export const Activities = { LocalFileExplorer: { id: "synbio.activity.entire-workflow", title: "Entire Workflow", + tooltip: { + description: "Browse all project files and tools in one place.", + instructions: "Click to open the full explorer and manage any file type." + }, component: ExplorerActivityView, icon: FileIcon, objectTypesToList: Object.values(ObjectTypes).map(object => object.id) // Local Explorer should list every object @@ -26,6 +30,10 @@ export const Activities = { ResourceSelection: { id: "synbio.activity.resource-selection", title: "Resources", + tooltip: { + description: "Access registries and resource package files.", + instructions: "Use this activity to open resources and upload related files." + }, component: ExplorerActivityView, icon: HiOutlinePuzzlePiece, objectTypesToList: [ @@ -36,6 +44,10 @@ export const Activities = { Design: { id: "synbio.activity.design", title: "Design", + tooltip: { + description: "Work with SBOL designs and plasmid assets.", + instructions: "Select a design file here to open it in the design tooling." + }, component: ExplorerActivityView, icon: PiDna, objectTypesToList: [ @@ -45,6 +57,10 @@ export const Activities = { Model: { id: "synbio.activity.models", title: "Model", + tooltip: { + description: "Open and manage modeling and analysis files.", + instructions: "Use this section for SBML, OMEX, and analysis workflows." + }, component: ExplorerActivityView, icon: BsGraphUpArrow, objectTypesToList: [ @@ -56,6 +72,10 @@ export const Activities = { Build: { id: "synbio.activity.build", title: "Build", + tooltip: { + description: "Prepare build plans and strain/plasmid build assets.", + instructions: "Open build-related files to configure execution-ready plans." + }, component: ExplorerActivityView, icon: TiPipette, objectTypesToList: [ @@ -67,6 +87,10 @@ export const Activities = { Test: { id: "synbio.activity.test", title: "Test", + tooltip: { + description: "Review test inputs, metadata, and results artifacts.", + instructions: "Choose files in this area to inspect testing data and outputs." + }, component: ExplorerActivityView, icon: BiSolidFlask, objectTypesToList: [ @@ -80,6 +104,10 @@ export const Activities = { Learn: { id: "synbio.activity.learn", title: "Learn", + tooltip: { + description: "Access learning-oriented datasets and analysis outputs.", + instructions: "Open files here to review insights and interpretation resources." + }, component: ExplorerActivityView, icon: FaGraduationCap, objectTypesToList: [ @@ -97,6 +125,10 @@ export const Activities = { LoginStatusPanel: { id: "synbio.activity.login-status-panel", title: "Check Login Status", + tooltip: { + description: "View and manage account authentication status.", + instructions: "Click to open login controls and verify your current session." + }, component: LoginStatus, icon: ProfileWhite, mt: 'auto' @@ -104,12 +136,20 @@ export const Activities = { GitHub: { id: "synbio.activity.GitHub", title: "GitHub and Website ", + tooltip: { + description: "Quick links to project source and documentation.", + instructions: "Open this panel to navigate to GitHub or website resources." + }, component: GitHubView, icon: RiGithubFill, }, BugReport: { id: "synbio.activity.bug-report", title: "Report Bug", + tooltip: { + description: "Submit issues and feedback to improve the platform.", + instructions: "Use this to report bugs with reproducible steps." + }, component: BugReportView, icon: BugReport, }, @@ -118,6 +158,10 @@ export const Activities = { export const MicrosoftStatus = { id: "synbio.activity.microsoft-status", title: "Check Microsoft Login Status", + tooltip: { + description: "Check Microsoft account connection state.", + instructions: "Open this to sign in, sign out, or verify account access." + }, component: MicrosoftView, icon: MicrosoftLogo } @@ -125,6 +169,10 @@ export const MicrosoftStatus = { export const MicrosoftFileExplorer = { id: "synbio.activity.microsoft-file-explorer", title: "OneDrive Explorer", + tooltip: { + description: "Browse and open project files from OneDrive.", + instructions: "Click to view cloud files and open them in SynBioSuite panels." + }, component: MicrosoftExplorerActivityView, icon: CloudWeatherIcon, objectTypesToList: Object.values(ObjectTypes).map(object => object.id) @@ -133,4 +181,3 @@ export const MicrosoftFileExplorer = { export function getActivity(id) { return Object.values(Activities).find(act => act.id == id) } - diff --git a/frontend/src/components/activities/Activities.jsx b/frontend/src/components/activities/Activities.jsx index 09bc695..9ece1df 100644 --- a/frontend/src/components/activities/Activities.jsx +++ b/frontend/src/components/activities/Activities.jsx @@ -39,7 +39,20 @@ export default function Activities() { value={activityId} mt={activityDef.mt} > - + + {activityDef.title} + {activityDef.tooltip?.description || "Open this activity panel."} + {activityDef.tooltip?.instructions || "Select to start working in this area."} + + )} + color='gray' + position="right" + withArrow + multiline + maw={280} + > - + + {msStatus.title} + {msStatus.tooltip?.description || "Open this activity panel."} + {msStatus.tooltip?.instructions || "Select to start working in this area."} + + )} + color='gray' + position="right" + withArrow + multiline + maw={280} + > - + + {OneDrivePanel.title} + {OneDrivePanel.tooltip?.description || "Open this activity panel."} + {OneDrivePanel.tooltip?.instructions || "Select to start working in this area."} + + )} + color='gray' + position="right" + withArrow + multiline + maw={280} + > { position: 'relative', }, } -} \ No newline at end of file +} diff --git a/frontend/src/components/panels/Panel.jsx b/frontend/src/components/panels/Panel.jsx index 5588f95..e3623ce 100644 --- a/frontend/src/components/panels/Panel.jsx +++ b/frontend/src/components/panels/Panel.jsx @@ -1,5 +1,5 @@ import React, { forwardRef } from 'react' -import { Tabs as MantineTabs, Tooltip } from "@mantine/core" +import { Box, Tabs as MantineTabs, Text, Tooltip } from "@mantine/core" import TabLabel from './TabLabel' import { useClosePanel, usePanelProperty, usePanelType } from '../../redux/hooks/panelsHooks' import { titleFromFileName } from '../../redux/hooks/workingDirectoryHooks' @@ -11,13 +11,31 @@ const Tab = forwardRef(({ id, ...props }, ref) => { const panelType = usePanelType(id) const closePanel = useClosePanel() + const panelTitle = panelType?.title || 'Panel' + const panelDescription = panelType?.tooltip?.description || 'Open file workspace panel.' + const panelInstructions = panelType?.tooltip?.instructions || 'Use this tab to view and edit its content.' + const fileLabel = name || (fileHandle ? titleFromFileName(fileHandle.name) : id) + return ( - + + {panelTitle} + {panelDescription} + {panelInstructions} + File: {fileLabel} + + )} + openDelay={500} + withArrow + multiline + maw={320} + > @@ -40,4 +58,3 @@ export default { Tab, Content, } - diff --git a/frontend/src/panels.js b/frontend/src/panels.js index 773789d..a0c1e36 100644 --- a/frontend/src/panels.js +++ b/frontend/src/panels.js @@ -18,6 +18,10 @@ export const PanelTypes = { Resources: { id: "synbio.panel-type.resources", title: "Uploader", + tooltip: { + description: "Upload and organize resource and package files.", + instructions: "Use the form in this panel to add files and track uploads." + }, component: ResourcesPanel, objectTypes: [ ObjectTypes.Resources.id, ObjectTypes.Strains.id, ObjectTypes.SampleDesigns.id, ObjectTypes.Metadata.id ], icon: FaFileArchive, @@ -39,6 +43,10 @@ export const PanelTypes = { Simulator: { id: "synbio.panel-type.simulator", title: "iBioSim Analysis", + tooltip: { + description: "Configure and run simulation analysis workflows.", + instructions: "Complete setup steps, run analysis, and review results tabs." + }, component: SimulatorPanel, objectTypes: [ ObjectTypes.Analysis.id, ObjectTypes.SBML.id ], icon: SimulationIcon, @@ -67,6 +75,10 @@ export const PanelTypes = { SBOLEditor: { id: "synbio.panel-type.sbol-editor", title: "SBOL Canvas", + tooltip: { + description: "Visual editor for SBOL designs.", + instructions: "Open a design file, edit in canvas, then save your changes." + }, component: SBOLEditorPanel, objectTypes: [ ObjectTypes.SBOL.id, ObjectTypes.Plasmids.id ], icon: CanvasIcon, @@ -85,6 +97,10 @@ export const PanelTypes = { BuildPlans: { id: "synbio.panel-type.buildplans", title: "Build Plans", + tooltip: { + description: "Create assembly and transformation build instructions.", + instructions: "Step through the tabs to generate complete build plans." + }, component: TransformationPanel, objectTypes: [ ObjectTypes.BuildPlans.id ], icon: GiSewingMachine, @@ -106,6 +122,10 @@ export const PanelTypes = { Experiment: { id: "synbio.panel-type.data-collector", title: "Data Collector", + tooltip: { + description: "Capture and review experiment collection data.", + instructions: "Use setup tools in this panel to structure collected records." + }, component: CollectionPanel, objectTypes: [ ObjectTypes.Studies.id ], icon: FcAddDatabase, @@ -129,6 +149,10 @@ export const PanelTypes = { ExcelFile: { id: "synbio.panel-type.excel-file", title: "Experimental Setup", + tooltip: { + description: "Open and review experimental setup spreadsheets.", + instructions: "Load the file and navigate sheets for setup validation." + }, component: ExcelFilePanel, objectTypes: [ObjectTypes.Metadata.id], icon: PiMicrosoftExcelLogoFill, @@ -141,12 +165,20 @@ export const PanelTypes = { SynBioHub: { id: "synbio.panel-type.synbiohub", title: "SynBioHub", + tooltip: { + description: "Interact with SynBioHub registry content.", + instructions: "Search or browse available entries and open selected items." + }, component: SynBioHubPanel, icon: SynBioHub, }, SeqImprove: { id: "synbio.panel-type.seqimprove", title: "SeqImprove", + tooltip: { + description: "Open sequence improvement workflows.", + instructions: "Use this panel to review and refine sequence annotations." + }, component: SeqImprovePanel, icon: SynBioHub, }