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

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 } from '@mui/material/styles';
 import AutosizeInput from 'react-input-autosize';
@@ -17,7 +17,7 @@ const StyledAutosizeInput = styled(AutosizeInput, {
     border: `solid 1px ${disabled ? color.defaults.PRIMARY_DARK : markDisabled ? color.disabled() : color.defaults.SECONDARY}`,
     borderRadius: '3px',
     color: markDisabled ? color.disabled() : color.defaults.PRIMARY_DARK,
-    background: (disabled || markDisabled) ? theme.palette.background.paper : 'transparent',
+    background: disabled || markDisabled ? theme.palette.background.paper : 'transparent',
   },
 }));
 

package/src/toggle-bar.jsx

@@ -159,7 +159,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/tool-menu.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography, Button, Radio } from '@mui/material';
+import { Button, Radio, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
 export class ToolMenu extends React.Component {

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

@@ -2,6 +2,7 @@ import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { ArrowedLine } from '../component';
 import { graphProps as getGraphProps } from '../../../__tests__/utils';
+
 jest.mock('@pie-lib/plot', () => {
   const a = jest.requireActual('@pie-lib/plot');
   return {

package/src/tools/line/component.jsx

@@ -1,10 +1,10 @@
-import { lineToolComponent, lineBase, styles } from '../shared/line';
+import { lineBase, lineToolComponent, styles } from '../shared/line';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { trig, types } from '@pie-lib/plot';
 import { styled } from '@mui/material/styles';
 import { ArrowMarker, genUid } from '../shared/arrow-head';
-import { thinnerShapesNeeded, getAdjustedGraphLimits } from '../../utils';
+import { getAdjustedGraphLimits, thinnerShapesNeeded } from '../../utils';
 
 const StyledLine = styled('line', {
   shouldForwardProp: (prop) => !['fill', 'disabled', 'correctness'].includes(prop),

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

@@ -2,7 +2,7 @@ import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { graphProps, xy } from '../../../__tests__/utils';
 
-import { RawBaseComponent, buildLines, swap } from '../component';
+import { buildLines, RawBaseComponent, swap } from '../component';
 
 const xyLabel = (x, y, index, label) => ({
   ...xy(x, y, index),
@@ -31,19 +31,42 @@ describe('swap', () => {
     const result = swap([xy(0, 0, 0), xy(1, 1, 1), xy(2, 2, 2)], xy(0, 0, 0), xy(3, 3, 0));
     expect(result).toEqual([xy(3, 3, 0), xy(1, 1, 1), xy(2, 2, 2)]);
   });
+
+  it('swaps first element', () => {
+    const result = swap([xy(0, 0, 0), xy(1, 1, 1)], xy(0, 0, 0), xy(5, 5, 0));
+    expect(result).toEqual([xy(5, 5, 0), xy(1, 1, 1)]);
+  });
+
+  it('swaps last element', () => {
+    const result = swap([xy(0, 0, 0), xy(1, 1, 1), xy(2, 2, 2)], xy(2, 2, 2), xy(3, 3, 2));
+    expect(result).toEqual([xy(0, 0, 0), xy(1, 1, 1), xy(3, 3, 2)]);
+  });
+
+  it('swaps middle element', () => {
+    const result = swap([xy(0, 0, 0), xy(1, 1, 1), xy(2, 2, 2)], xy(1, 1, 1), xy(3, 3, 1));
+    expect(result).toEqual([xy(0, 0, 0), xy(3, 3, 1), xy(2, 2, 2)]);
+  });
 });
 
 // Note: Instance method tests have been removed. Component behavior should be tested
 // through user interactions and integration tests.
 describe('RawBaseComponent', () => {
-  let onChange = jest.fn();
-  let onChangeProps = jest.fn();
+  let onChange;
+  let onChangeProps;
+  let onClosePolygon;
+
+  beforeEach(() => {
+    onChange = jest.fn();
+    onChangeProps = jest.fn();
+    onClosePolygon = jest.fn();
+  });
+
   const renderComponent = (extras) => {
     const defaults = {
       className: 'className',
       onChange,
       onChangeProps,
-      onClosePolygon: jest.fn(),
+      onClosePolygon,
       graphProps: graphProps(),
       points: [],
     };
@@ -62,7 +85,7 @@ describe('RawBaseComponent', () => {
     });
 
   describe('rendering', () => {
-    it('renders', () => {
+    it('renders without crashing', () => {
       const { container } = renderComponent();
       expect(container.firstChild).toBeInTheDocument();
     });
@@ -71,5 +94,394 @@ describe('RawBaseComponent', () => {
       const { container } = renderWithLabels();
       expect(container.firstChild).toBeInTheDocument();
     });
+
+    it('renders with multiple points', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with closed polygon', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with single point', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with two points', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders empty polygon', () => {
+      const { container } = renderComponent({ points: [] });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with negative coordinates', () => {
+      const { container } = renderComponent({
+        points: [xy(-5, -5, 0), xy(-1, -1, 1), xy(-3, -2, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with decimal coordinates', () => {
+      const { container } = renderComponent({
+        points: [xy(0.5, 0.5, 0), xy(1.5, 1.5, 1), xy(2.5, 0.5, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with large coordinate values', () => {
+      const { container } = renderComponent({
+        points: [xy(100, 100, 0), xy(200, 200, 1), xy(150, 250, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('states', () => {
+    it('renders in disabled state', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        disabled: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders in enabled state', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        disabled: false,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness correct', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        correctness: 'correct',
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with correctness incorrect', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        correctness: 'incorrect',
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with building state', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+        building: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with fill property', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+        fill: '#ff0000',
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('labels', () => {
+    it('renders with all points labeled', () => {
+      const { container } = renderWithLabels();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with partial labels', () => {
+      const partialLabels = [xyLabel(0, 0, 0, 'A'), xy(2, 2, 1), xyLabel(0, 2, 2, 'C')];
+      const { container } = renderComponent({
+        labelNode,
+        points: partialLabels,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with empty string labels', () => {
+      const emptyLabels = [xyLabel(0, 0, 0, ''), xyLabel(2, 2, 1, ''), xyLabel(0, 2, 2, '')];
+      const { container } = renderComponent({
+        labelNode,
+        points: emptyLabels,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders without labelNode', () => {
+      const { container } = renderComponent({
+        points: [xyLabel(0, 0, 0, 'A'), xyLabel(2, 2, 1, 'B')],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with labelModeEnabled', () => {
+      const { container } = renderWithLabels({ labelModeEnabled: true });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with labelModeEnabled disabled', () => {
+      const { container } = renderWithLabels({ labelModeEnabled: false });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with long labels', () => {
+      const longLabels = [
+        xyLabel(0, 0, 0, 'Very Long Label Text'),
+        xyLabel(2, 2, 1, 'Another Long Label'),
+        xyLabel(0, 2, 2, 'Yet Another Long Label'),
+      ];
+      const { container } = renderComponent({
+        labelNode,
+        points: longLabels,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('polygon shapes', () => {
+    it('renders triangle', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(2, 0, 1), xy(1, 2, 2)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders square', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(2, 0, 1), xy(2, 2, 2), xy(0, 2, 3)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders pentagon', () => {
+      const { container } = renderComponent({
+        points: [xy(1, 0, 0), xy(2, 1, 1), xy(1.5, 2.5, 2), xy(0.5, 2.5, 3), xy(0, 1, 4)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders irregular polygon', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(3, 1, 1), xy(2, 4, 2), xy(-1, 3, 3)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('props', () => {
+    it('passes onChange callback', () => {
+      const customOnChange = jest.fn();
+      const { container } = renderComponent({
+        onChange: customOnChange,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onChangeProps callback', () => {
+      const customOnChangeProps = jest.fn();
+      const { container } = renderComponent({
+        onChangeProps: customOnChangeProps,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onClick callback', () => {
+      const onClick = jest.fn();
+      const { container } = renderComponent({
+        onClick,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onClosePolygon callback', () => {
+      const customOnClosePolygon = jest.fn();
+      const { container } = renderComponent({
+        onClosePolygon: customOnClosePolygon,
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onDragStart callback', () => {
+      const onDragStart = jest.fn();
+      const { container } = renderComponent({
+        onDragStart,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes onDragStop callback', () => {
+      const onDragStop = jest.fn();
+      const { container } = renderComponent({
+        onDragStop,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes coordinatesOnHover', () => {
+      const { container } = renderComponent({
+        coordinatesOnHover: true,
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes graphProps', () => {
+      const customGraphProps = graphProps(0, 10, 0, 10);
+      const { container } = renderComponent({
+        graphProps: customGraphProps,
+        points: [xy(5, 5, 0), xy(7, 7, 1)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('passes gssLineData', () => {
+      const gssLineData = { selectedTool: 'solutionSet' };
+      const { container } = renderComponent({
+        gssLineData,
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 0, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles points with same coordinates', () => {
+      const { container } = renderComponent({
+        points: [xy(1, 1, 0), xy(1, 1, 1), xy(1, 1, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles collinear points', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1), xy(2, 2, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles very close points', () => {
+      const { container } = renderComponent({
+        points: [xy(1, 1, 0), xy(1.001, 1.001, 1), xy(1.002, 1.002, 2)],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles mixed positive and negative coordinates', () => {
+      const { container } = renderComponent({
+        points: [xy(-5, 5, 0), xy(5, 5, 1), xy(5, -5, 2), xy(-5, -5, 3)],
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles points without explicit index', () => {
+      const { container } = renderComponent({
+        points: [
+          { x: 0, y: 0 },
+          { x: 1, y: 1 },
+          { x: 2, y: 0 },
+        ],
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles undefined properties', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+        disabled: undefined,
+        correctness: undefined,
+        building: undefined,
+        fill: undefined,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('integration', () => {
+    it('renders complete closed polygon with all features', () => {
+      const { container } = renderComponent({
+        points: points,
+        closed: true,
+        labelNode,
+        labelModeEnabled: true,
+        coordinatesOnHover: true,
+        correctness: 'correct',
+        disabled: false,
+        fill: '#00ff00',
+        gssLineData: { selectedTool: 'solutionSet' },
+        onChange: jest.fn(),
+        onChangeProps: jest.fn(),
+        onClosePolygon: jest.fn(),
+        onClick: jest.fn(),
+        onDragStart: jest.fn(),
+        onDragStop: jest.fn(),
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders building polygon', () => {
+      const { container } = renderComponent({
+        points: [xy(0, 0, 0), xy(1, 1, 1)],
+        building: true,
+        closed: false,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders disabled polygon with labels', () => {
+      const { container } = renderComponent({
+        points: points,
+        labelNode,
+        disabled: true,
+        closed: true,
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders polygon in solution set mode', () => {
+      const { container } = renderComponent({
+        points: points,
+        closed: true,
+        gssLineData: { selectedTool: 'solutionSet' },
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders polygon with incorrect correctness', () => {
+      const { container } = renderComponent({
+        points: points,
+        closed: true,
+        correctness: 'incorrect',
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
   });
 });

package/src/tools/polygon/__tests__/polygon.test.jsx

@@ -1,6 +1,6 @@
 import { render } from '@pie-lib/test-utils';
 import React from 'react';
-import { Polygon, getPointString } from '../polygon';
+import { getPointString, Polygon } from '../polygon';
 import { graphProps } from '../../../__tests__/utils';
 
 const xy = (x, y) => ({ x, y });

package/src/tools/polygon/component.jsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ToolPropTypeFields } from '../shared/types';
-import chunk from 'lodash/chunk';
-import initial from 'lodash/initial';
+import { chunk, initial, isEmpty } from 'lodash-es';
 import debug from 'debug';
 import DraggablePolygon from './polygon';
 import { types } from '@pie-lib/plot';
 import invariant from 'invariant';
 import ReactDOM from 'react-dom';
 import MarkLabel from '../../mark-label';
-import isEmpty from 'lodash/isEmpty';
-import { getMiddleOfTwoPoints, getRightestPoints, equalPoints } from '../../utils';
+import { equalPoints, getMiddleOfTwoPoints, getRightestPoints } from '../../utils';
 
 const log = debug('pie-lib:graphing-solution-set:polygon');
 
@@ -161,16 +159,8 @@ export class RawBaseComponent extends React.Component {
   };
 
   clickPoint = (point, index, data) => {
-    const {
-      closed,
-      disabled,
-      onClick,
-      isToolActive,
-      labelModeEnabled,
-      onChangeProps,
-      onChangeLabelProps,
-      points,
-    } = this.props;
+    const { closed, disabled, onClick, isToolActive, labelModeEnabled, onChangeProps, onChangeLabelProps, points } =
+      this.props;
 
     if (labelModeEnabled) {
       if (disabled) {

package/src/tools/polygon/line.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { types, gridDraggable } from '@pie-lib/plot';
+import { gridDraggable, types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import * as utils from '../../utils';
 import { correct, disabled, incorrect, missing } from '../shared/styles';