UI Customization Rebase

.github/workflows/cue.yml

@@ -44,7 +44,7 @@ jobs:
         with:
           enable_go: true
           enable_cue: true
-          cue_version: 'v0.15.4'
+          cue_version: 'v0.16.1'
       - name: Login to Central Registry # to allow publishing the module
         run: cue login --token=${{ secrets.CUE_REG_TOKEN }}
       - name: Publish the module

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/client",
-  "version": "0.55.0-beta.8",
+  "version": "0.55.0-beta.11",
   "description": "Functions as an API client or Data fetching Layer for interacting with a backend service",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",

components/.ladle/components.tsx

@@ -0,0 +1,30 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import type { GlobalProvider } from '@ladle/react';
+import '@perses-dev/design-tokens/css';
+
+import { ComponentsProvider } from '../src/next/contexts/ComponentsProvider';
+import { ThemeModeProvider } from '../src/next/contexts/ThemeModeProvider';
+import { defaultComponents, defaultIcons } from '../src/next/primitives/defaults';
+
+import '../src/next/css/index.css';
+import './theme-mode.css';
+
+export const Provider: GlobalProvider = ({ children, globalState }) => (
+  <ThemeModeProvider mode={globalState.theme === 'dark' ? 'dark' : 'light'}>
+    <ComponentsProvider components={defaultComponents} icons={defaultIcons}>
+      {children}
+    </ComponentsProvider>
+  </ThemeModeProvider>
+);

components/.ladle/config.mjs

@@ -0,0 +1,17 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  stories: 'src/next/**/*.stories.tsx',
+};

components/.ladle/theme-mode.css

@@ -0,0 +1,31 @@
+/*
+ * Copyright The Perses Authors
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+[data-perses-mode='dark'] {
+  min-height: 100vh;
+  background: var(--perses-bg-default);
+  color: var(--perses-text-primary);
+}
+
+[data-perses-mode='dark'] h1,
+[data-perses-mode='dark'] h2,
+[data-perses-mode='dark'] h3,
+[data-perses-mode='dark'] h4,
+[data-perses-mode='dark'] h5,
+[data-perses-mode='dark'] h6,
+[data-perses-mode='dark'] p,
+[data-perses-mode='dark'] label {
+  color: var(--perses-text-primary);
+}

components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.55.0-beta.8",
+  "version": "0.55.0-beta.11",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -15,11 +15,37 @@
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./next": {
+      "types": "./dist/next/index.d.ts",
+      "import": "./dist/next/index.js",
+      "require": "./dist/cjs/next/index.js"
+    },
+    "./next/primitives": {
+      "types": "./dist/next/primitives/index.d.ts",
+      "import": "./dist/next/primitives/index.js",
+      "require": "./dist/cjs/next/primitives/index.js"
+    },
+    "./next/css": "./dist/next/css/index.css",
+    "./next/primitives/defaults": {
+      "types": "./dist/next/primitives/defaults.d.ts",
+      "import": "./dist/next/primitives/defaults.js",
+      "require": "./dist/cjs/next/primitives/defaults.js"
+    }
+  },
   "scripts": {
     "clean": "rimraf dist/",
     "build": "concurrently \"npm:build:*\"",
     "build:esm": "swc ./src -d dist --strip-leading-paths --config-file ../.swcrc",
     "build:types": "tsc --project tsconfig.build.json",
+    "build:next-css": "copyfiles -u 1 \"src/next/**/*.css\" dist",
+    "ladle": "ladle serve",
+    "ladle:build": "ladle build",
     "type-check": "tsc --noEmit",
     "start": "concurrently -P \"npm:build:* -- {*}\" -- --watch",
     "test": "cross-env TZ=UTC vitest run",
@@ -30,38 +56,47 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@base-ui/react": "^1.0.0",
     "@codemirror/lang-json": "^6.0.1",
     "@date-fns/tz": "^1.4.1",
     "@fontsource/inter": "^5.0.0",
     "@mui/x-date-pickers": "^7.23.1",
     "@perses-dev/spec": "0.3.0-beta.8",
-    "@perses-dev/client": "0.55.0-beta.8",
+    "@perses-dev/client": "0.55.0-beta.11",
     "numbro": "^2.3.6",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.20.5",
     "@uiw/react-codemirror": "^4.19.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "echarts": "5.5.0",
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
     "mathjs": "^10.6.4",
     "mdi-material-ui": "^7.9.2",
     "notistack": "^3.0.2",
