@pie-lib/graphing 3.1.0-next.5 → 3.1.1-next.1

package/src/__tests__/utils.test.js

@@ -63,67 +63,21 @@ describe('utils', () => {
     assertGetTickValues({ min: -0.2, max: 2, step: 0.6 }, [0, 0.6, 1.2, 1.8]);
     assertGetTickValues({ min: -3.4, max: 6.2, step: 1.2 }, [0, -1.2, -2.4, 1.2, 2.4, 3.6, 4.8, 6]);
 
-    assertGetTickValues({ min: 0.6, max: 4.8, step: 0.3 }, [
-      0.6,
-      0.9,
-      1.2,
-      1.5,
-      1.8,
-      2.1,
-      2.4,
-      2.7,
-      3.0,
-      3.3,
-      3.6,
-      3.9,
-      4.2,
-      4.5,
-      4.8,
-    ]);
-    assertGetTickValues({ min: 0.5, max: 4.9, step: 0.3 }, [
-      0.6,
-      0.9,
-      1.2,
-      1.5,
-      1.8,
-      2.1,
-      2.4,
-      2.7,
-      3.0,
-      3.3,
-      3.6,
-      3.9,
-      4.2,
-      4.5,
-      4.8,
-    ]);
-    assertGetTickValues({ min: 0, max: 3, step: 0.125 }, [
-      0,
-      0.125,
-      0.25,
-      0.375,
-      0.5,
-      0.625,
-      0.75,
-      0.875,
-      1,
-      1.125,
-      1.25,
-      1.375,
-      1.5,
-      1.625,
-      1.75,
-      1.875,
-      2,
-      2.125,
-      2.25,
-      2.375,
-      2.5,
-      2.625,
-      2.75,
-      2.875,
-      3,
-    ]);
+    assertGetTickValues(
+      { min: 0.6, max: 4.8, step: 0.3 },
+      [0.6, 0.9, 1.2, 1.5, 1.8, 2.1, 2.4, 2.7, 3.0, 3.3, 3.6, 3.9, 4.2, 4.5, 4.8],
+    );
+    assertGetTickValues(
+      { min: 0.5, max: 4.9, step: 0.3 },
+      [0.6, 0.9, 1.2, 1.5, 1.8, 2.1, 2.4, 2.7, 3.0, 3.3, 3.6, 3.9, 4.2, 4.5, 4.8],
+    );
+    assertGetTickValues(
+      { min: 0, max: 3, step: 0.125 },
+      [
+        0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1, 1.125, 1.25, 1.375, 1.5, 1.625, 1.75, 1.875, 2, 2.125, 2.25,
+        2.375, 2.5, 2.625, 2.75, 2.875, 3,
+      ],
+    );
   });
 
   describe('countWords', () => {

package/src/axis/__tests__/axes.test.jsx

@@ -2,7 +2,7 @@ import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { graphProps } from '../../__tests__/utils';
 
-import Axes, { RawXAxis, RawYAxis, firstNegativeValue, sharedValues } from '../axes';
+import Axes, { firstNegativeValue, RawXAxis, RawYAxis, sharedValues } from '../axes';
 
 describe('RawXAxis', () => {
   let onChange = jest.fn();

package/src/axis/axes.jsx

@@ -4,7 +4,7 @@ import { types } from '@pie-lib/plot';
 import PropTypes from 'prop-types';
 import Arrow from './arrow';
 import { styled } from '@mui/material/styles';
-import { countWords, findLongestWord, amountToIncreaseWidth, getTickValues } from '../utils';
+import { amountToIncreaseWidth, countWords, findLongestWord, getTickValues } from '../utils';
 import { color, Readable } from '@pie-lib/render-ui';
 
 export const AxisPropTypes = {
@@ -92,14 +92,8 @@ export class RawXAxis extends React.Component {
   static defaultProps = AxisDefaultProps;
 
   render() {
-    const {
-      includeArrows,
-      graphProps,
-      columnTicksValues,
-      skipValues,
-      distanceFromOriginToFirstNegativeY,
-      dy,
-    } = this.props;
+    const { includeArrows, graphProps, columnTicksValues, skipValues, distanceFromOriginToFirstNegativeY, dy } =
+      this.props;
     const { scale, domain, size, range } = graphProps || {};
 
     const labelProps = (label) => {
@@ -131,12 +125,8 @@ export class RawXAxis extends React.Component {
           tickValues={columnTicksValues}
           hideZero={!(domain.labelStep || range.labelStep) && domain.min <= 0}
         />
-        {includeArrows && includeArrows.left && (
-          <StyledArrow direction="left" x={domain.min} y={0} scale={scale} />
-        )}
-        {includeArrows && includeArrows.right && (
-          <StyledArrow direction="right" x={domain.max} y={0} scale={scale} />
-        )}
+        {includeArrows && includeArrows.left && <StyledArrow direction="left" x={domain.min} y={0} scale={scale} />}
+        {includeArrows && includeArrows.right && <StyledArrow direction="right" x={domain.max} y={0} scale={scale} />}
         {domain.axisLabel && (
           <foreignObject x={size.width + 17} y={scale.y(0) - 9} width={necessaryWidth} height={20 * necessaryRows}>
             <StyledLabel dangerouslySetInnerHTML={{ __html: domain.axisLabel }} />
@@ -191,12 +181,8 @@ export class RawYAxis extends React.Component {
           tickTextAnchor={'bottom'}
           tickValues={rowTickValues}
         />
-        {includeArrows && includeArrows.down && (
-          <StyledArrow direction="down" x={0} y={range.min} scale={scale} />
-        )}
-        {includeArrows && includeArrows.up && (
-          <StyledArrow direction="up" x={0} y={range.max} scale={scale} />
-        )}
+        {includeArrows && includeArrows.down && <StyledArrow direction="down" x={0} y={range.min} scale={scale} />}
+        {includeArrows && includeArrows.up && <StyledArrow direction="up" x={0} y={range.max} scale={scale} />}
         {range.axisLabel && (
           <foreignObject x={scale.x(0) - necessaryWidth / 2} y={-33} width={necessaryWidth} height="20">
             <Readable false>

package/src/axis/index.js

@@ -1,2 +1,3 @@
 import Axes, { AxisPropTypes } from './axes';
+
 export { Axes, AxisPropTypes };

package/src/bg.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { select, mouse } from 'd3-selection';
+import { pointer, select } from 'd3-selection';
 import { types, utils } from '@pie-lib/plot';
 import { getTickValues, thinnerShapesNeeded } from './utils';
 
@@ -17,7 +17,7 @@ export default class Bg extends React.Component {
   componentDidMount() {
     const rect = select(this.rect);
 
-    rect.on('click', this.onRectClick.bind(this, rect));
+    rect.on('click', (event) => this.onRectClick(rect, event));
   }
 
   shouldComponentUpdate(nextProps) {
@@ -35,15 +35,15 @@ export default class Bg extends React.Component {
   };
 
   /**
-   * Note: we use d3 click + mouse to give us domain values directly.
+   * Note: we use d3 click + pointer to give us domain values directly.
    * Saves us having to calculate them ourselves from a MouseEvent.
    */
-  onRectClick = (rect) => {
+  onRectClick = (rect, event) => {
     const { onClick, graphProps } = this.props;
     const { scale } = graphProps;
 
     const padding = this.getRectPadding();
-    const coords = mouse(rect._groups[0][0]);
+    const coords = pointer(event, rect.node());
 
     // decrease the padding from coordinates to indicate the correct point clicked
     const x = scale.x.invert(coords[0] - padding);

package/src/container/__tests__/actions.test.js

@@ -0,0 +1,105 @@
+import { addMark, changeMarks } from '../actions';
+
+describe('container actions', () => {
+  describe('addMark', () => {
+    it('creates ADD_MARK action', () => {
+      const action = addMark();
+      expect(action).toEqual({
+        type: 'ADD_MARK',
+      });
+    });
+
+    it('creates action without parameters', () => {
+      const action = addMark();
+      expect(action.type).toBe('ADD_MARK');
+      expect(Object.keys(action)).toEqual(['type']);
+    });
+  });
+
+  describe('changeMarks', () => {
+    it('creates CHANGE_MARKS action with marks', () => {
+      const marks = [{ id: 1, type: 'point' }];
+      const action = changeMarks(marks);
+
+      expect(action).toEqual({
+        type: 'CHANGE_MARKS',
+        marks,
+      });
+    });
+
+    it('creates action with empty marks array', () => {
+      const marks = [];
+      const action = changeMarks(marks);
+
+      expect(action).toEqual({
+        type: 'CHANGE_MARKS',
+        marks: [],
+      });
+    });
+
+    it('creates action with multiple marks', () => {
+      const marks = [
+        { id: 1, type: 'point', x: 1, y: 2 },
+        { id: 2, type: 'line', from: { x: 0, y: 0 }, to: { x: 5, y: 5 } },
+      ];
+      const action = changeMarks(marks);
+
+      expect(action.marks).toEqual(marks);
+      expect(action.marks.length).toBe(2);
+    });
+
+    it('creates action with null marks', () => {
+      const marks = null;
+      const action = changeMarks(marks);
+
+      expect(action).toEqual({
+        type: 'CHANGE_MARKS',
+        marks: null,
+      });
+    });
+
+    it('creates action with undefined marks', () => {
+      const marks = undefined;
+      const action = changeMarks(marks);
+
+      expect(action).toEqual({
+        type: 'CHANGE_MARKS',
+        marks: undefined,
+      });
+    });
+
+    it('preserves mark properties', () => {
+      const marks = [
+        {
+          id: 1,
+          type: 'point',
+          x: 10,
+          y: 20,
+          label: 'A',
+          correctness: { value: 'correct' },
+        },
+      ];
+      const action = changeMarks(marks);
+
+      expect(action.marks[0]).toEqual(marks[0]);
+      expect(action.marks[0].correctness).toBeDefined();
+    });
+  });
+
+  describe('action types', () => {
+    it('has consistent action type strings', () => {
+      const addMarkAction = addMark();
+      const changeMarksAction = changeMarks([]);
+
+      expect(typeof addMarkAction.type).toBe('string');
+      expect(typeof changeMarksAction.type).toBe('string');
+    });
+
+    it('has unique action types', () => {
+      const addMarkAction = addMark();
+      const changeMarksAction = changeMarks([]);
+
+      expect(addMarkAction.type).not.toBe(changeMarksAction.type);
+    });
+  });
+});

package/src/container/__tests__/index.test.jsx

@@ -0,0 +1,319 @@
+import React from 'react';
+import { render, waitFor } from '@pie-lib/test-utils';
+import Root, { GraphContainer } from '../index';
+import { changeMarks } from '../actions';
+
+jest.mock('../../graph-with-controls', () => {
+  return function GraphWithControls({ marks, onChangeMarks, onUndo, onRedo, onReset, disabled }) {
+    return (
+      <div data-testid="graph-with-controls">
+        <div data-testid="marks-count">{marks?.length || 0}</div>
+        {disabled && <div data-testid="disabled-indicator">Disabled</div>}
+        <button data-testid="change-marks" onClick={() => onChangeMarks && onChangeMarks([{ id: 1 }])}>
+          Change
+        </button>
+        <button data-testid="undo" onClick={onUndo}>
+          Undo
+        </button>
+        <button data-testid="redo" onClick={onRedo}>
+          Redo
+        </button>
+        <button data-testid="reset" onClick={onReset}>
+          Reset
+        </button>
+      </div>
+    );
+  };
+});
+
+jest.mock('@pie-lib/drag', () => ({
+  DragProvider: ({ children }) => <div data-testid="drag-provider">{children}</div>,
+}));
+
+describe('Container Root Component', () => {
+  const defaultProps = {
+    marks: [],
+    onChangeMarks: jest.fn(),
+  };
+
+  const renderComponent = (props = {}) => {
+    return render(<Root {...defaultProps} {...props} />);
+  };
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container).toBeInTheDocument();
+    });
+
+    it('renders GraphWithControls', () => {
+      const { getByTestId } = renderComponent();
+      expect(getByTestId('graph-with-controls')).toBeInTheDocument();
+    });
+
+    it('renders with Provider when no correctness set', () => {
+      const { container } = renderComponent({ marks: [{ id: 1, type: 'point' }] });
+      expect(container.querySelector('[data-testid="graph-with-controls"]')).toBeInTheDocument();
+    });
+
+    it('renders directly when correctness is set', () => {
+      const marks = [{ id: 1, type: 'point', correctness: { value: 'correct' } }];
+      const { getByTestId } = renderComponent({ marks });
+
+      expect(getByTestId('graph-with-controls')).toBeInTheDocument();
+      expect(getByTestId('disabled-indicator')).toBeInTheDocument();
+    });
+
+    it('passes marks to GraphWithControls', () => {
+      const marks = [{ id: 1 }, { id: 2 }];
+      const { getByTestId } = renderComponent({ marks });
+      expect(getByTestId('marks-count')).toHaveTextContent('2');
+    });
+  });
+
+  describe('Redux store', () => {
+    it('creates Redux store on mount', () => {
+      const component = new Root({ marks: [], onChangeMarks: jest.fn() });
+      expect(component.store).toBeDefined();
+      expect(typeof component.store.getState).toBe('function');
+      expect(typeof component.store.dispatch).toBe('function');
+    });
+
+    it('initializes store with marks from props', () => {
+      const marks = [{ id: 1, type: 'point' }];
+      const component = new Root({ marks, onChangeMarks: jest.fn() });
+
+      const state = component.store.getState();
+      expect(state.marks.present).toEqual(marks);
+    });
+
+    it('initializes store with empty marks', () => {
+      const component = new Root({ marks: [], onChangeMarks: jest.fn() });
+
+      const state = component.store.getState();
+      expect(state.marks.present).toEqual([]);
+    });
+
+    it('subscribes to store changes', async () => {
+      const onChangeMarks = jest.fn();
+      const component = new Root({ marks: [], onChangeMarks });
+
+      const newMarks = [{ id: 1 }];
+      component.store.dispatch(changeMarks(newMarks));
+
+      await waitFor(() => {
+        expect(onChangeMarks).toHaveBeenCalledWith(newMarks);
+      });
+    });
+  });
+
+  describe('componentDidUpdate', () => {
+    it('updates store when marks prop changes', () => {
+      const onChangeMarks = jest.fn();
+      const { rerender } = render(<Root marks={[]} onChangeMarks={onChangeMarks} />);
+
+      const newMarks = [{ id: 1, type: 'point' }];
+      rerender(<Root marks={newMarks} onChangeMarks={onChangeMarks} />);
+
+      expect(onChangeMarks).not.toHaveBeenCalled();
+    });
+
+    it('does not update when marks are equal', () => {
+      const marks = [{ id: 1, type: 'point' }];
+      const onChangeMarks = jest.fn();
+      const { rerender } = render(<Root marks={marks} onChangeMarks={onChangeMarks} />);
+
+      onChangeMarks.mockClear();
+
+      rerender(<Root marks={marks} onChangeMarks={onChangeMarks} />);
+
+      expect(onChangeMarks).not.toHaveBeenCalled();
+    });
+
+    it('handles marks changing from empty to non-empty', () => {
+      const onChangeMarks = jest.fn();
+      const { rerender } = render(<Root marks={[]} onChangeMarks={onChangeMarks} />);
+
+      const newMarks = [{ id: 1 }];
+
+      expect(() => {
+        rerender(<Root marks={newMarks} onChangeMarks={onChangeMarks} />);
+      }).not.toThrow();
+    });
+
+    it('handles marks changing from non-empty to empty', () => {
+      const onChangeMarks = jest.fn();
+      const { rerender } = render(<Root marks={[{ id: 1 }]} onChangeMarks={onChangeMarks} />);
+
+      expect(() => {
+        rerender(<Root marks={[]} onChangeMarks={onChangeMarks} />);
+      }).not.toThrow();
+    });
+  });
+
+  describe('onStoreChange', () => {
+    it('calls onChangeMarks when store state changes', async () => {
+      const onChangeMarks = jest.fn();
+      const component = new Root({ marks: [], onChangeMarks });
+
+      const newMarks = [{ id: 1, type: 'point' }];
+      component.store.dispatch(changeMarks(newMarks));
+
+      await waitFor(() => {
+        expect(onChangeMarks).toHaveBeenCalledWith(newMarks);
+      });
+    });
+
+    it('does not call onChangeMarks when marks are equal', () => {
+      const marks = [{ id: 1, type: 'point' }];
+      const onChangeMarks = jest.fn();
+      const component = new Root({ marks, onChangeMarks });
+
+      onChangeMarks.mockClear();
+
+      component.store.dispatch(changeMarks(marks));
+
+      expect(onChangeMarks).not.toHaveBeenCalled();
+    });
+
+    it('handles multiple store changes', async () => {
+      const onChangeMarks = jest.fn();
+      const component = new Root({ marks: [], onChangeMarks });
+
+      component.store.dispatch(changeMarks([{ id: 1 }]));
+      component.store.dispatch(changeMarks([{ id: 2 }]));
+      component.store.dispatch(changeMarks([{ id: 3 }]));
+
+      await waitFor(() => {
+        expect(onChangeMarks).toHaveBeenCalledTimes(3);
+      });
+    });
+  });
+
+  describe('correctness handling', () => {
+    it('disables when any mark has correctness', () => {
+      const marks = [
+        { id: 1, type: 'point' },
+        { id: 2, type: 'point', correctness: { value: 'correct' } },
+      ];
+      const { getByTestId } = renderComponent({ marks });
+
+      expect(getByTestId('disabled-indicator')).toBeInTheDocument();
+    });
+
+    it('renders without Provider when correctness is set', () => {
+      const marks = [{ id: 1, correctness: { value: 'correct' } }];
+      const { container } = renderComponent({ marks });
+
+      expect(container.querySelector('[data-testid="graph-with-controls"]')).toBeInTheDocument();
+    });
+
+    it('does not disable when no correctness is set', () => {
+      const marks = [
+        { id: 1, type: 'point' },
+        { id: 2, type: 'line' },
+      ];
+      const { queryByTestId } = renderComponent({ marks });
+
+      expect(queryByTestId('disabled-indicator')).not.toBeInTheDocument();
+    });
+
+    it('handles correctness with different values', () => {
+      const marks = [{ id: 1, correctness: { value: 'incorrect' } }];
+      const { getByTestId } = renderComponent({ marks });
+
+      expect(getByTestId('disabled-indicator')).toBeInTheDocument();
+    });
+
+    it('handles empty correctness object', () => {
+      const marks = [{ id: 1, correctness: {} }];
+      const { getByTestId } = renderComponent({ marks });
+
+      expect(getByTestId('disabled-indicator')).toBeInTheDocument();
+    });
+  });
+
+  describe('props forwarding', () => {
+    it('forwards additional props to GraphWithControls', () => {
+      const { container } = renderComponent({
+        className: 'custom-class',
+        size: { width: 500, height: 500 },
+      });
+
+      expect(container.querySelector('[data-testid="graph-with-controls"]')).toBeInTheDocument();
+    });
+
+    it('does not forward onChangeMarks and marks to GraphWithControls', () => {
+      const { getByTestId } = renderComponent({
+        marks: [{ id: 1 }],
+        onChangeMarks: jest.fn(),
+        otherProp: 'test',
+      });
+
+      expect(getByTestId('graph-with-controls')).toBeInTheDocument();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles empty marks array', () => {
+      const { container } = renderComponent({ marks: [] });
+      expect(container).toBeInTheDocument();
+    });
+
+    it('handles marks with complex structure', () => {
+      const marks = [
+        {
+          id: 1,
+          type: 'line',
+          from: { x: 0, y: 0 },
+          to: { x: 10, y: 10 },
+          label: 'Line A',
+          correctness: { value: 'correct', label: 'Correct!' },
+        },
+      ];
+      const { getByTestId } = renderComponent({ marks });
+      expect(getByTestId('graph-with-controls')).toBeInTheDocument();
+    });
+
+    it('handles switching between correctness states', () => {
+      const { rerender } = render(<Root marks={[{ id: 1 }]} onChangeMarks={jest.fn()} />);
+
+      rerender(<Root marks={[{ id: 1, correctness: { value: 'correct' } }]} onChangeMarks={jest.fn()} />);
+
+      rerender(<Root marks={[{ id: 1 }]} onChangeMarks={jest.fn()} />);
+
+      expect(document.querySelector('[data-testid="graph-with-controls"]')).toBeInTheDocument();
+    });
+  });
+
+  describe('store synchronization', () => {
+    it('keeps store and props in sync', async () => {
+      const onChangeMarks = jest.fn();
+      const component = new Root({ marks: [], onChangeMarks });
+
+      const newMarks = [{ id: 1 }];
+      component.store.dispatch(changeMarks(newMarks));
+
+      await waitFor(() => {
+        const state = component.store.getState();
+        expect(state.marks.present).toEqual(newMarks);
+        expect(onChangeMarks).toHaveBeenCalledWith(newMarks);
+      });
+    });
+  });
+});
+
+describe('GraphContainer (connected component)', () => {
+  it('is a connected component', () => {
+    expect(GraphContainer).toBeDefined();
+    expect(GraphContainer.displayName).toContain('Connect');
+  });
+
+  it('maps state to props', () => {
+    expect(GraphContainer).toBeDefined();
+  });
+
+  it('maps dispatch to props', () => {
+    expect(GraphContainer).toBeDefined();
+  });
+});