Skip to content

Java instrumentation Telemetry tab #207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaydeluca merged 8 commits into from
Apr 6, 2026
Merged

Java instrumentation Telemetry tab #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1ad6566
update telemetry view
jaydeluca Apr 3, 2026
676ab29
rm
jaydeluca Apr 3, 2026
8192cf8
add tests
jaydeluca Apr 3, 2026
19c08db
touchups
jaydeluca Apr 3, 2026
a791192
more updates
jaydeluca Apr 3, 2026
a0eef22
fix theme
jaydeluca Apr 3, 2026
b143c91
fix a few more things
jaydeluca Apr 4, 2026
d57b352
remove line
jaydeluca Apr 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 113 additions & 7 deletions ecosystem-explorer/DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ All colors are defined using HSL values in `src/themes.ts`. They are applied via
--color-foreground: 210 45% 99%; /* Bright white with blue hint */
--color-card: 232 35% 19%; /* Card background */
--color-card-secondary: 232 32% 23%; /* Card hover state */
--color-muted: 232 30% 17%; /* Darker background for code/badges */
--color-muted-foreground: 220 22% 65%; /* Muted text */
--color-border: 232 28% 26%; /* Borders */
```
Expand All @@ -93,6 +94,7 @@ All colors are defined using HSL values in `src/themes.ts`. They are applied via
* `background` - Page base
* `card` - Elevated surfaces (cards, panels)
* `card-secondary` - Hover states and nested cards
* `muted` - Darker backgrounds for inline code, type badges, and subtle UI elements
* `border` - Dividers and outlines

#### Text Hierarchy
Expand Down Expand Up @@ -120,8 +122,8 @@ Shadows establish elevation and focus:
Glows create ambient lighting and highlight interactive elements:

```css
--glow-primary: 0 0 40px hsl(var(--color-primary) / 0.15);
--glow-secondary: 0 0 40px hsl(var(--color-secondary) / 0.15);
--glow-primary: 0 0 40px hsl(var(--primary-hsl) / 0.15);
--glow-secondary: 0 0 40px hsl(var(--secondary-hsl) / 0.15);
```

**Usage patterns:**
Expand Down Expand Up @@ -170,7 +172,7 @@ Standard card pattern for elevated content:
**Hover states:**

* Transition to `bg-card-secondary`
* Add `shadow-[0_0_20px_hsl(var(--color-primary)/0.1)]`
* Add `shadow-[0_0_20px_hsl(var(--primary-hsl)/0.1)]`
* Slight scale animation: `hover:scale-[1.02]`

### Buttons
Expand Down Expand Up @@ -202,6 +204,110 @@ Three button variants:
</button>
```

### Type Badges

Small badges used to display types, categories, or status indicators:

```tsx
<span className="inline-block w-fit rounded bg-muted/50 px-2 py-1 text-xs font-bold text-foreground/70">
{type}
</span>
```

**Usage:**
* Attribute types in tables (string, int, boolean, etc.)
* Metric types
* Span kinds
* Other categorical indicators

**Styling:**
* `bg-muted/50` - Semi-transparent dark background for subtle contrast
* `text-foreground/70` - Slightly dimmed text for readability on dark background
* `text-xs font-bold` - Small, bold text for compact display
* `rounded px-2 py-1` - Consistent padding and border radius

**Color variants:**
For semantic meaning with glowing effects, use GlowBadge component:
* `variant="success"` - Green for metrics
* `variant="info"` - Blue for spans
* `variant="warning"` - Yellow for warnings
* `variant="error"` - Red for errors

### Inline Code Elements

Code snippets and technical values displayed inline:

```tsx
<code className="rounded bg-muted px-2 py-1 text-sm text-foreground/80">
{value}
</code>
```

**Usage:**
* Unit values (ms, bytes, etc.)
* Configuration keys
* API endpoints
* Version numbers
* Short code snippets

**Styling:**
* `bg-muted` - Full opacity dark background for strong contrast
* `text-foreground/80` - Slightly dimmed bright text for comfortable reading
* `text-sm` - Readable size for technical content
* `rounded px-2 py-1` - Consistent padding matching type badges

