@pie-lib/graphing-solution-set 4.0.4-next.30 → 4.0.4-next.34

package/package.json

@@ -1,7 +1,20 @@
 {
   "name": "@pie-lib/graphing-solution-set",
-  "version": "4.0.4-next.30",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "4.0.4-next.34+e93c7b3c1",
   "description": "Graphing components",
+  "keywords": [
+    "react",
+    "pie",
+    "graphing"
+  ],
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "author": "",
+  "license": "ISC",
+  "repository": "pie-framework/pie-lib",
   "dependencies": {
     "@dnd-kit/sortable": "10.0.0",
     "@emotion/react": "^11.14.0",
@@ -9,13 +22,13 @@
     "@mapbox/point-geometry": "^1.1.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "4.0.3-next.37",
-    "@pie-lib/editable-html-tip-tap": "2.1.2-next.30",
-    "@pie-lib/graphing-utils": "3.0.3-next.0",
-    "@pie-lib/plot": "4.0.4-next.30",
-    "@pie-lib/render-ui": "6.1.1-next.37",
-    "@pie-lib/tools": "2.0.3-next.0",
-    "@pie-lib/translator": "4.0.3-next.0",
+    "@pie-lib/drag": "^4.0.2",
+    "@pie-lib/editable-html-tip-tap": "^2.1.2-next.34+e93c7b3c1",
+    "@pie-lib/graphing-utils": "^3.0.2",
+    "@pie-lib/plot": "^4.0.4-next.34+e93c7b3c1",
+    "@pie-lib/render-ui": "^6.1.0",
+    "@pie-lib/tools": "^2.0.2",
+    "@pie-lib/translator": "^4.0.2",
     "@visx/axis": "^3.0.0",
     "@visx/clip-path": "^3.0.0",
     "@visx/curve": "^3.0.0",
@@ -24,49 +37,24 @@
     "@visx/group": "^3.0.0",
     "@visx/point": "^3.0.0",
     "@visx/shape": "^3.0.0",
+    "classnames": "^2.2.6",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "debug": "^4.1.1",
     "invariant": "^2.2.4",
+    "lodash-es": "^4.17.23",
     "prop-types": "^15.7.2",
-    "react-draggable": "^4.6.0",
-    "react-redux": "^9.3.0",
-    "redux": "^5.0.1",
-    "redux-undo": "^1.1.0",
-    "@pie-element/shared-lodash": "0.1.1-next.0",
-    "clsx": "^2.1.1",
-    "@pie-lib/config-ui": "13.0.4-next.30",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/utilities": "^3.2.2",
-    "d3-shape": "^3.2.0"
-  },
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "build": "bun x vite build && bun x tsc --emitDeclarationOnly",
-    "dev": "bun x vite",
-    "test": "bun x vitest run"
-  },
-  "devDependencies": {
-    "vite": "^8.0.1",
-    "typescript": "^5.9.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^3.3.0",
+    "react-input-autosize": "^2.2.1",
+    "react-redux": "^6.0.0",
+    "redux": "^4.0.1",
+    "redux-undo": "^1.1.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  }
+    "react": "^18.2.0"
+  },
+  "gitHead": "e93c7b3c148030395e15f085bb5f4c903a00554e",
+  "scripts": {}
 }

package/src/__tests__/bg.test.jsx

