IWC Workflow Integration Plan - Two Implementation Approaches

lively-napping-fiddle.md

IWC Workflow Integration Plan

Goal

Add link to IWC (Intergalactic Workflow Commission) curated workflows at https://iwc.galaxyproject.org/ in Galaxy's workflow list interface. Implement BOTH a tab approach and a banner approach so you can decide which works better.

Background

• IWC has 100+ vetted bioinformatics workflows
• Current WorkflowList has 3 tabs: My workflows, Shared with me, Public workflows
• No existing IWC integration in frontend
• Uses Vue 3 + Bootstrap Vue + TypeScript
• Route-driven tab system with activeList prop

Implementation Plan

PHASE 1: Tab Approach

Step 1: Create IWC Content Component

New file: client/src/components/Workflow/List/IWCContent.vue

Landing page with:

• Info about IWC (100+ curated workflows)
• List of features (tested pipelines, sample data, training, versioning)
• Prominent "Browse IWC Workflows" button with ExternalLink
• Instructions on how to import from IWC
• Bootstrap alert styling for professional appearance

Step 2: Update WorkflowList Component

File: client/src/components/Workflow/List/WorkflowList.vue

Changes:

1. Update Props interface (line ~34): Add "iwc" to activeList type
2. Add computed property: const iwcTab = computed(() => props.activeList === "iwc")
3. Add fourth BNavItem after line ~413:

   <BNavItem id="iwc" :active="activeList === 'iwc'" to="/workflows/list_iwc">
       IWC Workflows
   </BNavItem>

4. Wrap FilterMenu and ListHeader (~line 416-470) in <div v-if="!iwcTab">
5. Replace main content area (~line 473-521) with:

   <IWCContent v-if="iwcTab" />
   <div v-else>
       <!-- existing workflow cards content -->
   </div>

6. Import IWCContent component at top

Step 3: Add Route

File: client/src/entry/analysis/router.js

Add after workflows/list_published route (~line 415):

{
    path: "workflows/list_iwc",
    component: WorkflowList,
    props: (route) => ({
        activeList: "iwc",
        query: { ...route.query },
    }),
}

Step 4: Update Filter Configuration

File: client/src/components/Workflow/List/workflowFilters.ts

Add IWC case to getWorkflowFilters() after line ~153:

} else if (activeList === "iwc") {
    return new Filtering({}, undefined, false, false);

Update helpHtml() function to handle "iwc" case (return empty).

---

PHASE 2: Banner Approach

Step 1: Add User Preference Storage

File: client/src/stores/userStore.ts

Add after hasSeenUploadHelp line (~40):

const hasSeenIwcBanner = useUserLocalStorageFromHashId(
    "user-store-seen-iwc-banner",
    false,
    hashedUserId
);

Export in return statement with other exports.

Step 2: Create IWC Banner Component

New file: client/src/components/Workflow/List/IWCBanner.vue

Dismissible info alert with:

• Star icon (warning color)
• Text: "Looking for curated workflows? Check out the IWC..."
• ExternalLink to https://iwc.galaxyproject.org/
• BAlert with dismissible prop
• @dismissed handler sets hasSeenIwcBanner to true
• Left border accent (warning color)
• Flexbox layout: icon left, text right

Step 3: Integrate Banner into WorkflowList

File: client/src/components/Workflow/List/WorkflowList.vue

Changes:

1. Import IWCBanner at top
2. Add <IWCBanner /> after BreadcrumbHeading, before BNav tabs (~line 395)

---

Critical Files

Tab Approach:

• client/src/components/Workflow/List/WorkflowList.vue - Tab and conditional rendering
• client/src/entry/analysis/router.js - Route definition
• client/src/components/Workflow/List/workflowFilters.ts - Filter config
• client/src/components/Workflow/List/IWCContent.vue - New component

Banner Approach:

• client/src/components/Workflow/List/WorkflowList.vue - Banner integration
• client/src/stores/userStore.ts - Preference storage
• client/src/components/Workflow/List/IWCBanner.vue - New component

Shared:

• client/src/components/ExternalLink.vue - Used by both (existing)

Testing Approach

Red-to-green testing per your preferences:

Tab Tests:

1. Write test: Route to /workflows/list_iwc renders IWCContent
2. Implement tab changes
3. Write test: IWC tab shows active state
4. Write test: FilterMenu/ListHeader hidden on IWC tab
5. Write test: External link opens in new tab

Banner Tests:

1. Write test: Banner renders on first visit
2. Implement banner
3. Write test: Banner dismissed persists across sessions
4. Write test: Banner shows on all workflow tabs
5. Write test: External link opens in new tab

Decision Points After Implementation

Compare:

• Visibility: Which gets more clicks?
• User feedback: Which feels more natural?
• Maintenance: Banner is simpler, tab has more room for expansion
• Intrusiveness: Banner takes vertical space, tab takes nav space

Choose one, remove the other.

Unresolved Questions

1. Track IWC link clicks with analytics?
2. Should dismissed banner ever reappear (e.g., after 30 days)?
3. Show banner/tab to anonymous users same as logged-in users?
4. Add direct "Import from IWC" button to WorkflowListActions?