Skip to content

[Hackathon] feat: Project Gallery Redesign + Collaboration Suite#5100

Open
EmilySun621 wants to merge 5 commits into
apache:mainfrom
EmilySun621:hackathon/collab-and-gallery
Open

[Hackathon] feat: Project Gallery Redesign + Collaboration Suite#5100
EmilySun621 wants to merge 5 commits into
apache:mainfrom
EmilySun621:hackathon/collab-and-gallery

Conversation

@EmilySun621
Copy link
Copy Markdown

@EmilySun621 EmilySun621 commented May 16, 2026

TL;DR: Redesigned Texera's project system into a first-class experience with card-based galleries, emoji icons, and dataset organization — plus a full in-editor collaboration suite with team chat, operator-level comments, and live presence.

⚠️ Still under testing


😤 The Problem

A lab of 5 people, all using Texera. Their workspace looks like this:

  • 30 workflows named "Untitled workflow" in a flat list
  • No way to group workflows + datasets by research project
  • Real-time cursors exist (Texera already has collab) — but no way to talk to each other
  • Discussions happen on Slack, changes happen on Texera. Context is lost constantly.
  • No way to leave a comment on a specific operator saying "this join looks wrong"
    No organization. No communication. We fixed both.

✨ What We Built

🗂️ 1. Project Gallery — Organize Everything

Texera had a basic project feature, but it was hidden and bare-bones. We rebuilt it into a first-class experience.

Project List Page

Feature Details
🎨 Card layout Emoji icons, colored circles, project descriptions
📊 Stats at a glance 📄 N workflows · 📊 N datasets · 👥 N members on every card
✏️ Create dialog Emoji picker + color swatches + validation

Project Detail Page — 3 Tabs

Tab What it does
📄 Workflows Direct list with Open/Remove actions. "Create Workflow" or "Add Existing Workflow" — no more hunting through 30 untitled entries
📊 Datasets Connect datasets to your project. "Add Existing Dataset" modal picks from your uploads
👥 Members Single-line invite (email + role dropdown + button). Clean member list with avatar, name, role badge (Owner / Editor / Viewer)

Workflow Badges

On the main Workflows page, each workflow now shows colored project chips with emoji — see at a glance which project it belongs to.


💬 2. Collaboration Suite — Talk Where You Work

A new Collaboration panel in the workflow editor with three tabs:

🗣️ Team Chat

Feature Details
💬 Real-time messaging Between all collaborators on the current workflow
👤 Rich messages Avatar, name, timestamp
🤖 Agent actions System messages like "🤖 Agent added RandomForest operator"

No more switching to Slack to discuss a workflow.

📝 Operator Comments

Feature Details
🖱️ Right-click to comment Right-click any operator → "Add Comment"
📌 Anchored threads Comments attached to specific operators
💬 Badge indicators 💬 badge on operators with unresolved comments
🔍 Comments overview All threads across the workflow, grouped by operator — click to highlight
Resolve Mark threads as done when discussion is complete

🟢 Online Presence

Feature Details
👥 Who's here See everyone currently viewing/editing the workflow
🔵 Status indicators 🟢 Active · 🟡 Idle
📍 Focus tracking Shows which operator each collaborator is working on

🎬 Demo Walkthrough

  1. 🗂️ Open Projects → Create "🧬 Diabetes Study" with emoji + color
  2. 📄 Add 3 workflows and a dataset to the project
  3. 👥 Invite a collaborator → they see the project and its contents
  4. 🖥️ Open a workflow → click 👥 Collaboration button in toolbar
  5. 💬 Team Chat: send "Let's add evaluation metrics"
  6. 🖱️ Right-click Random Forest operator → Add Comment"Should we tune hyperparameters?"
  7. 💬 Badge appears on the operator
  8. 🟢 Online tab shows both users active

🏗️ Architecture

┌──────────────────────────────────────────────────────┐
│  🖥️  Frontend (Angular)                              │
│                                                      │
│  Project Gallery                                     │
│  • Card layout, emoji icons, stats, create dialog    │
│  • 3-tab project detail (Workflows/Datasets/Members) │
│  • Workflow badges with project chips                │
│  • Inline share-access component (was modal-only)    │
│                                                      │
│  Collaboration Suite                                 │
│  • 3-tab panel (Chat/Comments/Online)                │
│  • Yjs-backed real-time sync for chat + comments     │
│  • Right-click context menu integration              │
│  • Unresolved comment count badge                    │
├──────────────────────────────────────────────────────┤
│  🔒 Texera Core Engine (Amber) — UNMODIFIED          │
│  Everything is additive: new components,             │
│  new services, redesigned UI                         │
└──────────────────────────────────────────────────────┘

📊 +8,257 / -1,450 lines across 84 files · 🔒 Zero modifications to Texera's core engine


✅ Testing

Test Status
Angular build ✅ Clean
Project CRUD (create, edit, delete) ✅ Pass
Add/remove workflows to project ✅ Pass
Add datasets to project ✅ Pass
Member invite UI ✅ Pass
Collaboration panel renders ✅ Pass
Comment on operator via right-click ✅ Pass

