@pie-lib/graphing 2.46.0-mui-update.0 → 3.0.0-next.0

package/src/__tests__/undo-redo.test.jsx

@@ -1,25 +1,24 @@
-import { shallow } from 'enzyme';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import UndoRedo from '../undo-redo';
 
 describe('UndoRedo', () => {
-  let w;
   let onUndo = jest.fn();
   let onRedo = jest.fn();
   let onReset = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       onUndo,
       onRedo,
       onReset,
     };
     const props = { ...defaults, ...extras };
-    return shallow(<UndoRedo {...props} />);
+    return render(<UndoRedo {...props} />);
   };
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });

package/src/__tests__/utils.js

@@ -1,6 +1,9 @@
 export const scaleMock = () => {
   const fn = jest.fn((n) => n);
   fn.invert = jest.fn((n) => n);
+  fn.domain = jest.fn(() => fn);
+  fn.range = jest.fn(() => fn);
+  fn.copy = jest.fn(() => scaleMock());
   return fn;
 };
 

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

@@ -1,11 +1,10 @@
-import { shallow } from 'enzyme';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { Arrow } from '../arrow';
 
 describe('Arrow', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -16,24 +15,24 @@ describe('Arrow', () => {
       },
     };
     const props = { ...defaults, ...extras };
-    return shallow(<Arrow {...props} />);
+    return render(<Arrow {...props} />);
   };
