VIENCE Workspace
Note: Currently in closed beta service, so the images above have been reconstructed using AI.
TypeScriptReactRete.jsOpenSeadragonViteTailwindCSSGitHub Actions
Project Overview
Developed a visual programming platform that allows researchers to build and customize data processing workflows using a node-based editor built with Rete.js.
Supports interactive configuration of image preprocessing pipelines through components such as data selector, patch generator, and high-resolution slide viewer.
Key Contributions and Achievements
Core Feature Development
- Implemented a Data Selector node that enables users to browse and select pathology images and metadata stored in the cloud
- Developed a Patch Generation node that allows users to define patch size, overlap, and sampling strategies for SVS images
- Built a high-resolution pathology slide viewer using OpenSeadragon, supporting zoom, pan, and multi-layer overlays within workflow context
- Integrated all nodes into a dynamic drag-and-drop workflow system using Rete.js, enabling real-time data flow updates and step-by-step preview
UI/UX Enhancements
- Designed responsive and intuitive node UI components to guide users through complex data preprocessing steps
- Enhanced user feedback with loading indicators, real-time node validation, and visual error states
Workflow Interactivity & State Management
- Implemented context-aware state syncing between multiple nodes using centralized state logic
- Enabled inter-node communication to allow downstream updates (e.g., auto-refreshing viewer after patch generation)
Project Results
- Successfully built a node-based visual programming interface tailored for pathology data processing
- Enabled researchers to intuitively configure data pipelines using Data Selector, Patch Generation, and Viewer nodes
- Improved experimentation efficiency by allowing real-time preview and flexible reconfiguration of workflows