@pie-lib/graphing 4.1.0-beta.7 → 5.0.0-next.36

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

@@ -1,235 +0,0 @@
-import { getLastAction, lastActionMiddleware } from '../middleware';
-
-describe('lastActionMiddleware', () => {
-  describe('middleware functionality', () => {
-    it('creates middleware function', () => {
-      const middleware = lastActionMiddleware();
-      expect(typeof middleware).toBe('function');
-    });
-
-    it('middleware returns a function', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const result = middleware(next);
-      expect(typeof result).toBe('function');
-    });
-
-    it('calls next with action', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const dispatch = middleware(next);
-      const action = { type: 'TEST_ACTION' };
-
-      dispatch(action);
-      expect(next).toHaveBeenCalledWith(action);
-    });
-
-    it('returns result from next', () => {
-      const middleware = lastActionMiddleware();
-      const expectedResult = { status: 'success' };
-      const next = jest.fn(() => expectedResult);
-      const dispatch = middleware(next);
-      const action = { type: 'TEST_ACTION' };
-
-      const result = dispatch(action);
-      expect(result).toBe(expectedResult);
-    });
-
-    it('stores action before calling next', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn(() => {
-        const lastAction = getLastAction();
-        expect(lastAction).toBeDefined();
-        expect(lastAction.type).toBe('TEST_ACTION');
-      });
-      const dispatch = middleware(next);
-      const action = { type: 'TEST_ACTION' };
-
-      dispatch(action);
-      expect(next).toHaveBeenCalled();
-    });
-  });
-
-  describe('getLastAction', () => {
-    it('returns null initially', () => {
-      const lastAction = getLastAction();
-      expect(lastAction).toBeDefined();
-    });
-
-    it('returns last dispatched action', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const dispatch = middleware(next);
-      const action = { type: 'MY_ACTION', payload: 'test' };
-
-      dispatch(action);
-      const lastAction = getLastAction();
-
-      expect(lastAction).toEqual(action);
-      expect(lastAction.type).toBe('MY_ACTION');
-      expect(lastAction.payload).toBe('test');
-    });
-
-    it('updates when new action is dispatched', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const dispatch = middleware(next);
-
-      const action1 = { type: 'ACTION_1' };
-      dispatch(action1);
-      expect(getLastAction()).toEqual(action1);
-
-      const action2 = { type: 'ACTION_2' };
-      dispatch(action2);
-      expect(getLastAction()).toEqual(action2);
-    });
-
-    it('stores action with payload', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const dispatch = middleware(next);
-      const action = {
-        type: 'CHANGE_MARKS',
-        marks: [{ id: 1, type: 'point' }],
-      };
-
-      dispatch(action);
-      const lastAction = getLastAction();
-
-      expect(lastAction.marks).toEqual(action.marks);
-      expect(lastAction.marks.length).toBe(1);
-    });
-
-    it('stores action with complex payload', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const dispatch = middleware(next);
-      const action = {
-        type: 'COMPLEX_ACTION',
-        data: {
-          nested: {
-            value: 123,
-            array: [1, 2, 3],
-          },
-        },
-      };
-
-      dispatch(action);
-      const lastAction = getLastAction();
-
-      expect(lastAction.data.nested.value).toBe(123);
-      expect(lastAction.data.nested.array).toEqual([1, 2, 3]);
-    });
-  });
-
-  describe('action storage', () => {
-    it('overwrites previous action', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const dispatch = middleware(next);
-
-      dispatch({ type: 'FIRST' });
-      dispatch({ type: 'SECOND' });
-      dispatch({ type: 'THIRD' });
-
-      const lastAction = getLastAction();
-      expect(lastAction.type).toBe('THIRD');
-    });
-
-    it('stores reference to action object', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const dispatch = middleware(next);
-      const action = { type: 'TEST', data: { value: 1 } };
-
-      dispatch(action);
-      const lastAction = getLastAction();
-
-      // Modify original action
-      action.data.value = 2;
-
-      // Last action should reflect the change (same reference)
-      expect(lastAction.data.value).toBe(2);
-    });
-  });
-
-  describe('integration scenarios', () => {
-    it('works with multiple middleware calls', () => {
-      const middleware = lastActionMiddleware();
-      const next1 = jest.fn();
-      const next2 = jest.fn();
-
-      const dispatch1 = middleware(next1);
-      const dispatch2 = middleware(next2);
-
-      dispatch1({ type: 'ACTION_1' });
-      expect(getLastAction().type).toBe('ACTION_1');
-
-      dispatch2({ type: 'ACTION_2' });
-      expect(getLastAction().type).toBe('ACTION_2');
-    });
-
-    it('preserves action types', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const dispatch = middleware(next);
-
-      const actionTypes = ['ADD_MARK', 'CHANGE_MARKS', 'DELETE_MARK', 'UPDATE_MARK'];
-
-      actionTypes.forEach((type) => {
-        dispatch({ type });
-        expect(getLastAction().type).toBe(type);
-      });
-    });
-
-    it('handles actions without type', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const dispatch = middleware(next);
-      const action = { payload: 'data' };
-
-      dispatch(action);
-      const lastAction = getLastAction();
-
-      expect(lastAction).toEqual(action);
-      expect(lastAction.type).toBeUndefined();
-    });
-
-    it('handles empty action object', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn();
-      const dispatch = middleware(next);
-      const action = {};
-
-      dispatch(action);
-      const lastAction = getLastAction();
-
-      expect(lastAction).toEqual(action);
-    });
-  });
-
-  describe('error handling', () => {
-    it('stores action even if next throws error', () => {
-      const middleware = lastActionMiddleware();
-      const next = jest.fn(() => {
-        throw new Error('Next error');
-      });
-      const dispatch = middleware(next);
-      const action = { type: 'ERROR_ACTION' };
-
-      expect(() => dispatch(action)).toThrow('Next error');
-      expect(getLastAction()).toEqual(action);
-    });
-
-    it('propagates errors from next', () => {
-      const middleware = lastActionMiddleware();
-      const errorMessage = 'Test error';
-      const next = jest.fn(() => {
-        throw new Error(errorMessage);
-      });
-      const dispatch = middleware(next);
-
-      expect(() => dispatch({ type: 'TEST' })).toThrow(errorMessage);
-    });
-  });
-});

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

