@pie-lib/graphing-solution-set 0.1.0

package/src/bg.tsx

@@ -0,0 +1,106 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/bg.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { pointer, select } from 'd3-selection';
+import { types, utils } from '@pie-lib/plot';
+import { getTickValues, thinnerShapesNeeded } from './utils.js';
+
+export default class Bg extends React.Component {
+  static propTypes = {
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    onClick: PropTypes.func.isRequired,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+
+  static defaultProps = {};
+
+  componentDidMount() {
+    const rect = select(this.rect);
+
+    rect.on('click', (event) => this.onRectClick(rect, event));
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      !utils.isDomainRangeEqual(this.props.graphProps, nextProps.graphProps) ||
+      this.props.width !== nextProps.width ||
+      this.props.height !== nextProps.height
+    );
+  }
+
+  getRectPadding: any = () => {
+    const { graphProps } = this.props;
+
+    return thinnerShapesNeeded(graphProps) ? 6 : 10;
+  };
+
+  /**
+   * Note: we use d3 click + pointer to give us domain values directly.
+   * Saves us having to calculate them ourselves from a MouseEvent.
+   */
+  onRectClick: any = (rect, event) => {
+    const { onClick, graphProps } = this.props;
+    const { scale } = graphProps;
+
+    const padding = this.getRectPadding();
+    const coords = pointer(event, rect.node());
+
+    // decrease the padding from coordinates to indicate the correct point clicked
+    const x = scale.x.invert(coords[0] - padding);
+    const y = scale.y.invert(coords[1] - padding);
+
+    const rowTicks = getTickValues(graphProps.range);
+    const columnTicks = getTickValues(graphProps.domain);
+
+    const closest = (ticks, value) => {
+      return (
+        ticks.length &&
+        ticks.reduce((prev, curr) => {
+          const currentDistance = Math.abs(curr - value);
+          const previousDistance = Math.abs(prev - value);
+
+          return currentDistance <= previousDistance ? curr : prev;
+        })
+      );
+    };
+
+    let snapped = {};
+
+    if (columnTicks.indexOf(x) >= 0 && rowTicks.indexOf(y) >= 0) {
+      snapped.x = x;
+      snapped.y = y;
+    } else {
+      snapped.x = closest(columnTicks, x);
+      snapped.y = closest(rowTicks, y);
+    }
+
+    onClick(snapped);
+  };
+
+  render() {
+    const { width, height } = this.props;
+    const padding = this.getRectPadding();
+
+    // expand the size of clickable area so a small area outside the edges of the grid lines to be clickable
+    return (
+      <rect
+        ref={(rect) => (this.rect = rect)}
+        transform={`translate(-${padding}, -${padding})`}
+        fill="red"
+        fillOpacity="0.0"
+        width={width + padding * 2}
+        height={height + padding * 2}
+      />
+    );
+  }
+}

package/src/container/actions.ts

@@ -0,0 +1,18 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/container/actions.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export const addMark = () => ({
+  type: 'ADD_MARK',
+});
+
+export const changeMarks = (marks) => ({
+  type: 'CHANGE_MARKS',
+  marks,
+});

package/src/container/index.tsx

@@ -0,0 +1,95 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/container/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { connect, Provider } from 'react-redux';
+import React from 'react';
+import { applyMiddleware, createStore } from 'redux';
+import reducer from './reducer.js';
+import { changeMarks } from './actions.js';
+import PropTypes from 'prop-types';
+import { isEqual } from 'lodash-es';
+import { ActionCreators } from 'redux-undo';
+import GraphWithControls from '../graph-with-controls.js';
+import { getLastAction, lastActionMiddleware } from './middleware.js';
+
+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)) {
+      this.store.dispatch(changeMarks(marks));
+    }
+  }
+
+  onStoreChange: any = () => {
+    const { marks, onChangeMarks } = this.props;
+    const storeState = this.store.getState();
+    const lastAction = getLastAction();
+    const isUndoOperation = lastAction.type.includes('UNDO') || lastAction.type.includes('REDO');
+
+    if (!isEqual(storeState.marks.present, marks)) {
+      onChangeMarks(storeState.marks.present, isUndoOperation);
+    }
+  };
+
+  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.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/container/marks.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+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.ts

@@ -0,0 +1,17 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/container/middleware.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+let lastAction = null;
+export const getLastAction = () => lastAction;
+
+export const lastActionMiddleware = () => (next) => (action) => {
+  lastAction = action;
+  return next(action);
+};

package/src/container/reducer.ts

@@ -0,0 +1,15 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/container/reducer.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { combineReducers } from 'redux';
+import marks from './marks.js';
+import undoable from 'redux-undo';
+
+export default () => combineReducers({ marks: undoable(marks, { debug: false }) });

