Skip to content

Add structured tooltip metadata for activities and panel tabs #333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Gonza10V wants to merge 1 commit into
base: mk_docs
Choose a base branch
from
Draft

Add structured tooltip metadata for activities and panel tabs #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 48 additions & 1 deletion frontend/src/activities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,21 @@ 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
},
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: [
Expand All @@ -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: [
Expand All @@ -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: [
Expand All @@ -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: [
Expand All @@ -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: [
Expand All @@ -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: [
Expand All @@ -97,19 +125,31 @@ 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'
},
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,
},
Expand All @@ -118,13 +158,21 @@ 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
}

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)
Expand All @@ -133,4 +181,3 @@ export const MicrosoftFileExplorer = {
export function getActivity(id) {
return Object.values(Activities).find(act => act.id == id)
}

47 changes: 43 additions & 4 deletions frontend/src/components/activities/Activities.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,20 @@ export default function Activities() {
value={activityId}
mt={activityDef.mt}
>
<Tooltip label={activityDef.title} color='gray' position="right" withArrow>
<Tooltip
label={(
<Box>
<Text fw={700}>{activityDef.title}</Text>
<Text size="xs">{activityDef.tooltip?.description || "Open this activity panel."}</Text>
<Text size="xs" c="gray.3">{activityDef.tooltip?.instructions || "Select to start working in this area."}</Text>
</Box>
)}
color='gray'
position="right"
withArrow
multiline
maw={280}
>
<Box py={15} px={14}>
<SVGIcon
icon={activityDef.icon}
Expand Down Expand Up @@ -73,7 +86,20 @@ export default function Activities() {
key={msStatus.id}
value={msStatus.id}
>
<Tooltip label={msStatus.title} color='gray' position="right" withArrow>
<Tooltip
label={(
<Box>
<Text fw={700}>{msStatus.title}</Text>
<Text size="xs">{msStatus.tooltip?.description || "Open this activity panel."}</Text>
<Text size="xs" c="gray.3">{msStatus.tooltip?.instructions || "Select to start working in this area."}</Text>
</Box>
)}
color='gray'
position="right"
withArrow
multiline
maw={280}
>
<Box py={15} px={14}>
<SVGIcon
icon={msStatus.icon}
Expand All @@ -90,7 +116,20 @@ export default function Activities() {
key={OneDrivePanel.id}
value={OneDrivePanel.id}
>
<Tooltip label={OneDrivePanel.title} color='gray' position="right" withArrow>
<Tooltip
label={(
<Box>
<Text fw={700}>{OneDrivePanel.title}</Text>
<Text size="xs">{OneDrivePanel.tooltip?.description || "Open this activity panel."}</Text>
<Text size="xs" c="gray.3">{OneDrivePanel.tooltip?.instructions || "Select to start working in this area."}</Text>
</Box>
)}
color='gray'
position="right"
withArrow
multiline
maw={280}
>
<Box py={15} px={14}>
<SVGIcon
icon={OneDrivePanel.icon}
Expand Down Expand Up @@ -176,4 +215,4 @@ const tabStyles = theme => {
position: 'relative',
},
}
}
}
27 changes: 22 additions & 5 deletions frontend/src/components/panels/Panel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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 (
<Tooltip label={id} openDelay={800}>
<Tooltip
label={(
<Box>
<Text fw={700}>{panelTitle}</Text>
<Text size="xs">{panelDescription}</Text>
<Text size="xs" c="gray.3">{panelInstructions}</Text>
<Text size="xs" mt={4}>File: {fileLabel}</Text>
</Box>
)}
openDelay={500}
withArrow
multiline
maw={320}
>

<MantineTabs.Tab value={id} ref={ref} {...props}>
<TabLabel
title={name || (fileHandle ? titleFromFileName(fileHandle.name) : id)}
icon={panelType.icon}
title={fileLabel}
icon={panelType?.icon}
id={id}
onClose={closePanel}
/>
Expand All @@ -40,4 +58,3 @@ export default {
Tab,
Content,
}

32 changes: 32 additions & 0 deletions frontend/src/panels.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
}
Expand Down
Loading