@@ -1,324 +0,0 @@
-import reducer from '../reducer';
-import { changeMarks } from '../actions';
-
-describe('container reducer', () => {
-  describe('reducer creation', () => {
-    it('creates a reducer function', () => {
-      const rootReducer = reducer();
-      expect(typeof rootReducer).toBe('function');
-    });
-
-    it('returns an object with marks property', () => {
-      const rootReducer = reducer();
-      const state = rootReducer(undefined, { type: 'INIT' });
-      expect(state).toHaveProperty('marks');
-    });
-
-    it('wraps marks reducer with undoable', () => {
-      const rootReducer = reducer();
-      const state = rootReducer(undefined, { type: 'INIT' });
-
-      expect(state.marks).toHaveProperty('past');
-      expect(state.marks).toHaveProperty('present');
-      expect(state.marks).toHaveProperty('future');
-    });
-  });
-
-  describe('initial state', () => {
-    it('initializes with empty past', () => {
-      const rootReducer = reducer();
-      const state = rootReducer(undefined, { type: 'INIT' });
-
-      expect(state.marks.past).toEqual([]);
-    });
-
-    it('initializes with empty present', () => {
-      const rootReducer = reducer();
-      const state = rootReducer(undefined, { type: 'INIT' });
-
-      expect(state.marks.present).toEqual([]);
-    });
-
-    it('initializes with empty future', () => {
-      const rootReducer = reducer();
-      const state = rootReducer(undefined, { type: 'INIT' });
-
-      expect(state.marks.future).toEqual([]);
-    });
-  });
-
-  describe('CHANGE_MARKS action', () => {
-    it('updates present with new marks', () => {
-      const rootReducer = reducer();
-      const newMarks = [{ id: 1, type: 'point', x: 5, y: 10 }];
-      const action = changeMarks(newMarks);
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, action);
-
-      expect(state.marks.present).toEqual(newMarks);
-    });
-
-    it('adds previous state to past', () => {
-      const rootReducer = reducer();
-      const firstMarks = [{ id: 1, type: 'point' }];
-      const secondMarks = [{ id: 2, type: 'line' }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(firstMarks));
-      state = rootReducer(state, changeMarks(secondMarks));
-
-      expect(state.marks.past.length).toBeGreaterThan(0);
-      expect(state.marks.present).toEqual(secondMarks);
-    });
-
-    it('clears future on new action', () => {
-      const rootReducer = reducer();
-      const firstMarks = [{ id: 1, type: 'point' }];
-      const secondMarks = [{ id: 2, type: 'line' }];
-      const thirdMarks = [{ id: 3, type: 'circle' }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(firstMarks));
-      state = rootReducer(state, changeMarks(secondMarks));
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-
-      expect(state.marks.future.length).toBeGreaterThan(0);
-
-      state = rootReducer(state, changeMarks(thirdMarks));
-      expect(state.marks.future).toEqual([]);
-    });
-
-    it('handles empty marks array', () => {
-      const rootReducer = reducer();
-      const action = changeMarks([]);
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, action);
-
-      expect(state.marks.present).toEqual([]);
-    });
-
-    it('handles multiple marks', () => {
-      const rootReducer = reducer();
-      const marks = [
-        { 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 = changeMarks(marks);
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, action);
-
-      expect(state.marks.present).toEqual(marks);
-      expect(state.marks.present.length).toBe(3);
-    });
-  });
-
-  describe('undo functionality', () => {
-    it('supports undo action', () => {
-      const rootReducer = reducer();
-      const firstMarks = [{ id: 1, type: 'point' }];
-      const secondMarks = [{ id: 2, type: 'line' }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(firstMarks));
-      state = rootReducer(state, changeMarks(secondMarks));
-
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-
-      expect(state.marks.present).toEqual(firstMarks);
-    });
-
-    it('moves present to future on undo', () => {
-      const rootReducer = reducer();
-      const firstMarks = [{ id: 1, type: 'point' }];
-      const secondMarks = [{ id: 2, type: 'line' }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(firstMarks));
-      state = rootReducer(state, changeMarks(secondMarks));
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-
-      expect(state.marks.future.length).toBeGreaterThan(0);
-    });
-
-    it('handles multiple undos', () => {
-      const rootReducer = reducer();
-      const marks1 = [{ id: 1 }];
-      const marks2 = [{ id: 2 }];
-      const marks3 = [{ id: 3 }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(marks1));
-      state = rootReducer(state, changeMarks(marks2));
-      state = rootReducer(state, changeMarks(marks3));
-
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-
-      expect(state.marks.present).toEqual(marks1);
-    });
-
-    it('does not undo beyond initial state', () => {
-      const rootReducer = reducer();
-      const marks = [{ id: 1, type: 'point' }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(marks));
-
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-
-      expect(state.marks.present).toEqual([]);
-      expect(state.marks.past).toEqual([]);
-    });
-  });
-
-  describe('redo functionality', () => {
-    it('supports redo action', () => {
-      const rootReducer = reducer();
-      const firstMarks = [{ id: 1, type: 'point' }];
-      const secondMarks = [{ id: 2, type: 'line' }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(firstMarks));
-      state = rootReducer(state, changeMarks(secondMarks));
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-
-      // Redo
-      state = rootReducer(state, { type: '@@redux-undo/REDO' });
-
-      expect(state.marks.present).toEqual(secondMarks);
-    });
-
-    it('moves future to past on redo', () => {
-      const rootReducer = reducer();
-      const firstMarks = [{ id: 1, type: 'point' }];
-      const secondMarks = [{ id: 2, type: 'line' }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(firstMarks));
-      state = rootReducer(state, changeMarks(secondMarks));
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-
-      const futureBeforeRedo = state.marks.future.length;
-      state = rootReducer(state, { type: '@@redux-undo/REDO' });
-
-      expect(state.marks.future.length).toBe(futureBeforeRedo - 1);
-    });
-
-    it('handles multiple redos', () => {
-      const rootReducer = reducer();
-      const marks1 = [{ id: 1 }];
-      const marks2 = [{ id: 2 }];
-      const marks3 = [{ id: 3 }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(marks1));
-      state = rootReducer(state, changeMarks(marks2));
-      state = rootReducer(state, changeMarks(marks3));
-
-      // undo twice, then redo twice
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-      state = rootReducer(state, { type: '@@redux-undo/REDO' });
-      state = rootReducer(state, { type: '@@redux-undo/REDO' });
-
-      expect(state.marks.present).toEqual(marks3);
-    });
-
-    it('does not redo beyond last state', () => {
-      const rootReducer = reducer();
-      const marks = [{ id: 1, type: 'point' }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(marks));
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-      state = rootReducer(state, { type: '@@redux-undo/REDO' });
-
-      // try to redo beyond the end
-      state = rootReducer(state, { type: '@@redux-undo/REDO' });
-      state = rootReducer(state, { type: '@@redux-undo/REDO' });
-
-      expect(state.marks.present).toEqual(marks);
-      expect(state.marks.future).toEqual([]);
-    });
-  });
-
-  describe('state structure', () => {
-    it('maintains correct undoable structure', () => {
-      const rootReducer = reducer();
-      const state = rootReducer(undefined, { type: 'INIT' });
-
-      expect(state.marks).toHaveProperty('past');
-      expect(state.marks).toHaveProperty('present');
-      expect(state.marks).toHaveProperty('future');
-      expect(Array.isArray(state.marks.past)).toBe(true);
-      expect(Array.isArray(state.marks.future)).toBe(true);
-    });
-
-    it('preserves mark properties through undo/redo', () => {
-      const rootReducer = reducer();
-      const marks = [
-        {
-          id: 1,
-          type: 'point',
-          x: 10,
-          y: 20,
-          label: 'A',
-          correctness: { value: 'correct' },
-        },
-      ];
-
-      let state = rootReducer(undefined, { type: 'INIT' });
-      state = rootReducer(state, changeMarks(marks));
-      state = rootReducer(state, changeMarks([]));
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-
-      expect(state.marks.present).toEqual(marks);
-      expect(state.marks.present[0]).toBeDefined();
-      if (state.marks.present[0]) {
-        expect(state.marks.present[0]).toEqual(marks[0]);
-        expect(state.marks.present[0].correctness).toBeDefined();
-      }
-    });
-  });
-
-  describe('integration', () => {
-    it('handles complex undo/redo sequences', () => {
-      const rootReducer = reducer();
-      const marks1 = [{ id: 1 }];
-      const marks2 = [{ id: 2 }];
-      const marks3 = [{ id: 3 }];
-      const marks4 = [{ id: 4 }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks(marks1));
-      state = rootReducer(state, changeMarks(marks2));
-      state = rootReducer(state, changeMarks(marks3));
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' }); // back to marks2
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' }); // back to marks1
-      state = rootReducer(state, { type: '@@redux-undo/REDO' }); // forward to marks2
-      state = rootReducer(state, changeMarks(marks4));
-
-      expect(state.marks.present).toEqual(marks4);
-      expect(state.marks.future).toEqual([]);
-    });
-
-    it('works with empty state transitions', () => {
-      const rootReducer = reducer();
-      const marks = [{ id: 1 }];
-
-      let state = rootReducer(undefined, { type: '@@INIT' });
-      state = rootReducer(state, changeMarks([]));
-      state = rootReducer(state, changeMarks(marks));
-      state = rootReducer(state, changeMarks([]));
-      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
-
-      expect(state.marks.present).toEqual(marks);
-    });
-  });
-});