@@ -0,0 +1,250 @@
+import React from 'react';
+import { render } from '@pie-lib/test-utils';
+import { select } from 'd3-selection';
+import Bg from '../bg';
+
+jest.mock('d3-selection', () => ({
+  select: jest.fn(),
+  pointer: jest.fn(() => [50, 50]),
+}));
+
+describe('Bg', () => {
+  let defaultProps;
+  let mockRect;
+  let clickHandler;
+
+  beforeEach(() => {
+    clickHandler = null;
+    mockRect = {
+      on: jest.fn((event, handler) => {
+        if (event === 'click') {
+          clickHandler = handler;
+        }
+      }),
+      node: jest.fn(() => ({})),
+    };
+
+    select.mockReturnValue(mockRect);
+
+    defaultProps = {
+      width: 500,
+      height: 400,
+      onClick: jest.fn(),
+      graphProps: {
+        domain: { min: -10, max: 10, step: 1, label: 'x', axisLabel: 'X' },
+        range: { min: -10, max: 10, step: 1, label: 'y', axisLabel: 'Y' },
+        size: { width: 500, height: 400 },
+        scale: {
+          x: {
+            invert: jest.fn((val) => val / 10),
+          },
+          y: {
+            invert: jest.fn((val) => val / 10),
+          },
+        },
+      },
+    };
+  });
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = render(<Bg {...defaultProps} />);
+      expect(container).toBeTruthy();
+    });
+
+    it('renders a rect element', () => {
+      const { container } = render(<Bg {...defaultProps} />);
+      const rect = container.querySelector('rect');
+      expect(rect).toBeTruthy();
+    });
+
+    it('applies correct dimensions', () => {
+      const { container } = render(<Bg {...defaultProps} />);
+      const rect = container.querySelector('rect');
+
+      // Width and height should be expanded by padding * 2
+      const padding = 10; // default padding
+      expect(rect.getAttribute('width')).toBe(String(defaultProps.width + padding * 2));
+      expect(rect.getAttribute('height')).toBe(String(defaultProps.height + padding * 2));
+    });
+
+    it('applies correct transform', () => {
+      const { container } = render(<Bg {...defaultProps} />);
+      const rect = container.querySelector('rect');
+      const padding = 10;
+
+      expect(rect.getAttribute('transform')).toBe(`translate(-${padding}, -${padding})`);
+    });
+
+    it('sets fill opacity to make it invisible', () => {
+      const { container } = render(<Bg {...defaultProps} />);
+      const rect = container.querySelector('rect');
+
+      expect(rect.getAttribute('fill-opacity')).toBe('0.0');
+    });
+  });
+
+  describe('componentDidMount', () => {
+    it('attaches click handler to rect', () => {
+      render(<Bg {...defaultProps} />);
+
+      expect(select).toHaveBeenCalled();
+      expect(mockRect.on).toHaveBeenCalledWith('click', expect.any(Function));
+    });
+  });
+
+  describe('getRectPadding', () => {
+    it('returns 10 for normal graphs', () => {
+      const { container } = render(<Bg {...defaultProps} />);
+      const rect = container.querySelector('rect');
+      const padding = 10;
+
+      expect(rect.getAttribute('width')).toBe(String(defaultProps.width + padding * 2));
+    });
+
+    it('returns 6 for graphs with thinner shapes', () => {
+      const props = {
+        ...defaultProps,
+        graphProps: {
+          ...defaultProps.graphProps,
+          domain: { min: -100, max: 100, step: 1, label: 'x', axisLabel: 'X' },
+        },
+      };
+
+      const { container } = render(<Bg {...props} />);
+      const rect = container.querySelector('rect');
+      const padding = 6;
+
+      expect(rect.getAttribute('width')).toBe(String(props.width + padding * 2));
+    });
+  });
+
+  describe('onRectClick', () => {
+    it('calls onClick with snapped coordinates', () => {
+      const { pointer } = require('d3-selection');
+      pointer.mockReturnValue([100, 100]);
+
+      render(<Bg {...defaultProps} />);
+
+      const event = new MouseEvent('click');
+      clickHandler(event);
+
+      expect(defaultProps.onClick).toHaveBeenCalled();
+      const calledWith = defaultProps.onClick.mock.calls[0][0];
+      expect(calledWith).toHaveProperty('x');
+      expect(calledWith).toHaveProperty('y');
+    });
+
+    it('snaps coordinates to nearest tick', () => {
+      const { pointer } = require('d3-selection');
+
+      render(<Bg {...defaultProps} />);
+
+      const event = new MouseEvent('click');
+      clickHandler(event);
+
+      expect(defaultProps.onClick).toHaveBeenCalled();
+      const { x, y } = defaultProps.onClick.mock.calls[0][0];
+
+      expect(Number.isInteger(x) || x.toString().length <= 4).toBe(true);
+      expect(Number.isInteger(y) || y.toString().length <= 4).toBe(true);
+    });
+
+    it('accounts for padding when converting coordinates', () => {
+      const { pointer } = require('d3-selection');
+      const coords = [50, 50];
+      pointer.mockReturnValue(coords);
+
+      render(<Bg {...defaultProps} />);
+
+      const event = new MouseEvent('click');
+      clickHandler(event);
+
+      expect(defaultProps.graphProps.scale.x.invert).toHaveBeenCalled();
+      expect(defaultProps.graphProps.scale.y.invert).toHaveBeenCalled();
+    });
+  });
+
+  describe('shouldComponentUpdate', () => {
+    it('returns true when width changes', () => {
+      const { rerender } = render(<Bg {...defaultProps} />);
+      const newProps = {
+        ...defaultProps,
+        width: 600,
+        graphProps: {
+          ...defaultProps.graphProps,
+          size: { width: 600, height: defaultProps.height },
+        },
+      };
+
+      expect(() => {
+        rerender(<Bg {...newProps} />);
+      }).not.toThrow();
+    });
+
+    it('returns true when height changes', () => {
+      const { rerender } = render(<Bg {...defaultProps} />);
+      const newProps = {
+        ...defaultProps,
+        height: 500,
+        graphProps: {
+          ...defaultProps.graphProps,
+          size: { width: defaultProps.width, height: 500 },
+        },
+      };
+
+      expect(() => {
+        rerender(<Bg {...newProps} />);
+      }).not.toThrow();
+    });
+
+    it('returns true when graphProps domain/range changes', () => {
+      const { rerender } = render(<Bg {...defaultProps} />);
+      const newProps = {
+        ...defaultProps,
+        graphProps: {
+          ...defaultProps.graphProps,
+          domain: { min: -5, max: 5, step: 1, label: 'x', axisLabel: 'X' },
+        },
+      };
+
+      expect(() => {
+        rerender(<Bg {...newProps} />);
+      }).not.toThrow();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles zero dimensions', () => {
+      const props = { ...defaultProps, width: 0, height: 0 };
+      const { container } = render(<Bg {...props} />);
+      const rect = container.querySelector('rect');
+
+      expect(rect).toBeTruthy();
+    });
+
+    it('handles large dimensions', () => {
+      const props = { ...defaultProps, width: 10000, height: 10000 };
+      const { container } = render(<Bg {...props} />);
+      const rect = container.querySelector('rect');
+
+      expect(rect).toBeTruthy();
+      expect(rect.getAttribute('width')).toBe('10020');
+      expect(rect.getAttribute('height')).toBe('10020');
+    });
+
+    it('handles negative coordinates in domain/range', () => {
+      const props = {
+        ...defaultProps,
+        graphProps: {
+          ...defaultProps.graphProps,
+          domain: { min: -100, max: -10, step: 1, label: 'x', axisLabel: 'X' },
+          range: { min: -100, max: -10, step: 1, label: 'y', axisLabel: 'Y' },
+        },
+      };
+
+      const { container } = render(<Bg {...props} />);
+      expect(container.querySelector('rect')).toBeTruthy();
+    });
+  });
+});

