Fix bar chart data labels jump on hover

.claude/commands/fix-flakey-test.md

@@ -0,0 +1 @@
+Fix flakey test $ARGUMENTS

.claude/commands/fix-issue.md

@@ -0,0 +1 @@
+Fix issue $ARGUMENTS

.claude/commands/fix-pr.md

@@ -0,0 +1 @@
+Fetch unresolved comments for this branch's PR, then fix them

.claude/commands/repro-issue.md

@@ -0,0 +1 @@
+Repro issue $ARGUMENTS in a failing test

.gitignore

@@ -132,3 +132,4 @@ modules/drivers/*/.lsp/*
 
 .aider*
 /config.yml
+CLAUDE.local.md

CLAUDE.md

@@ -0,0 +1,111 @@
+# Metabase Development Guide
+
+## Autonomous Development Workflow
+
+- Do not attempt to read or edit files outside the project folder
+- Add failing tests first, then fix them
+- Work autonomously in small, testable increments
+- Run targeted tests, and lint continuously during development
+- Prioritize understanding existing patterns before implementing
+- Don't commit changes, leave it for the user to review and make commits
+
+## Quick Commands
+
+### JavaScript/TypeScript
+
+- **Lint:** `yarn lint-eslint`
+- **Test:** `yarn test-unit path/to/file.unit.spec.js` or `yarn test-unit -t "pattern"`
+- **Watch:** `yarn test-unit-watch path/to/file.unit.spec.js`
+- **Format:** `yarn prettier`
+- **Type Check:** `yarn type-check`
+
+### Clojure
+
+- **Lint:** `./bin/mage kondo [path]`
+- **Format:** `./bin/mage cljfmt-files [path]`
+- **Test file:** `clojure -X:dev:test :only namespace/test-name`
+
+### ClojureScript
+
+- **Test:** `yarn test-cljs`
+
+## Codebase
+
+### Frontend Technologies
+
+- **React** - Main frontend library
+- **Redux Toolkit** - State management library
+- **Mantine UI** - Customized UI component library, components are reexported from `metabase/ui`
+- **Styling** - Prefer Mantine style props; only when necessary, use CSS modules
+- **ECharts** - Visualization library for charts
+
+## Testing Conventions
+
+- Use isolated unit tests when the change is reasonable to test without complex dependencies
+- Tests must not mock internal details of components/functions being tested
+- Use helper factories like `createMockCard()` to create test objects
+- For more complex cases, write e2e Cypress tests in `e2e/test/scenarios/`
+
+### Mock Object Factories
+
+- Use mock factories to create test objects
+- Example: `createMockCard()` for Card objects
+- Located in `frontend/src/metabase-types/api/mocks/`
+
+```javascript
+import { createMockCard } from "metabase-types/api/mocks";
+
+const card = createMockCard({
+  id: 1,
+  name: "Test Card",
+  // Override other properties as needed
+});
+```
+
+### Clojure Testing
+
+- Tests are in `test/metabase/` matching the namespace structure of `src/`
+- Use `deftest` for test definitions
+- Use `testing` for organizing test groups
+- Use `is` for assertions
+
+```clojure
+(deftest my-function-test
+  (testing "should handle normal case"
+    (is (= expected (my-function input)))))
+```
+
+## Code Style Conventions
+
+### JavaScript/TypeScript
+
+- Using TypeScript for new code is preferred
+- Components should be in their own directories with related files
+- React functional components with hooks are preferred over class components
+- Use `.tsx` extension for React components with TypeScript
+- Use `.unit.spec.tsx` for component tests
+
+### Clojure/ClojureScript
+
+- Functions should have docstrings
+- Use `cljfmt` for consistent formatting
+- Use ClojureScript for frontend-facing code that needs to interoperate with the Clojure backend
+
+## Development Workflow Tips
+
+- Every bug fix or feature should include automated tests
+- The codebase uses a combination of Clojure (backend) and JavaScript/TypeScript (frontend)
+- Tests should be comprehensive and match the existing patterns
+- Use the provided factories for creating test objects
+- Follow existing patterns when adding new features
+
+## Application Entities
+
+- **Card/Question** - Saved questions/visualizations that can be displayed in dashboards
+- **Dashboard** - Collections of cards/visualizations
+- **Collection** - Organizational units for Cards, Dashboards, etc.
+- **Database** - Connected data sources
+- **Field** - Column in a database table
+- **Table** - Database table
+- **Segment** - Saved filters that can be applied to queries
+- **Metric** - Saved aggregations that can be used in queries

bin/claude-prompt

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+if [ $# -eq 0 ]; then
+    echo "Usage: claude-prompt <prompt>"
+    echo "  Launches Claude in non-interactive mode with Metabase-specific tools and the given prompt."
+    exit 1
+fi
+
+set -o xtrace
+
+claude -p "$(printf "%q " "$@")" --allowedTools "Bash(./bin/mage:*)" "Bash(clj-kondo:*)" "Bash(clojure:*)", "Bash(grep:*)" "Bash(ls:*)" "Bash(yarn lint:*)" "Bash(yarn test-unit:*)" "WebFetchTool(domain:github.com)" Edit

frontend/src/metabase/visualizations/echarts/cartesian/option/series.ts

@@ -85,13 +85,19 @@ export const getBarLabelLayout =
     }
 
     const barHeight = rect.height;
-    const labelOffset =
+    // Round the values to prevent fractional pixel positions
+    // which can cause the 1px jump on hover
+    const labelOffset = Math.round(
       barHeight / 2 +
-      CHART_STYLE.seriesLabels.size / 2 +
-      CHART_STYLE.seriesLabels.offset;
+        CHART_STYLE.seriesLabels.size / 2 +
+        CHART_STYLE.seriesLabels.offset,
+    );
     return {
       hideOverlap: settings["graph.label_value_frequency"] === "fit",
       dy: labelValue < 0 ? labelOffset : -labelOffset,
+      // Force the label to maintain its position during hover state
+      draggable: false,
+      cursor: "default",
     };
   };
 
@@ -147,6 +153,9 @@ export const getBarInsideLabelLayout =
     return {
       hideOverlap: settings["graph.label_value_frequency"] === "fit",
       rotate: ticksRotation === "vertical" ? 90 : 0,
+      // Force the label to maintain its position during hover state
+      draggable: false,
+      cursor: "default",
     };
   };