@pie-lib/graphing-solution-set 4.1.0-beta.8 → 5.0.0-next.20261002094057

package/src/axis/index.js

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

package/src/bg.jsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { pointer, select } from 'd3-selection';
-import { types, utils } from '@pie-lib/plot';
-import { getTickValues, thinnerShapesNeeded } from './utils';
-
-export default class Bg extends React.Component {
-  static propTypes = {
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    onClick: PropTypes.func.isRequired,
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  static defaultProps = {};
-
-  componentDidMount() {
-    const rect = select(this.rect);
-
-    rect.on('click', (event) => this.onRectClick(rect, event));
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return (
-      !utils.isDomainRangeEqual(this.props.graphProps, nextProps.graphProps) ||
-      this.props.width !== nextProps.width ||
-      this.props.height !== nextProps.height
-    );
-  }
-
-  getRectPadding = () => {
-    const { graphProps } = this.props;
-
-    return thinnerShapesNeeded(graphProps) ? 6 : 10;
-  };
-
-  /**
-   * Note: we use d3 click + pointer to give us domain values directly.
-   * Saves us having to calculate them ourselves from a MouseEvent.
-   */
-  onRectClick = (rect, event) => {
-    const { onClick, graphProps } = this.props;
-    const { scale } = graphProps;
-
-    const padding = this.getRectPadding();
-    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);
-    const y = scale.y.invert(coords[1] - padding);
-
-    const rowTicks = getTickValues(graphProps.range);
-    const columnTicks = getTickValues(graphProps.domain);
-
-    const closest = (ticks, value) => {
-      return (
-        ticks.length &&
-        ticks.reduce((prev, curr) => {
-          const currentDistance = Math.abs(curr - value);
-          const previousDistance = Math.abs(prev - value);
-
-          return currentDistance <= previousDistance ? curr : prev;
-        })
-      );
-    };
-
-    let snapped = {};
-
-    if (columnTicks.indexOf(x) >= 0 && rowTicks.indexOf(y) >= 0) {
-      snapped.x = x;
-      snapped.y = y;
-    } else {
-      snapped.x = closest(columnTicks, x);
-      snapped.y = closest(rowTicks, y);
-    }
-
-    onClick(snapped);
-  };
-
-  render() {
-    const { width, height } = this.props;
-    const padding = this.getRectPadding();
-
-    // expand the size of clickable area so a small area outside the edges of the grid lines to be clickable
-    return (
-      <rect
-        ref={(rect) => (this.rect = rect)}
-        transform={`translate(-${padding}, -${padding})`}
-        fill="red"
-        fillOpacity="0.0"
-        width={width + padding * 2}
-        height={height + padding * 2}
-      />
-    );
-  }
-}

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

@@ -1,105 +0,0 @@
-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

@@ -1,227 +0,0 @@
-import React from 'react';
-import { render } from '@pie-lib/test-utils';
-import Root, { GraphContainer } from '../index';
-
-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('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('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('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();
-  });
-});

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