**Guidelines:**
* Add `font-mono` class for actual code readability when needed
* Use `break-all` for long technical strings that need to wrap
* Maintain consistent padding (`px-2 py-1`) across all inline code elements

### Striped Tables

Alternating row backgrounds for improved readability in data tables:

```tsx
<table className="w-full border-collapse">
<tbody>
{items.map((item, index) => (
<tr
key={item.id}
className={index % 2 === 1 ? "bg-muted/40" : ""}
>
<td>{item.content}</td>
</tr>
))}
</tbody>
</table>
```

**Pattern:**
* Apply `bg-muted/40` to odd rows (index % 2 === 1)
* Keep even rows with default transparent background
* Use 40% opacity for visible striping that improves readability
* Combine with borders for clear table structure

**Complete table example:**
```tsx
<div className="overflow-hidden rounded-lg border border-border/30">
<table className="w-full border-collapse">
<thead>
<tr className="bg-white/5">
<th className="p-3 text-left text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
Column
</th>
</tr>
</thead>
<tbody>
{items.map((item, index) => (
<tr key={item.id} className={index % 2 === 1 ? "bg-muted/40" : ""}>
<td className="p-4">{item.content}</td>
</tr>
))}
</tbody>
</table>
</div>
```

### Sections

Page sections with consistent spacing:
Expand Down Expand Up @@ -324,17 +430,17 @@ Decorative grid patterns for visual texture:

```css
background-image:
linear-gradient(hsl(var(--color-border)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--color-border)) 1px, transparent 1px);
linear-gradient(hsl(var(--border-hsl)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--border-hsl)) 1px, transparent 1px);
background-size: 20px 20px;
```

**Large grid (40px):**

```css
background-image:
linear-gradient(hsl(var(--color-border)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--color-border)) 1px, transparent 1px);
linear-gradient(hsl(var(--border-hsl)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--border-hsl)) 1px, transparent 1px);
background-size: 40px 40px;
```