+    "numbro": "^2.3.6",
     "react-colorful": "^5.6.1",
     "react-error-boundary": "^3.1.4",
     "react-virtuoso": "^4.12.2"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.20"
+    "@ladle/react": "^4.0.0",
+    "@types/lodash": "^4.17.20",
+    "copyfiles": "^2.4.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^6.1.10",
+    "@perses-dev/design-tokens": "^0.54.0",
     "lodash": "^4.17.21",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "files": [
     "dist"
   ]

components/src/ExemplarMetadata/ExemplarMetadataTooltip.test.tsx

@@ -0,0 +1,96 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import type { Exemplar, Labels } from '@perses-dev/spec';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import type { CursorCoordinates } from '../TimeSeriesTooltip/tooltip-model';
+import { ExemplarMetadataTooltip } from './ExemplarMetadataTooltip';
+
+const seriesLabels: Labels = {
+  __name__: 'http_requests_total',
+  job: 'demo',
+};
+
+const exemplar: Exemplar = {
+  labels: { trace_id: 'abc-123', span_id: 'def-456' },
+  value: 42,
+  timestamp: 1700000000000,
+};
+
+const pinnedPos: CursorCoordinates = {
+  page: { x: 10, y: 10 },
+  client: { x: 10, y: 10 },
+  plotCanvas: { x: 10, y: 10 },
+  target: null,
+};
+
+describe('ExemplarMetadataTooltip', () => {
+  const onUnpinClick = vi.fn();
+
+  const renderComponent = (props?: Partial<React.ComponentProps<typeof ExemplarMetadataTooltip>>): void => {
+    render(
+      <ExemplarMetadataTooltip
+        exemplar={exemplar}
+        seriesLabels={seriesLabels}
+        pinnedPos={pinnedPos}
+        onUnpinClick={onUnpinClick}
+        {...props}
+      />,
+    );
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders exemplar labels, series labels, value and date-time header when pinned', () => {
+    renderComponent();
+    expect(screen.getByText('Nov 14, 2023 -')).toBeVisible();
+    expect(screen.getByText('22:13:20')).toBeVisible();
+    expect(screen.getByText('Exemplar labels')).toBeVisible();
+    expect(screen.getByText('trace_id:')).toBeVisible();
+    expect(screen.getByText('abc-123')).toBeVisible();
+    expect(screen.getByText('Series labels')).toBeVisible();
+    expect(screen.getByText('http_requests_total')).toBeVisible();
+    expect(screen.getByText('42')).toBeVisible();
+  });
+
+  it('renders while following the mouse when not pinned', () => {
+    renderComponent({ pinnedPos: null });
+    expect(screen.queryByText('Exemplar labels')).not.toBeInTheDocument();
+    fireEvent.mouseMove(window, { pageX: 10, pageY: 10, clientX: 10, clientY: 10 });
+    expect(screen.getByText('Exemplar labels')).toBeVisible();
+  });
+
+  it('shows the unpin affordance and calls onUnpinClick when the pin icon is clicked', () => {
+    renderComponent();
+    expect(screen.getByText('Click chart to unpin')).toBeVisible();
+    fireEvent.click(screen.getByTestId('PinIcon'));
+    expect(onUnpinClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render a series labels section when seriesLabels is undefined', () => {
+    renderComponent({ seriesLabels: undefined });
+    expect(screen.queryByText('Series labels')).not.toBeInTheDocument();
+    expect(screen.getByText('Exemplar labels')).toBeVisible();
+  });
+
+  it('does not render a divider for empty label sets', () => {
+    render(<ExemplarMetadataTooltip exemplar={{ ...exemplar, labels: {} }} seriesLabels={{}} pinnedPos={pinnedPos} />);
+    expect(screen.queryByText('Series labels')).not.toBeInTheDocument();
+    expect(screen.queryByText('Exemplar labels')).not.toBeInTheDocument();
+    expect(screen.getByText('Value')).toBeVisible();
+    // Only the header divider remains: no separator is left for the hidden label sections.
+    expect(document.body.querySelectorAll('hr')).toHaveLength(1);
+  });
+});