package/src/coordinates-label.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/coordinates-label.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
+import { styled } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import { roundNumber } from './utils.js';
+
+const StyledInputBase: any = styled(InputBase)(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.fontSize,
+  borderRadius: '8px',
+  background: theme.palette.common.white,
+  color: color.defaults.BLACK,
+  '& .MuiInputBase-input': {
+    padding: 0,
+  },
+}));
+
+export const getLabelPosition = (graphProps, x, y, labelLength) => {
+  const { scale, domain, range } = graphProps;
+  // treat corner cases for maximum and minimum
+  const topShift = y === range.min ? 16 : y === range.max ? 0 : 8;
+  const leftShift = 10;
+  const rightEdge = scale.x(x) + labelLength + leftShift;
+
+  if (rightEdge >= scale.x(domain.max)) {
+    return {
+      left: scale.x(x) - leftShift - labelLength,
+      top: scale.y(y) - topShift,
+    };
+  }
+
+  return {
+    left: scale.x(x) + leftShift,
+    top: scale.y(y) - topShift,
+  };
+};
+
+export const CoordinatesLabel = ({ x, y, graphProps }) => {
+  const label = `(${roundNumber(x)}, ${roundNumber(y)})`;
+  const labelLength = (label.length || 0) * 6;
+  const labelPosition = getLabelPosition(graphProps, x, y, labelLength);
+
+  const style = {
+    position: 'absolute',
+    pointerEvents: 'auto',
+    width: labelLength,
+    padding: 0,
+    ...labelPosition,
+  };
+
+  return <StyledInputBase style={style} value={label} inputProps={{ ariaLabel: 'naked' }} />;
+};
+
+CoordinatesLabel.propTypes = {
+  graphProps: types.GraphPropsType,
+  x: PropTypes.number,
+  y: PropTypes.number,
+};
+
+export default CoordinatesLabel;

package/src/graph-with-controls.tsx