-  describe('snapshot', () => {
-    it('up', () => {
-      w = wrapper({ direction: 'up' });
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders with direction up', () => {
+      const { container } = renderComponent({ direction: 'up' });
+      expect(container.firstChild).toBeInTheDocument();
     });
-    it('down', () => {
-      w = wrapper({ direction: 'down' });
-      expect(w).toMatchSnapshot();
+    it('renders with direction down', () => {
+      const { container } = renderComponent({ direction: 'down' });
+      expect(container.firstChild).toBeInTheDocument();
     });
-    it('left', () => {
-      w = wrapper({ direction: 'left' });
-      expect(w).toMatchSnapshot();
+    it('renders with direction left', () => {
+      const { container } = renderComponent({ direction: 'left' });
+      expect(container.firstChild).toBeInTheDocument();
     });
-    it('right', () => {
-      w = wrapper({ direction: 'right' });
-      expect(w).toMatchSnapshot();
+    it('renders with direction right', () => {
+      const { container } = renderComponent({ direction: 'right' });
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });

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

@@ -1,13 +1,12 @@
-import { shallow } from 'enzyme';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { graphProps } from '../../__tests__/utils';
 
 import Axes, { RawXAxis, RawYAxis, firstNegativeValue, sharedValues } from '../axes';
 
 describe('RawXAxis', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -19,22 +18,25 @@ describe('RawXAxis', () => {
         up: true,
         down: true,
       },
+      columnTicksValues: [-1, 0, 1],
+      skipValues: [],
+      distanceFromOriginToFirstNegativeY: 0,
+      dy: 0,
     };
     const props = { ...defaults, ...extras };
-    return shallow(<RawXAxis {...props} />);
+    return render(<RawXAxis {...props} />);
   };
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });
 
 describe('RawYAxis', () => {
-  let w;
   let onChange = jest.fn();
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -46,14 +48,16 @@ describe('RawYAxis', () => {
         up: true,
         down: true,
       },
+      rowTickValues: [-1, 0, 1],
+      skipValues: [],
     };
     const props = { ...defaults, ...extras };
-    return shallow(<RawYAxis {...props} />);
+    return render(<RawYAxis {...props} />);
   };
-  describe('snapshot', () => {
-    it('renders', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 });
@@ -61,11 +65,13 @@ describe('RawYAxis', () => {
 const customScaleMock = (distance) => {
   const fn = jest.fn((n) => n * distance);
   fn.invert = jest.fn((n) => n * distance);
+  fn.domain = jest.fn(() => fn);
+  fn.range = jest.fn(() => fn);
+  fn.copy = jest.fn(() => customScaleMock(distance));
   return fn;
 };
 
-describe.only('Axes', () => {
-  let w;
+describe('Axes', () => {
   let onChange = jest.fn();
 
   const customGraphProps = {
@@ -88,7 +94,7 @@ describe.only('Axes', () => {
     },
   };
 
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -97,124 +103,114 @@ describe.only('Axes', () => {
     };
 
     const props = { ...defaults, ...extras };
-    return shallow(<Axes {...props} />);
+    return render(<Axes {...props} />);
   };
-  describe('xValues', () => {
-    it('renders', () => {
-      w = wrapper();
-      const result = w.instance().xValues();
-      expect(result).toEqual({
-        columnTicksValues: expect.arrayContaining([-2, -1, 0, 1, 2]),
-        distanceFromOriginToFirstNegativeX: 150,
-        firstNegativeX: -1,
-      });
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
-  describe('yValues', () => {
-    it('renders', () => {
-      w = wrapper();
-      const result = w.instance().yValues();
-      expect(result).toEqual({
-        rowTickValues: expect.arrayContaining([-2, -1, 0, 1, 2]),
-        distanceFromOriginToFirstNegativeY: 200,
-        firstNegativeY: -1,
-      });
-    });
-  });
-});
-
-describe('firstNegativeValue should return undefiend for undefined interval', () => {
-  const interval = undefined;
-  const result = firstNegativeValue(interval);
-  expect(result).toEqual(undefined);
-});
-
-describe('firstNegativeValue should return undefiend for empty interval', () => {
-  const interval = [];
-  const result = firstNegativeValue(interval);
-  expect(result).toEqual(undefined);
 });
 
-describe('firstNegativeValue should return undefined if there is no negative in interval array', () => {
-  const interval = [1, 5, 7, 4, 5];
-  const result = firstNegativeValue(interval);
-  expect(result).toEqual(undefined);
-});
-
-describe('firstNegativeValue should return first negative number from interval', () => {
-  const interval = [1, 5, 7, -2, 4, 5, -1];
-  const result = firstNegativeValue(interval);
-  expect(result).toEqual(-2);
-});
-
-describe('skipValue should be empty array if firstNegativeValue for one of the axes is undefined', () => {
-  // x
-  const intervalX = [1, 2, 3, 4, 5, 6];
-  const firstNegativeX = firstNegativeValue(intervalX);
-  const distanceFromOriginToFirstNegativeX = -22;
-
-  // y
-  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
-  const firstNegativeY = firstNegativeValue(intervalY);
-  const distanceFromOriginToFirstNegativeY = -22;
+describe('firstNegativeValue', () => {
+  it('should return undefined for undefined interval', () => {
+    const interval = undefined;
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
 
-  const deltaAllowance = 5;
+  it('should return undefined for empty interval', () => {
+    const interval = [];
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
 
-  const result = sharedValues(
-    firstNegativeX,
-    firstNegativeY,
-    distanceFromOriginToFirstNegativeX,
-    distanceFromOriginToFirstNegativeY,
-    deltaAllowance,
-  );
+  it('should return undefined if there is no negative in interval array', () => {
+    const interval = [1, 5, 7, 4, 5];
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
 
-  expect(result).toEqual([]);
+  it('should return first negative number from interval', () => {
+    const interval = [1, 5, 7, -2, 4, 5, -1];
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(-2);
+  });
 });
 
-describe('skipValue should be empty array if firstNegativeX and firstNegativeY are equal but they do not overlap', () => {
-  // x
-  const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
-  const firstNegativeX = firstNegativeValue(intervalX);
-  const distanceFromOriginToFirstNegativeX = -7;
-
-  // y
-  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
-  const firstNegativeY = firstNegativeValue(intervalY);
-  const distanceFromOriginToFirstNegativeY = -22;
-
-  const deltaAllowance = 5;
-
-  const result = sharedValues(
-    firstNegativeX,
-    firstNegativeY,
-    distanceFromOriginToFirstNegativeX,
-    distanceFromOriginToFirstNegativeY,
-    deltaAllowance,
-  );
+describe('sharedValues', () => {
+  it('should be empty array if firstNegativeValue for one of the axes is undefined', () => {
+    // x
+    const intervalX = [1, 2, 3, 4, 5, 6];
+    const firstNegativeX = firstNegativeValue(intervalX);
+    const distanceFromOriginToFirstNegativeX = -22;
+
+    // y
+    const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeY = firstNegativeValue(intervalY);
+    const distanceFromOriginToFirstNegativeY = -22;
+
+    const deltaAllowance = 5;
+
+    const result = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+    );
+
+    expect(result).toEqual([]);
+  });
 
-  expect(result).toEqual([]);
-});
+  it('should be empty array if firstNegativeX and firstNegativeY are equal but they do not overlap', () => {
+    // x
+    const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeX = firstNegativeValue(intervalX);
+    const distanceFromOriginToFirstNegativeX = -7;
 
-describe('skipValue should be -1 if firstNegativeX and firstNegativeY are equal and they overlap', () => {
-  // x
-  const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
-  const firstNegativeX = firstNegativeValue(intervalX);
-  const distanceFromOriginToFirstNegativeX = -20;
+    // y
+    const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeY = firstNegativeValue(intervalY);
+    const distanceFromOriginToFirstNegativeY = -22;
 
-  // y
-  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
-  const firstNegativeY = firstNegativeValue(intervalY);
-  const distanceFromOriginToFirstNegativeY = -22;
+    const deltaAllowance = 5;
 
-  const deltaAllowance = 5;
+    const result = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+    );
 
-  const result = sharedValues(
-    firstNegativeX,
-    firstNegativeY,
-    distanceFromOriginToFirstNegativeX,
-    distanceFromOriginToFirstNegativeY,
-    deltaAllowance,
-  );
+    expect(result).toEqual([]);
+  });
 
-  expect(result).toEqual([-1]);
+  it('should be -1 if firstNegativeX and firstNegativeY are equal and they overlap', () => {
+    // x
+    const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeX = firstNegativeValue(intervalX);
+    const distanceFromOriginToFirstNegativeX = -20;
+
+    // y
+    const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeY = firstNegativeValue(intervalY);
+    const distanceFromOriginToFirstNegativeY = -22;
+
+    const deltaAllowance = 5;
+    const dy = -20; // dy needs to be within the range for the condition to pass
+
+    const result = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+      dy,
+    );
+
+    expect(result).toEqual([-1]);
+  });
 });

package/src/axis/axes.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Axis } from '@vx/axis';
+import { Axis } from '@visx/axis';
 import { types } from '@pie-lib/plot';
 import PropTypes from 'prop-types';
 import Arrow from './arrow';
@@ -41,11 +41,11 @@ const StyledAxisLabelHolder = styled('div')(({ theme }) => ({
 }));
 
 const StyledAxesGroup = styled('g')(() => ({
-  '& .vx-axis-line': {
+  '& .visx-axis-line': {
     stroke: color.defaults.PRIMARY,
     strokeWidth: 3,
   },
-  '& .vx-axis-tick': {
+  '& .visx-axis-tick': {
     fill: color.defaults.PRIMARY,
     '& line': {
       stroke: color.defaults.PRIMARY,
@@ -102,12 +102,6 @@ export class RawXAxis extends React.Component {
     } = this.props;
     const { scale, domain, size, range } = graphProps || {};
 
-    // Having 0 as a number in columnTicksValues does not make 0 to show up
-    // so we use this trick, by defining it as a string:
-    const tickValues =
-      (domain.labelStep || range.labelStep) && domain.min <= 0 ? ['0', ...columnTicksValues] : columnTicksValues;
-    // However, the '0' has to be displayed only if other tick labels (y-axis or x-axis) are displayed
-
     const labelProps = (label) => {
       const y = skipValues && skipValues[0] === label ? distanceFromOriginToFirstNegativeY + 4 : dy;
 
@@ -115,8 +109,8 @@ export class RawXAxis extends React.Component {
         ...tickLabelStyles,
         textAnchor: 'middle',
         y: y,
-        dx: label === '0' ? -10 : 0,
-        dy: label === '0' ? -7 : 0,
+        dx: label === 0 ? -10 : 0,
+        dy: label === 0 ? -7 : 0,
       };
     };
 
@@ -134,7 +128,8 @@ export class RawXAxis extends React.Component {
           rangePadding={8}
           tickFormat={(value) => value}
           tickLabelProps={labelProps}
-          tickValues={tickValues}
+          tickValues={columnTicksValues}
+          hideZero={!(domain.labelStep || range.labelStep) && domain.min <= 0}
         />
         {includeArrows && includeArrows.left && (
           <StyledArrow direction="left" x={domain.min} y={0} scale={scale} />

package/src/coordinates-label.jsx

@@ -17,6 +17,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
   },
 }));
 
+// eslint-disable-next-line react/prop-types
 export const getLabelPosition = (graphProps, x, y, labelLength) => {
   const { scale, domain, range } = graphProps;
   // treat corner cases for maximum and minimum

package/src/grid-setup.jsx

@@ -12,23 +12,23 @@ import { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';
 import EditableHTML from '@pie-lib/editable-html';
 import { styled } from '@mui/material/styles';
 
-const Wrapper = styled('div')(({ theme }) => ({
+const Wrapper = styled('div')(() => ({
   width: '450px',
 }));
 
-const Content = styled('div')(({ theme }) => ({
+const Content = styled('div')(() => ({
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
 }));
 
-const ColumnView = styled('div')(({ theme }) => ({
+const ColumnView = styled('div')(() => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
 }));
 
-const RowView = styled('div')(({ theme }) => ({
+const RowView = styled('div')(() => ({
   display: 'flex',
   justifyContent: 'space-around',
   alignItems: 'center',
@@ -60,13 +60,13 @@ const ItalicText = styled(Typography)(({ theme }) => ({
   margin: `${theme.spacing(1)} 0`,
 }));
 
-const Dimensions = styled('div')(({ theme }) => ({
+const Dimensions = styled('div')(() => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
 }));
 
-const DisabledText = styled(Typography)(({ theme }) => ({
+const DisabledText = styled(Typography)(() => ({
   color: color.disabled(),
 }));
 

package/src/grid.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import * as vx from '@vx/grid';
+import * as vx from '@visx/grid';
 import { types } from '@pie-lib/plot';
 import { getTickValues } from './utils';
 

package/src/key-legend.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { color } from '@pie-lib/render-ui';
 
-const StyledContainer = styled('div')(({ theme }) => ({
+const StyledContainer = styled('div')(() => ({
   backgroundColor: color.defaults.WHITE,
   padding: '20px',
   width: '355px',

package/src/labels.jsx

@@ -64,6 +64,7 @@ class RawLabel extends React.Component {
     placeholder: PropTypes.string,
     graphProps: types.GraphPropsType.isRequired,
     onChange: PropTypes.func,
+    mathMlOptions: PropTypes.object,
   };
 
   static defaultProps = {
@@ -138,6 +139,7 @@ export class Labels extends React.Component {
     value: PropTypes.shape(LabelType),
     graphProps: PropTypes.object,
     onChange: PropTypes.object,
+    mathMlOptions: PropTypes.object,
   };
 
   static defaultProps = {};

package/src/mark-label.jsx

@@ -38,7 +38,7 @@ const StyledInputMissing = styled('div')(({ theme }) => ({
   fontWeight: 'bold',
 }));
 
-const StyledIncorrect = styled('div')(({ theme }) => ({
+const StyledIncorrect = styled('div')(() => ({
   float: 'right',
   padding: 0,
   borderRadius: '4px',
@@ -116,6 +116,15 @@ const LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, onCha
   />
 );
 
+LabelInput.propTypes = {
+  _ref: PropTypes.func,
+  externalInputRef: PropTypes.func,
+  label: PropTypes.string,
+  disabled: PropTypes.bool,
+  inputStyle: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
 export const MarkLabel = (props) => {
   const [input, setInput] = useState(null);
   const _ref = useCallback((node) => setInput(node));

package/src/toggle-bar.jsx

@@ -60,9 +60,10 @@ MiniButton.propTypes = {
   selected: PropTypes.bool,
   value: PropTypes.string,
   onClick: PropTypes.func,
+  language: PropTypes.string,
 };
 
-const StyledToolsContainer = styled('div')(({ theme }) => ({
+const StyledToolsContainer = styled('div')(() => ({
   display: 'flex',
   flexWrap: 'wrap',
 }));
@@ -96,14 +97,12 @@ export class ToggleBar extends React.Component {
   moveTool = (dragIndex, hoverIndex) => {
     const { options, onChangeToolsOrder } = this.props;
     const newOptions = arrayMove(options, dragIndex, hoverIndex);
-    console.log('New Options Order:', newOptions);
     onChangeToolsOrder(newOptions);
   };
 
   handleDragEnd = (event) => {
     const { active, over } = event;
-    
-    console.log('Drag End Event:', event);
+
     if (!over || !active) return;
 
     const activeData = active.data.current;
@@ -112,7 +111,7 @@ export class ToggleBar extends React.Component {
     if (activeData?.type === 'tool' && overData?.type === 'tool') {
       const dragIndex = activeData.index;
       const hoverIndex = overData.index;
-      
+
       if (dragIndex !== hoverIndex) {
         this.moveTool(dragIndex, hoverIndex);
       }
@@ -158,22 +157,8 @@ export class ToggleBar extends React.Component {
 }
 
 // DragTool functional component using @dnd-kit hooks
-function DragTool({ 
-  children, 
-  index, 
-  draggable, 
-  moveTool, 
-  toolRef, 
-  value 
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef: setDragNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useDraggable({
+function DragTool({ children, index, draggable, toolRef, value }) {
+  const { attributes, listeners, setNodeRef: setDragNodeRef, transform, transition, isDragging } = useDraggable({
     id: `tool-${value}-${index}`,
     disabled: !draggable,
     data: {
@@ -183,10 +168,7 @@ function DragTool({
     },
   });
 
-  const {
-    setNodeRef: setDropNodeRef,
-    isOver,
-  } = useDroppable({
+  const { setNodeRef: setDropNodeRef } = useDroppable({
     id: `drop-tool-${value}-${index}`,
     data: {
       type: 'tool',

package/src/tool-menu.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import ToggleBar, { MiniButton } from './toggle-bar';
+import ToggleBar from './toggle-bar';
 
 export class ToolMenu extends React.Component {
   static propTypes = {