package/src/__tests__/coordinates-label.test.jsx

@@ -0,0 +1,243 @@
+import React from 'react';
+import { render } from '@pie-lib/test-utils';
+import { CoordinatesLabel, getLabelPosition } from '../coordinates-label';
+
+describe('CoordinatesLabel', () => {
+  let defaultProps;
+  let graphProps;
+
+  beforeEach(() => {
+    graphProps = {
+      domain: { min: -10, max: 10, step: 1, label: 'x', axisLabel: 'X' },
+      range: { min: -10, max: 10, step: 1, label: 'y', axisLabel: 'Y' },
+      scale: {
+        x: jest.fn((val) => (val + 10) * 20),
+        y: jest.fn((val) => (10 - val) * 20),
+      },
+    };
+
+    defaultProps = {
+      x: 5,
+      y: 5,
+      graphProps,
+    };
+  });
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = render(<CoordinatesLabel {...defaultProps} />);
+      expect(container).toBeTruthy();
+    });
+
+    it('displays formatted coordinates', () => {
+      const { container } = render(<CoordinatesLabel {...defaultProps} />);
+      const input = container.querySelector('input');
+
+      expect(input.value).toBe('(5, 5)');
+    });
+
+    it('rounds coordinates to 4 decimal places', () => {
+      const props = { ...defaultProps, x: 1.123456, y: 2.987654 };
+      const { container } = render(<CoordinatesLabel {...props} />);
+      const input = container.querySelector('input');
+
+      expect(input.value).toBe('(1.1235, 2.9877)');
+    });
+
+    it('handles integer coordinates', () => {
+      const props = { ...defaultProps, x: 0, y: 0 };
+      const { container } = render(<CoordinatesLabel {...props} />);
+      const input = container.querySelector('input');
+
+      expect(input.value).toBe('(0, 0)');
+    });
+
+    it('handles negative coordinates', () => {
+      const props = { ...defaultProps, x: -3, y: -7 };
+      const { container } = render(<CoordinatesLabel {...props} />);
+      const input = container.querySelector('input');
+
+      expect(input.value).toBe('(-3, -7)');
+    });
+
+    it('renders as an input element', () => {
+      const { container } = render(<CoordinatesLabel {...defaultProps} />);
+      const input = container.querySelector('input');
+
+      expect(input).toBeTruthy();
+      expect(input.tagName).toBe('INPUT');
+    });
+
+    it('applies correct styles', () => {
+      const { container } = render(<CoordinatesLabel {...defaultProps} />);
+      const wrapper = container.firstChild;
+
+      expect(wrapper).toHaveStyle({ position: 'absolute' });
+      expect(wrapper).toHaveStyle({ pointerEvents: 'auto' });
+    });
+  });
+
+  describe('getLabelPosition', () => {
+    it('positions label to the right by default', () => {
+      const position = getLabelPosition(graphProps, 0, 0, 60);
+
+      expect(position.left).toBeGreaterThan(graphProps.scale.x(0));
+      expect(position.top).toBeDefined();
+    });
+
+    it('positions label to the left when near right edge', () => {
+      const x = 9; // Near max
+      const labelLength = 100;
+      const position = getLabelPosition(graphProps, x, 0, labelLength);
+
+      expect(position.left).toBeLessThan(graphProps.scale.x(x));
+    });
+
+    it('adjusts top position for minimum y value', () => {
+      const position = getLabelPosition(graphProps, 0, -10, 60);
+
+      expect(position.top).toBe(graphProps.scale.y(-10) - 16);
+    });
+
+    it('adjusts top position for maximum y value', () => {
+      const position = getLabelPosition(graphProps, 0, 10, 60);
+
+      expect(position.top).toBe(graphProps.scale.y(10) - 0);
+    });
+
+    it('centers label vertically for middle values', () => {
+      const position = getLabelPosition(graphProps, 0, 0, 60);
+
+      expect(position.top).toBe(graphProps.scale.y(0) - 8);
+    });
+
+    it('applies left shift consistently', () => {
+      const leftShift = 10;
+      const labelLength = 60;
+
+      const rightPos = getLabelPosition(graphProps, 0, 0, labelLength);
+      expect(rightPos.left).toBe(graphProps.scale.x(0) + leftShift);
+
+      const leftPos = getLabelPosition(graphProps, 9, 0, labelLength);
+      expect(leftPos.left).toBe(graphProps.scale.x(9) - leftShift - labelLength);
+    });
+  });
+
+  describe('label width calculation', () => {
+    it('calculates width based on label length', () => {
+      const props = { ...defaultProps, x: 1, y: 2 };
+      const { container } = render(<CoordinatesLabel {...props} />);
+      const wrapper = container.firstChild;
+
+      const expectedWidth = 6 * 6;
+      expect(wrapper).toHaveStyle({ width: `${expectedWidth}px` });
+    });
+
+    it('adjusts width for longer coordinates', () => {
+      const props = { ...defaultProps, x: -10.123, y: 10.456 };
+      const { container } = render(<CoordinatesLabel {...props} />);
+      const wrapper = container.firstChild;
+
+      const style = window.getComputedStyle(wrapper);
+      expect(parseInt(style.width)).toBeGreaterThan(42);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles very small coordinates', () => {
+      const props = { ...defaultProps, x: 0.0001, y: 0.0002 };
+      const { container } = render(<CoordinatesLabel {...props} />);
+      const input = container.querySelector('input');
+
+      expect(input.value).toContain('(');
+      expect(input.value).toContain(')');
+      expect(input.value).toContain(',');
+    });
+
+    it('handles very large coordinates', () => {
+      const props = { ...defaultProps, x: 999999, y: 888888 };
+      const { container } = render(<CoordinatesLabel {...props} />);
+      const input = container.querySelector('input');
+
+      expect(input.value).toBe('(999999, 888888)');
+    });
+
+    it('handles zero coordinates', () => {
+      const props = { ...defaultProps, x: 0, y: 0 };
+      const { container } = render(<CoordinatesLabel {...props} />);
+      const input = container.querySelector('input');
+
+      expect(input.value).toBe('(0, 0)');
+    });
+
+    it('handles coordinates at domain/range boundaries', () => {
+      const props = { ...defaultProps, x: 10, y: 10 };
+      const { container } = render(<CoordinatesLabel {...props} />);
+      const input = container.querySelector('input');
+
+      expect(input.value).toBe('(10, 10)');
+    });
+
+    it('handles negative boundaries', () => {
+      const props = { ...defaultProps, x: -10, y: -10 };
+      const { container } = render(<CoordinatesLabel {...props} />);
+      const input = container.querySelector('input');
+
+      expect(input.value).toBe('(-10, -10)');
+    });
+  });
+
+  describe('prop types and validation', () => {
+    it('accepts required props', () => {
+      expect(() => {
+        render(<CoordinatesLabel {...defaultProps} />);
+      }).not.toThrow();
+    });
+
+    it('renders with missing optional props', () => {
+      const props = {
+        x: 1,
+        y: 2,
+        graphProps,
+      };
+
+      expect(() => {
+        render(<CoordinatesLabel {...props} />);
+      }).not.toThrow();
+    });
+  });
+
+  describe('updates', () => {
+    it('updates when x coordinate changes', () => {
+      const { container, rerender } = render(<CoordinatesLabel {...defaultProps} />);
+      let input = container.querySelector('input');
+      expect(input.value).toBe('(5, 5)');
+
+      rerender(<CoordinatesLabel {...defaultProps} x={7} />);
+      input = container.querySelector('input');
+      expect(input.value).toBe('(7, 5)');
+    });
+
+    it('updates when y coordinate changes', () => {
+      const { container, rerender } = render(<CoordinatesLabel {...defaultProps} />);
+      let input = container.querySelector('input');
+      expect(input.value).toBe('(5, 5)');
+
+      rerender(<CoordinatesLabel {...defaultProps} y={3} />);
+      input = container.querySelector('input');
+      expect(input.value).toBe('(5, 3)');
+    });
+
+    it('updates position when coordinates change', () => {
+      const { container, rerender } = render(<CoordinatesLabel {...defaultProps} />);
+      const initialStyle = window.getComputedStyle(container.firstChild);
+      const initialLeft = initialStyle.left;
+
+      rerender(<CoordinatesLabel {...defaultProps} x={8} />);
+      const newStyle = window.getComputedStyle(container.firstChild);
+      const newLeft = newStyle.left;
+
+      expect(newLeft).not.toBe(initialLeft);
+    });
+  });
+});