New profiler UI #6306
There are no files selected for viewing
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| node_modules | ||
|
|
||
| # Output | ||
| .output | ||
| .vercel | ||
| .netlify | ||
| .wrangler | ||
| /.svelte-kit | ||
| /build | ||
| /dist | ||
|
|
||
| # OS | ||
| .DS_Store | ||
| Thumbs.db | ||
|
|
||
| # Env | ||
| .env | ||
| .env.* | ||
| !.env.example | ||
| !.env.test | ||
|
|
||
| # Vite | ||
| vite.config.js.timestamp-* | ||
| vite.config.ts.timestamp-* |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| engine-strict=true |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| # common-ui | ||
|
|
||
| Shared, app-agnostic Svelte UI building blocks used across Feldera's frontends | ||
| (the web console and the standalone profiler app). Anything reusable that isn't | ||
| tied to a specific app's routes or data model lives here, so the two apps stay | ||
| visually and behaviorally consistent without copy-pasting components. | ||
|
|
||
| The package is consumed as the `common-ui` workspace dependency; import from its | ||
| public entry point: | ||
|
|
||
| ```ts | ||
| import { SegmentedControl, TabsPanel, PersistentContent, MonacoEditor } from 'common-ui' | ||
| ``` | ||
|
|
||
| ## What's inside | ||
|
|
||
| - **Controls** — `SegmentedControl`, `Select`, `TabsPanel`, `Popover`, `Tooltip`. | ||
| - **Editor** — `MonacoEditorRunes` / `monaco.ts`: a runes-based Monaco wrapper. | ||
| - **Layout helpers** — `PersistentContent` + `persistentRect.svelte` for content | ||
| that must survive conditional re-renders (see those files for details), | ||
| `ANSIDecoratedText` for rendering ANSI-colored log output. | ||
|
|
||
| `src/lib` is the published surface (re-exported from `src/lib/index.ts`); | ||
| `src/routes` is only a local preview/showcase app and is not published. | ||
|
|
||
| ## Developing | ||
|
|
||
| ```sh | ||
| bun install | ||
| bun run dev # preview/showcase app | ||
| bun run check # type-check | ||
| ``` | ||
|
|
||
| ## How it's built and consumed | ||
|
|
||
| Consumers import the **built** output (`dist/`), not the source. Building `web-console` or `profiler-app` | ||
| (`bun run build`) rebuilds this package automatically — their `prebuild` step | ||
| runs `build:deps:*` at the repo root, which includes | ||
| `bun --cwd=js-packages/common-ui run build`. | ||
|
|
||
| `bun run dev`, however, does **not** run that step, so it uses whatever is | ||
| already in `dist/`. After changing anything in `common-ui` while developing an | ||
| app, rebuild this package and restart the dev server: | ||
|
|
||
| ```sh | ||
| bun --cwd=js-packages/common-ui run build # from the repo root | ||
| # then re-run `bun run dev` in web-console or profiler-app | ||
| ``` | ||
|
|
||
| This package was scaffolded with [`sv`](https://npmjs.com/package/sv); the | ||
| underlying tooling docs live at <https://svelte.dev/docs/kit/packaging>. |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| { | ||
| "name": "common-ui", | ||
| "version": "0.0.1", | ||
| "devDependencies": { | ||
| "@monaco-editor/loader": "1.7.0", | ||
| "@skeletonlabs/skeleton": "^4.8.0", | ||
| "@skeletonlabs/skeleton-svelte": "^4.9.0", | ||
| "@sveltejs/adapter-auto": "^7.0.0", | ||
| "@sveltejs/kit": "^2.49.5", | ||
| "@sveltejs/package": "^2.5.7", | ||
| "@sveltejs/vite-plugin-svelte": "^7.0.0", | ||
| "@tailwindcss/vite": "^4.1.17", | ||
| "flowbite-svelte": "^1.31.0", | ||
| "monaco-editor": "0.55.1", | ||
| "publint": "^0.3.15", | ||
| "svelte": "5.55.7", | ||
| "svelte-check": "^4.3.5", | ||
| "tailwindcss": "^4.1.17", | ||
| "typescript": "^5.9.3", | ||
| "vite": "^8.0.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "@monaco-editor/loader": "1.7.0", | ||
| "@skeletonlabs/skeleton-svelte": "^4.9.0", | ||
| "fancy-ansi": "^0.1.3", | ||
| "flowbite-svelte": "^1.31.0", | ||
| "monaco-editor": "0.55.1", | ||
| "svelte": "5.55.7" | ||
| }, | ||
| "exports": { | ||
| ".": { | ||
| "types": "./dist/index.d.ts", | ||
| "svelte": "./dist/index.js" | ||
| } | ||
| }, | ||
| "files": ["dist", "!dist/**/*.test.*", "!dist/**/*.spec.*"], | ||
| "keywords": ["svelte"], | ||
| "overrides": { | ||
| "devalue": "^5.6.2" | ||
| }, | ||
| "scripts": { | ||
| "dev": "vite dev", | ||
| "build": "svelte-kit sync && vite build && bun run prepack", | ||
| "preview": "vite preview", | ||
| "prepare": "bun run prepack", | ||
| "prepack": "svelte-kit sync && svelte-package && publint", | ||
| "check": "svelte-kit sync && svelte-check --threshold error", | ||
| "check:watch": "svelte-kit sync && svelte-check --threshold error --watch" | ||
| }, | ||
| "sideEffects": ["**/*.css"], | ||
| "svelte": "./dist/index.js", | ||
| "type": "module", | ||
| "types": "./dist/index.d.ts" | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| // See https://svelte.dev/docs/kit/types#app.d.ts | ||
| // for information about these interfaces | ||
| declare global { | ||
| namespace App { | ||
| // interface Error {} | ||
|
Contributor
Author
There was a problem hiding this comment. It is a helpful enumeration of framework interfaces, generated from the project template; it is my preference to leave it to quickly reference where I can extend an interface once it's need. |
||
| // interface Locals {} | ||
| // interface PageData {} | ||
| // interface PageState {} | ||
| // interface Platform {} | ||
| } | ||
| } | ||
|
|
||
| export {}; | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| %sveltekit.head% | ||
| </head> | ||
| <body data-sveltekit-preload-data="hover"> | ||
| <div style="display: contents">%sveltekit.body%</div> | ||
| </body> | ||
| </html> |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| <!-- | ||
| Renders content once, at the root of the layout, in a fixed-position overlay | ||
| that tracks the position and size of a placeholder elsewhere in the tree. | ||
|
|
||
| Use it for content that is expensive to (re-)initialise and must survive being | ||
| conditionally re-rendered — e.g. the profile viewer's dataflow diagram, whose | ||
| underlying graph library would otherwise lose its state every time the layout | ||
| toggles between the two panel arrangements. Instead of mounting the content | ||
| inside the conditional, mount it here once and drop a `<div use:handle.placeholder>` | ||
| wherever it should *appear*; this overlay follows that rect. | ||
|
|
||
| Pair with `usePersistentRect()`: pass its handle as `persistent` here, and | ||
| apply `handle.placeholder` to the placeholder div. See SupportBundleViewerLayout.svelte. | ||
| --> | ||
| <script lang="ts" module> | ||
| import type { Snippet } from 'svelte' | ||
| import type { PersistentHandle } from './persistentRect.svelte' | ||
|
|
||
| export type PersistentContentProps = { | ||
| /** Handle from `usePersistentRect()`. Pair this with the `placeholder` action | ||
| * applied to a `<div use:handle.placeholder>` elsewhere in the layout. */ | ||
| persistent: PersistentHandle | ||
| /** Extra classes on the outer fixed-position wrapper (background, rounded corners, | ||
| * overflow clipping). Don't override `position: fixed` from here. */ | ||
| class?: string | ||
| children: Snippet | ||
| } | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| let { persistent, class: className = '', children }: PersistentContentProps = $props() | ||
| </script> | ||
|
|
||
| <!-- Always-mounted overlay. The fixed positioning is what lets it visually overlap the | ||
| placeholder's rect regardless of which conditional branch the placeholder is in. | ||
| `visibility: hidden` while the placeholder is unmounted or zero-sized; that still | ||
| preserves layout for any inner library (Cytoscape, etc.) measuring its own size. --> | ||
| <div | ||
| class="fixed {className}" | ||
| style:left="{persistent.rect.left}px" | ||
| style:top="{persistent.rect.top}px" | ||
| style:width="{persistent.rect.width}px" | ||
| style:height="{persistent.rect.height}px" | ||
| style:visibility={persistent.rect.visible ? 'visible' : 'hidden'} | ||
| > | ||
| {@render children()} | ||
| </div> |
File renamed without changes.
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this needed?