package/src/container/actions.js

@@ -1,8 +0,0 @@
-export const addMark = () => ({
-  type: 'ADD_MARK',
-});
-
-export const changeMarks = (marks) => ({
-  type: 'CHANGE_MARKS',
-  marks,
-});

package/src/container/index.jsx

@@ -1,91 +0,0 @@
-import { connect, Provider } from 'react-redux';
-import React from 'react';
-import { applyMiddleware, createStore } from 'redux';
-import reducer from './reducer';
-import { changeMarks } from './actions';
-import PropTypes from 'prop-types';
-import { isEqual } from 'lodash-es';
-import { ActionCreators } from 'redux-undo';
-import GraphWithControls from '../graph-with-controls';
-import { lastActionMiddleware } from './middleware';
-
-const mapStateToProps = (s) => ({
-  marks: s.marks.present,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  onChangeMarks: (m) => dispatch(changeMarks(m)),
-  onUndo: () => dispatch(ActionCreators.undo()),
-  onRedo: () => dispatch(ActionCreators.redo()),
-  onReset: () => dispatch(changeMarks([])),
-});
-
-export const GraphContainer = connect(mapStateToProps, mapDispatchToProps)(GraphWithControls);
-
-/**
- * The graph component entry point with undo/redo
- * Redux is an implementation detail, hide it in the react component.
- */
-class Root extends React.Component {
-  static propTypes = {
-    onChangeMarks: PropTypes.func,
-    marks: PropTypes.array,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const r = reducer();
-    this.store = createStore(r, { marks: props.marks }, applyMiddleware(lastActionMiddleware));
-
-    this.store.subscribe(this.onStoreChange);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { marks } = this.props;
-    const storeState = this.store.getState();
-
-    if (isEqual(storeState.marks.present, marks)) {
-      return;
-    }
-
-    if (!isEqual(prevProps.marks, marks)) {
-      // Don't dispatch marks that have correctness (evaluate mode marks) into the undo history.
-      // These marks are already handled in render() via the correctnessSet path and bypass the
-      // Redux store entirely. Dispatching them would pollute the undo history and cause the graph
-      // to show the correct answer when the user presses undo after returning to gather mode.
-      const hasCorrectness = marks && marks.find((m) => m.correctness);
-
-      if (!hasCorrectness) {
-        this.store.dispatch(changeMarks(marks));
-      }
-    }
-  }
-
-  onStoreChange = () => {
-    const { marks, onChangeMarks } = this.props;
-    const storeState = this.store.getState();
-
-    if (!isEqual(storeState.marks.present, marks)) {
-      onChangeMarks(storeState.marks.present);
-    }
-  };
-
-  render() {
-    // eslint-disable-next-line no-unused-vars
-    const { onChangeMarks, marks, ...rest } = this.props;
-    const correctnessSet = marks && marks.find((m) => m.correctness);
-
-    if (correctnessSet) {
-      return <GraphWithControls {...rest} marks={marks} disabled={correctnessSet} />;
-    }
-
-    return (
-      <Provider store={this.store}>
-        <GraphContainer {...rest} />
-      </Provider>
-    );
-  }
-}
-
-export default Root;

package/src/container/marks.js

@@ -1,14 +0,0 @@
-const marks = (state = [], action) => {
-  switch (action.type) {
-    case 'CHANGE_MARKS':
-      if (Array.isArray(action.marks)) {
-        return action.marks;
-      } else {
-        throw new Error('marks must be an array');
-      }
-    default:
-      return state;
-  }
-};
-
-export default marks;

package/src/container/middleware.js

@@ -1,7 +0,0 @@
-let lastAction = null;
-export const getLastAction = () => lastAction;
-
-export const lastActionMiddleware = () => (next) => (action) => {
-  lastAction = action;
-  return next(action);
-};

package/src/container/reducer.js

@@ -1,5 +0,0 @@
-import { combineReducers } from 'redux';
-import marks from './marks';
-import undoable from 'redux-undo';
-
-export default () => combineReducers({ marks: undoable(marks, { debug: false }) });