@@ -1,172 +0,0 @@
-import marks from '../marks';
-
-describe('marks reducer', () => {
-  describe('initial state', () => {
-    it('returns empty array as initial state', () => {
-      const state = marks(undefined, { type: 'INIT' });
-      expect(state).toEqual([]);
-    });
-
-    it('handles no state parameter', () => {
-      const state = marks(undefined, { type: 'UNKNOWN_ACTION' });
-      expect(Array.isArray(state)).toBe(true);
-    });
-  });
-
-  describe('CHANGE_MARKS action', () => {
-    it('updates state with new marks', () => {
-      const initialState = [];
-      const newMarks = [{ id: 1, type: 'point' }];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      const state = marks(initialState, action);
-      expect(state).toEqual(newMarks);
-    });
-
-    it('replaces existing marks', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const newMarks = [{ id: 2, type: 'line' }];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      const state = marks(initialState, action);
-      expect(state).toEqual(newMarks);
-      expect(state.length).toBe(1);
-      expect(state[0].id).toBe(2);
-    });
-
-    it('handles empty marks array', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const action = { type: 'CHANGE_MARKS', marks: [] };
-
-      const state = marks(initialState, action);
-      expect(state).toEqual([]);
-    });
-
-    it('handles multiple marks', () => {
-      const initialState = [];
-      const newMarks = [
-        { id: 1, type: 'point', x: 1, y: 2 },
-        { id: 2, type: 'line', from: { x: 0, y: 0 }, to: { x: 5, y: 5 } },
-        { id: 3, type: 'circle', center: { x: 3, y: 3 }, radius: 2 },
-      ];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      const state = marks(initialState, action);
-      expect(state).toEqual(newMarks);
-      expect(state.length).toBe(3);
-    });
-
-    it('throws error when marks is not an array', () => {
-      const initialState = [];
-      const action = { type: 'CHANGE_MARKS', marks: 'not an array' };
-
-      expect(() => marks(initialState, action)).toThrow('marks must be an array');
-    });
-
-    it('throws error when marks is null', () => {
-      const initialState = [];
-      const action = { type: 'CHANGE_MARKS', marks: null };
-
-      expect(() => marks(initialState, action)).toThrow('marks must be an array');
-    });
-
-    it('throws error when marks is undefined', () => {
-      const initialState = [];
-      const action = { type: 'CHANGE_MARKS', marks: undefined };
-
-      expect(() => marks(initialState, action)).toThrow('marks must be an array');
-    });
-
-    it('throws error when marks is an object', () => {
-      const initialState = [];
-      const action = { type: 'CHANGE_MARKS', marks: { id: 1 } };
-
-      expect(() => marks(initialState, action)).toThrow('marks must be an array');
-    });
-
-    it('throws error when marks is a number', () => {
-      const initialState = [];
-      const action = { type: 'CHANGE_MARKS', marks: 123 };
-
-      expect(() => marks(initialState, action)).toThrow('marks must be an array');
-    });
-
-    it('preserves mark properties', () => {
-      const initialState = [];
-      const newMarks = [
-        {
-          id: 1,
-          type: 'point',
-          x: 10,
-          y: 20,
-          label: 'A',
-          correctness: { value: 'correct' },
-          editable: true,
-          interactive: true,
-        },
-      ];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      const state = marks(initialState, action);
-      expect(state[0]).toEqual(newMarks[0]);
-      expect(state[0].correctness).toBeDefined();
-      expect(state[0].editable).toBe(true);
-    });
-  });
-
-  describe('unknown actions', () => {
-    it('returns current state for unknown action', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const action = { type: 'UNKNOWN_ACTION' };
-
-      const state = marks(initialState, action);
-      expect(state).toBe(initialState);
-    });
-
-    it('returns current state for ADD_MARK action', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const action = { type: 'ADD_MARK' };
-
-      const state = marks(initialState, action);
-      expect(state).toBe(initialState);
-    });
-
-    it('does not modify state for unknown actions', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const action = { type: 'SOME_OTHER_ACTION', data: 'test' };
-
-      const state = marks(initialState, action);
-      expect(state).toEqual(initialState);
-    });
-  });
-
-  describe('immutability', () => {
-    it('does not mutate original state', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const originalState = [...initialState];
-      const newMarks = [{ id: 2, type: 'line' }];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      marks(initialState, action);
-      expect(initialState).toEqual(originalState);
-    });
-
-    it('returns new array reference for CHANGE_MARKS', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const newMarks = [{ id: 1, type: 'point' }];
-      const action = { type: 'CHANGE_MARKS', marks: newMarks };
-
-      const state = marks(initialState, action);
-      expect(state).not.toBe(initialState);
-      expect(state).toBe(newMarks);
-    });
-
-    it('returns same reference for unknown actions', () => {
-      const initialState = [{ id: 1, type: 'point' }];
-      const action = { type: 'UNKNOWN_ACTION' };
-
-      const state = marks(initialState, action);
-      expect(state).toBe(initialState);
-    });
-  });
-});