Expand Down
20 changes: 10 additions & 10 deletions ecosystem-explorer/src/components/icons/compass.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export function Compass({ className }: { className?: string }) {
className="w-full h-full"
style={{
filter:
"drop-shadow(0 0 8px hsl(var(--color-primary) / 0.4)) drop-shadow(0 0 16px hsl(var(--color-primary) / 0.2))",
"drop-shadow(0 0 8px hsl(var(--primary-hsl) / 0.4)) drop-shadow(0 0 16px hsl(var(--primary-hsl) / 0.2))",
}}
>
{/* Outer ring */}
Expand All @@ -95,7 +95,7 @@ export function Compass({ className }: { className?: string }) {
cy="100"
r="95"
fill="none"
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth="1.5"
opacity="0.4"
/>
Expand All @@ -104,7 +104,7 @@ export function Compass({ className }: { className?: string }) {
cy="100"
r="90"
fill="none"
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth="0.5"
opacity="0.2"
/>
Expand All @@ -122,7 +122,7 @@ export function Compass({ className }: { className?: string }) {
y1={100 - innerR * Math.cos(angle)}
x2={100 + outerR * Math.sin(angle)}
y2={100 - outerR * Math.cos(angle)}
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth={isMajor ? 1.5 : 0.5}
opacity={isMajor ? 0.7 : 0.3}
/>
Expand All @@ -140,7 +140,7 @@ export function Compass({ className }: { className?: string }) {
y={100 - r * Math.cos(angle)}
textAnchor="middle"
dominantBaseline="middle"
fill="hsl(var(--color-primary))"
fill="hsl(var(--primary-hsl))"
className="font-mono text-sm font-bold"
>
{dir}
Expand All @@ -151,26 +151,26 @@ export function Compass({ className }: { className?: string }) {
{/* Rotating needle group */}
<g ref={needleGroupRef}>
{/* North needle */}
<polygon points="100,25 95,100 100,90 105,100" fill="hsl(var(--color-primary))" />
<polygon points="100,25 95,100 100,90 105,100" fill="hsl(var(--primary-hsl))" />
{/* South needle */}
<polygon
points="100,175 95,100 100,110 105,100"
fill="hsl(var(--color-primary))"
fill="hsl(var(--primary-hsl))"
opacity="0.4"
/>
</g>

{/* Center circle */}
<circle cx="100" cy="100" r="8" fill="hsl(var(--color-secondary))" opacity="0.6" />
<circle cx="100" cy="100" r="4" fill="hsl(var(--color-primary))" />
<circle cx="100" cy="100" r="8" fill="hsl(var(--secondary-hsl))" opacity="0.6" />
<circle cx="100" cy="100" r="4" fill="hsl(var(--primary-hsl))" />

{/* Inner decorative circles */}
<circle
cx="100"
cy="100"
r="50"
fill="none"
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth="0.5"
opacity="0.2"
strokeDasharray="4 4"
Expand Down
41 changes: 17 additions & 24 deletions ecosystem-explorer/src/components/icons/configuration-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
width="120"
height="120"
rx="8"
fill="hsl(var(--color-primary))"
fill="hsl(var(--primary-hsl))"
opacity="0.08"
/>
<rect
Expand All @@ -38,7 +38,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
height="120"
rx="8"
fill="none"
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth="3"
/>

Expand All @@ -50,7 +50,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="70"
x2="135"
y2="70"
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth="3"
opacity="0.3"
/>
Expand All @@ -60,12 +60,12 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="70"
x2="95"
y2="70"
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth="3"
opacity="0.8"
/>
{/* Knob */}
<circle cx="95" cy="70" r="8" fill="hsl(var(--color-primary))" />
<circle cx="95" cy="70" r="8" fill="hsl(var(--primary-hsl))" />
<circle cx="95" cy="70" r="5" fill="white" opacity="0.3" />
</g>

Expand All @@ -76,7 +76,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="100"
x2="135"
y2="100"
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth="3"
opacity="0.3"
/>
Expand All @@ -85,11 +85,11 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="100"
x2="120"
y2="100"
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth="3"
opacity="0.8"
/>
<circle cx="120" cy="100" r="8" fill="hsl(var(--color-primary))" />
<circle cx="120" cy="100" r="8" fill="hsl(var(--primary-hsl))" />
<circle cx="120" cy="100" r="5" fill="white" opacity="0.3" />
</g>

Expand All @@ -100,7 +100,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="130"
x2="135"
y2="130"
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth="3"
opacity="0.3"
/>
Expand All @@ -109,30 +109,23 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="130"
x2="80"
y2="130"
stroke="hsl(var(--color-primary))"
stroke="hsl(var(--primary-hsl))"
strokeWidth="3"
opacity="0.8"
/>
<circle cx="80" cy="130" r="8" fill="hsl(var(--color-primary))" />
<circle cx="80" cy="130" r="8" fill="hsl(var(--primary-hsl))" />
<circle cx="80" cy="130" r="5" fill="white" opacity="0.3" />
</g>

{/* Gear icon accent in top-right */}
<g transform="translate(145, 55)">
<circle
cx="0"
cy="0"
r="10"
fill="none"
stroke="hsl(var(--color-primary))"
strokeWidth="2"
/>
<circle cx="0" cy="0" r="4" fill="hsl(var(--color-primary))" opacity="0.6" />
<circle cx="0" cy="0" r="10" fill="none" stroke="hsl(var(--primary-hsl))" strokeWidth="2" />
<circle cx="0" cy="0" r="4" fill="hsl(var(--primary-hsl))" opacity="0.6" />
{/* Gear teeth */}
<rect x="-2" y="-12" width="4" height="4" fill="hsl(var(--color-primary))" />
<rect x="-2" y="8" width="4" height="4" fill="hsl(var(--color-primary))" />
<rect x="-12" y="-2" width="4" height="4" fill="hsl(var(--color-primary))" />
<rect x="8" y="-2" width="4" height="4" fill="hsl(var(--color-primary))" />
<rect x="-2" y="-12" width="4" height="4" fill="hsl(var(--primary-hsl))" />
<rect x="-2" y="8" width="4" height="4" fill="hsl(var(--primary-hsl))" />
<rect x="-12" y="-2" width="4" height="4" fill="hsl(var(--primary-hsl))" />
<rect x="8" y="-2" width="4" height="4" fill="hsl(var(--primary-hsl))" />
</g>
</svg>
);
Expand Down
Loading
Loading