@principal-ai/principal-view-react 0.15.0 → 0.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/NodeTooltip.d.ts +1 -0
- package/dist/components/NodeTooltip.d.ts.map +1 -1
- package/dist/components/NodeTooltip.js +10 -2
- package/dist/components/NodeTooltip.js.map +1 -1
- package/package.json +1 -1
- package/src/components/NodeTooltip.tsx +20 -1
- package/src/stories/OtelComponents.stories.tsx +73 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeTooltip.d.ts","sourceRoot":"","sources":["../../src/components/NodeTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"NodeTooltip.d.ts","sourceRoot":"","sources":["../../src/components/NodeTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyPlD,CAAC"}
|
|
@@ -98,7 +98,7 @@ export const NodeTooltip = ({ description, otel, sources, references, visible, n
|
|
|
98
98
|
display: 'flex',
|
|
99
99
|
alignItems: 'center',
|
|
100
100
|
gap: '6px',
|
|
101
|
-
marginBottom: description ? '6px' : 0,
|
|
101
|
+
marginBottom: description || otel.scope ? '6px' : 0,
|
|
102
102
|
}, children: [_jsx("span", { style: {
|
|
103
103
|
backgroundColor: getKindColor(otel.kind),
|
|
104
104
|
color: 'white',
|
|
@@ -108,7 +108,15 @@ export const NodeTooltip = ({ description, otel, sources, references, visible, n
|
|
|
108
108
|
fontWeight: theme.fontWeights.semibold,
|
|
109
109
|
fontFamily: theme.fonts.body,
|
|
110
110
|
textTransform: 'uppercase',
|
|
111
|
-
}, children: getKindLabel(otel.kind) }), otel.category && (_jsx("span", { style: { color: 'rgba(255,255,255,0.7)', fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }, children: otel.category }))] })),
|
|
111
|
+
}, children: getKindLabel(otel.kind) }), otel.category && (_jsx("span", { style: { color: 'rgba(255,255,255,0.7)', fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }, children: otel.category }))] })), otel?.scope && (_jsxs("div", { style: {
|
|
112
|
+
marginBottom: description ? '6px' : 0,
|
|
113
|
+
fontSize: theme.fontSizes[0],
|
|
114
|
+
fontFamily: theme.fonts.body,
|
|
115
|
+
color: 'rgba(255,255,255,0.8)'
|
|
116
|
+
}, children: [_jsx("span", { style: {
|
|
117
|
+
color: 'rgba(255,255,255,0.6)',
|
|
118
|
+
fontWeight: theme.fontWeights.semibold
|
|
119
|
+
}, children: "Scope:" }), ' ', _jsx("span", { style: { fontFamily: 'monospace' }, children: otel.scope })] })), description ? (_jsx("div", { style: { lineHeight: '1.4', color: 'rgba(255,255,255,0.9)' }, children: _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "tooltip", slideIndex: 0, isVisible: true, theme: {
|
|
112
120
|
...theme,
|
|
113
121
|
colors: {
|
|
114
122
|
...theme.colors,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeTooltip.js","sourceRoot":"","sources":["../../src/components/NodeTooltip.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"NodeTooltip.js","sourceRoot":"","sources":["../../src/components/NodeTooltip.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -7,6 +7,7 @@ import { TooltipPortalContext } from '../contexts/TooltipPortalContext';
|
|
|
7
7
|
export interface OtelInfo {
|
|
8
8
|
kind: 'type' | 'service' | 'instance';
|
|
9
9
|
category?: string;
|
|
10
|
+
scope?: string;
|
|
10
11
|
files?: string[];
|
|
11
12
|
}
|
|
12
13
|
|
|
@@ -138,7 +139,7 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
|
|
|
138
139
|
display: 'flex',
|
|
139
140
|
alignItems: 'center',
|
|
140
141
|
gap: '6px',
|
|
141
|
-
marginBottom: description ? '6px' : 0,
|
|
142
|
+
marginBottom: description || otel.scope ? '6px' : 0,
|
|
142
143
|
}}
|
|
143
144
|
>
|
|
144
145
|
<span
|
|
@@ -163,6 +164,24 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
|
|
|
163
164
|
</div>
|
|
164
165
|
)}
|
|
165
166
|
|
|
167
|
+
{/* Scope */}
|
|
168
|
+
{otel?.scope && (
|
|
169
|
+
<div style={{
|
|
170
|
+
marginBottom: description ? '6px' : 0,
|
|
171
|
+
fontSize: theme.fontSizes[0],
|
|
172
|
+
fontFamily: theme.fonts.body,
|
|
173
|
+
color: 'rgba(255,255,255,0.8)'
|
|
174
|
+
}}>
|
|
175
|
+
<span style={{
|
|
176
|
+
color: 'rgba(255,255,255,0.6)',
|
|
177
|
+
fontWeight: theme.fontWeights.semibold
|
|
178
|
+
}}>
|
|
179
|
+
Scope:
|
|
180
|
+
</span>{' '}
|
|
181
|
+
<span style={{ fontFamily: 'monospace' }}>{otel.scope}</span>
|
|
182
|
+
</div>
|
|
183
|
+
)}
|
|
184
|
+
|
|
166
185
|
{/* Description - rendered as markdown */}
|
|
167
186
|
{description ? (
|
|
168
187
|
<div style={{ lineHeight: '1.4', color: 'rgba(255,255,255,0.9)' }}>
|
|
@@ -243,7 +243,79 @@ export const TooltipVariants: StoryObj = {
|
|
|
243
243
|
</div>
|
|
244
244
|
<NodeTooltip
|
|
245
245
|
description="A specific running instance of a service"
|
|
246
|
-
otel={{ kind: 'instance', category: 'runtime' }}
|
|
246
|
+
otel={{ kind: 'instance', category: 'runtime', scope: 'auth-flow' }}
|
|
247
|
+
visible={true}
|
|
248
|
+
/>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
</ThemeProvider>
|
|
252
|
+
),
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
/**
|
|
256
|
+
* Demonstrates tooltips with scope information.
|
|
257
|
+
* Shows how scope names are displayed in the tooltip.
|
|
258
|
+
*/
|
|
259
|
+
export const TooltipWithScope: StoryObj = {
|
|
260
|
+
render: () => (
|
|
261
|
+
<ThemeProvider theme={defaultEditorTheme}>
|
|
262
|
+
<div style={{ padding: '40px', display: 'flex', gap: '80px', flexWrap: 'wrap' }}>
|
|
263
|
+
<div style={{ position: 'relative', width: '200px', height: '180px' }}>
|
|
264
|
+
<div
|
|
265
|
+
style={{
|
|
266
|
+
padding: '20px',
|
|
267
|
+
border: '2px solid #DC2626',
|
|
268
|
+
borderRadius: '8px',
|
|
269
|
+
textAlign: 'center',
|
|
270
|
+
backgroundColor: '#DC2626',
|
|
271
|
+
color: 'white',
|
|
272
|
+
}}
|
|
273
|
+
>
|
|
274
|
+
Auth Event
|
|
275
|
+
</div>
|
|
276
|
+
<NodeTooltip
|
|
277
|
+
description="User authentication completed successfully"
|
|
278
|
+
otel={{ kind: 'type', category: 'event', scope: 'auth-flow' }}
|
|
279
|
+
visible={true}
|
|
280
|
+
/>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
<div style={{ position: 'relative', width: '200px', height: '180px' }}>
|
|
284
|
+
<div
|
|
285
|
+
style={{
|
|
286
|
+
padding: '20px',
|
|
287
|
+
border: '2px solid #2563EB',
|
|
288
|
+
borderRadius: '8px',
|
|
289
|
+
textAlign: 'center',
|
|
290
|
+
backgroundColor: '#2563EB',
|
|
291
|
+
color: 'white',
|
|
292
|
+
}}
|
|
293
|
+
>
|
|
294
|
+
Terminal Event
|
|
295
|
+
</div>
|
|
296
|
+
<NodeTooltip
|
|
297
|
+
description="Command executed in terminal session"
|
|
298
|
+
otel={{ kind: 'type', category: 'event', scope: 'terminal-activity' }}
|
|
299
|
+
visible={true}
|
|
300
|
+
/>
|
|
301
|
+
</div>
|
|
302
|
+
|
|
303
|
+
<div style={{ position: 'relative', width: '200px', height: '180px' }}>
|
|
304
|
+
<div
|
|
305
|
+
style={{
|
|
306
|
+
padding: '20px',
|
|
307
|
+
border: '2px solid #16A34A',
|
|
308
|
+
borderRadius: '8px',
|
|
309
|
+
textAlign: 'center',
|
|
310
|
+
backgroundColor: '#16A34A',
|
|
311
|
+
color: 'white',
|
|
312
|
+
}}
|
|
313
|
+
>
|
|
314
|
+
Quality Event
|
|
315
|
+
</div>
|
|
316
|
+
<NodeTooltip
|
|
317
|
+
description="Code quality check completed with metrics"
|
|
318
|
+
otel={{ kind: 'type', category: 'event', scope: 'quality-panel' }}
|
|
247
319
|
visible={true}
|
|
248
320
|
/>
|
|
249
321
|
</div>
|