@@ -0,0 +1,252 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/graph-with-controls.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import { isString, uniq } from 'lodash-es';
+import { color } from '@pie-lib/render-ui';
+import ToolMenu from './tool-menu.js';
+import Graph, { graphPropTypes } from './graph.js';
+import UndoRedo from './undo-redo.js';
+import { allTools, toolsArr } from './tools/index.js';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+export const setToolbarAvailability = (toolbarTools) =>
+  toolsArr.map((tA) => ({
+    ...tA,
+    toolbar: !!toolbarTools.find((t) => t === tA.type),
+  })) || [];
+
+export const toolIsAvailable = (tools, currentTool) =>
+  currentTool && tools && (tools.find((tool) => tool.type === currentTool.type) || {}).toolbar;
+
+export const getAvailableTool = (tools) => tools.find((tool) => tool.toolbar);
+
+export const filterByValidToolTypes = (backgroundMarks) =>
+  backgroundMarks.filter((bM) => !!allTools.find((tool) => tool === bM.type));
+
+export const filterByVisibleToolTypes = (toolbarTools, marks) =>
+  marks.filter((bM) => !!toolbarTools.find((tool) => tool === bM.type));
+
+const getDefaultCurrentTool = (toolType) => toolsArr.find((tool) => tool.type === toolType) || null;
+
+const GraphWithControlsRoot: any = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: 'min-content',
+}));
+
+const Controls: any = styled('div')(() => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: 'calc(1.25rem - 12px) calc(1.25rem - 12px) 1.25rem',
+  color: color.text(),
+  backgroundColor: '#9FA8DA',
+  '& button': {
+    fontSize: '0.875rem',
+    padding: '0.25rem .3rem',
+    width: '5rem',
+  },
+}));
+
+const StyledAccordion: any = styled(Accordion)(() => ({
+  backgroundColor: color.primaryLight(),
+  width: '100%',
+  boxShadow: 'none',
+}));
+
+const StyledAccordionSummary: any = styled(AccordionSummary)(({ theme }) => ({
+  padding: `0 ${theme.spacing(1)}`,
+  minHeight: '32px !important',
+  '& .MuiAccordionSummary-content': {
+    margin: '4px 0 !important',
+  },
+}));
+
+const StyledAccordionDetails: any = styled(AccordionDetails)(({ theme }) => ({
+  padding: 0,
+  marginTop: theme.spacing(1),
+  display: 'flex',
+  justifyContent: 'space-between',
+}));
+
+const UndoRedoOuterDiv: any = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  marginTop: '.5rem',
+}));
+
+const Collapsible = ({ children, title }) => (
+  <StyledAccordion square disableGutters>
+    <StyledAccordionSummary expandIcon={<ExpandMoreIcon />}>
+      <Typography variant="subtitle1">{title}</Typography>
+    </StyledAccordionSummary>
+    <StyledAccordionDetails>{children}</StyledAccordionDetails>
+  </StyledAccordion>
+);
+
+Collapsible.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.string,
+};
+
+export class GraphWithControls extends React.Component {
+  static propTypes = {
+    ...graphPropTypes,
+    onUndo: PropTypes.func,
+    onRedo: PropTypes.func,
+    onReset: PropTypes.func,
+    toolbarTools: PropTypes.arrayOf(PropTypes.string),
+    language: PropTypes.string,
+  };
+
+  static defaultProps = {
+    collapsibleToolbar: false,
+    collapsibleToolbarTitle: '',
+    disabledLabels: false,
+    disabledTitle: false,
+    showLabels: true,
+    showTitle: true,
+    toolbarTools: [],
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentTool: getDefaultCurrentTool(props.defaultTool),
+      labelModeEnabled: false,
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const { defaultTool } = this.props;
+    if (prevProps.defaultTool !== defaultTool) {
+      const currentTool = getDefaultCurrentTool(defaultTool);
+      this.setState({ currentTool });
+    }
+  }
+
+  changeCurrentTool = (tool, tools) => this.setState({ currentTool: tools.find((t) => t.type === tool) });
+
+  toggleLabelMode = () => this.setState((state) => ({ labelModeEnabled: !state.labelModeEnabled }));
+
+  render() {
+    let { currentTool, labelModeEnabled } = this.state;
+    const {
+      axesSettings,
+      className,
+      coordinatesOnHover,
+      collapsibleToolbar,
+      collapsibleToolbarTitle,
+      disabled,
+      disabledLabels,
+      disabledTitle,
+      domain,
+      labels,
+      labelsPlaceholders,
+      onChangeLabels,
+      onChangeMarks,
+      onChangeTitle,
+      onUndo,
+      onRedo,
+      range,
+      size,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      title,
+      titlePlaceholder,
+      language,
+      disableToolbar = false,
+      gssLineData,
+      onChangeGssLineData,
+      onSolutionSetSelected,
+      onCustomReset,
+    } = this.props;
+
+    let { backgroundMarks, marks, toolbarTools } = this.props;
+
+    toolbarTools = uniq(toolbarTools || []).filter((tT) => !!isString(tT)) || [];
+    backgroundMarks = filterByValidToolTypes(backgroundMarks || []);
+    marks = filterByVisibleToolTypes(toolbarTools, marks || []);
+
+    if (gssLineData && gssLineData.lineA && marks[0] && marks[0].type === 'line')
+      marks[0].fill = gssLineData.lineA.lineType;
+    if (gssLineData && gssLineData.lineB && marks[1] && marks[1].type === 'line')
+      marks[1].fill = gssLineData.lineB.lineType;
+
+    const tools = setToolbarAvailability(toolbarTools);
+    if (!currentTool || !toolIsAvailable(tools, currentTool)) {
+      currentTool = getAvailableTool(tools);
+    }
+
+    const gssActions = gssLineData && (
+      <>
+        <ToolMenu
+          numberOfLines={gssLineData.numberOfLines}
+          gssLineData={gssLineData}
+          onChange={onChangeGssLineData}
+          disabled={!!disabled}
+          language={language}
+        />
+        {!disabled && (
+          <UndoRedoOuterDiv>
+            <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onCustomReset} language={language} />
+          </UndoRedoOuterDiv>
+        )}
+      </>
+    );
+
+    return (
+      <GraphWithControlsRoot className={classNames(className)}>
+        {!disableToolbar && (
+          <Controls>
+            {collapsibleToolbar ? <Collapsible title={collapsibleToolbarTitle}>{gssActions}</Collapsible> : gssActions}
+          </Controls>
+        )}
+
+        <div ref={(r) => (this.labelNode = r)} />
+
+        <Graph
+          axesSettings={axesSettings}
+          backgroundMarks={backgroundMarks}
+          coordinatesOnHover={coordinatesOnHover}
+          currentTool={currentTool}
+          disabledLabels={disabledLabels}
+          disabledTitle={disabledTitle}
+          domain={domain}
+          labels={labels}
+          labelModeEnabled={labelModeEnabled}
+          labelsPlaceholders={labelsPlaceholders}
+          marks={marks}
+          onChangeMarks={!disabled ? onChangeMarks : undefined}
+          onChangeLabels={onChangeLabels}
+          onChangeTitle={onChangeTitle}
+          range={range}
+          size={size}
+          showLabels={showLabels}
+          showPixelGuides={showPixelGuides}
+          showTitle={showTitle}
+          title={title}
+          titlePlaceholder={titlePlaceholder}
+          tools={tools}
+          gssLineData={gssLineData}
+          onSolutionSetSelected={onSolutionSetSelected}
+          disabled={!!disabled}
+        />
+      </GraphWithControlsRoot>
+    );
+  }
+}
+
+export default GraphWithControls;