[hackathon] Mobile-friendly Texera: iOS app + responsive Angular UI#5083
Open
aglinxinyuan wants to merge 4 commits into
Open
[hackathon] Mobile-friendly Texera: iOS app + responsive Angular UI#5083aglinxinyuan wants to merge 4 commits into
aglinxinyuan wants to merge 4 commits into
Conversation
Adds a SwiftUI iOS app under `ios/` that loads the existing Angular frontend in a `WKWebView`, so the full workflow editor is available on iOS without a separate native client. - Project structure managed by XcodeGen (`ios/project.yml` is source of truth); the generated `Texera.xcodeproj` is committed so contributors can open it directly in Xcode without installing XcodeGen first. - App icon rendered from `frontend/src/assets/logos/android-chrome- 512x512.png`, upscaled to 1024×1024 and flattened on white (iOS rejects alpha in app icons). - WebView wires up back/forward observation, pull-to-refresh, and routes `target="_blank"` opens back into the same view. - `.licenserc.yaml` skips the XcodeGen-generated `Texera.xcodeproj/**` since regeneration overwrites any header.
The login/signup tabs were absolutely positioned over the About page's
marketing copy, which broke on narrow viewports:
Before: 133px side padding + 70%-width prose + absolute-positioned
login card -> login overlaps body text, unusable on phones.
After: <768px gets a hero (logo + tagline) + in-flow login card +
condensed "Learn more" link. >=992px keeps the original
desktop layout (login floats top-right, full prose visible).
Also redesigns the login card itself: drops the 2px black border in
favor of a rounded card with a soft shadow, sizes inputs to 16px to
prevent iOS focus-zoom, and makes the submit button a 44pt touch target.
How was this PR tested?
- `npx prettier --check` clean on the three changed files.
- Manual responsive review still pending; the dev server was not
spun up in this run.
Strip and restyle the Angular GUI on phones (<768px) so the Texera iOS WKWebView wrapper renders a coherent app-shaped experience. Desktop unchanged via @media gates throughout. - Dashboard: hide top nav (#nav) and left sider (nz-sider); content uses the whole viewport. - Workflow list: hide every per-row .resource-info column (avatar / views / size / created / edited / like), drop the inline rename and edit-description buttons via hover suppression + pointer-events:none on the description, hide the .button-group action row and the header utility-button-group. - Workspace editor: hide texera-mini-map / texera-left-panel / texera-property-editor / texera-agent-panel; restyle texera-menu into a frosted-glass title card pinned to top-center with Run + Kill buttons inside, hiding the rest of #menu-user / #user-buttons / #expanded-utilities / #utilities-dropdown-button / share / compute- unit selector / checkpoint / connection badge / duration timer. - Workflow center-on-load: rewrote handleCenterEvent to use joint graph.getCellsBBox and map bbox center to (viewport - card - result-panel) center instead of the desktop "top-left at 15% offset" trick. workspace.component.ts triggers it after reloadWorkflow on mobile so saved positions don't end up off-screen. - Result panel: opens automatically on mobile via openPanel() in ngOnInit, then CSS docks it to a 40vh band at the bottom. Hide the vertical tab list, search columns input, column-navigation buttons, per-cell download button, and stats sub-header to declutter the cramped frame. - About / login page: mobile hero (peacock logo + tagline) + in-flow login card replaces the desktop layout (which floats the login absolutely top-right). About prose hidden, condensed "Learn more about Texera ->" link in its place. local-login card redesigned with rounded corners, soft shadow, 16px inputs to suppress iOS focus zoom, 44pt button. Login card now always shown so users on a persisted WKWebView session can sign in as someone else. - Popovers globally suppressed on mobile via .ant-popover {display:none} to stop tap-induced :hover firing nz-popover triggers (e.g. the Run button's "Execution Settings" panel).
github-actions
Bot
added
frontend
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Mobile-friendly Texera: an iPhone app + a responsive web UI
Themes: Data Experience · Innovation
It's 4pm. A biology PhD kicks off a 90-minute Texera workflow and walks to coffee. Halfway across campus she pulls out her phone to check on it — and gives up. The canvas is sideways, the buttons are tiny, and there's no obvious way to sign in.
That's the moment this PR is about. Texera's users are mostly domain experts — biology, social science, medicine — who kick off long workflows and want to monitor them while away from their laptop. They don't need to drag operators on a phone; they just need to know "is it done? did it fail? what does the result look like?"
So Texera now has two new doors. The first is a real iPhone app — tap the peacock icon on the home screen and you're in. The second is a clean, phone-shaped version of the same Texera you already use in your browser. Open
texera.ioon a phone and you see a proper mobile app: a sign-in card with the logo above it, a clean list of your workflows, a focused workflow screen with one big Run button up top and your results right at the bottom. Open the same URL on a desktop and nothing changes.Demo (~2 min). Tap the Texera icon → sign in → tap a workflow → the screen shows the workflow on top and a result panel docked at the bottom → tap Run → results stream in → swipe from the left to go back. Open at desktop width: same Texera as before.
Screen.Recording.2026-05-15.at.16.27.41.mov
🤖 Generated with Claude Code