@pie-lib/graphing 4.0.5-next.31 → 4.0.5-next.36

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

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

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

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

package/src/container/index.jsx

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

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

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

package/src/container/reducer.js

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