@pie-lib/graphing 3.1.1-next.0 → 3.2.0-next.0

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/index.jsx

@@ -1,11 +1,10 @@
-import { connect } from 'react-redux';
+import { connect, Provider } from 'react-redux';
 import React from 'react';
-import { Provider } from 'react-redux';
 import { applyMiddleware, createStore } from 'redux';
 import reducer from './reducer';
 import { changeMarks } from './actions';
 import PropTypes from 'prop-types';
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash-es';
 import { ActionCreators } from 'redux-undo';
 import GraphWithControls from '../graph-with-controls';
 import { lastActionMiddleware } from './middleware';

package/src/coordinates-label.jsx

@@ -51,13 +51,7 @@ export const CoordinatesLabel = ({ x, y, graphProps }) => {
     ...labelPosition,
   };
 
-  return (
-    <StyledInputBase
-      style={style}
-      value={label}
-      inputProps={{ ariaLabel: 'naked' }}
-    />
-  );
+  return <StyledInputBase style={style} value={label} inputProps={{ ariaLabel: 'naked' }} />;
 };
 
 CoordinatesLabel.propTypes = {

package/src/graph-with-controls.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import uniq from 'lodash/uniq';
-import isString from 'lodash/isString';
+import { isString, uniq } from 'lodash-es';
 import { color } from '@pie-lib/render-ui';
 
 import ToolMenu from './tool-menu';
@@ -66,7 +65,12 @@ export const filterByVisibleToolTypes = (toolbarTools, marks) =>
 const getDefaultCurrentTool = (toolType) => toolsArr.find((tool) => tool.type === toolType) || null;
 
 const Collapsible = ({ children, title }) => (
-  <StyledAccordion elevation={0} disableGutters={true} square={true} TransitionProps={{ timeout: { enter: 225, exit: 195 } }}>
+  <StyledAccordion
+    elevation={0}
+    disableGutters={true}
+    square={true}
+    TransitionProps={{ timeout: { enter: 225, exit: 195 } }}
+  >
     <StyledAccordionSummary expandIcon={<ExpandMoreIcon />}>
       <Typography variant="subheading">{title}</Typography>
     </StyledAccordionSummary>
@@ -193,9 +197,7 @@ export class GraphWithControls extends React.Component {
       <StyledGraphContainer className={className}>
         <StyledControls>
           {collapsibleToolbar ? (
-            <Collapsible title={collapsibleToolbarTitle}>
-              {graphActions}
-            </Collapsible>
+            <Collapsible title={collapsibleToolbarTitle}>{graphActions}</Collapsible>
           ) : (
             graphActions
           )}

package/src/graph.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import isEqual from 'lodash/isEqual';
-import cloneDeep from 'lodash/cloneDeep';
-import { Root, types, createGraphProps } from '@pie-lib/plot';
+import { cloneDeep, isEqual } from 'lodash-es';
+import { createGraphProps, Root, types } from '@pie-lib/plot';
 import debug from 'debug';
 
 import { Axes, AxisPropTypes } from './axis';

package/src/grid-setup.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { color, InputContainer } from '@pie-lib/render-ui';
-import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';
 import EditableHTML from '@pie-lib/editable-html-tip-tap';

package/src/key-legend.jsx

@@ -110,7 +110,8 @@ const KeyLegend = ({ className, isLabelAvailable }) => {
           <path
             d="M12.1953 4.46875C12.3125 4.35156 12.5 4.35156 12.5938 4.46875L13.2734 5.125C13.3672 5.24219 13.3672 5.42969 13.2734 5.52344L6.24219 12.5547C6.125 12.6719 5.96094 12.6719 5.84375 12.5547L2.70312 9.4375C2.60938 9.32031 2.60938 9.13281 2.70312 9.03906L3.38281 8.35938C3.47656 8.26562 3.66406 8.26562 3.78125 8.35938L6.03125 10.6328L12.1953 4.46875Z"
             fill="white"
-          />          </svg>
+          />{' '}
+        </svg>
       </StyledRow>
       {isLabelAvailable && (
         <StyledRow>

package/src/mark-label.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { styled, useTheme } from '@mui/material/styles';
 import AutosizeInput from 'react-input-autosize';
@@ -53,9 +53,9 @@ const getInputStyles = (theme, disabled, markDisabled) => ({
   padding: theme.spacing(0.5),
   fontFamily: theme.typography.fontFamily,
   fontSize: '10px',
-  border: disabled 
+  border: disabled
     ? `solid 1px ${color.defaults.PRIMARY_DARK}`
-    : markDisabled 
+    : markDisabled
       ? `solid 1px ${color.disabled()}`
       : `solid 1px ${color.defaults.SECONDARY}`,
   borderRadius: '3px',
@@ -208,37 +208,20 @@ export const MarkLabel = (props) => {
             renderInput(studentInputStyle, label)
           )}
         </StyledInputIncorrect>
-        <StyledInputMissing style={secondLabelStyle}>
-          {renderInput(studentInputStyle, correctlabel)}
-        </StyledInputMissing>
+        <StyledInputMissing style={secondLabelStyle}>{renderInput(studentInputStyle, correctlabel)}</StyledInputMissing>
       </>
     );
   }
 
   if (correctness === 'missing') {
-    return (
-      <StyledInputMissing style={style}>
-        {renderInput(studentInputStyle, label)}
-      </StyledInputMissing>
-    );
+    return <StyledInputMissing style={style}>{renderInput(studentInputStyle, label)}</StyledInputMissing>;
   }
 
   if (correctness === 'incorrect') {
-    return (
-      <StyledIncorrect style={style}>
-        {renderInput(studentInputStyle, label)}
-      </StyledIncorrect>
-    );
+    return <StyledIncorrect style={style}>{renderInput(studentInputStyle, label)}</StyledIncorrect>;
   }
 
-  return (
-    <div style={style}>
-      {renderInput(
-        getInputStyles(theme, disabled, mark.disabled),
-        label,
-      )}
-    </div>
-  );
+  return <div style={style}>{renderInput(getInputStyles(theme, disabled, mark.disabled), label)}</div>;
 };
 
 MarkLabel.propTypes = {

package/src/toggle-bar.jsx

@@ -158,7 +158,14 @@ export class ToggleBar extends React.Component {
 
 // DragTool functional component using @dnd-kit hooks
 function DragTool({ children, index, draggable, toolRef, value }) {
-  const { attributes, listeners, setNodeRef: setDragNodeRef, transform, transition, isDragging } = useDraggable({
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useDraggable({
     id: `tool-${value}-${index}`,
     disabled: !draggable,
     data: {

package/src/tools/absolute/__tests__/component.test.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { withRootEdge } from '../../shared/line/with-root-edge';
-import { buildDataPoints, absoluteFromTwoPoints } from '@pie-lib/graphing-utils';
+import { absoluteFromTwoPoints, buildDataPoints } from '@pie-lib/graphing-utils';
 import { utils } from '@pie-lib/plot';
 
 import { graphProps as getGraphProps } from '../../../__tests__/utils';

package/src/tools/absolute/component.jsx

@@ -1,6 +1,6 @@
 import debug from 'debug';
-import { buildDataPoints, absoluteFromTwoPoints } from '@pie-lib/graphing-utils';
-import { withRootEdge, rootEdgeComponent } from '../shared/line/with-root-edge';
+import { absoluteFromTwoPoints, buildDataPoints } from '@pie-lib/graphing-utils';
+import { rootEdgeComponent, withRootEdge } from '../shared/line/with-root-edge';
 
 const log = debug('pie-lib:graphing:absolute');