💡 Why This Matters

Texera already had real-time collaborative editing. What it didn't have was everything around that — organizing work into projects, talking about what you're building, and commenting on specific parts of a workflow.

30 "Untitled workflow" entries + Slack in a separate tab + no comments on operators

Organized projects + in-editor chat + operator-level comment threads + live presence

Emily Sun and others added 5 commits May 15, 2026 21:55
This bundles the feature work that built up on this branch:

- Custom agents: dashboard CRUD page and editor dialog (48px icon tile,
  chip-style guardrails, model selector). Each custom agent now carries a
  LiteLLM model_name (Opus 4.7 / Haiku 4.5) that is passed through to the
  agent-service so different agents can use different models.

- Conversation history is scoped per (workflowId, agentId): switching
  agent or workflow yields a different conversation list. localStorage
  key: texera.workflowConversations.v1.{workflowId}.{agentId}.

- Time machine: workflow snapshot list, revert, and agent-tagged
  checkpoints. New workflow-history-tool in agent-service backs the
  "undo my last change" flow; amber gains a WorkflowSnapshotResource;
  sql/updates/23.sql adds the snapshot table.

- Operator-aware custom-agent prompts: the system prompt now injects the
  full operator catalog with a "prefer built-in operators over Python
  UDFs" rule, sourced from WorkflowSystemMetadata at request time.

- LiteLLM: added the claude-opus-4.7 entry alongside claude-haiku-4.5
  and gpt-5-mini in bin/litellm-config.yaml.

- Agent panel rewritten around the (conversation list / chat) two-view
  model with subscription-managed list reloads and per-step persistence.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…detail

Replaces the utilitarian Projects list with a card-based gallery that surfaces
icon + name + description + stats (📄 workflows · 📊 datasets · 👥 members)
+ relative-time updated. Adds a dedicated Create/Edit Project modal with
emoji icon picker and preset color swatches, and rewrites the project detail
page as a tabbed view (Workflows / Datasets / Members) — Workflows tab reuses
the existing saved-workflow-section, Members tab renders ShareAccessComponent
inline (component now accepts @input bindings as a fallback to NZ_MODAL_DATA),
Datasets tab shows a "Coming soon" placeholder.

Workflow list items now badge their project memberships (emoji + name chip)
regardless of whether the project has a custom color. Per-project emoji icons
are stored in localStorage (no DB migration required for hackathon scope).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ence

Builds the UI on top of the existing CollaborationService scaffold. Adds a
slide-in panel on the right of the workspace with three tabs:

  • Chat — Yjs-synced team chat for the current workflow, Enter-to-send
  • Comments — per-operator threaded comments with resolve / reopen and
    inline reply composer. Right-click an operator → "add comment" opens
    a yellow new-thread composer at the top of that operator's section.
  • Online — presence list derived from Yjs awareness, idle status,
    "you" tag, and per-user current-edit hints.

The menu bar gets a team-icon toggle button with an nz-badge counting
unresolved comment threads across the workflow. The context menu on
single-operator selection gains an "add comment" item that opens the
panel pre-targeted at the clicked operator (uses a new
startNewThreadForOperator action on CollaborationService).

CollaborationService gains a draftThreadOperatorId stream so the panel
can surface a draft composer for operators with zero existing threads;
the service casts the readonly WorkflowGraph to access sharedModel /
newYDocLoadedSubject from the existing real-time edit infrastructure.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Project Gallery polish on top of the earlier card redesign:
  • Workflows tab in project detail now fetches via the dedicated
    /api/project/:pid/workflows endpoint and renders a clean card list,
    bypassing the generic search index which silently dropped project-
    filtered queries.  Cards expose Open + Remove-from-project actions and
    the project's accessLevel as a badge.  "Create Workflow" creates an
    empty workflow, adds it to the project, and routes to the editor.
  • Datasets tab fully wired: localStorage-backed pid→dids overlay (no DB
    migration), card grid with size/owner/visibility, popconfirm remove,
    and a dedicated Add-Existing-Dataset modal that filters out datasets
    already in the project.
  • Members tab replaced the dual-card ShareAccessComponent UI with a
    dedicated ProjectMembersComponent: single-row invite (email + Editor/
    Viewer dropdown + Invite button) on top, member cards below with
    deterministic-color avatar, role badge, inline role dropdown, and
    popconfirm remove.
  • Add-Workflows and Add-Datasets modals rebuilt as searchable card lists
    with select-all, hover/selected states, primary "Add Selected" button
    with a white count pill, consistent 10px-row / 12px-gap styling.
  • Sidebar Projects link unconditional — *ngIf removed, projects_enabled
    default flipped to true, loadTabs() skips it so admin config can't
    flip it back.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@github-actions github-actions Bot added engine ddl-change Changes to the TexeraDB DDL frontend Changes related to the frontend GUI dev common agent-service labels May 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

agent-service common ddl-change Changes to the TexeraDB DDL dev engine frontend Changes related to the frontend GUI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant