this.gridElement = el}
+// draggable={true}
+// onDragStart={this.handleDragStart}
+// onKeyUp={this.handleKeyUp}>
+//
+// {/* hidden ruler div for measuring header text width */}
+//
+// );
+// }
+
+// private measureHeaderLabelWidth(label: string) {
+// if (this.headerRulerElement) {
+// this.headerRulerElement.innerText = label;
+// const width = Math.ceil(this.headerRulerElement.offsetWidth);
+// this.headerRulerElement.innerText = "";
+// return width;
+// }
+// }
+
+// private handleDragStart = (evt: React.DragEvent
) => {
+// // ag-grid adds "ag-column-resizing" class to columns being actively resized
+// if (this.gridElement?.getElementsByClassName("ag-column-resizing").length) {
+// // if we're column resizing, prevent other drags above (e.g. tile drags)
+// evt.preventDefault();
+// evt.stopPropagation();
+// }
+// }
+// }
diff --git a/src/components/tools/table-tool/editable-header-cell.tsx b/src/components/tools/table-tool/editable-header-cell.tsx
new file mode 100644
index 0000000000..725e4f8f36
--- /dev/null
+++ b/src/components/tools/table-tool/editable-header-cell.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { TColumn, THeaderRendererProps } from "./table-types";
+import { HeaderCellInput } from "./header-cell-input";
+
+interface IProps extends THeaderRendererProps {
+}
+export const EditableHeaderCell: React.FC = ({ column: _column }) => {
+ const column = _column as unknown as TColumn;
+ const { name, appData } = column;
+ const {
+ gridContext, editableName, isEditing,
+ onBeginHeaderCellEdit, onHeaderCellEditKeyDown, onEndHeaderCellEdit
+ } = appData || {};
+ const [nameValue, setNameValue] = useState(editableName ? name as string : "");
+ const handleClick = () => {
+ !isEditing && gridContext?.onSelectColumn(column.key);
+ };
+ const handleDoubleClick = () => {
+ editableName && !isEditing && onBeginHeaderCellEdit?.();
+ };
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ const { key } = e;
+ switch (key) {
+ case "Escape":
+ handleClose(false);
+ break;
+ case "Enter":
+ case "Tab":
+ handleClose(true);
+ onHeaderCellEditKeyDown?.(e);
+ break;
+ }
+ };
+ const handleChange = (value: string) => {
+ setNameValue(value);
+ };
+ const handleClose = (accept: boolean) => {
+ onEndHeaderCellEdit?.(accept ? nameValue : undefined);
+ };
+ const style = { width: column.width };
+ return (
+
+ {isEditing
+ ?
+ : name}
+
+ );
+};
diff --git a/src/components/tools/table-tool/editable-table-title.tsx b/src/components/tools/table-tool/editable-table-title.tsx
new file mode 100644
index 0000000000..d997398742
--- /dev/null
+++ b/src/components/tools/table-tool/editable-table-title.tsx
@@ -0,0 +1,67 @@
+import classNames from "classnames";
+import { observer } from "mobx-react";
+import React, { useState } from "react";
+import { HeaderCellInput } from "./header-cell-input";
+import { LinkGeometryButton } from "./link-geometry-button";
+
+interface IProps {
+ className?: string;
+ readOnly?: boolean;
+ showLinkButton: boolean;
+ linkIndex: number;
+ isLinkEnabled?: boolean;
+ titleCellWidth: number;
+ getTitle: () => string | undefined;
+ onBeginEdit?: () => void;
+ onEndEdit?: (title?: string) => void;
+ onLinkGeometryClick?: () => void;
+}
+export const EditableTableTitle: React.FC = observer(({
+ className, readOnly, showLinkButton, linkIndex, isLinkEnabled, titleCellWidth,
+ getTitle, onBeginEdit, onEndEdit, onLinkGeometryClick
+}) => {
+ // getTitle() and observer() allow this component to re-render
+ // when the title changes without re-rendering the entire TableTool
+ const title = getTitle();
+ const [isEditing, setIsEditing] = useState(false);
+ const [editingTitle, setEditingTitle] = useState(title);
+ const handleClick = () => {
+ if (!readOnly && !isEditing) {
+ onBeginEdit?.();
+ setEditingTitle(title);
+ setIsEditing(true);
+ }
+ };
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ const { key } = e;
+ switch (key) {
+ case "Escape":
+ handleClose(false);
+ break;
+ case "Enter":
+ case "Tab":
+ handleClose(true);
+ break;
+ }
+ };
+ const handleClose = (accept: boolean) => {
+ const trimTitle = editingTitle?.trim();
+ onEndEdit?.(accept && trimTitle ? trimTitle : undefined);
+ setIsEditing(false);
+ };
+ const isDefaultTitle = title && /Table\s+(\d+)\s*$/.test(title);
+ const classes = classNames("editable-header-cell", className,
+ { "table-title-editing": isEditing, "table-title-default": isDefaultTitle });
+ const style = { width: titleCellWidth };
+ return (
+
+ {isEditing
+ ?
+ : title}
+ {showLinkButton && !isEditing &&
+ }
+
+ );
+});
diff --git a/src/components/tools/table-tool/expression-utils.ts b/src/components/tools/table-tool/expression-utils.ts
new file mode 100644
index 0000000000..36e60c1952
--- /dev/null
+++ b/src/components/tools/table-tool/expression-utils.ts
@@ -0,0 +1,52 @@
+import { Parser } from "expr-eval";
+import { kSerializedXKey } from "../../../models/tools/table/table-model-types";
+
+export const getEditableExpression = (
+ rawExpression: string | undefined, canonicalExpression: string, xName: string
+) => {
+ // Raw expressions are cleared when x attribute is renamed, in which case
+ // we regenerate the "raw" expression from the canonical expression.
+ return rawExpression || prettifyExpression(canonicalExpression, xName);
+};
+
+export const canonicalizeExpression = (displayExpression: string, xName: string) => {
+ if (xName && displayExpression) {
+ const parser = new Parser();
+ const canonicalExpression = parser.parse(displayExpression).substitute(xName, kSerializedXKey);
+ return canonicalExpression.toString();
+ } else {
+ return displayExpression;
+ }
+};
+
+export const prettifyExpression = (canonicalExpression: string | undefined, xName: string) => {
+ if (xName && canonicalExpression) {
+ const parser = new Parser();
+ let expression = parser.parse(canonicalExpression).substitute(kSerializedXKey, xName).toString();
+ if (expression.charAt(0) === "(" && expression.charAt(expression.length - 1) === ")") {
+ expression = expression.substring(1, expression.length - 1);
+ }
+ return expression;
+ } else {
+ return canonicalExpression;
+ }
+};
+
+export const validateExpression = (expressionStr: string, xName: string) => {
+ if (!expressionStr || !xName) return;
+ const parser = new Parser();
+ try {
+ const expression = parser.parse(expressionStr);
+ const unknownVar = expression.variables().find(variable => variable !== xName);
+ if (unknownVar) {
+ return `Unrecognized variable "${unknownVar}" in expression.`;
+ }
+ if (xName) {
+ // Attempt an evaluation to check for errors e.g. invalid function names
+ expression.evaluate({[xName]: 1});
+ }
+ } catch {
+ return "Could not understand expression. Make sure you supply all operands " +
+ "and use a multiplication sign where necessary, e.g. 3 * x + 4 instead of 3x + 4.";
+ }
+};
diff --git a/src/components/tools/table-tool/expressions-dialog.scss b/src/components/tools/table-tool/expressions-dialog.scss
new file mode 100644
index 0000000000..1d9367856f
--- /dev/null
+++ b/src/components/tools/table-tool/expressions-dialog.scss
@@ -0,0 +1,57 @@
+@import "../../../components/vars.sass";
+
+.custom-modal.set-expression {
+ width: 512px;
+ height: 237px;
+ outline: none;
+
+ .modal-content {
+ justify-content: flex-start;
+
+ .prompt {
+ margin-top: 15px;
+
+ select {
+ margin: 0 3px;
+ padding: 0 3px;
+ font-weight: bold;
+ }
+
+ .attr-name {
+ font-weight: bold;
+
+ &.y {
+ margin: 0 3px;
+ }
+
+ &.x {
+ margin-left: 3px;
+ }
+ }
+ }
+
+ .expression {
+ margin-top: 20px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+
+ label {
+ display: inline-block;
+ flex: 0 0 auto;
+
+ .equals {
+ margin: 0 6px 0 3px;
+ }
+ }
+ input {
+ height: 100%;
+ flex: 1 1 auto;
+ }
+ }
+
+ .error {
+ margin-top: 15px;
+ }
+ }
+}
diff --git a/src/components/tools/table-tool/header-cell-input.tsx b/src/components/tools/table-tool/header-cell-input.tsx
new file mode 100644
index 0000000000..f8ac4ab1b8
--- /dev/null
+++ b/src/components/tools/table-tool/header-cell-input.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+function autoFocusAndSelect(input: HTMLInputElement | null) {
+ input?.focus();
+ input?.select();
+}
+
+interface IProps {
+ style?: React.CSSProperties;
+ value: string;
+ onKeyDown: (e: React.KeyboardEvent) => void;
+ onChange: (value: string) => void;
+ onClose: (accept: boolean) => void;
+}
+export const HeaderCellInput: React.FC = ({ style, value, onKeyDown, onChange, onClose }) => {
+ return (
+
+ onChange(event.target.value)}
+ onBlur={() => onClose(true)}
+ />
+
+ );
+};
diff --git a/src/components/tools/table-tool/link-geometry-button.tsx b/src/components/tools/table-tool/link-geometry-button.tsx
new file mode 100644
index 0000000000..4321e4c181
--- /dev/null
+++ b/src/components/tools/table-tool/link-geometry-button.tsx
@@ -0,0 +1,21 @@
+import classNames from "classnames";
+import React from "react";
+import LinkGraphIcon from "../../../clue/assets/icons/table/link-graph-icon.svg";
+
+interface IProps {
+ linkIndex: number;
+ isEnabled?: boolean;
+ onClick?: () => void;
+}
+export const LinkGeometryButton: React.FC = ({ isEnabled, linkIndex, onClick }) => {
+ const classes = classNames("link-geometry-button", `link-color-${linkIndex}`, { disabled: !isEnabled });
+ const handleClick = (e: React.MouseEvent) => {
+ isEnabled && onClick?.();
+ e.stopPropagation();
+ };
+ return (
+
+
+
+ );
+};
diff --git a/src/components/tools/table-tool/link-geometry-dialog.scss b/src/components/tools/table-tool/link-geometry-dialog.scss
new file mode 100644
index 0000000000..d33b3a0979
--- /dev/null
+++ b/src/components/tools/table-tool/link-geometry-dialog.scss
@@ -0,0 +1,24 @@
+@import "../../../components/vars.sass";
+
+.custom-modal.link-geometry {
+ width: 420px;
+ height: 200px;
+ outline: none;
+
+ .modal-content {
+ justify-content: flex-start;
+
+ .prompt {
+ margin-top: 15px;
+ }
+ }
+
+ select {
+ margin: 15px 20px;
+ font-style: italic;
+ }
+
+ .modal-button.disabled {
+ opacity: 35%;
+ }
+};
diff --git a/src/components/tools/table-tool/linked-table-cell-editor.tsx b/src/components/tools/table-tool/linked-table-cell-editor.tsx
index 83573219f3..3edffa4bd4 100644
--- a/src/components/tools/table-tool/linked-table-cell-editor.tsx
+++ b/src/components/tools/table-tool/linked-table-cell-editor.tsx
@@ -1,56 +1,56 @@
-import { ICellEditorParams, TextCellEditor } from "@ag-grid-community/core";
-import { TableMetadataModelType } from "../../../models/tools/table/table-content";
-
-interface ILinkedTableCellEditorParams extends ICellEditorParams {
- metadata: TableMetadataModelType;
-}
-
-export class LinkedTableCellEditor extends TextCellEditor {
-
- private domInput: HTMLInputElement;
- private metadata: TableMetadataModelType;
-
- constructor() {
- super();
- this.domInput = this.getGui().querySelector("input") as HTMLInputElement;
- }
-
- public init(params: ICellEditorParams) {
- super.init(params as any);
- const _params = params as ILinkedTableCellEditorParams;
- this.metadata = _params.metadata;
- }
-
- public afterGuiAttached() {
- super.afterGuiAttached();
- const eInput = this.domInput;
- eInput && eInput.addEventListener("input", this.handleInputChange);
- }
-
- public destroy() {
- const eInput = this.domInput;
- eInput && eInput.removeEventListener("input", this.handleInputChange);
- }
-
- public handleInputChange = (e: any) => {
- const value = e.target.value;
- if (!this.isValid(value)) {
- this.domInput.classList.add("invalid-cell");
- } else {
- this.domInput.classList.remove("invalid-cell");
- }
- }
-
- public isValid = (value: string) => {
- // don't apply validation unless the table is linked
- if (!this.metadata || !this.metadata.isLinked) return true;
- // allow empty values
- if ((value == null) || (value === "")) return true;
- // non-empty values must be numeric
- return isFinite(Number(value));
- }
-
- public isCancelAfterEnd = () => {
- return !this.isValid(this.getValue());
- }
-}
+// import { ICellEditorParams, TextCellEditor } from "@ag-grid-community/core";
+// import { TableMetadataModelType } from "../../../models/tools/table/table-content";
+
+// interface ILinkedTableCellEditorParams extends ICellEditorParams {
+// metadata: TableMetadataModelType;
+// }
+
+// export class LinkedTableCellEditor extends TextCellEditor {
+
+// private domInput: HTMLInputElement;
+// private metadata: TableMetadataModelType;
+
+// constructor() {
+// super();
+// this.domInput = this.getGui().querySelector("input") as HTMLInputElement;
+// }
+
+// public init(params: ICellEditorParams) {
+// super.init(params as any);
+// const _params = params as ILinkedTableCellEditorParams;
+// this.metadata = _params.metadata;
+// }
+
+// public afterGuiAttached() {
+// super.afterGuiAttached();
+// const eInput = this.domInput;
+// eInput && eInput.addEventListener("input", this.handleInputChange);
+// }
+
+// public destroy() {
+// const eInput = this.domInput;
+// eInput && eInput.removeEventListener("input", this.handleInputChange);
+// }
+
+// public handleInputChange = (e: any) => {
+// const value = e.target.value;
+// if (!this.isValid(value)) {
+// this.domInput.classList.add("invalid-cell");
+// } else {
+// this.domInput.classList.remove("invalid-cell");
+// }
+// }
+
+// public isValid = (value: string) => {
+// // don't apply validation unless the table is linked
+// if (!this.metadata || !this.metadata.isLinked) return true;
+// // allow empty values
+// if ((value == null) || (value === "")) return true;
+// // non-empty values must be numeric
+// return isFinite(Number(value));
+// }
+
+// public isCancelAfterEnd = () => {
+// return !this.isValid(this.getValue());
+// }
+// }
diff --git a/src/components/tools/table-tool/new-column-dialog.tsx b/src/components/tools/table-tool/new-column-dialog.tsx
deleted file mode 100644
index 5aea3b09ca..0000000000
--- a/src/components/tools/table-tool/new-column-dialog.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import { Button, Dialog } from "@blueprintjs/core";
-
-interface IProps {
- isOpen: boolean;
- onNewAttribute: (name: string) => void;
- onClose: () => void;
-}
-
-interface IState {
- name: string;
-}
-
-export default
-class NewColumnDialog extends React.Component {
-
- constructor(props: IProps) {
- super(props);
-
- this.state = {
- name: ""
- };
- }
-
- public render() {
- const capitalizedAttribute = "Attribute";
- return (
-
- );
- }
-
- private handleNameChange = (evt: React.FormEvent) => {
- this.setState({ name: (evt.target as HTMLInputElement).value });
- }
-
- private handleNewAttribute = () => {
- if (this.props.onNewAttribute) {
- this.props.onNewAttribute(this.state.name);
- }
- }
-
- private handleKeyDown = (evt: React.KeyboardEvent) => {
- if (evt.keyCode === 13) {
- this.handleNewAttribute();
- }
- }
-
-}
diff --git a/src/components/tools/table-tool/rename-column-dialog.sass b/src/components/tools/table-tool/rename-column-dialog.sass
deleted file mode 100644
index 97aa7fd306..0000000000
--- a/src/components/tools/table-tool/rename-column-dialog.sass
+++ /dev/null
@@ -1,4 +0,0 @@
-.bp3-dialog.rename-column-dialog
-
- .nc-dialog-error
- height: 36px
\ No newline at end of file
diff --git a/src/components/tools/table-tool/rename-column-dialog.tsx b/src/components/tools/table-tool/rename-column-dialog.tsx
deleted file mode 100644
index 9d38cd206a..0000000000
--- a/src/components/tools/table-tool/rename-column-dialog.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from "react";
-import { Button, Dialog } from "@blueprintjs/core";
-
-import "./rename-column-dialog.sass";
-
-interface IProps {
- id: string;
- isOpen: boolean;
- onRenameAttribute: (id: string, name: string) => void;
- onClose: () => void;
- name: string;
- columnNameValidator?: (name: string) => string | undefined;
-}
-
-interface IState {
- name: string;
-}
-
-export default
-class RenameColumnDialog extends React.Component {
-
- public state = {
- name: this.props.name || ""
- };
-
- public render() {
- const prompt = `Enter a new name for column "${this.props.name}"`;
- const errorMessage = this.getValidationError();
- return (
-
- );
- }
-
- private getValidationError = () => {
- const { columnNameValidator: validator } = this.props;
- const { name } = this.state;
- return validator && validator(name);
- }
-
- private handleNameChange = (evt: React.FormEvent) => {
- this.setState({ name: (evt.target as HTMLInputElement).value });
- }
-
- private handleRenameAttribute = () => {
- if (this.props.onRenameAttribute && !this.getValidationError()) {
- this.props.onRenameAttribute(this.props.id, this.state.name);
- }
- }
-
- private handleKeyDown = (evt: React.KeyboardEvent) => {
- if (evt.keyCode === 13) {
- this.handleRenameAttribute();
- }
- }
-
-}
diff --git a/src/components/tools/table-tool/set-table-name-dialog.tsx b/src/components/tools/table-tool/set-table-name-dialog.tsx
deleted file mode 100644
index 331dda4c8f..0000000000
--- a/src/components/tools/table-tool/set-table-name-dialog.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from "react";
-const { useState } = React;
-import { Button, Dialog } from "@blueprintjs/core";
-
-interface IProps {
- isOpen: boolean;
- tableName?: string;
- maxLength?: number;
- onSetTableName: (name: string) => void;
- onClose: () => void;
-}
-
-const kDefaultMaxLength = 60;
-
-export const SetTableNameDialog: React.FC = ({ isOpen, tableName, maxLength, onSetTableName, onClose }) => {
-
- const [name, setName] = useState(tableName || "");
-
- const handleChange = (e: React.FormEvent) => {
- setName((e.target as HTMLInputElement).value);
- };
-
- const handleKeyDown = (e: React.KeyboardEvent) => {
- (e.keyCode === 13) && onSetTableName(name);
- };
-
- const handleOkClick = () => {
- onSetTableName(name);
- };
-
- return (
-
- );
-};
diff --git a/src/components/tools/table-tool/table-header-menu.tsx b/src/components/tools/table-tool/table-header-menu.tsx
deleted file mode 100644
index 126c04fdb5..0000000000
--- a/src/components/tools/table-tool/table-header-menu.tsx
+++ /dev/null
@@ -1,380 +0,0 @@
-import React from "react";
-import NewColumnDialog from "./new-column-dialog";
-import RenameColumnDialog from "./rename-column-dialog";
-import { SetTableNameDialog } from "./set-table-name-dialog";
-import { IDataSet } from "../../../models/data/data-set";
-import { GridApi } from "@ag-grid-community/core";
-import { Icon, Menu, Popover, Position, MenuDivider, MenuItem, Alert, Intent } from "@blueprintjs/core";
-import { listenForTableEvents } from "../../../models/tools/table/table-events";
-import UpdateExpressionDialog from "./update-expression-dialog";
-
-export interface IMenuItemFlags {
- addAttribute?: boolean;
- addCase?: boolean;
- addRemoveDivider?: boolean;
- setTableName?: boolean;
- renameAttribute?: boolean;
- removeAttribute?: boolean;
- removeCases?: boolean;
- unlinkGeometry?: boolean;
-}
-
-export interface IProps {
- api: GridApi;
- expressions?: Map;
- rawExpressions?: Map;
- dataSet?: IDataSet;
- readOnly?: boolean;
- itemFlags?: IMenuItemFlags;
- onSetTableName: (name: string) => void;
- onNewAttribute: (name: string) => void;
- onRenameAttribute: (id: string, name: string) => void;
- onUpdateExpression: (id: string, expression: string, rawExpression: string) => void;
- onNewCase: () => void;
- onRemoveAttribute: (id: string) => void;
- onRemoveCases: (ids: string[]) => void;
- onGetLinkedGeometries: () => string[];
- onUnlinkGeometry: () => void;
- onSampleData?: (name: string) => void;
-}
-
-interface IState {
- isNewAttributeDialogOpen?: boolean;
- isTableNameDialogOpen?: boolean;
- tableName?: string;
- isRenameAttributeDialogOpen?: boolean;
- renameAttributeId?: string;
- renameAttributeName?: string;
-
- isUpdateExpressionDialogOpen?: boolean;
- updateExpressionAttributeId?: string;
- showInvalidVariableAlert?: boolean;
-}
-
-export class TableHeaderMenu extends React.Component {
-
- public state: IState = {};
-
- constructor(props: IProps) {
- super(props);
-
- listenForTableEvents((event) => {
- switch (event.type) {
- case "rename-column":
- this.setState({
- isRenameAttributeDialogOpen: true,
- renameAttributeId: event.id,
- renameAttributeName: event.name
- });
- break;
- case "add-column":
- this.setState({
- isNewAttributeDialogOpen: true
- });
- break;
- default:
- break;
- }
- });
- }
-
- public buildColumnNameValidator(columnHasExpression: boolean): (name: string) => string | undefined {
- return (name: string) => {
- if (!name) {
- return "Column must have a non-empty name";
- }
- // TODO: Expand valid variable names to include additional character sets
- if (columnHasExpression && !/^[a-z]+$/i.test(name)) {
- return "Columns with expressions must have single-word names";
- }
- };
- }
-
- public render() {
- if (this.props.readOnly) return null;
- return (
-
-
-
-
-
-
- {this.renderRenameColumnDialog()}
- {this.renderUpdateExpressionDialog()}
- {this.renderInvalidVariableAlert()}
-
- The names of all columns must be a single word to create expressions.
-
-
- );
- }
-
- private handleCloseInvalidVariableAlert = () => {
- this.setState({ showInvalidVariableAlert: false });
- }
-
- private renderMenu() {
- const itemFlags = this.props.itemFlags || {};
- const addColumn = itemFlags.addAttribute !== false
- ?
- : null;
- const addRow = itemFlags.addCase !== false
- ?
- : null;
- const addRemoveDivider = itemFlags.addRemoveDivider && ;
- const setTableName = itemFlags.setTableName &&
- ;
- const renameColumn = itemFlags.renameAttribute !== false
- ?
- : null;
- const updateExpression = itemFlags.renameAttribute !== false
- ?
- : null;
- const removeColumn = itemFlags.removeAttribute !== false
- ?
- : null;
- const removeRows = itemFlags.removeCases !== false
- ?
- : null;
- const linkedGeometryCount = this.props.onGetLinkedGeometries
- ? this.props.onGetLinkedGeometries().length
- : 0;
- const unlinkGeometry = itemFlags.unlinkGeometry !== false
- ?
- : null;
- return (
-
- );
- }
-
-}
diff --git a/src/components/tools/table-tool/table-tool.sass b/src/components/tools/table-tool/table-tool.sass
deleted file mode 100644
index 40bde5b016..0000000000
--- a/src/components/tools/table-tool/table-tool.sass
+++ /dev/null
@@ -1,22 +0,0 @@
-@import ../../../models/tools/table-links
-
-.table-tool
- height: 100%
-
-.link-color-0 > .ag-theme-fresh .ag-row-selected
- background-color: $link-color-0-light
-
-.link-color-1 > .ag-theme-fresh .ag-row-selected
- background-color: $link-color-1-light
-
-.link-color-2 > .ag-theme-fresh .ag-row-selected
- background-color: $link-color-2-light
-
-.link-color-3 > .ag-theme-fresh .ag-row-selected
- background-color: $link-color-3-light
-
-.link-color-4 > .ag-theme-fresh .ag-row-selected
- background-color: $link-color-4-light
-
-.link-color-5 > .ag-theme-fresh .ag-row-selected
- background-color: $link-color-5-light
diff --git a/src/components/tools/table-tool/table-tool.scss b/src/components/tools/table-tool/table-tool.scss
new file mode 100644
index 0000000000..82eddf35af
--- /dev/null
+++ b/src/components/tools/table-tool/table-tool.scss
@@ -0,0 +1,294 @@
+@import "../../vars.sass";
+@import "../../../models/tools/table-links";
+
+$table-padding: 10px;
+$row-height: 34px;
+$index-column-width: 34px;
+$controls-column-width: 36px;
+$platform-scrollbar-width: 16px;
+$header-color: $workspace-teal-light-5;
+$header-input-color: #eef9fb;
+$border-style: 1px solid $charcoal-light-1;
+$border-input-style: 1px solid #dadada;
+$border-radius: 3px;
+$controls-hover-background: #c0dfe7;
+
+.table-tool {
+ position: relative;
+ height: 100%;
+ padding: $table-padding;
+
+ .table-grid-container {
+ position: relative;
+ height: 100%;
+
+ .table-title {
+ position: absolute;
+ left: $index-column-width - 1px;
+ max-width: calc(100% - #{$index-column-width} + #{$table-padding});
+ height: $row-height;
+ color: $charcoal-dark-2;
+ background-color: $workspace-teal-light-7;
+ border-left: $border-style;
+ border-top: $border-style;
+ border-right: $border-style;
+ border-radius: $border-radius $border-radius 0 0;
+ font-weight: bold;
+ padding: 8px;
+
+ &.table-title-default {
+ font-style: italic;
+ }
+
+ &.table-title-editing {
+ padding: 0;
+
+ input {
+ text-align: center;
+ border: solid 1.5px $charcoal-light-1;
+
+ &:focus {
+ border: solid 2px $highlight-blue;
+ }
+ }
+ }
+
+ .link-geometry-button {
+ position: absolute;
+ right: 3.5px;
+ top: 3px;
+ width: 26px;
+ height: 26px;
+ border-radius: 5px;
+ border: solid 1.5px $charcoal-light-1;
+ background-color: $workspace-teal-light-9;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &.disabled {
+ opacity: 35%;
+ }
+
+ &:hover:not(.disabled) {
+ background-color: $workspace-teal-light-4;
+ }
+
+ &:active:not(.disabled) {
+ background-color: $workspace-teal-light-2;
+ }
+ }
+ }
+ }
+
+ .rdg {
+ --color: #{$charcoal-dark-2};
+ --border-color: #{$charcoal-light-1};
+ --header-background-color: #{$header-color};
+ --header-selected-background-color: #{$highlight-blue-50};
+ --row-selected-background-color: #{$highlight-blue-25};
+ --selection-color: #{$highlight-blue};
+
+ position: absolute;
+ top: $row-height;
+ width: calc(var(--row-width) + #{$platform-scrollbar-width});
+ max-width: calc(100% + #{$table-padding});
+ height: calc(100% - #{$row-height});
+ border: none;
+ overflow: auto !important;
+
+ &.show-expressions {
+ .index-column-header {
+ .show-hide-row-labels-button {
+ top: $row-height;
+ }
+ }
+ }
+
+ .rdg-header-row {
+ .index-column-header {
+ min-width: $index-column-width;
+ padding: 0;
+ border-left: $border-style;
+ border-top-left-radius: $border-radius;
+ .show-hide-row-labels-button {
+ width: $index-column-width;
+ height: $row-height;
+ position: relative;
+ .hide-row-labels-icon, .show-row-labels-icon {
+ position: absolute;
+ left: 4px;
+ top: 4px;
+ }
+ &.shown {
+ .hide-row-labels-icon { opacity: 35% }
+ .show-row-labels-icon { opacity: 0% }
+ }
+ &.hidden {
+ .hide-row-labels-icon { opacity: 0% }
+ .show-row-labels-icon { opacity: 35% }
+ }
+ &:hover {
+ &.shown {
+ .hide-row-labels-icon { opacity: 0% }
+ .show-row-labels-icon { opacity: 100% }
+ }
+ &.hidden {
+ .hide-row-labels-icon { opacity: 100% }
+ .show-row-labels-icon { opacity: 0% }
+ }
+ }
+ }
+ }
+ .rdg-cell {
+ border-top: $border-style;
+ &.selected-column {
+ background-color: var(--header-selected-background-color);
+ }
+ input {
+ background-color: inherit;
+ }
+ }
+ .controls-column-header {
+ background-color: white;
+ border: none;
+ padding: 0;
+ .add-column-button {
+ width: $controls-column-width;
+ height: $row-height;
+ display: none; // overridden when tile is selected
+ justify-content: center;
+ align-items: center;
+ svg {
+ fill: white;
+ stroke: $workspace-teal-light-3;
+ }
+ &:hover {
+ svg {
+ fill: $workspace-teal-light-4;
+ stroke: $workspace-teal-dark-1;
+ }
+ }
+ &:active {
+ svg {
+ fill: $workspace-teal-dark-1;
+ stroke: white;
+ }
+ }
+ }
+ }
+ }
+ .rdg-row {
+ &.rdg-row-selected {
+ background-color: var(--row-selected-background-color);
+ .index-column {
+ background-color: var(--header-selected-background-color);
+ }
+ .has-expression {
+ background-color: var(--row-selected-background-color);
+ }
+ &.input-row {
+ .index-column {
+ background-color: $highlight-blue-50-35;
+ }
+ }
+ }
+ &.input-row {
+ .index-column {
+ background-color: $header-input-color;
+ border-left: $border-input-style;
+ }
+ .rdg-cell {
+ border-right: $border-input-style;
+ border-bottom: $border-input-style;
+ }
+ .controls-column {
+ border: none;
+ }
+ }
+ .index-column {
+ border-left: $border-style;
+ }
+ .controls-column {
+ background-color: white;
+ border: none;
+ box-shadow: none;
+ padding: 0;
+ .remove-row-button {
+ width: $controls-column-width;
+ height: $row-height;
+ display: none; // overridden when tile is selected
+ justify-content: center;
+ align-items: center;
+ svg {
+ fill: white;
+ stroke: $highlight-blue;
+ }
+ &:hover {
+ svg {
+ fill: $highlight-blue-25;
+ stroke: $highlight-blue;
+ }
+ }
+ &:active {
+ svg {
+ fill: $highlight-blue;
+ stroke: white;
+ }
+ }
+ }
+ }
+ }
+ .index-column {
+ width: $index-column-width;
+ min-width: $index-column-width;
+ padding: 0;
+ background-color: var(--header-background-color);
+ font-weight: bold;
+ font-style: italic;
+ .index-cell-contents {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .rdg-cell {
+ input {
+ text-align: center;
+ }
+
+ &.has-expression {
+ background-color: $charcoal-light-5;
+ }
+ &.selected-column {
+ background-color: var(--row-selected-background-color);
+ }
+ }
+ }
+}
+
+.tool-tile.selected {
+ .table-tool {
+ .add-column-button, .remove-row-button {
+ // show buttons only when tile is selected
+ display: flex !important;
+ }
+ }
+}
+
+// .link-color-0 > .ag-theme-fresh .ag-row-selected
+// background-color: $link-color-0-light
+
+// .link-color-1 > .ag-theme-fresh .ag-row-selected
+// background-color: $link-color-1-light
+
+// .link-color-2 > .ag-theme-fresh .ag-row-selected
+// background-color: $link-color-2-light
+
+// .link-color-3 > .ag-theme-fresh .ag-row-selected
+// background-color: $link-color-3-light
+
+// .link-color-4 > .ag-theme-fresh .ag-row-selected
+// background-color: $link-color-4-light
+
+// .link-color-5 > .ag-theme-fresh .ag-row-selected
+// background-color: $link-color-5-light
diff --git a/src/components/tools/table-tool/table-tool.tsx b/src/components/tools/table-tool/table-tool.tsx
index 62c182cc00..f9fd3167d1 100644
--- a/src/components/tools/table-tool/table-tool.tsx
+++ b/src/components/tools/table-tool/table-tool.tsx
@@ -1,446 +1,597 @@
-import React from "react";
-import { observer, inject } from "mobx-react";
-import { Alert, Intent } from "@blueprintjs/core";
-import { BaseComponent } from "../../base";
-import DataTableComponent, { LOCAL_ROW_ID } from "./data-table";
-import { LinkedTableCellEditor } from "./linked-table-cell-editor";
-import { IMenuItemFlags } from "./table-header-menu";
+import { observer } from "mobx-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import ReactDataGrid from "react-data-grid";
+import { getTableContentHeight, TableContentModelType } from "../../../models/tools/table/table-content";
import { IToolTileProps } from "../tool-tile";
-import { GridApi, GridReadyEvent, SelectionChangedEvent, ValueGetterParams, ValueFormatterParams
- } from "@ag-grid-community/core";
-import { DataSet, IDataSet, ICase, ICaseCreation } from "../../../models/data/data-set";
-import { getSettingFromStores } from "../../../models/stores/stores";
-import { addTable, getLinkedTableIndex } from "../../../models/tools/table-links";
-import { canonicalizeValue, getRowLabel, isLinkableValue, ILinkProperties, ITableLinkProperties,
- TableContentModelType } from "../../../models/tools/table/table-content";
-import { getGeometryContent } from "../../../models/tools/geometry/geometry-content";
-import { JXGCoordPair, JXGProperties, JXGUnsafeCoordPair } from "../../../models/tools/geometry/jxg-changes";
-import { HotKeys } from "../../../utilities/hot-keys";
-import { uniqueId } from "../../../utilities/js-utils";
-import { format } from "d3-format";
-import { each, memoize, sortedIndexOf } from "lodash";
-import { autorun, IReactionDisposer, Lambda } from "mobx";
-type MobXDisposer = IReactionDisposer | Lambda;
-
-import "./table-tool.sass";
-
-const memoizedFormat = memoize(format);
-
-interface IClipboardCases {
- attrs: Array<{ id: string, name: string }>;
- cases: ICase[];
-}
-
-interface IState {
- dataSet: IDataSet;
- showInvalidPasteAlert?: boolean;
-}
-
-@inject("stores")
-@observer
-export default class TableToolComponent extends BaseComponent {
-
- public static tileHandlesSelection = true;
-
- public state: IState = {
- dataSet: DataSet.create()
- };
-
- private modelId: string;
- private domRef: React.RefObject = React.createRef();
- private hotKeys: HotKeys = new HotKeys();
- private syncedChanges: number;
- private disposers: MobXDisposer[];
-
- private gridApi?: GridApi;
-
- public componentDidMount() {
- this.initializeHotKeys();
- this.syncedChanges = 0;
- this.disposers = [];
-
- this.modelId = this.props.model.id;
- addTable(this.props.docId, this.modelId);
-
- if (this.domRef.current) {
- this.domRef.current.addEventListener("mousedown", this.handleMouseDown);
- }
-
- const metadata = this.getContent().metadata;
- this.props.onRegisterToolApi({
- isLinked: () => {
- return metadata.isLinked;
- },
- getLinkIndex: (index?: number) => {
- return metadata.isLinked
- ? getLinkedTableIndex(this.modelId)
- : -1;
- }
- });
-
- const { selection } = this.stores;
- this.disposers.push(selection.observe(this.props.model.id, change => {
- const rowId = change.name;
- const isSharedRowSelected = change.type === "delete"
- ? false
- : (change.newValue as any).storedValue;
- const rowNode = this.gridApi && this.gridApi.getRowNode(rowId);
- const isRowNodeSelected = rowNode ? rowNode.isSelected() : false;
- if (rowNode && (isSharedRowSelected !== isRowNodeSelected)) {
- rowNode.setSelected(isSharedRowSelected, false);
- }
- }));
-
- this.disposers.push(autorun(() => {
- const { model: { content } } = this.props;
- const tableContent = content as TableContentModelType;
- if (this.syncedChanges < tableContent.changes.length) {
- tableContent.applyChanges(this.state.dataSet, this.syncedChanges);
- this.syncedChanges = tableContent.changes.length;
- // The state updates in applyChanges aren't picked up by React, so we force a render
- this.forceUpdate();
- }
- }));
- }
-
- public componentWillUnmount() {
- if (this.domRef.current) {
- this.domRef.current.removeEventListener("mousedown", this.handleMouseDown);
- }
-
- this.props.onUnregisterToolApi();
-
- this.disposers.forEach(disposer => disposer());
-
- this.gridApi = undefined;
- }
-
- public render() {
- const { model, readOnly } = this.props;
- const content = this.getContent();
- const metadata = content.metadata;
- const itemFlags: IMenuItemFlags = {
- addAttribute: false,
- addCase: true,
- addRemoveDivider: false,
- setTableName: true,
- renameAttribute: true,
- removeAttribute: false,
- removeCases: true,
- unlinkGeometry: true
- };
- const linkIndex = getLinkedTableIndex(model.id);
- const linkClass = metadata.isLinked ? `is-linked link-color-${linkIndex}` : "";
- return (
-
-
- {this.renderInvalidPasteAlert()}
-
- );
- }
-
- private renderInvalidPasteAlert() {
- return this.state.showInvalidPasteAlert && (
-
-
- Linked data must be numeric. Please edit the table values so that all pasted cells contain numbers.
-
-
- );
- }
-
- private handleCloseInvalidPasteAlert = () => {
- this.setState({ showInvalidPasteAlert: false });
- }
-
- private getContent() {
- return this.props.model.content as TableContentModelType;
- }
-
- private initializeHotKeys() {
- this.hotKeys.register({
- "cmd-c": this.handleCopy,
- "cmd-v": this.handlePaste
+import { EditableTableTitle } from "./editable-table-title";
+import { TableToolbar } from "./table-toolbar";
+import { useColumnWidths } from "./use-column-widths";
+import { useContentChangeHandlers } from "./use-content-change-handlers";
+import { useDataSet } from "./use-data-set";
+import { useExpressionsDialog } from "./use-expressions-dialog";
+import { useGeometryLinking } from "./use-geometry-linking";
+import { useGridContext } from "./use-grid-context";
+import { useModelDataSet } from "./use-model-data-set";
+import { useRowLabelColumn } from "./use-row-label-column";
+import { useTableTitle } from "./use-table-title";
+import { useToolApi } from "./use-tool-api";
+import { useCurrent } from "../../../hooks/use-current";
+import { useMeasureText } from "../hooks/use-measure-text";
+import { useToolbarToolApi } from "../hooks/use-toolbar-tool-api";
+import { lightenColor } from "../../../utilities/color-utils";
+
+import "react-data-grid/dist/react-data-grid.css";
+import "./table-tool.scss";
+
+// observes row selection from shared selection store
+const TableToolComponent: React.FC = observer(({
+ documentId, documentContent, toolTile, model, readOnly, height, scale,
+ onRequestRowHeight, onRequestTilesOfType, onRequestUniqueTitle, onRegisterToolApi, onUnregisterToolApi
+}) => {
+ const modelRef = useCurrent(model);
+ const getContent = useCallback(() => modelRef.current.content as TableContentModelType, [modelRef]);
+ const metadata = getContent().metadata;
+
+ const {
+ dataSet, columnChanges, triggerColumnChange, rowChanges, triggerRowChange, ...gridModelProps
+ } = useModelDataSet(model);
+
+ const handleRequestUniqueTitle = useCallback(() => {
+ return onRequestUniqueTitle(modelRef.current.id);
+ }, [modelRef, onRequestUniqueTitle]);
+
+ const getContentHeight = useCallback(() => {
+ return getTableContentHeight({
+ readOnly,
+ dataRows: dataSet.current.cases.length,
+ hasExpressions: getContent().hasExpressions,
+ padding: 10 + (modelRef.current.display === "teacher" ? 20 : 0)
});
- }
-
- private handleGridReady = (gridReadyParams: GridReadyEvent) => {
- this.gridApi = gridReadyParams.api || undefined;
- }
-
- private handleRowSelectionChange = (e: SelectionChangedEvent) => {
- const { selection } = this.stores;
- const nodes = e.api.getSelectedNodes();
- selection.setSelected(this.props.model.id, nodes.map(n => n.id));
- }
-
- private handleMouseDown = (e: MouseEvent) => {
- const target: HTMLElement = e.target as HTMLElement;
- const targetClasses = target && target.className;
- // don't mess with focus if this looks like something ag-grid has handled
- if (typeof targetClasses !== "string") return;
- if (targetClasses.includes("ag-cell") || targetClasses.includes("ag-header-cell")) {
- return;
+ }, [dataSet, getContent, modelRef, readOnly]);
+
+ const heightRef = useCurrent(height);
+ const handleRequestRowHeight = useCallback((options: { height?: number, deltaHeight?: number }) => {
+ // increase row height automatically but require manual shrinking
+ if (!heightRef.current ||
+ (options?.height && (options.height > heightRef.current)) ||
+ (options?.deltaHeight && (options.deltaHeight > 0))) {
+ onRequestRowHeight(modelRef.current.id, options?.height, options?.deltaHeight);
}
-
- // table tile should have keyboard focus -- requires tabIndex
- this.domRef.current?.focus();
-
- // clicking on table background clears selection
- this.gridApi?.deselectAll();
- this.gridApi?.refreshCells();
- }
-
- private handleKeyDown = (e: React.KeyboardEvent) => {
- this.hotKeys.dispatch(e);
- }
-
- private handleCopy = () => {
- const { dataSet } = this.state;
- if (this.gridApi && dataSet) {
- const sortedRowIds = this.gridApi.getSelectedNodes().map(row => row.id).sort();
- const rowIds = dataSet.cases.map(aCase => aCase.__id__).filter(id => sortedIndexOf(sortedRowIds, id) >= 0);
- if (rowIds && rowIds.length) {
- const { clipboard } = this.stores;
- const clipData = {
- attrs: dataSet.attributes.map(attr => ({ id: attr.id, name: attr.name })),
- cases: dataSet.getCanonicalCases(rowIds)
- };
- clipboard.clear();
- clipboard.addTileContent(this.props.model.id, this.getContent().type, clipData, this.stores);
- }
+ }, [heightRef, modelRef, onRequestRowHeight]);
+
+ const changeHandlers = useContentChangeHandlers({
+ model, dataSet: dataSet.current,
+ onRequestRowHeight: handleRequestRowHeight, triggerColumnChange, triggerRowChange
+ });
+ const { onSetTableTitle, onSetColumnExpressions, onLinkGeometryTile } = changeHandlers;
+
+ const [showRowLabels, setShowRowLabels] = useState(false);
+ const {
+ ref: gridRef, gridContext, inputRowId, selectedCell, getSelectedRows, ...gridProps
+ } = useGridContext({ modelId: model.id, showRowLabels, triggerColumnChange });
+ const measureHeaderText = useMeasureText("bold 14px Lato, sans-serif");
+ // const measureBodyText = useMeasureText("14px Lato, sans-serif");
+ const { getTitle, onBeginTitleEdit, onEndTitleEdit } = useTableTitle({
+ gridContext, dataSet: dataSet.current, readOnly,
+ onSetTableTitle, onRequestUniqueTitle: handleRequestUniqueTitle
+ });
+
+ useToolApi({ metadata, getTitle, getContentHeight, onRegisterToolApi, onUnregisterToolApi });
+
+ const rowLabelProps = useRowLabelColumn({
+ inputRowId: inputRowId.current, selectedCell, showRowLabels, setShowRowLabels
+ });
+
+ const handleSubmitExpressions = (expressions: Map) => {
+ if (dataSet.current.attributes.length && expressions.size) {
+ onSetColumnExpressions(expressions, dataSet.current.attributes[0].name);
}
- }
-
- private handlePaste = () => {
- const content = this.getContent();
- const { readOnly } = this.props;
- if (!readOnly && this.gridApi) {
- const { clipboard } = this.stores;
- const clipData: IClipboardCases = clipboard.getTileContent(content.type);
- if (clipData && clipData.cases && clipData.cases.length) {
- const attrCount = Math.min(this.state.dataSet.attributes.length, clipData.attrs.length);
- const attrMap: { [id: string]: string } = {};
- clipData.attrs.forEach((attr, i) => {
- if (i < attrCount) {
- attrMap[attr.id] = this.state.dataSet.attributes[i].id;
- }
- });
- let doesTableContainUnlinkableValues = false;
- const cases = clipData.cases.map(srcCase => {
- const dstCase: ICase = { __id__: uniqueId() };
- each(srcCase, (value, attrID) => {
- const dstAttrID = attrMap[attrID];
- if (dstAttrID) {
- dstCase[dstAttrID] = value;
- if (!isLinkableValue(value)) {
- doesTableContainUnlinkableValues = true;
- }
- }
- });
- return dstCase;
- });
- if (content.isLinked && doesTableContainUnlinkableValues) {
- this.setState({ showInvalidPasteAlert: true });
- }
- else {
- this.handleAddCanonicalCases(cases);
- }
- }
+ };
+ const [showExpressionsDialog, , setCurrYAttrId] = useExpressionsDialog({
+ metadata, dataSet: dataSet.current, onSubmit: handleSubmitExpressions
+ });
+
+ const handleShowExpressionsDialog = (attrId?: string) => {
+ attrId && setCurrYAttrId(attrId);
+ showExpressionsDialog();
+ };
+ const { hasLinkableRows, ...dataGridProps } = useDataSet({
+ gridRef, gridContext, model, dataSet: dataSet.current, columnChanges, triggerColumnChange,
+ rowChanges, readOnly: !!readOnly, changeHandlers, measureText: measureHeaderText,
+ selectedCell, inputRowId, ...rowLabelProps, onShowExpressionsDialog: handleShowExpressionsDialog });
+
+ const { showLinkButton, isLinkEnabled, linkIndex, linkColors, showLinkGeometryDialog } =
+ useGeometryLinking({ documentId, model, hasLinkableRows, onRequestTilesOfType, onLinkGeometryTile });
+
+ const { titleCellWidth } =
+ useColumnWidths({ readOnly, getTitle, columns: dataGridProps.columns, measureText: measureHeaderText });
+
+ const containerRef = useRef(null);
+ const handleBackgroundClick = (e: React.MouseEvent) => {
+ // clear any selection on background click
+ (e.target === containerRef.current) && gridContext.onClearSelection();
+ };
+
+ useEffect(() => {
+ if (containerRef.current && linkColors) {
+ // override the CSS variables controlling selection color for linked tables
+ const dataGrid = containerRef.current.getElementsByClassName("rdg")[0] as HTMLDivElement | undefined;
+ dataGrid?.style.setProperty("--header-selected-background-color", lightenColor(linkColors.stroke));
+ dataGrid?.style.setProperty("--row-selected-background-color", lightenColor(linkColors.fill));
}
- }
-
- private indexValueGetter = (params: ValueGetterParams) => {
- const metadata = this.getContent().metadata;
- return metadata && metadata.isLinked && (params.data.id !== LOCAL_ROW_ID)
- ? getRowLabel(params.node.rowIndex)
- : "";
- }
-
- private attrValueFormatter = (params: ValueFormatterParams) => {
- if ((params.value == null) || (params.value === "")) return params.value;
- const num = Number(params.value);
- if (!isFinite(num)) return params.value;
- const kDefaultFormatStr = ".1~f"; // one decimal place, remove trailing zero
- const formatStr = getSettingFromStores(this.stores, "numFormat", "table") as string | undefined ||
- kDefaultFormatStr;
- return memoizedFormat(formatStr)(num);
- }
-
- private getGeometryContent(geometryId: string) {
- return getGeometryContent(this.getContent(), geometryId);
- }
-
- private getPositionOfPoint(caseId: string): JXGUnsafeCoordPair {
- const { dataSet } = this.state;
- const attrCount = dataSet.attributes.length;
- const xAttr = attrCount > 0 ? dataSet.attributes[0] : undefined;
- const yAttr = attrCount > 1 ? dataSet.attributes[1] : undefined;
- // convert non-numeric values to 0
- const xValue = xAttr ? dataSet.getValue(caseId, xAttr.id) : 0;
- const yValue = yAttr ? dataSet.getValue(caseId, yAttr.id) : 0;
- return [canonicalizeValue(xValue), canonicalizeValue(yValue)];
- }
-
- private getTableActionLinks(): ILinkProperties | undefined {
- const linkedGeometries = this.getContent().metadata.linkedGeometries;
- if (!linkedGeometries || !linkedGeometries.length) return;
- const actionId = uniqueId();
- return { id: actionId, tileIds: [...linkedGeometries] };
- }
-
- private getGeometryActionLinks(links?: ILinkProperties, addLabelMap = false): ITableLinkProperties | undefined {
- if (!links || !links.id) return;
- return this.getContent().getClientLinks(links.id, this.state.dataSet, addLabelMap);
- }
-
- private getGeometryActionLinksWithLabels(links?: ILinkProperties) {
- return this.getGeometryActionLinks(links, true);
- }
-
- private handleSetTableName = (name: string) => {
- // const shouldExpandTable = name && !this.state.dataSet?.name;
- this.getContent().setTableName(name);
- const kTableNameHeight = 25;
- this.props.onRequestRowHeight(this.props.model.id, undefined, kTableNameHeight);
- }
-
- private handleSetAttributeName = (attributeId: string, name: string) => {
- const tableActionLinks = this.getTableActionLinks();
- this.getContent().setAttributeName(attributeId, name);
- const geomActionLinks = this.getGeometryActionLinksWithLabels(tableActionLinks);
- this.getContent().metadata.linkedGeometries.forEach(id => {
- const geometryContent = this.getGeometryContent(id);
- if (geometryContent) {
- geometryContent.updateAxisLabels(undefined, this.props.model.id, geomActionLinks);
- }
- });
- }
-
- private handleSetExpression = (attributeId: string, expression: string, rawExpression: string) => {
- this.getContent().setExpression(attributeId, expression, rawExpression);
- const dataSet = this.state.dataSet;
- const tableActionLinks = this.getTableActionLinks();
- const geomActionLinks = this.getGeometryActionLinks(tableActionLinks);
- const ids: string[] = [];
- const props: JXGProperties[] = [];
- dataSet.cases.forEach(aCase => {
- const caseId = aCase.__id__;
- ids.push(caseId);
- const position = this.getPositionOfPoint(caseId) as JXGCoordPair;
- props.push({ position });
- });
- this.getContent().metadata.linkedGeometries.forEach(id => {
- const geometryContent = this.getGeometryContent(id);
- if (geometryContent) {
- geometryContent.updateObjects(undefined, ids, props, geomActionLinks);
- }
- });
- }
-
- private handleAddCanonicalCases = (newCases: ICaseCreation[]) => {
- const validateCase = (aCase: ICaseCreation) => {
- const newCase: ICaseCreation = { __id__: uniqueId() };
- if (this.getContent().isLinked) {
- // validate linkable values
- this.state.dataSet.attributes.forEach(attr => {
- const value = aCase[attr.id];
- newCase[attr.id] = isLinkableValue(value) ? value : 0;
- });
- return newCase;
- }
- return { ...newCase, ...aCase };
- };
- const cases = newCases.map(aCase => validateCase(aCase));
- const selectedRowIds = this.gridApi && this.gridApi.getSelectedNodes().map(row => row.id);
- const firstSelectedRowId = selectedRowIds && selectedRowIds.length && selectedRowIds[0] || undefined;
- const tableActionLinks = this.getTableActionLinks();
- this.getContent().addCanonicalCases(cases, firstSelectedRowId, tableActionLinks);
- const parents = cases.map(aCase => this.getPositionOfPoint(aCase.__id__ as string));
- const props = cases.map(aCase => ({ id: aCase.__id__ }));
- const geomActionLinks = this.getGeometryActionLinksWithLabels(tableActionLinks);
- this.getContent().metadata.linkedGeometries.forEach(id => {
- const geometryContent = this.getGeometryContent(id);
- if (geometryContent) {
- geometryContent.addPoints(undefined, parents, props, geomActionLinks);
- }
- });
- }
-
- private handleSetCanonicalCaseValues = (caseValues: ICase) => {
- const caseId = caseValues.__id__;
- const tableActionLinks = this.getTableActionLinks();
- this.getContent().setCanonicalCaseValues([caseValues], tableActionLinks);
- const geomActionLinks = this.getGeometryActionLinks(tableActionLinks);
- this.getContent().metadata.linkedGeometries.forEach(id => {
- const newPosition = this.getPositionOfPoint(caseId);
- const position = newPosition as JXGCoordPair;
- const geometryContent = this.getGeometryContent(id);
- if (geometryContent) {
- geometryContent.updateObjects(undefined, caseId, { position }, geomActionLinks);
- }
- });
- }
-
- private handleRemoveCases = (ids: string[]) => {
- const tableActionLinks = this.getTableActionLinks();
- this.getContent().removeCases(ids, tableActionLinks);
- const geomActionLinks = this.getGeometryActionLinksWithLabels(tableActionLinks);
- this.getContent().metadata.linkedGeometries.forEach(id => {
- const geometryContent = this.getGeometryContent(id);
- if (geometryContent) {
- geometryContent.removeObjects(undefined, ids, geomActionLinks);
- }
- });
- }
-
- private handleGetLinkedGeometries = () => {
- return this.getContent().metadata.linkedGeometries.toJS();
- }
-
- private handleUnlinkGeometry = () => {
- const geometryIds = this.getContent().metadata.linkedGeometries.toJS();
- const tableActionLinks = this.getTableActionLinks();
- this.getContent().removeGeometryLinks(geometryIds, tableActionLinks);
- const geomActionLinks = this.getGeometryActionLinksWithLabels(tableActionLinks);
- geometryIds.forEach(id => {
- const geometryContent = this.getGeometryContent(id);
- if (geometryContent) {
- geometryContent.removeTableLink(undefined, this.props.model.id, geomActionLinks);
- }
- });
- }
-}
+ });
+
+ const toolbarProps = useToolbarToolApi({ id: model.id, enabled: !readOnly, onRegisterToolApi, onUnregisterToolApi });
+ return (
+
+ );
+});
+export default TableToolComponent;
+(TableToolComponent as any).tileHandlesSelection = true;
+
+// import { observer, inject } from "mobx-react";
+// import { Alert, Intent } from "@blueprintjs/core";
+// import { BaseComponent } from "../../base";
+// import DataTableComponent, { LOCAL_ROW_ID } from "./data-table";
+// import { LinkedTableCellEditor } from "./linked-table-cell-editor";
+// import { IMenuItemFlags } from "./table-header-menu";
+// import { IToolTileProps } from "../tool-tile";
+// import { GridApi, GridReadyEvent, SelectionChangedEvent, ValueGetterParams, ValueFormatterParams
+// } from "@ag-grid-community/core";
+// import { DataSet, IDataSet, ICase, ICaseCreation } from "../../../models/data/data-set";
+// import { getSettingFromStores } from "../../../models/stores/stores";
+// import { addTable, getLinkedTableIndex } from "../../../models/tools/table-links";
+// import { canonicalizeValue, getRowLabel, isLinkableValue, ILinkProperties, ITableLinkProperties,
+// TableContentModelType } from "../../../models/tools/table/table-content";
+// import { getGeometryContent } from "../../../models/tools/geometry/geometry-content";
+// import { JXGCoordPair, JXGProperties, JXGUnsafeCoordPair } from "../../../models/tools/geometry/jxg-changes";
+// import { HotKeys } from "../../../utilities/hot-keys";
+// import { uniqueId } from "../../../utilities/js-utils";
+// import { format } from "d3-format";
+// import { each, memoize, sortedIndexOf } from "lodash";
+// import { autorun, IReactionDisposer, Lambda } from "mobx";
+// type MobXDisposer = IReactionDisposer | Lambda;
+
+// import "./table-tool.sass";
+
+// const memoizedFormat = memoize(format);
+
+// interface IClipboardCases {
+// attrs: Array<{ id: string, name: string }>;
+// cases: ICase[];
+// }
+
+// interface IState {
+// dataSet: IDataSet;
+// showInvalidPasteAlert?: boolean; [TODO]
+// }
+
+// @inject("stores")
+// @observer
+// export default class TableToolComponent extends BaseComponent {
+
+// public static tileHandlesSelection = true;
+
+// public state: IState = {
+// dataSet: DataSet.create()
+// };
+
+// private modelId: string;
+// private domRef: React.RefObject = React.createRef();
+// private hotKeys: HotKeys = new HotKeys();
+// private syncedChanges: number;
+// private disposers: MobXDisposer[];
+
+// private gridApi?: GridApi;
+
+// public componentDidMount() {
+// this.initializeHotKeys(); [TODO]
+// this.syncedChanges = 0;
+// this.disposers = [];
+
+// this.modelId = this.props.model.id;
+// addTable(this.props.docId, this.modelId);
+
+// if (this.domRef.current) {
+// this.domRef.current.addEventListener("mousedown", this.handleMouseDown);
+// }
+
+// const metadata = this.getContent().metadata;
+// this.props.onRegisterToolApi({
+// isLinked: () => {
+// return metadata.isLinked;
+// },
+// getLinkIndex: (index?: number) => {
+// return metadata.isLinked
+// ? getLinkedTableIndex(this.modelId)
+// : -1;
+// }
+// });
+
+// const { selection } = this.stores;
+// this.disposers.push(selection.observe(this.props.model.id, change => { [TODO]
+// const rowId = change.name;
+// const isSharedRowSelected = change.type === "delete"
+// ? false
+// : (change.newValue as any).storedValue;
+// const rowNode = this.gridApi && this.gridApi.getRowNode(rowId);
+// const isRowNodeSelected = rowNode ? rowNode.isSelected() : false;
+// if (rowNode && (isSharedRowSelected !== isRowNodeSelected)) {
+// rowNode.setSelected(isSharedRowSelected, false);
+// }
+// }));
+
+// this.disposers.push(autorun(() => {
+// const { model: { content } } = this.props;
+// const tableContent = content as TableContentModelType;
+// if (this.syncedChanges < tableContent.changes.length) {
+// tableContent.applyChanges(this.state.dataSet, this.syncedChanges);
+// this.syncedChanges = tableContent.changes.length;
+// // The state updates in applyChanges aren't picked up by React, so we force a render
+// this.forceUpdate();
+// }
+// }));
+// }
+
+// public componentWillUnmount() {
+// if (this.domRef.current) {
+// this.domRef.current.removeEventListener("mousedown", this.handleMouseDown);
+// }
+
+// this.props.onUnregisterToolApi();
+
+// this.disposers.forEach(disposer => disposer());
+
+// this.gridApi = undefined;
+// }
+
+// public render() {
+// const { model, readOnly } = this.props;
+// const content = this.getContent();
+// const metadata = content.metadata;
+// const itemFlags: IMenuItemFlags = {
+// addAttribute: false,
+// addCase: true,
+// addRemoveDivider: false,
+// setTableName: true,
+// renameAttribute: true,
+// removeAttribute: false,
+// removeCases: true,
+// unlinkGeometry: true
+// };
+// const linkIndex = getLinkedTableIndex(model.id);
+// const linkClass = metadata.isLinked ? `is-linked link-color-${linkIndex}` : "";
+// return (
+//
+//
+// {this.renderInvalidPasteAlert()}
+//
+// );
+// }
+
+// private renderInvalidPasteAlert() { [TODO]
+// return this.state.showInvalidPasteAlert && (
+//
+//
+// Linked data must be numeric. Please edit the table values so that all pasted cells contain numbers.
+//
+//
+// );
+// }
+
+// private handleCloseInvalidPasteAlert = () => {
+// this.setState({ showInvalidPasteAlert: false });
+// }
+
+// private getContent() {
+// return this.props.model.content as TableContentModelType;
+// }
+
+// private initializeHotKeys() { [TODO]
+// this.hotKeys.register({
+// "cmd-c": this.handleCopy,
+// "cmd-v": this.handlePaste
+// });
+// }
+
+// private handleGridReady = (gridReadyParams: GridReadyEvent) => {
+// this.gridApi = gridReadyParams.api || undefined;
+// }
+
+// private handleRowSelectionChange = (e: SelectionChangedEvent) => { [TODO]
+// const { selection } = this.stores;
+// const nodes = e.api.getSelectedNodes();
+// selection.setSelected(this.props.model.id, nodes.map(n => n.id)); [TODO] sync row selection back to model
+// }
+
+// private handleMouseDown = (e: MouseEvent) => { [TODO]
+// const target: HTMLElement = e.target as HTMLElement;
+// const targetClasses = target && target.className;
+// // don't mess with focus if this looks like something ag-grid has handled
+// if (typeof targetClasses !== "string") return;
+// if (targetClasses.includes("ag-cell") || targetClasses.includes("ag-header-cell")) {
+// return;
+// }
+
+// // table tile should have keyboard focus -- requires tabIndex
+// this.domRef.current?.focus(); [TODO?]
+
+// // clicking on table background clears selection [TODO]
+// this.gridApi?.deselectAll();
+// this.gridApi?.refreshCells();
+// }
+
+// private handleKeyDown = (e: React.KeyboardEvent) => { [TODO]
+// this.hotKeys.dispatch(e);
+// }
+
+// private handleCopy = () => { [TODO]
+// const { dataSet } = this.state;
+// if (this.gridApi && dataSet) {
+// const sortedRowIds = this.gridApi.getSelectedNodes().map(row => row.id).sort();
+// const rowIds = dataSet.cases.map(aCase => aCase.__id__).filter(id => sortedIndexOf(sortedRowIds, id) >= 0);
+// if (rowIds && rowIds.length) {
+// const { clipboard } = this.stores;
+// const clipData = {
+// attrs: dataSet.attributes.map(attr => ({ id: attr.id, name: attr.name })),
+// cases: dataSet.getCanonicalCases(rowIds)
+// };
+// clipboard.clear();
+// clipboard.addTileContent(this.props.model.id, this.getContent().type, clipData, this.stores);
+// }
+// }
+// }
+
+// private handlePaste = () => { [TODO]
+// const content = this.getContent();
+// const { readOnly } = this.props;
+// if (!readOnly && this.gridApi) {
+// const { clipboard } = this.stores;
+// const clipData: IClipboardCases = clipboard.getTileContent(content.type);
+// if (clipData && clipData.cases && clipData.cases.length) {
+// const attrCount = Math.min(this.state.dataSet.attributes.length, clipData.attrs.length);
+// const attrMap: { [id: string]: string } = {};
+// clipData.attrs.forEach((attr, i) => {
+// if (i < attrCount) {
+// attrMap[attr.id] = this.state.dataSet.attributes[i].id;
+// }
+// });
+// let doesTableContainUnlinkableValues = false;
+// const cases = clipData.cases.map(srcCase => {
+// const dstCase: ICase = { __id__: uniqueId() };
+// each(srcCase, (value, attrID) => {
+// const dstAttrID = attrMap[attrID];
+// if (dstAttrID) {
+// dstCase[dstAttrID] = value;
+// if (!isLinkableValue(value)) {
+// doesTableContainUnlinkableValues = true;
+// }
+// }
+// });
+// return dstCase;
+// });
+// if (content.isLinked && doesTableContainUnlinkableValues) {
+// this.setState({ showInvalidPasteAlert: true });
+// }
+// else {
+// this.handleAddCanonicalCases(cases);
+// }
+// }
+// }
+// }
+
+// private indexValueGetter = (params: ValueGetterParams) => {
+// const metadata = this.getContent().metadata;
+// return metadata && metadata.isLinked && (params.data.id !== LOCAL_ROW_ID)
+// ? getRowLabel(params.node.rowIndex)
+// : "";
+// }
+
+// private attrValueFormatter = (params: ValueFormatterParams) => {
+// if ((params.value == null) || (params.value === "")) return params.value;
+// const num = Number(params.value);
+// if (!isFinite(num)) return params.value;
+// const kDefaultFormatStr = ".1~f"; // one decimal place, remove trailing zero
+// const formatStr = getSettingFromStores(this.stores, "numFormat", "table") as string | undefined ||
+// kDefaultFormatStr;
+// return memoizedFormat(formatStr)(num);
+// }
+
+// private getGeometryContent(geometryId: string) {
+// return getGeometryContent(this.getContent(), geometryId);
+// }
+
+// => useContentChangeHandlers [getPositionOfPoint]
+// private getPositionOfPoint(caseId: string): JXGUnsafeCoordPair {
+// const { dataSet } = this.state;
+// const attrCount = dataSet.attributes.length;
+// const xAttr = attrCount > 0 ? dataSet.attributes[0] : undefined;
+// const yAttr = attrCount > 1 ? dataSet.attributes[1] : undefined;
+// // convert non-numeric values to 0
+// const xValue = xAttr ? dataSet.getValue(caseId, xAttr.id) : 0;
+// const yValue = yAttr ? dataSet.getValue(caseId, yAttr.id) : 0;
+// return [canonicalizeValue(xValue), canonicalizeValue(yValue)];
+// }
+
+// => useContentChangeHandlers [getTableActionLinks]
+// private getTableActionLinks(): ILinkProperties | undefined {
+// const linkedGeometries = this.getContent().metadata.linkedGeometries;
+// if (!linkedGeometries || !linkedGeometries.length) return;
+// const actionId = uniqueId();
+// return { id: actionId, tileIds: [...linkedGeometries] };
+// }
+
+// => useContentChangeHandlers [getGeometryActionLinks]
+// private getGeometryActionLinks(links?: ILinkProperties, addLabelMap = false): ITableLinkProperties | undefined {
+// if (!links || !links.id) return;
+// return this.getContent().getClientLinks(links.id, this.state.dataSet, addLabelMap);
+// }
+
+// => useContentChangeHandlers [getGeometryActionLinksWithLabels]
+// private getGeometryActionLinksWithLabels(links?: ILinkProperties) {
+// return this.getGeometryActionLinks(links, true);
+// }
+
+// => useContentChangeHandlers [setTableName]
+// private handleSetTableName = (name: string) => {
+// // const shouldExpandTable = name && !this.state.dataSet?.name;
+// this.getContent().setTableName(name);
+// const kTableNameHeight = 25;
+// this.props.onRequestRowHeight(this.props.model.id, undefined, kTableNameHeight);
+// }
+
+// => useContentChangeHandlers [setColumnName]
+// private handleSetAttributeName = (attributeId: string, name: string) => {
+// const tableActionLinks = this.getTableActionLinks();
+// this.getContent().setAttributeName(attributeId, name);
+// const geomActionLinks = this.getGeometryActionLinksWithLabels(tableActionLinks);
+// this.getContent().metadata.linkedGeometries.forEach(id => {
+// const geometryContent = this.getGeometryContent(id);
+// if (geometryContent) {
+// geometryContent.updateAxisLabels(undefined, this.props.model.id, geomActionLinks);
+// }
+// });
+// }
+
+// => useContentChangeHandlers [setColumnExpressions]
+// private handleSetExpression = (attributeId: string, expression: string, rawExpression: string) => {
+// this.getContent().setExpression(attributeId, expression, rawExpression);
+// const dataSet = this.state.dataSet;
+// const tableActionLinks = this.getTableActionLinks();
+// const geomActionLinks = this.getGeometryActionLinks(tableActionLinks);
+// const ids: string[] = [];
+// const props: JXGProperties[] = [];
+// dataSet.cases.forEach(aCase => {
+// const caseId = aCase.__id__;
+// ids.push(caseId);
+// const position = this.getPositionOfPoint(caseId) as JXGCoordPair;
+// props.push({ position });
+// });
+// this.getContent().metadata.linkedGeometries.forEach(id => {
+// const geometryContent = this.getGeometryContent(id);
+// if (geometryContent) {
+// geometryContent.updateObjects(undefined, ids, props, geomActionLinks);
+// }
+// });
+// }
+
+// => useContentChangeHandlers [addRows]
+// private handleAddCanonicalCases = (newCases: ICaseCreation[]) => {
+// const validateCase = (aCase: ICaseCreation) => {
+// const newCase: ICaseCreation = { __id__: uniqueId() };
+// if (this.getContent().isLinked) {
+// // validate linkable values
+// this.state.dataSet.attributes.forEach(attr => {
+// const value = aCase[attr.id];
+// newCase[attr.id] = isLinkableValue(value) ? value : 0;
+// });
+// return newCase;
+// }
+// return { ...newCase, ...aCase };
+// };
+// const cases = newCases.map(aCase => validateCase(aCase));
+// const selectedRowIds = this.gridApi && this.gridApi.getSelectedNodes().map(row => row.id);
+// const firstSelectedRowId = selectedRowIds && selectedRowIds.length && selectedRowIds[0] || undefined;
+// const tableActionLinks = this.getTableActionLinks();
+// this.getContent().addCanonicalCases(cases, firstSelectedRowId, tableActionLinks);
+// const parents = cases.map(aCase => this.getPositionOfPoint(aCase.__id__ as string));
+// const props = cases.map(aCase => ({ id: aCase.__id__ }));
+// const geomActionLinks = this.getGeometryActionLinksWithLabels(tableActionLinks);
+// this.getContent().metadata.linkedGeometries.forEach(id => {
+// const geometryContent = this.getGeometryContent(id);
+// if (geometryContent) {
+// geometryContent.addPoints(undefined, parents, props, geomActionLinks);
+// }
+// });
+// }
+
+// => useContentChangeHandlers [updateRow]
+// private handleSetCanonicalCaseValues = (caseValues: ICase) => {
+// const caseId = caseValues.__id__;
+// const tableActionLinks = this.getTableActionLinks();
+// this.getContent().setCanonicalCaseValues([caseValues], tableActionLinks);
+// const geomActionLinks = this.getGeometryActionLinks(tableActionLinks);
+// this.getContent().metadata.linkedGeometries.forEach(id => {
+// const newPosition = this.getPositionOfPoint(caseId);
+// const position = newPosition as JXGCoordPair;
+// const geometryContent = this.getGeometryContent(id);
+// if (geometryContent) {
+// geometryContent.updateObjects(undefined, caseId, { position }, geomActionLinks);
+// }
+// });
+// }
+
+// => useContentChangeHandlers [removeRows]
+// private handleRemoveCases = (ids: string[]) => {
+// const tableActionLinks = this.getTableActionLinks();
+// this.getContent().removeCases(ids, tableActionLinks);
+// const geomActionLinks = this.getGeometryActionLinksWithLabels(tableActionLinks);
+// this.getContent().metadata.linkedGeometries.forEach(id => {
+// const geometryContent = this.getGeometryContent(id);
+// if (geometryContent) {
+// geometryContent.removeObjects(undefined, ids, geomActionLinks);
+// }
+// });
+// }
+
+// private handleGetLinkedGeometries = () => { [TODO?]
+// return this.getContent().metadata.linkedGeometries.toJS();
+// }
+
+// private handleUnlinkGeometry = () => { [TODO]
+// const geometryIds = this.getContent().metadata.linkedGeometries.toJS();
+// const tableActionLinks = this.getTableActionLinks();
+// this.getContent().removeGeometryLinks(geometryIds, tableActionLinks);
+// const geomActionLinks = this.getGeometryActionLinksWithLabels(tableActionLinks);
+// geometryIds.forEach(id => {
+// const geometryContent = this.getGeometryContent(id);
+// if (geometryContent) {
+// geometryContent.removeTableLink(undefined, this.props.model.id, geomActionLinks);
+// }
+// });
+// }
+// }
diff --git a/src/components/tools/table-tool/table-toolbar.scss b/src/components/tools/table-tool/table-toolbar.scss
new file mode 100644
index 0000000000..8c7d442833
--- /dev/null
+++ b/src/components/tools/table-tool/table-toolbar.scss
@@ -0,0 +1,35 @@
+@import "../../vars.sass";
+
+.table-toolbar {
+ position: absolute;
+ border: $toolbar-border;
+ border-radius: 0 0 $toolbar-border-radius $toolbar-border-radius;
+ z-index: $toolbar-z-index;
+
+ &.disabled {
+ display: none;
+ }
+
+ .toolbar-button {
+ position: relative;
+ width: $toolbar-button-width;
+ height: $toolbar-button-height;
+ background-color: $workspace-teal-light-9;
+
+ &:hover {
+ background-color: $workspace-teal-light-6;
+ }
+
+ &:active {
+ background-color: $workspace-teal-light-4;
+ }
+ }
+
+ .toolbar-button:first-child {
+ border-bottom-left-radius: 3px;
+ }
+
+ .toolbar-button:last-child {
+ border-bottom-right-radius: 3px;
+ }
+}
diff --git a/src/components/tools/table-tool/table-toolbar.tsx b/src/components/tools/table-tool/table-toolbar.tsx
new file mode 100644
index 0000000000..fcabd974e5
--- /dev/null
+++ b/src/components/tools/table-tool/table-toolbar.tsx
@@ -0,0 +1,46 @@
+import { observer } from "mobx-react";
+import React from "react";
+import ReactDOM from "react-dom";
+import { Tooltip } from "react-tippy";
+import SetExpressionIconSvg from "../../../clue/assets/icons/table/set-expression-icon.svg";
+import { useTooltipOptions } from "../../../hooks/use-tooltip-options";
+import { IFloatingToolbarProps, useFloatingToolbarLocation } from "../hooks/use-floating-toolbar-location";
+
+import "./table-toolbar.scss";
+
+interface ISetExpressionButtonProps {
+ onClick: () => void;
+}
+const SetExpressionButton: React.FC = ({ onClick }) => {
+ const tooltipOptions = useTooltipOptions({ title: "Set expression", distance: -34, offset: -19 });
+ return (
+
+
+
+
+
+ );
+};
+
+interface IProps extends IFloatingToolbarProps {
+ onSetExpression: () => void;
+}
+export const TableToolbar: React.FC = observer(({
+ documentContent, onIsEnabled, onSetExpression, ...others
+}) => {
+ const enabled = onIsEnabled();
+ const location = useFloatingToolbarLocation({
+ documentContent,
+ toolbarHeight: 38,
+ toolbarTopOffset: 2,
+ enabled,
+ ...others
+ });
+ return documentContent
+ ? ReactDOM.createPortal(
+ e.stopPropagation()}>
+
+
, documentContent)
+ : null;
+});
diff --git a/src/components/tools/table-tool/table-types.ts b/src/components/tools/table-tool/table-types.ts
new file mode 100644
index 0000000000..c6460cec5e
--- /dev/null
+++ b/src/components/tools/table-tool/table-types.ts
@@ -0,0 +1,52 @@
+import { Column, FormatterProps, HeaderRendererProps } from "react-data-grid";
+
+export const kRowHeight = 34;
+export const kIndexColumnWidth = 34;
+export const kControlsColumnWidth = 36;
+export const kHeaderCellPadding = 72; // half on either side of text
+export const kExpressionCellPadding = 20;
+export interface IGridContext {
+ showRowLabels: boolean;
+ isColumnSelected: (columnId: string) => boolean;
+ onSelectColumn: (columnId: string) => void;
+ isSelectedCellInRow: (rowIdx: number) => boolean;
+ onSelectRowById: (rowId: string, select: boolean) => void;
+ onSelectOneRow: (row: string) => void;
+ onClearSelection: (options?: { row?: boolean, column?: boolean, cell?: boolean }) => void;
+}
+
+export const kIndexColumnKey = "__index__";
+export const kControlsColumnKey = "__controls__";
+export interface TRow extends Record {
+ __id__: string;
+ __index__?: number;
+ __context__: IGridContext;
+}
+
+export interface TColumnAppData {
+ readOnly?: boolean;
+ gridContext: IGridContext;
+ editableName: boolean;
+ isEditing: boolean;
+ isRemovable: boolean;
+ showExpressions: boolean;
+ expression?: string;
+ onBeginHeaderCellEdit: () => boolean | undefined;
+ onHeaderCellEditKeyDown: (e: React.KeyboardEvent) => void;
+ onEndHeaderCellEdit: (value?: string) => void;
+ onShowExpressionsDialog?: (attrId?: string) => void;
+ onRemoveColumn?: (attrId: string) => void;
+ onBeginBodyCellEdit?: () => boolean | undefined;
+ onEndBodyCellEdit?: (value?: string) => void;
+}
+export interface TColumn extends Column {
+ appData?: TColumnAppData;
+}
+export interface TPosition { idx: number, rowIdx: number }
+export type TFormatterProps = FormatterProps;
+export type THeaderRendererProps = HeaderRendererProps;
+export type OnRowSelectionChangeFn = (checked: boolean, isShiftClick: boolean) => void;
+
+export const isDataColumn = (column: TColumn) => {
+ return (column.key !== kIndexColumnKey) && (column.key !== kControlsColumnKey);
+};
diff --git a/src/components/tools/table-tool/update-expression-dialog.sass b/src/components/tools/table-tool/update-expression-dialog.sass
deleted file mode 100644
index ee94d97a8b..0000000000
--- a/src/components/tools/table-tool/update-expression-dialog.sass
+++ /dev/null
@@ -1,8 +0,0 @@
-.bp3-dialog.update-expression-dialog
- width: 540px
-
- .nc-dialog-error
- height: 56px
-
- .nc-dialog-buttons
- margin: 1em 0 0 0
\ No newline at end of file
diff --git a/src/components/tools/table-tool/update-expression-dialog.tsx b/src/components/tools/table-tool/update-expression-dialog.tsx
deleted file mode 100644
index 3cffad178a..0000000000
--- a/src/components/tools/table-tool/update-expression-dialog.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import React from "react";
-import { Button, Dialog } from "@blueprintjs/core";
-import { Parser } from "expr-eval";
-
-import "./update-expression-dialog.sass";
-
-interface IProps {
- id: string;
- isOpen: boolean;
- onUpdateExpression: (id: string, expression: string, rawExpression: string) => void;
- onClose: () => void;
- expression: string;
- rawExpression: string;
- xName?: string;
- yName?: string;
-}
-
-interface IState {
- expression: string;
-}
-
-export const kSerializedXKey = "__x__";
-
-export default class UpdateExpressionDialog extends React.Component {
-
- constructor(props: IProps) {
- super(props);
- this.state = {
- expression: this.props.rawExpression || this.prettifyExpression(this.props.expression) || ""
- };
- }
-
- public render() {
- const { xName, yName } = this.props;
- const prompt = `Enter an expression for "${yName}" in terms of "${xName}"`;
- const errorMessage = this.getValidationError();
- return (
-
- );
- }
-
- private getValidationError = () => {
- const { xName } = this.props;
- const expressionStr = this.state.expression;
- if (!expressionStr) return;
- const parser = new Parser();
- try {
- const expression = parser.parse(expressionStr);
- const unknownVar = expression.variables().find(variable => variable !== xName);
- if (unknownVar) {
- return `Unrecognized variable "${unknownVar}" in expression.`;
- }
- if (xName) {
- // Attempt an evaluation to check for errors e.g. invalid function names
- expression.evaluate({[xName]: 1});
- }
- } catch {
- return "Could not understand expression. Make sure you supply all operands " +
- "and use a multiplication sign where necessary, e.g. 3 * x + 4 instead of 3x + 4.";
- }
- }
-
- private handleExpressionChange = (evt: React.FormEvent) => {
- this.setState({ expression: (evt.target as HTMLInputElement).value });
- }
-
- private handleClearExpression = () => {
- if (this.props.onUpdateExpression) {
- this.props.onUpdateExpression(this.props.id, "", "");
- }
- }
-
- private handleSubmitExpression = () => {
- if (this.props.onUpdateExpression && !this.getValidationError()) {
- // Store a canonical version of the expression so it does not need to change on column renames
- const canonicalExpression = this.canonicalizeExpression(this.state.expression);
- this.props.onUpdateExpression(this.props.id, canonicalExpression, this.state.expression);
- }
- }
-
- private handleKeyDown = (evt: React.KeyboardEvent) => {
- if (evt.keyCode === 13) {
- this.handleSubmitExpression();
- }
- }
-
- private canonicalizeExpression = (displayExpression: string) => {
- const { xName } = this.props;
- if (xName && displayExpression) {
- const parser = new Parser();
- const subbedExpression = parser.parse(displayExpression).substitute(xName, kSerializedXKey);
- return subbedExpression.toString();
- } else {
- return displayExpression;
- }
- }
-
- private prettifyExpression = (canonicalExpression: string) => {
- const { xName } = this.props;
- if (xName && canonicalExpression) {
- const parser = new Parser();
- let expression = parser.parse(canonicalExpression).substitute(kSerializedXKey, xName).toString();
- if (expression.charAt(0) === "(" && expression.charAt(expression.length - 1) === ")") {
- expression = expression.substring(1, expression.length - 1);
- }
- return expression;
- } else {
- return canonicalExpression;
- }
- }
-
-}
diff --git a/src/components/tools/table-tool/use-column-extensions.ts b/src/components/tools/table-tool/use-column-extensions.ts
new file mode 100644
index 0000000000..cb9fda2cf3
--- /dev/null
+++ b/src/components/tools/table-tool/use-column-extensions.ts
@@ -0,0 +1,65 @@
+import { TableMetadataModelType } from "../../../models/tools/table/table-content";
+import { getEditableExpression } from "./expression-utils";
+import { IGridContext, isDataColumn, TColumn } from "./table-types";
+import { IContentChangeHandlers } from "./use-content-change-handlers";
+
+interface IProps {
+ gridContext: IGridContext;
+ metadata: TableMetadataModelType;
+ readOnly?: boolean;
+ columns: TColumn[];
+ columnEditingName?: string;
+ setColumnEditingName: (column?: TColumn) => void;
+ onShowExpressionsDialog?: (attrId?: string) => void;
+ changeHandlers: IContentChangeHandlers;
+}
+export const useColumnExtensions = ({
+ gridContext, metadata, readOnly, columns, columnEditingName,
+ setColumnEditingName, onShowExpressionsDialog, changeHandlers
+}: IProps) => {
+ const { onSetColumnName, onRemoveColumn } = changeHandlers;
+ const firstDataColumn = columns.find(col => isDataColumn(col));
+ const xName = (firstDataColumn?.name || "") as string;
+
+ columns.forEach((column, i) => {
+ column.appData = {
+ readOnly,
+ gridContext,
+ editableName: !readOnly && isDataColumn(column),
+ isEditing: column.key === columnEditingName,
+ isRemovable: !readOnly && isDataColumn(column) && (column.key !== firstDataColumn?.key),
+ showExpressions: metadata.hasExpressions,
+ expression: getEditableExpression(
+ metadata.rawExpressions.get(column.key),
+ metadata.expressions.get(column.key) || "",
+ xName),
+ onBeginHeaderCellEdit: (() => {
+ gridContext.onClearSelection();
+ !readOnly && setColumnEditingName(column);
+ }) as any,
+ onHeaderCellEditKeyDown: (e: React.KeyboardEvent) => {
+ switch (e.key) {
+ case "Tab": {
+ const nextColumnToEdit = !e.shiftKey
+ ? (i < columns.length - 1 ? columns[i + 1] : undefined)
+ : (i > 1 ? columns[i - 1] : undefined);
+ !readOnly && nextColumnToEdit &&
+ setTimeout(() => setColumnEditingName(nextColumnToEdit));
+ break;
+ }
+ case "Enter":
+ break;
+ }
+ },
+ onEndHeaderCellEdit: (value?: string) => {
+ !readOnly && !!value && (value !== column.name) && onSetColumnName(column, value);
+ setColumnEditingName();
+ },
+ onRemoveColumn,
+ onShowExpressionsDialog,
+ onBeginBodyCellEdit: (() => {
+ gridContext.onClearSelection({ cell: false });
+ }) as any
+ };
+ });
+};
diff --git a/src/components/tools/table-tool/use-column-widths.ts b/src/components/tools/table-tool/use-column-widths.ts
new file mode 100644
index 0000000000..8d06a7b080
--- /dev/null
+++ b/src/components/tools/table-tool/use-column-widths.ts
@@ -0,0 +1,36 @@
+import { isDataColumn, kControlsColumnWidth, kHeaderCellPadding, TColumn } from "./table-types";
+
+interface IProps {
+ readOnly?: boolean;
+ getTitle: () => string | undefined;
+ columns: TColumn[];
+ measureText: (text: string) => number;
+}
+export const useColumnWidths = ({ readOnly, getTitle, columns, measureText }: IProps) => {
+
+ const desiredTitleCellWidth = measureText(getTitle() || "Table 8") + kHeaderCellPadding;
+
+ const kDefaultWidth = 80;
+ const columnWidth = (column: TColumn) => {
+ return Math.max(+(column.width || kDefaultWidth), column.maxWidth || kDefaultWidth);
+ };
+ const getTitleCellWidthFromColumns = () => {
+ return columns.reduce(
+ (sum, col, i) => sum + (i ? columnWidth(col) : 0),
+ 1 - (readOnly ? 0 : kControlsColumnWidth));
+ };
+
+ const titleCellWidthFromColumns = getTitleCellWidthFromColumns();
+ let titleCellWidth = titleCellWidthFromColumns;
+ // if necessary, increase width of columns to accommodate longer titles
+ if (desiredTitleCellWidth > titleCellWidthFromColumns) {
+ // distribute the additional width equally among the data columns
+ const dataColumnCount = columns.reduce((count, col) => count + (isDataColumn(col) ? 1 : 0), 0);
+ const widthAdjustment = (desiredTitleCellWidth - titleCellWidthFromColumns) / dataColumnCount;
+ const roundedWidthAdjustment = Math.ceil(10 * widthAdjustment) / 10;
+ columns.forEach((col, i) => isDataColumn(col) && (col.width = columnWidth(col) + roundedWidthAdjustment));
+ titleCellWidth = getTitleCellWidthFromColumns();
+ }
+
+ return { columns, titleCellWidth };
+};
diff --git a/src/components/tools/table-tool/use-columns-from-data-set.ts b/src/components/tools/table-tool/use-columns-from-data-set.ts
new file mode 100644
index 0000000000..6a3e430b1e
--- /dev/null
+++ b/src/components/tools/table-tool/use-columns-from-data-set.ts
@@ -0,0 +1,129 @@
+import classNames from "classnames";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { IAttribute } from "../../../models/data/attribute";
+import { IDataSet } from "../../../models/data/data-set";
+import { TableMetadataModelType } from "../../../models/tools/table/table-content";
+import { CellFormatter } from "./cell-formatter";
+import CellTextEditor from "./cell-text-editor";
+import { ColumnHeaderCell } from "./column-header-cell";
+import { prettifyExpression } from "./expression-utils";
+import {
+ IGridContext, kControlsColumnKey, kControlsColumnWidth, kExpressionCellPadding, kHeaderCellPadding,
+ kIndexColumnKey, kIndexColumnWidth, TColumn
+} from "./table-types";
+import { useColumnExtensions } from "./use-column-extensions";
+import { IContentChangeHandlers } from "./use-content-change-handlers";
+import { useControlsColumn } from "./use-controls-column";
+
+interface IUseColumnsFromDataSet {
+ gridContext: IGridContext;
+ dataSet: IDataSet;
+ metadata: TableMetadataModelType;
+ readOnly?: boolean;
+ columnChanges: number;
+ RowLabelHeader: React.FC;
+ RowLabelFormatter: React.FC;
+ measureText: (text: string) => number;
+ onShowExpressionsDialog?: (attrId?: string) => void;
+ changeHandlers: IContentChangeHandlers;
+}
+export const useColumnsFromDataSet = ({
+ gridContext, dataSet, metadata, readOnly, columnChanges, RowLabelHeader, RowLabelFormatter,
+ measureText, onShowExpressionsDialog, changeHandlers
+}: IUseColumnsFromDataSet) => {
+ const { attributes } = dataSet;
+ const { onAddColumn, onRemoveRows } = changeHandlers;
+ const onRemoveRow = useCallback((rowId: string) => onRemoveRows([rowId]), [onRemoveRows]);
+ const { ControlsHeaderRenderer, ControlsRowFormatter } = useControlsColumn({ readOnly, onAddColumn, onRemoveRow });
+ // user-modified column widths aren't currently saved
+ const userColumnWidths = useRef>({});
+ const nameColumnWidths = useRef>({});
+ const exprColumnWidths = useRef>({});
+
+ const [columnEditingName, setColumnEditingName] = useState();
+ const handleSetColumnEditingName = (column?: TColumn) => {
+ setColumnEditingName(column?.key);
+ };
+
+ const cellClasses = useCallback((attrId: string) => {
+ const selectedColumnClass = { "selected-column": gridContext.isColumnSelected(attrId) };
+ return {
+ cellClass: classNames({ "has-expression": metadata.hasExpression(attrId), ...selectedColumnClass }),
+ headerCellClass: classNames({ "rdg-cell-editing": columnEditingName === attrId, ...selectedColumnClass })
+ };
+ }, [columnEditingName, gridContext, metadata]);
+
+ const measureColumnWidth = useCallback((attr: IAttribute) => {
+ const nameCellWidth = measureText(attr.name) + kHeaderCellPadding;
+ const xName = dataSet.attributes[0]?.name || "x";
+ const expr = metadata.rawExpressions.get(attr.id) ||
+ prettifyExpression(metadata.expressions.get(attr.id) || "", xName);
+ const exprCellWidth = (expr ? measureText(`= ${expr}`) : 0) + kExpressionCellPadding;
+ if ((nameCellWidth !== nameColumnWidths.current[attr.id]) ||
+ (exprCellWidth !== exprColumnWidths.current[attr.id])) {
+ // autoWidth changes (e.g. name or formula changes), supercede user-set width
+ delete userColumnWidths.current[attr.id];
+ nameColumnWidths.current[attr.id] = nameCellWidth;
+ exprColumnWidths.current[attr.id] = exprCellWidth;
+ }
+ return userColumnWidths.current[attr.id] || Math.max(nameCellWidth, exprCellWidth);
+ }, [dataSet.attributes, measureText, metadata.expressions, metadata.rawExpressions]);
+
+ const columns = useMemo(() => {
+ const cols: TColumn[] = attributes.map(attr => ({
+ ...cellClasses(attr.id),
+ name: attr.name,
+ key: attr.id,
+ width: measureColumnWidth(attr),
+ resizable: true,
+ headerRenderer: ColumnHeaderCell,
+ formatter: CellFormatter,
+ editor: !readOnly && !metadata.hasExpression(attr.id) ? CellTextEditor : undefined,
+ editorOptions: {
+ editOnClick: !readOnly
+ }
+ }));
+ cols.unshift({
+ cellClass: "index-column",
+ headerCellClass: "index-column-header",
+ name: "Index",
+ key: kIndexColumnKey,
+ width: kIndexColumnWidth,
+ maxWidth: kIndexColumnWidth,
+ resizable: false,
+ editable: false,
+ frozen: true,
+ headerRenderer: RowLabelHeader,
+ formatter: RowLabelFormatter
+ });
+ if (!readOnly) {
+ cols.push({
+ cellClass: "controls-column",
+ headerCellClass: "controls-column-header",
+ name: "Controls",
+ key: kControlsColumnKey,
+ width: kControlsColumnWidth,
+ maxWidth: kControlsColumnWidth,
+ resizable: false,
+ editable: false,
+ frozen: false,
+ headerRenderer: ControlsHeaderRenderer,
+ formatter: ControlsRowFormatter
+ });
+ }
+ columnChanges; // eslint-disable-line no-unused-expressions
+ return cols;
+ }, [attributes, RowLabelHeader, RowLabelFormatter, readOnly, columnChanges,
+ cellClasses, measureColumnWidth, metadata, ControlsHeaderRenderer, ControlsRowFormatter]);
+
+ useColumnExtensions({
+ gridContext, metadata, readOnly, columns, columnEditingName, changeHandlers,
+ setColumnEditingName: handleSetColumnEditingName, onShowExpressionsDialog
+ });
+
+ const onColumnResize = useCallback((idx: number, width: number) => {
+ userColumnWidths.current[columns[idx].key] = width;
+ }, [columns]);
+
+ return { columns, onColumnResize };
+};
diff --git a/src/components/tools/table-tool/use-content-change-handlers.ts b/src/components/tools/table-tool/use-content-change-handlers.ts
new file mode 100644
index 0000000000..7d93dca6e7
--- /dev/null
+++ b/src/components/tools/table-tool/use-content-change-handlers.ts
@@ -0,0 +1,175 @@
+import { useCallback } from "react";
+import { useCurrent } from "../../../hooks/use-current";
+import { ICase, ICaseCreation, IDataSet } from "../../../models/data/data-set";
+import { getGeometryContent } from "../../../models/tools/geometry/geometry-content";
+import {
+ getTableContentHeight, ILinkProperties, ITableChange, TableContentModelType
+} from "../../../models/tools/table/table-content";
+import { isLinkableValue, ITileLinkMetadata } from "../../../models/tools/table/table-model-types";
+import { ToolTileModelType } from "../../../models/tools/tool-tile";
+import { safeJsonParse, uniqueId, uniqueName } from "../../../utilities/js-utils";
+import { TColumn } from "./table-types";
+
+export interface IContentChangeHandlers {
+ onSetTableTitle: (title: string) => void;
+ onSetColumnName: (column: TColumn, columnName: string) => void;
+ onSetColumnExpressions: (rawExpressions: Map, xName: string) => void;
+ onAddColumn: () => void;
+ onRemoveColumn: (colId: string) => void;
+ onAddRows: (newCases: ICaseCreation[]) => void;
+ onUpdateRow: (caseValues: ICase) => void;
+ onRemoveRows: (rowIds: string[]) => void;
+ onLinkGeometryTile: (geomTileInfo: ITileLinkMetadata) => void;
+ onUnlinkGeometryTiles: () => void;
+}
+
+interface IProps {
+ model: ToolTileModelType;
+ dataSet: IDataSet;
+ readOnly?: boolean;
+ onRequestRowHeight: (options: { height?: number, deltaHeight?: number }) => void;
+ triggerColumnChange: () => void;
+ triggerRowChange: () => void;
+}
+export const useContentChangeHandlers = ({
+ model, dataSet, readOnly, onRequestRowHeight, triggerColumnChange
+}: IProps): IContentChangeHandlers => {
+ const modelRef = useCurrent(model);
+ const getContent = useCallback(() => modelRef.current.content as TableContentModelType, [modelRef]);
+
+ /*
+ * helper functions
+ */
+ // link information attached to individual table changes/actions
+ const getTableActionLinks = useCallback((newClientId?: string): ILinkProperties | undefined => {
+ const linkedClients = getContent().metadata.linkedGeometries;
+ // if there are no linked clients, then we don't need to attach link info to the action
+ if (!linkedClients?.length && !newClientId) return;
+ // id is used to link actions across tiles
+ const actionId = uniqueId();
+ const newClientIds = newClientId ? [newClientId] : [];
+ return { id: actionId, tileIds: [...linkedClients, ...newClientIds] };
+ }, [getContent]);
+
+ const syncChangeToLinkedClient = useCallback((clientTileId: string, linkId: string) => {
+ const tableContent = getContent();
+ const lastChange: ITableChange | undefined = safeJsonParse(tableContent.changes[tableContent.changes.length - 1]);
+ // eventually we'll presumably need to support other clients
+ const clientContent = getGeometryContent(getContent(), clientTileId);
+ // link information attached to individual client changes/actions
+ const clientActionLinks = getContent().getClientLinks(linkId, dataSet);
+ // synchronize the table change to the linked client
+ lastChange && clientContent?.syncLinkedChange(dataSet, lastChange, clientActionLinks);
+ }, [dataSet, getContent]);
+
+ const syncLinkedClients = useCallback((tableActionLinks?: ILinkProperties) => {
+ tableActionLinks?.tileIds.forEach(tileId => {
+ syncChangeToLinkedClient(tileId, tableActionLinks.id);
+ });
+ }, [syncChangeToLinkedClient]);
+
+ const validateCase = useCallback((aCase: ICaseCreation) => {
+ const newCase: ICaseCreation = { __id__: uniqueId() };
+ if (getContent().isLinked) {
+ // validate linkable values
+ dataSet.attributes.forEach(attr => {
+ const value = aCase[attr.id];
+ newCase[attr.id] = isLinkableValue(value) ? value : 0;
+ });
+ return newCase;
+ }
+ return { ...newCase, ...aCase };
+ }, [dataSet.attributes, getContent]);
+
+ const requestRowHeight = useCallback(() => {
+ const height = getTableContentHeight({
+ dataRows: dataSet.cases.length, readOnly, hasExpressions: getContent().hasExpressions
+ });
+ onRequestRowHeight({ height });
+ }, [dataSet.cases.length, getContent, onRequestRowHeight, readOnly]);
+
+ /*
+ * content change functions
+ */
+ const setTableTitle = useCallback((title: string) => {
+ if (readOnly) return;
+ (title != null) && getContent().setTableName(title);
+ triggerColumnChange();
+ }, [getContent, readOnly, triggerColumnChange]);
+
+ const setColumnName = useCallback((column: TColumn, columnName: string) => {
+ if (readOnly) return;
+ const tableActionLinks = getTableActionLinks();
+ getContent().setAttributeName(column.key, columnName, tableActionLinks);
+ syncLinkedClients(tableActionLinks);
+ }, [readOnly, getTableActionLinks, getContent, syncLinkedClients]);
+
+ const setColumnExpressions = useCallback((rawExpressions: Map, xName: string) => {
+ if (readOnly) return;
+ const tableActionLinks = getTableActionLinks();
+ getContent().setExpressions(rawExpressions, xName, tableActionLinks);
+ requestRowHeight();
+ syncLinkedClients(tableActionLinks);
+ }, [readOnly, getTableActionLinks, getContent, requestRowHeight, syncLinkedClients]);
+
+ const addColumn = useCallback(() => {
+ if (readOnly) return;
+ const tableActionLinks = getTableActionLinks();
+ const attrId = uniqueId();
+ const attrName = uniqueName("y", (name: string) => !dataSet.attrFromName(name));
+ getContent().addAttribute(attrId, attrName, tableActionLinks);
+ syncLinkedClients(tableActionLinks);
+ }, [dataSet, getContent, getTableActionLinks, readOnly, syncLinkedClients]);
+
+ const removeColumn = useCallback((colId: string) => {
+ if (readOnly) return;
+ const tableActionLinks = getTableActionLinks();
+ getContent().removeAttributes([colId], tableActionLinks);
+ syncLinkedClients(tableActionLinks);
+ }, [getContent, getTableActionLinks, readOnly, syncLinkedClients]);
+
+ const addRows = useCallback((newCases: ICaseCreation[]) => {
+ if (readOnly) return;
+ const tableActionLinks = getTableActionLinks();
+ const cases = newCases.map(aCase => validateCase(aCase));
+ getContent().addCanonicalCases(cases, undefined, tableActionLinks);
+ requestRowHeight();
+ syncLinkedClients(tableActionLinks);
+ }, [readOnly, getTableActionLinks, getContent, requestRowHeight, syncLinkedClients, validateCase]);
+
+ const updateRow = useCallback((caseValues: ICase) => {
+ if (readOnly) return;
+ const tableActionLinks = getTableActionLinks();
+ getContent().setCanonicalCaseValues([caseValues], tableActionLinks);
+ syncLinkedClients(tableActionLinks);
+ }, [readOnly, getTableActionLinks, getContent, syncLinkedClients]);
+
+ const removeRows = useCallback((rowIds: string[]) => {
+ if (readOnly) return;
+ const tableActionLinks = getTableActionLinks();
+ getContent().removeCases(rowIds, tableActionLinks);
+ syncLinkedClients(tableActionLinks);
+ }, [readOnly, getTableActionLinks, getContent, syncLinkedClients]);
+
+ const linkGeometryTile = useCallback((geomTileInfo: ITileLinkMetadata) => {
+ if (!getContent().isValidForGeometryLink()) return;
+
+ // add action to table content
+ const tableActionLinks = getTableActionLinks(geomTileInfo.id);
+ if (!tableActionLinks) return;
+ getContent().addGeometryLink(geomTileInfo.id, tableActionLinks);
+ // sync change to the newly linked client - not all linked clients
+ syncChangeToLinkedClient(geomTileInfo.id, tableActionLinks.id);
+ }, [getContent, getTableActionLinks, syncChangeToLinkedClient]);
+
+ const unlinkGeometryTiles = useCallback(() => {
+ const geometryIds = getContent().metadata.linkedGeometries.toJS();
+ const tableActionLinks = getTableActionLinks();
+ getContent().removeGeometryLinks(geometryIds, tableActionLinks);
+ }, [getContent, getTableActionLinks]);
+
+ return { onSetTableTitle: setTableTitle, onSetColumnName: setColumnName, onSetColumnExpressions: setColumnExpressions,
+ onAddColumn: addColumn, onRemoveColumn: removeColumn,
+ onAddRows: addRows, onUpdateRow: updateRow, onRemoveRows: removeRows,
+ onLinkGeometryTile: linkGeometryTile, onUnlinkGeometryTiles: unlinkGeometryTiles };
+};
diff --git a/src/components/tools/table-tool/use-controls-column.tsx b/src/components/tools/table-tool/use-controls-column.tsx
new file mode 100644
index 0000000000..a844d54f81
--- /dev/null
+++ b/src/components/tools/table-tool/use-controls-column.tsx
@@ -0,0 +1,62 @@
+import React, { useCallback } from "react";
+import { Tooltip } from "react-tippy";
+import AddColumnSvg from "../../../assets/icons/add/add.nosvgo.svg";
+import RemoveRowSvg from "../../../assets/icons/remove/remove.nosvgo.svg";
+import { useTooltipOptions } from "../../../hooks/use-tooltip-options";
+import { TFormatterProps } from "./table-types";
+
+interface IUseControlsColumn {
+ readOnly?: boolean;
+ onAddColumn?: () => void;
+ onRemoveRow?: (rowId: string) => void;
+}
+export const useControlsColumn = ({ readOnly, onAddColumn, onRemoveRow }: IUseControlsColumn) => {
+
+ const kTooltipDistance = -35; // required to get tooltip to line up just below the cell
+ const addColumnTooltipOptions = useTooltipOptions({ title: "Add column", distance: kTooltipDistance });
+ const ControlsHeaderRenderer: React.FC = useCallback(() => {
+ return !readOnly
+ ?
+
+
+ : null;
+ }, [addColumnTooltipOptions, onAddColumn, readOnly]);
+
+ const removeRowTooltipOptions = useTooltipOptions({ title: "Remove row", distance: kTooltipDistance });
+ const ControlsRowFormatter: React.FC = useCallback(({ rowIdx, row, isRowSelected }) => {
+ const showRemoveButton = !readOnly && (isRowSelected || row.__context__.isSelectedCellInRow(rowIdx));
+ return showRemoveButton
+ ?
+
+
+ : null;
+ }, [onRemoveRow, readOnly, removeRowTooltipOptions]);
+ ControlsRowFormatter.displayName = "ControlsRowFormatter";
+
+ return { ControlsHeaderRenderer, ControlsRowFormatter };
+};
+
+interface IAddColumnButtonProps {
+ onAddColumn?: () => void;
+}
+const AddColumnButton: React.FC = ({ onAddColumn }) => {
+ return (
+
+ );
+};
+AddColumnButton.displayName = "AddColumnButton";
+
+interface IRemoveRowButtonProps {
+ rowId: string;
+ onRemoveRow?: (rowId: string) => void;
+}
+const RemoveRowButton: React.FC = ({ rowId, onRemoveRow }) => {
+ return (
+ onRemoveRow?.(rowId)}>
+
+
+ );
+};
+RemoveRowButton.displayName = "RemoveRowButton";
diff --git a/src/components/tools/table-tool/use-data-set.ts b/src/components/tools/table-tool/use-data-set.ts
new file mode 100644
index 0000000000..9346e7a9ac
--- /dev/null
+++ b/src/components/tools/table-tool/use-data-set.ts
@@ -0,0 +1,128 @@
+import { useCallback } from "react";
+import { DataGridHandle } from "react-data-grid";
+import { useCurrent } from "../../../hooks/use-current";
+import { ICase, IDataSet } from "../../../models/data/data-set";
+import { TableContentModelType } from "../../../models/tools/table/table-content";
+import { ToolTileModelType } from "../../../models/tools/tool-tile";
+import { uniqueId } from "../../../utilities/js-utils";
+import { formatValue } from "./cell-formatter";
+import { IGridContext, TColumn, TPosition, TRow } from "./table-types";
+import { useColumnsFromDataSet } from "./use-columns-from-data-set";
+import { IContentChangeHandlers } from "./use-content-change-handlers";
+import { useNumberFormat } from "./use-number-format";
+import { useRowsFromDataSet } from "./use-rows-from-data-set";
+
+const isCellSelectable = (position: TPosition, columns: TColumn[]) => {
+ return (position.idx !== 0) && (position.idx !== columns.length - 1);
+};
+
+interface IUseDataSet {
+ gridRef: React.RefObject;
+ gridContext: IGridContext;
+ model: ToolTileModelType;
+ dataSet: IDataSet;
+ columnChanges: number;
+ triggerColumnChange: () => void;
+ rowChanges: number;
+ readOnly: boolean;
+ inputRowId: React.MutableRefObject;
+ selectedCell: React.MutableRefObject;
+ RowLabelHeader: React.FC;
+ RowLabelFormatter: React.FC;
+ changeHandlers: IContentChangeHandlers;
+ measureText: (text: string) => number;
+ onShowExpressionsDialog?: (attrId?: string) => void;
+}
+export const useDataSet = ({
+ gridRef, gridContext, model, dataSet, columnChanges, triggerColumnChange, rowChanges, readOnly, inputRowId,
+ selectedCell, RowLabelHeader, RowLabelFormatter, changeHandlers, measureText, onShowExpressionsDialog
+}: IUseDataSet) => {
+ const { onAddRows, onUpdateRow } = changeHandlers;
+ const modelRef = useCurrent(model);
+ const getContent = useCallback(() => modelRef.current.content as TableContentModelType, [modelRef]);
+ const metadata = getContent().metadata;
+ const { columns, onColumnResize } = useColumnsFromDataSet({
+ gridContext, dataSet, metadata, readOnly, columnChanges, RowLabelHeader, RowLabelFormatter,
+ measureText, onShowExpressionsDialog, changeHandlers });
+ const onSelectedCellChange = (position: TPosition) => {
+ const forward = (selectedCell.current.rowIdx < position.rowIdx) ||
+ ((selectedCell.current.rowIdx === position.rowIdx) &&
+ (selectedCell.current.idx < position.idx));
+ selectedCell.current = position;
+
+ if (!isCellSelectable(position, columns) && (columns.length > 2)) {
+ let newPosition = { ...position };
+ if (forward) {
+ while (!isCellSelectable(newPosition, columns)) {
+ // move from last cell to { -1, -1 }
+ if ((newPosition.rowIdx >= rows.length) ||
+ ((newPosition.rowIdx === rows.length - 1) && (newPosition.idx >= columns.length - 1))) {
+ newPosition = { rowIdx: -1, idx: -1 };
+ }
+ // otherwise advance to next selectable cell
+ else if (++newPosition.idx >= columns.length) {
+ newPosition.idx = 1;
+ ++newPosition.rowIdx;
+ }
+ }
+ }
+ else { // backward
+ while (!isCellSelectable(newPosition, columns)) {
+ // move from first cell to { -1, -1 }
+ if ((newPosition.rowIdx <= -1) || ((newPosition.rowIdx === 0) && (newPosition.idx < 1))) {
+ newPosition = { rowIdx: -1, idx: -1 };
+ }
+ // otherwise move to previous selectable cell
+ else if (--newPosition.idx < 1) {
+ newPosition.idx = columns.length - 2;
+ --newPosition.rowIdx;
+ }
+ }
+ }
+ if ((newPosition.rowIdx !== position.rowIdx) || (newPosition.idx !== position.idx)) {
+ gridRef.current?.selectCell(newPosition);
+ }
+ }
+ };
+
+ const hasLinkableRows = getContent().hasLinkableCases(dataSet);
+
+ const { rows, rowKeyGetter, rowClass } = useRowsFromDataSet({
+ dataSet, readOnly, inputRowId: inputRowId.current,
+ rowChanges, context: gridContext});
+ const formatter = useNumberFormat();
+ const onRowsChange = (_rows: TRow[]) => {
+ // for now, assume that all changes are single cell edits
+ const selectedCellRowIndex = selectedCell.current?.rowIdx;
+ const selectedCellColIndex = selectedCell.current?.idx;
+ const updatedRow = (selectedCellRowIndex != null) && (selectedCellRowIndex >= 0)
+ ? _rows[selectedCellRowIndex] : undefined;
+ const updatedColumn = (selectedCellColIndex != null) && (selectedCellColIndex >= 0)
+ ? columns[selectedCellColIndex] : undefined;
+ if (!readOnly && updatedRow && updatedColumn) {
+ const originalValue = dataSet.getValue(updatedRow.__id__, updatedColumn.key);
+ const originalStrValue = formatValue(formatter, originalValue);
+ // only make a change if the value has actually changed
+ if (updatedRow[updatedColumn.key] !== originalStrValue) {
+ const updatedCaseValues: ICase = {
+ __id__: updatedRow.__id__,
+ [updatedColumn.key]: updatedRow[updatedColumn.key]
+ };
+ const inputRowIndex = _rows.findIndex(row => row.__id__ === inputRowId.current);
+ if ((inputRowIndex >= 0) && (selectedCellRowIndex === inputRowIndex)) {
+ onAddRows([updatedCaseValues]);
+ inputRowId.current = uniqueId();
+ }
+ else {
+ onUpdateRow(updatedCaseValues);
+ }
+ }
+ }
+ };
+ const handleColumnResize = useCallback((idx: number, width: number) => {
+ onColumnResize(idx, width);
+ triggerColumnChange();
+ }, [onColumnResize, triggerColumnChange]);
+ return { hasLinkableRows, columns, rows, rowKeyGetter, rowClass,
+ onColumnResize: handleColumnResize, onRowsChange, onSelectedCellChange};
+};
diff --git a/src/components/tools/table-tool/use-editable-expressions.ts b/src/components/tools/table-tool/use-editable-expressions.ts
new file mode 100644
index 0000000000..7cd738b0cd
--- /dev/null
+++ b/src/components/tools/table-tool/use-editable-expressions.ts
@@ -0,0 +1,18 @@
+import { useLayoutEffect, useRef } from "react";
+import { useCurrent } from "../../../hooks/use-current";
+import { TableMetadataModelType } from "../../../models/tools/table/table-content";
+import { getEditableExpression } from "./expression-utils";
+
+export const useEditableExpressions = (metadata: TableMetadataModelType, xName: string) => {
+ const metadataRef = useCurrent(metadata);
+ const editExpressions = useRef>(new Map());
+ useLayoutEffect(() => {
+ const rawExpressions = metadataRef.current.rawExpressions;
+ const canonicalExpressions = metadataRef.current.expressions;
+ canonicalExpressions.forEach((canonical, attrId) => {
+ const editExpr = getEditableExpression(rawExpressions.get(attrId), canonical, xName);
+ editExpr && editExpressions.current?.set(attrId, editExpr);
+ });
+ }, [metadataRef, xName]);
+ return editExpressions;
+};
diff --git a/src/components/tools/table-tool/use-expressions-dialog.tsx b/src/components/tools/table-tool/use-expressions-dialog.tsx
new file mode 100644
index 0000000000..837ccd5a2e
--- /dev/null
+++ b/src/components/tools/table-tool/use-expressions-dialog.tsx
@@ -0,0 +1,146 @@
+import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
+import SetExpressionIconSvg from "../../../clue/assets/icons/table/set-expression-icon.svg";
+import { useCurrent } from "../../../hooks/use-current";
+import { kLeaveModalOpen, useCustomModal } from "../../../hooks/use-custom-modal";
+import { IDataSet } from "../../../models/data/data-set";
+import { TableMetadataModelType } from "../../../models/tools/table/table-content";
+import { validateExpression } from "./expression-utils";
+import { useEditableExpressions } from "./use-editable-expressions";
+
+import "./expressions-dialog.scss";
+
+interface IProps {
+ metadata: TableMetadataModelType;
+ dataSet: IDataSet;
+ onSubmit: (changedExpressions: Map) => void;
+}
+type IResult = [() => void, () => void, React.Dispatch>];
+export const useExpressionsDialog = ({ metadata, dataSet, onSubmit }: IProps): IResult => {
+ const metadataRef = useCurrent(metadata);
+ const xName = useCurrent(dataSet.attributes.length > 0
+ ? dataSet.attributes[0].name
+ : "x");
+ const [currYAttrId, setCurrYAttrId] = useState();
+ // map of attribute ids to current editable expressions
+ const expressions = useEditableExpressions(metadata, xName.current);
+ // the currently edited expression (controlled input)
+ const [currentExpression, setCurrentExpression] = useState("");
+ const [errorMessage, setErrorMessage] = useState("");
+ const updateCurrentExpression = useCallback((expr: string) => {
+ setCurrentExpression(expr);
+ setErrorMessage(validateExpression(expr, xName.current) || "");
+ }, [xName]);
+ const acceptExpression = useCallback((yAttrId: string, expr: string) => {
+ expressions.current.set(yAttrId, expr);
+ }, [expressions]);
+ const contentProps: IContentProps = {
+ dataSet, xName: xName.current, currYAttrId, setCurrYAttrId,
+ expressions, currentExpression, errorMessage, updateCurrentExpression, acceptExpression
+ };
+
+ const blurModalRef = useRef<() => void>();
+
+ const handleClear = useCallback(() => {
+ blurModalRef.current?.();
+ updateCurrentExpression("");
+ currYAttrId && acceptExpression(currYAttrId, "");
+ return kLeaveModalOpen;
+ }, [acceptExpression, currYAttrId, updateCurrentExpression]);
+
+ const handleSubmit = useCallback(() => {
+ blurModalRef.current?.();
+ const rawExpressions = metadataRef.current.rawExpressions;
+ const changedExpressions: Map = new Map();
+ expressions.current.forEach((expr, id) => {
+ if ((expr != null) && (expr !== rawExpressions.get(id))) {
+ changedExpressions.set(id, expr);
+ }
+ });
+ onSubmit(changedExpressions);
+ }, [expressions, metadataRef, onSubmit]);
+
+ const [showModal, hideModal, blurModal] = useCustomModal({
+ className: "set-expression",
+ title: "Set Expression",
+ Icon: SetExpressionIconSvg,
+ Content,
+ contentProps,
+ focusElement: "#expression-input",
+ buttons: [
+ { label: "Clear", onClick: handleClear },
+ { label: "Cancel" },
+ { label: "OK", isDefault: true, onClick: handleSubmit }
+ ]
+ }, [currYAttrId, errorMessage, currentExpression]);
+ blurModalRef.current = blurModal;
+ return [showModal, hideModal, setCurrYAttrId];
+};
+
+interface IContentProps {
+ dataSet: IDataSet;
+ xName: string;
+ currYAttrId: string | undefined;
+ setCurrYAttrId: React.Dispatch>;
+ // map of attribute ids to editable expressions
+ expressions: React.MutableRefObject>;
+ // the currently edited expression (controlled input)
+ currentExpression: string;
+ errorMessage: string;
+ updateCurrentExpression: (expr: string, isInitializing?: boolean) => void;
+ acceptExpression: (yAttrId: string, expr: string) => void;
+}
+const Content: React.FC = ({
+ dataSet, xName, currYAttrId, setCurrYAttrId, expressions,
+ currentExpression, errorMessage, updateCurrentExpression, acceptExpression
+}) => {
+ const firstYAttr = useCurrent(dataSet.attributes.length > 1 ? dataSet.attributes[1] : undefined);
+ const currYAttr = currYAttrId ? dataSet.attrFromID(currYAttrId) : firstYAttr.current;
+ const selectElt = useRef(null);
+ const inputElt = useRef(null);
+ const yAttrs = dataSet.attributes.length <= 2
+ ? {currYAttr?.name}
+ : ;
+ const placeholder = `e.g. 3*${xName}+2`;
+ useLayoutEffect(() => {
+ currYAttr && updateCurrentExpression(expressions.current.get(currYAttr.id) || "");
+ }, [currYAttr]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const handleInputChange = (e: React.ChangeEvent) => {
+ updateCurrentExpression(e.target.value);
+ };
+
+ const handleBlur = (e: React.FocusEvent) => {
+ currYAttr && acceptExpression(currYAttr.id, e.target.value);
+ };
+
+ return (
+ <>
+
+ Enter an expression for
+ {yAttrs}
+ in terms of
+ {xName}
+ :
+
+
+
+
+
+
+ {errorMessage}
+
+
+ );
+};
diff --git a/src/components/tools/table-tool/use-geometry-linking.ts b/src/components/tools/table-tool/use-geometry-linking.ts
new file mode 100644
index 0000000000..d86a4aa68d
--- /dev/null
+++ b/src/components/tools/table-tool/use-geometry-linking.ts
@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import { useCurrent } from "../../../hooks/use-current";
+import { useFeatureFlag } from "../../../hooks/use-stores";
+import { kGeometryToolID } from "../../../models/tools/geometry/geometry-content";
+import {
+ addTableToDocumentMap, getLinkedTableIndex, getTableLinkColors, removeTableFromDocumentMap
+} from "../../../models/tools/table-links";
+import { TableContentModelType } from "../../../models/tools/table/table-content";
+import { ITileLinkMetadata } from "../../../models/tools/table/table-model-types";
+import { ToolTileModelType } from "../../../models/tools/tool-tile";
+import { useLinkGeometryDialog } from "./use-link-geometry-dialog";
+
+interface IProps {
+ documentId?: string;
+ model: ToolTileModelType;
+ hasLinkableRows: boolean;
+ onRequestTilesOfType: (tileType: string) => ITileLinkMetadata[];
+ onLinkGeometryTile: (geomTileInfo: ITileLinkMetadata) => void;
+}
+export const useGeometryLinking = ({
+ documentId, model, hasLinkableRows, onRequestTilesOfType, onLinkGeometryTile
+}: IProps) => {
+ const modelId = model.id;
+ const showLinkButton = useFeatureFlag("GeometryLinkedTables");
+ const linkIndex = showLinkButton ? getLinkedTableIndex(modelId) : -1;
+ const geometryTiles = useLinkableGeometryTiles({ model, onRequestTilesOfType });
+ const isLinkEnabled = hasLinkableRows && (geometryTiles.length > 0);
+ const linkColors = getTableLinkColors(modelId);
+
+ const [showLinkGeometryDialog] = useLinkGeometryDialog({ geometryTiles, onLinkGeometryTile });
+
+ useEffect(() => {
+ documentId && addTableToDocumentMap(documentId, modelId);
+ return () => removeTableFromDocumentMap(modelId);
+ }, [documentId, modelId]);
+
+ return { showLinkButton, isLinkEnabled, linkIndex, linkColors, showLinkGeometryDialog };
+};
+
+interface IUseLinkableGeometryTilesProps {
+ model: ToolTileModelType;
+ onRequestTilesOfType: (tileType: string) => ITileLinkMetadata[];
+}
+const useLinkableGeometryTiles = ({ model, onRequestTilesOfType }: IUseLinkableGeometryTilesProps) => {
+ const geometryTiles = useCurrent(onRequestTilesOfType(kGeometryToolID));
+ const content = model.content as TableContentModelType;
+ // add default title if there isn't a title; filter out tiles we're already linked to
+ return geometryTiles.current
+ .map((tileInfo, i) => ({ id: tileInfo.id, title: tileInfo.title || `Graph ${i + 1}` }))
+ .filter(tileInfo => content.metadata.linkedGeometries.indexOf(tileInfo.id) < 0);
+};
diff --git a/src/components/tools/table-tool/use-grid-context.ts b/src/components/tools/table-tool/use-grid-context.ts
new file mode 100644
index 0000000000..285c4ade48
--- /dev/null
+++ b/src/components/tools/table-tool/use-grid-context.ts
@@ -0,0 +1,86 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { CellNavigationMode, DataGridHandle } from "react-data-grid";
+import { useCurrent } from "../../../hooks/use-current";
+import { useSharedSelectionStore } from "../../../hooks/use-stores";
+import { uniqueId } from "../../../utilities/js-utils";
+import { IGridContext, TPosition } from "./table-types";
+
+interface IProps {
+ modelId: string;
+ showRowLabels: boolean;
+ triggerColumnChange: () => void;
+}
+export const useGridContext = ({ modelId, showRowLabels, triggerColumnChange }: IProps) => {
+ const gridRef = useRef(null);
+ const inputRowId = useRef(uniqueId());
+
+ // this tracks ReactDataGrid's notion of the selected cell
+ const selectedCell = useRef({ rowIdx: -1, idx: -1 });
+ const isSelectedCellInRow = useCallback((rowIdx: number) => selectedCell.current.rowIdx === rowIdx, []);
+ // local since ReactDataGrid doesn't have a notion of column selection
+ const [selectedColumns, setSelectedColumns] = useState(new Set());
+ const selectedColumnsRef = useCurrent(selectedColumns);
+ // we use a Set to eventually support multiple selected columns, but
+ // currently the API constrains to a single selected column.
+ const isColumnSelected = useCallback((columnId: string) =>
+ selectedColumnsRef.current.has(columnId), [selectedColumnsRef]);
+ const sharedSelection = useSharedSelectionStore();
+ const getSelectedRows = useCallback(() => {
+ // this is suitable for passing into ReactDataGrid
+ return new Set(Array.from(sharedSelection.getSelected(modelId)) as string[]);
+ }, [modelId, sharedSelection]);
+
+ const clearRowSelection = useCallback(() => sharedSelection.clear(modelId), [modelId, sharedSelection]);
+ const clearColumnSelection = useCallback(() => setSelectedColumns(new Set([])), []);
+ const clearCellSelection = useCallback(() => gridRef.current?.selectCell({ idx: -1, rowIdx: -1 }), []);
+
+ // clears all selection by default; options can be used to preserve particular forms of selection
+ const clearSelection = useCallback((options?: { row?: boolean, column?: boolean, cell?: boolean }) => {
+ const { row, column, cell } = options || {};
+ (row !== false) && clearRowSelection();
+ (column !== false) && clearColumnSelection();
+ (cell !== false) && clearCellSelection();
+ }, [clearCellSelection, clearColumnSelection, clearRowSelection]);
+
+ const selectColumn = useCallback((columnId: string) => {
+ clearSelection({ column: false });
+ setSelectedColumns(new Set([columnId]));
+ triggerColumnChange();
+ }, [clearSelection, triggerColumnChange]);
+
+ const selectRowById = useCallback((rowId: string, select: boolean) => {
+ if (select !== sharedSelection.isSelected(modelId, rowId)) {
+ sharedSelection.select(modelId, rowId, select);
+ }
+ }, [modelId, sharedSelection]);
+
+ const selectOneRow = useCallback((rowId: string) => {
+ clearColumnSelection();
+ sharedSelection.setSelected(modelId, [rowId]);
+ }, [clearColumnSelection, modelId, sharedSelection]);
+
+ // Creating a new gridContext can result in focus change thus disrupting cell edits;
+ // therefore, it's important that all inputs to the gridContext be wrapped in useCallback()
+ // and that state references are mediated through useRef() (e.g. isColumnSelected()).
+ const gridContext: IGridContext = useMemo(() => ({
+ showRowLabels,
+ isColumnSelected,
+ onSelectColumn: selectColumn,
+ isSelectedCellInRow,
+ onSelectRowById: selectRowById,
+ onSelectOneRow: selectOneRow,
+ onClearSelection: clearSelection
+ }), [clearSelection, isColumnSelected, isSelectedCellInRow, selectColumn, selectOneRow, selectRowById,
+ showRowLabels]);
+
+ // called by ReactDataGrid when selected rows change
+ const onSelectedRowsChange = useCallback((_rows: Set) => {
+ _rows.delete(inputRowId.current);
+ sharedSelection.setSelected(modelId, Array.from(_rows) as string[]);
+ }, [modelId, sharedSelection]);
+
+ const cellNavigationMode: CellNavigationMode = "CHANGE_ROW";
+ return {
+ ref: gridRef, cellNavigationMode, inputRowId, selectedCell, getSelectedRows, gridContext, onSelectedRowsChange
+ };
+};
diff --git a/src/components/tools/table-tool/use-link-geometry-dialog.tsx b/src/components/tools/table-tool/use-link-geometry-dialog.tsx
new file mode 100644
index 0000000000..af655416af
--- /dev/null
+++ b/src/components/tools/table-tool/use-link-geometry-dialog.tsx
@@ -0,0 +1,55 @@
+import React, { useRef, useState } from "react";
+import LinkGraphIcon from "../../../clue/assets/icons/table/link-graph-icon.svg";
+import { useCustomModal } from "../../../hooks/use-custom-modal";
+import { ITileLinkMetadata } from "../../../models/tools/table/table-model-types";
+
+import "./link-geometry-dialog.scss";
+
+interface IContentProps {
+ geometryTiles: ITileLinkMetadata[];
+ selectValue: string;
+ setSelectValue: React.Dispatch>;
+}
+const Content: React.FC = ({ geometryTiles, selectValue, setSelectValue }) => {
+ const selectElt = useRef(null);
+ return (
+ <>
+
+ To link this table to a graph, drag the table to a graph or select a graph from this list.
+
+
+
+ );
+};
+
+interface IProps {
+ geometryTiles: ITileLinkMetadata[];
+ onLinkGeometryTile: (geomTileInfo: ITileLinkMetadata) => void;
+}
+export const useLinkGeometryDialog = ({ geometryTiles, onLinkGeometryTile }: IProps) => {
+ const [selectValue, setSelectValue] = useState("");
+ const handleClick = () => {
+ const tileInfo = geometryTiles.find(tile => tile.id === selectValue);
+ tileInfo && onLinkGeometryTile(tileInfo);
+ };
+ const [showModal, hideModal] = useCustomModal({
+ className: "link-geometry",
+ Icon: LinkGraphIcon,
+ title: "Link Table to a Graph",
+ Content,
+ contentProps: { geometryTiles, selectValue, setSelectValue },
+ buttons: [
+ { label: "Cancel" },
+ { label: "Link Table", isDefault: true, isDisabled: !selectValue, onClick: handleClick }
+ ]
+ }, [geometryTiles]);
+
+ return [showModal, hideModal];
+};
diff --git a/src/components/tools/table-tool/use-model-data-set.ts b/src/components/tools/table-tool/use-model-data-set.ts
new file mode 100644
index 0000000000..67d41bedcf
--- /dev/null
+++ b/src/components/tools/table-tool/use-model-data-set.ts
@@ -0,0 +1,50 @@
+import classNames from "classnames";
+import { autorun } from "mobx";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useCurrent } from "../../../hooks/use-current";
+import { DataSet } from "../../../models/data/data-set";
+import { TableContentModelType } from "../../../models/tools/table/table-content";
+import { ToolTileModelType } from "../../../models/tools/tool-tile";
+import { kRowHeight } from "./table-types";
+
+/*
+ Table state is stored in content as a sequence of changes/actions.
+ This code is responsible for tracking changes in content and maintaining a
+ synchronized DataSet model for use by ReactDataGrid and other clients.
+ */
+export const useModelDataSet = (model: ToolTileModelType) => {
+ const modelRef = useCurrent(model);
+ const getContent = useCallback(() => modelRef.current.content as TableContentModelType, [modelRef]);
+ const dataSet = useRef(DataSet.create());
+ const syncedChanges = useRef(0);
+ const [columnChanges, setColumnChanges] = useState(0);
+ const triggerColumnChange = useCallback(() => setColumnChanges(state => ++state), []);
+ const [rowChanges, setRowChanges] = useState(0);
+ const triggerRowChange = useCallback(() => setRowChanges(state => ++state), []);
+
+ useEffect(() => {
+ // can't use getContent() here as then content changes don't trigger reinstallation of the autorun
+ const _content = model.content as TableContentModelType;
+ const disposer = autorun(() => {
+ if (syncedChanges.current < _content.changes.length) {
+ const [hasColumnChanges, hasRowChanges] = _content.applyChanges(dataSet.current, syncedChanges.current);
+ hasColumnChanges && triggerColumnChange();
+ hasRowChanges && triggerRowChange();
+ syncedChanges.current = _content.changes.length;
+ }
+ });
+ return () => disposer();
+ }, [model.content, triggerColumnChange, triggerRowChange]);
+
+ const setTableTitle = useCallback((title: string) => {
+ (title != null) && getContent().setTableName(title);
+ triggerColumnChange();
+ }, [getContent, triggerColumnChange]);
+
+ const content = getContent();
+ const className = classNames("rdg-light", { "show-expressions": content.hasExpressions });
+ const rowHeight = kRowHeight;
+ const headerRowHeight = content.hasExpressions ? 2 * rowHeight : rowHeight;
+ return { dataSet, columnChanges, triggerColumnChange, rowChanges, triggerRowChange,
+ className, rowHeight, headerRowHeight, onSetTableTitle: setTableTitle };
+};
diff --git a/src/components/tools/table-tool/use-number-format.ts b/src/components/tools/table-tool/use-number-format.ts
new file mode 100644
index 0000000000..ede3ddd23f
--- /dev/null
+++ b/src/components/tools/table-tool/use-number-format.ts
@@ -0,0 +1,10 @@
+import { useSettingFromStores } from "../../../hooks/use-stores";
+import { format } from "d3-format";
+import { useMemo } from "react";
+
+export function useNumberFormat() {
+ const kDefaultFormatStr = ".1~f"; // one decimal place, remove trailing zero
+ const formatStr = useSettingFromStores("numFormat", "table") as string | undefined ||
+ kDefaultFormatStr;
+ return useMemo(() => format(formatStr), [formatStr]);
+}
diff --git a/src/components/tools/table-tool/use-row-label-column.tsx b/src/components/tools/table-tool/use-row-label-column.tsx
new file mode 100644
index 0000000000..d1f2cd74e4
--- /dev/null
+++ b/src/components/tools/table-tool/use-row-label-column.tsx
@@ -0,0 +1,66 @@
+import React, { useCallback } from "react";
+import { Tooltip } from "react-tippy";
+import RowLabelsHiddenSvg from "../../../clue/assets/icons/table/row-labels-hidden-icon.svg";
+import RowLabelsShownSvg from "../../../clue/assets/icons/table/row-labels-shown-icon.svg";
+import { useTooltipOptions } from "../../../hooks/use-tooltip-options";
+import { TFormatterProps, TPosition } from "./table-types";
+
+interface IProps {
+ inputRowId: string;
+ selectedCell: React.MutableRefObject;
+ showRowLabels: boolean;
+ setShowRowLabels: (show: boolean) => void;
+}
+export const useRowLabelColumn = ({
+ inputRowId, selectedCell, showRowLabels, setShowRowLabels
+}: IProps) => {
+
+ const title = showRowLabels ? "Hide labels" : "Show labels";
+ const tooltipOptions = useTooltipOptions({ title, distance: -2 });
+
+ const RowLabelHeader: React.FC = useCallback(() => {
+ return (
+
+ setShowRowLabels(!showRowLabels)}>
+
+
+
+
+ );
+ }, [setShowRowLabels, showRowLabels, tooltipOptions]);
+ RowLabelHeader.displayName = "RowLabelHeader";
+
+ const RowLabelFormatter: React.FC = useCallback(({
+ row, isRowSelected, onRowSelectionChange
+ }: TFormatterProps) => {
+ const { __id__, __index__, __context__ } = row;
+ const handleClick = (e: React.MouseEvent) => {
+ const hasModifier = e.ctrlKey || e.metaKey || e.shiftKey;
+ const selected = hasModifier ? !isRowSelected : true;
+ if (e.button === 0) {
+ // clear selection so navigation direction is always forward after click
+ selectedCell.current = { rowIdx: -1, idx: -1 };
+ if (selected !== isRowSelected) {
+ if (hasModifier) {
+ onRowSelectionChange(selected, e.shiftKey);
+ }
+ else if (__id__ === inputRowId) {
+ __context__.onClearSelection({ cell: false });
+ }
+ else {
+ __context__.onSelectOneRow(__id__);
+ }
+ }
+ }
+ };
+
+ return (
+
+ {showRowLabels ? __index__ : undefined}
+
+ );
+ }, [inputRowId, selectedCell, showRowLabels]);
+
+ return { RowLabelHeader, RowLabelFormatter };
+};
diff --git a/src/components/tools/table-tool/use-rows-from-data-set.ts b/src/components/tools/table-tool/use-rows-from-data-set.ts
new file mode 100644
index 0000000000..1ebde8f995
--- /dev/null
+++ b/src/components/tools/table-tool/use-rows-from-data-set.ts
@@ -0,0 +1,39 @@
+import { useMemo } from "react";
+import { IDataSet } from "../../../models/data/data-set";
+import { IGridContext, TRow } from "./table-types";
+
+interface IUseRowsFromDataSet {
+ dataSet: IDataSet;
+ readOnly: boolean;
+ inputRowId: string;
+ rowChanges: number;
+ context: IGridContext;
+}
+
+const canonicalize = (dataSet: IDataSet, row: TRow) => {
+ // ReactDataGrid currently doesn't like editing undefined values,
+ // so we convert them to empty strings when building rows.
+ if (row) {
+ dataSet.attributes.forEach(attr => {
+ if (row[attr.id] == null) {
+ row[attr.id] = "";
+ }
+ });
+ }
+ return row;
+};
+
+export const useRowsFromDataSet = ({ dataSet, readOnly, inputRowId, rowChanges, context }: IUseRowsFromDataSet) => {
+ return useMemo(() => {
+ const rowKeyGetter = (row: TRow) => row.__id__;
+ const rowClass = (row: TRow) => row.__id__ === inputRowId ? "input-row" : undefined;
+ const rows = dataSet.getCanonicalCasesAtIndices()
+ .map((_case, i) => canonicalize(dataSet, {
+ __index__: i + 1,
+ __context__: context,
+ ..._case } as TRow));
+ !readOnly && rows.push(canonicalize(dataSet, { __id__: inputRowId, __context__: context }));
+ rowChanges; // eslint-disable-line no-unused-expressions
+ return { rows, rowKeyGetter, rowClass };
+ }, [context, dataSet, inputRowId, readOnly, rowChanges]);
+};
diff --git a/src/components/tools/table-tool/use-table-title.ts b/src/components/tools/table-tool/use-table-title.ts
new file mode 100644
index 0000000000..47aaf41c1e
--- /dev/null
+++ b/src/components/tools/table-tool/use-table-title.ts
@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useCurrent } from "../../../hooks/use-current";
+import { IDataSet } from "../../../models/data/data-set";
+import { IGridContext } from "./table-types";
+
+interface IProps {
+ gridContext: IGridContext;
+ dataSet: IDataSet;
+ readOnly?: boolean;
+ onRequestUniqueTitle?: () => string | undefined;
+ onSetTableTitle?: (title: string) => void;
+}
+export const useTableTitle = ({
+ gridContext, dataSet, readOnly, onRequestUniqueTitle, onSetTableTitle
+}: IProps) => {
+
+ const getTitle = useCallback(() => dataSet.name, [dataSet.name]);
+ const editingTitle = useCurrent(getTitle());
+
+ const onBeginTitleEdit = () => {
+ editingTitle.current = getTitle();
+ gridContext.onClearSelection();
+ return !readOnly;
+ };
+ const onEndTitleEdit = (title?: string) => {
+ if (!readOnly && (title != null) && (title !== editingTitle.current)) {
+ onSetTableTitle?.(title);
+ }
+ };
+
+ // request a default title if we don't already have one
+ const onRequestUniqueTitleRef = useRef(onRequestUniqueTitle);
+ useEffect(() => {
+ if (!dataSet.name) {
+ // wait for all tiles to have registered their callbacks
+ setTimeout(() => {
+ const _title = onRequestUniqueTitleRef.current?.();
+ if (_title) {
+ dataSet.setName(_title);
+ }
+ }, 100);
+ }
+ // don't request a title after we've been unmounted
+ return () => onRequestUniqueTitleRef.current = undefined;
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+ return { getTitle, onBeginTitleEdit, onEndTitleEdit };
+};
diff --git a/src/components/tools/table-tool/use-tool-api.ts b/src/components/tools/table-tool/use-tool-api.ts
new file mode 100644
index 0000000000..8a98c37b51
--- /dev/null
+++ b/src/components/tools/table-tool/use-tool-api.ts
@@ -0,0 +1,35 @@
+import { useEffect, useMemo } from "react";
+import { useCurrent } from "../../../hooks/use-current";
+import { getLinkedTableIndex } from "../../../models/tools/table-links";
+import { TableMetadataModelType } from "../../../models/tools/table/table-content";
+import { IToolApi } from "../tool-api";
+
+interface IProps {
+ metadata: TableMetadataModelType;
+ getTitle: () => string | undefined;
+ getContentHeight: () => number | undefined;
+ onRegisterToolApi: (toolApi: IToolApi, facet?: string | undefined) => void;
+ onUnregisterToolApi: (facet?: string | undefined) => void;
+}
+export const useToolApi = ({
+ metadata, getTitle, getContentHeight, onRegisterToolApi, onUnregisterToolApi
+}: IProps) => {
+ const metadataRef = useCurrent(metadata);
+ const toolApi: IToolApi = useMemo(() => ({
+ getTitle,
+ getContentHeight,
+ isLinked: () => {
+ return metadataRef.current.isLinked;
+ },
+ getLinkIndex: (index?: number) => {
+ return metadataRef.current.isLinked
+ ? getLinkedTableIndex(metadataRef.current.id)
+ : -1;
+ }
+ }), [getContentHeight, getTitle, metadataRef]);
+
+ useEffect(() => {
+ onRegisterToolApi(toolApi);
+ return () => onUnregisterToolApi();
+ }, [onRegisterToolApi, onUnregisterToolApi, toolApi]);
+};
diff --git a/src/components/tools/text-tool.tsx b/src/components/tools/text-tool.tsx
index 46c3a984b9..38cb101a2b 100644
--- a/src/components/tools/text-tool.tsx
+++ b/src/components/tools/text-tool.tsx
@@ -11,7 +11,8 @@ import { debouncedSelectTile } from "../../models/stores/ui";
import { TextContentModelType } from "../../models/tools/text/text-content";
import { hasSelectionModifier } from "../../utilities/event-utils";
import { TextToolbarComponent } from "./text-toolbar";
-import { IToolApi, IToolTileProps } from "./tool-tile";
+import { IToolApi } from "./tool-api";
+import { IToolTileProps } from "./tool-tile";
import { renderSlateMark, renderSlateBlock } from "./slate-renderers";
import "./text-tool.sass";
@@ -232,9 +233,8 @@ export default class TextToolComponent extends BaseComponent
@@ -310,6 +311,11 @@ export default class TextToolComponent extends BaseComponent {
+ // text toolbar is based on editor focus rather than tile selection
+ return !!this.state.value?.selection.isFocused;
+ }
+
private handleChange = (change: SlateChange) => {
const { value } = change;
const { readOnly, model } = this.props;
diff --git a/src/components/tools/text-toolbar.tsx b/src/components/tools/text-toolbar.tsx
index 85b57bf5a8..894d2fa4ad 100644
--- a/src/components/tools/text-toolbar.tsx
+++ b/src/components/tools/text-toolbar.tsx
@@ -1,6 +1,6 @@
import React from "react";
import ReactDOM from "react-dom";
-import { useFloatingToolbarLocation } from "./hooks/use-floating-toolbar-location";
+import { IFloatingToolbarProps, useFloatingToolbarLocation } from "./hooks/use-floating-toolbar-location";
import { TextToolbarButton } from "./text-toolbar-button";
import { IRegisterToolApiProps } from "./tool-tile";
import { isMac } from "../../utilities/browser";
@@ -12,13 +12,10 @@ interface IButtonDef {
toolTip: string; // Text for the button's tool-tip.
}
-interface IProps extends IRegisterToolApiProps {
- documentContent?: HTMLElement | null;
- toolTile?: HTMLElement | null;
+interface IProps extends IFloatingToolbarProps, IRegisterToolApiProps {
selectedButtons: string[];
onButtonClick: (buttonName: string, editor: any, event: React.MouseEvent) => void;
editor: any;
- enabled: boolean;
}
const kShortcutPrefix = isMac() ? "Cmd-" : "Ctrl-";
@@ -38,7 +35,8 @@ const handleMouseDown = (event: React.MouseEvent) => {
};
export const TextToolbarComponent: React.FC = (props: IProps) => {
- const { documentContent, enabled, editor, selectedButtons, onButtonClick, ...others } = props;
+ const { documentContent, editor, selectedButtons, onIsEnabled, onButtonClick, ...others } = props;
+ const enabled = onIsEnabled();
const toolbarLocation = useFloatingToolbarLocation({
documentContent,
toolbarHeight: 29,
diff --git a/src/components/tools/tile-comments.tsx b/src/components/tools/tile-comments.tsx
index 9557c8e84d..7500819bc3 100644
--- a/src/components/tools/tile-comments.tsx
+++ b/src/components/tools/tile-comments.tsx
@@ -1,21 +1,23 @@
import React from "react";
import { observer, inject } from "mobx-react";
+import { ToolApiInterfaceContext } from "./tool-api";
import { BaseComponent } from "../base";
import { TileCommentsModelType, TileCommentModelType } from "../../models/tools/tile-comments";
-import { IToolApiInterface } from "./tool-tile";
import "./tile-comments.sass";
interface IProps {
docKey: string;
model: TileCommentsModelType;
- toolApiInterface?: IToolApiInterface;
}
@inject("stores")
@observer
export class TileCommentsComponent extends BaseComponent {
+ static contextType = ToolApiInterfaceContext;
+ declare context: React.ContextType;
+
public render() {
const { user } = this.stores;
const { model } = this.props;
@@ -63,13 +65,15 @@ export class TileCommentsComponent extends BaseComponent {
}
private handleHover = (selectionInfo?: string) => () => {
- const { toolApiInterface, model } = this.props;
+ const { model } = this.props;
+ const toolApiInterface = this.context;
const toolApi = toolApiInterface?.getToolApi(model.tileId);
selectionInfo && toolApi?.setSelectionHighlight?.(selectionInfo, true);
}
private handleLeave = (selectionInfo?: string) => () => {
- const { toolApiInterface, model } = this.props;
+ const { model } = this.props;
+ const toolApiInterface = this.context;
const toolApi = toolApiInterface?.getToolApi(model.tileId);
selectionInfo && toolApi?.setSelectionHighlight?.(selectionInfo, false);
}
diff --git a/src/components/tools/tool-api.tsx b/src/components/tools/tool-api.tsx
new file mode 100644
index 0000000000..c34b29f673
--- /dev/null
+++ b/src/components/tools/tool-api.tsx
@@ -0,0 +1,26 @@
+import { createContext } from "react";
+
+export interface IToolApi {
+ getTitle?: () => string | undefined;
+ hasSelection?: () => boolean;
+ deleteSelection?: () => void;
+ getSelectionInfo?: () => string;
+ setSelectionHighlight?: (selectionInfo: string, isHighlighted: boolean) => void;
+ isLinked?: () => boolean;
+ getLinkIndex?: (index?: number) => number;
+ getLinkedTables?: () => string[] | undefined;
+ getContentHeight?: () => number | undefined;
+ handleDocumentScroll?: (x: number, y: number) => void;
+ handleTileResize?: (entry: ResizeObserverEntry) => void;
+}
+
+export interface IToolApiInterface {
+ register: (id: string, toolApi: IToolApi) => void;
+ unregister: (id: string) => void;
+ getToolApi: (id: string) => IToolApi;
+ forEach: (callback: (api: IToolApi) => void) => void;
+}
+
+export type IToolApiMap = Record;
+
+export const ToolApiInterfaceContext = createContext(null);
diff --git a/src/components/tools/tool-tile.sass b/src/components/tools/tool-tile.sass
index 35f0dd0877..0a46d3819b 100644
--- a/src/components/tools/tool-tile.sass
+++ b/src/components/tools/tool-tile.sass
@@ -9,6 +9,15 @@
flex: 1 1 auto
border: $half-border-width solid white
+ &.teacher
+ background-color: $learninglog-green-light-8
+ margin: 5px 0 10px 20px
+ padding-right: 10px
+ border-left: $half-border-width solid $learninglog-green
+
+ &:not(.text-tool-tile)
+ padding: 10px
+
.tool-tile-drag-handle
position: absolute
right: -2px
diff --git a/src/components/tools/tool-tile.tsx b/src/components/tools/tool-tile.tsx
index 28398c1866..80524e6601 100644
--- a/src/components/tools/tool-tile.tsx
+++ b/src/components/tools/tool-tile.tsx
@@ -17,6 +17,7 @@ import TextToolComponent from "./text-tool";
import ImageToolComponent from "./image-tool";
import DrawingToolComponent from "./drawing-tool/drawing-tool";
import PlaceholderToolComponent from "./placeholder-tool/placeholder-tool";
+import { IToolApi, ToolApiInterfaceContext } from "./tool-api";
import { HotKeys } from "../../utilities/hot-keys";
import { TileCommentsComponent } from "./tile-comments";
import { LinkIndicatorComponent } from "./link-indicator";
@@ -27,27 +28,6 @@ import "../../utilities/dom-utils";
import "./tool-tile.sass";
-export interface IToolApi {
- hasSelection?: () => boolean;
- deleteSelection?: () => void;
- getSelectionInfo?: () => string;
- setSelectionHighlight?: (selectionInfo: string, isHighlighted: boolean) => void;
- isLinked?: () => boolean;
- getLinkIndex?: (index?: number) => number;
- getLinkedTables?: () => string[] | undefined;
- handleDocumentScroll?: (x: number, y: number) => void;
- handleTileResize?: (entry: ResizeObserverEntry) => void;
-}
-
-export interface IToolApiInterface {
- register: (id: string, toolApi: IToolApi) => void;
- unregister: (id: string) => void;
- getToolApi: (id: string) => IToolApi;
- forEach: (callback: (api: IToolApi) => void) => void;
-}
-
-export type IToolApiMap = Record;
-
export const kDragTiles = "org.concord.clue.drag-tiles";
export const kDragRowHeight = "org.concord.clue.row.height";
@@ -56,7 +36,7 @@ export const kDragTileId = "org.concord.clue.tile.id";
export const kDragTileContent = "org.concord.clue.tile.content";
export const kDragTileCreate = "org.concord.clue.tile.create";
// allows source compatibility to be checked in dragOver
-export const dragTileSrcDocId = (id: string) => `org.concord.clue.src.${id}`;
+export const dragTileSrcDocId = (id: string) => `org.concord.clue.src.${id.toLowerCase()}`;
export const dragTileType = (type: string) => `org.concord.clue.tile.type.${type}`;
export function extractDragTileSrcDocId(dataTransfer: DataTransfer) {
@@ -77,7 +57,8 @@ export function extractDragTileType(dataTransfer: DataTransfer) {
interface IToolTileBaseProps {
context: string;
- docId: string;
+ documentId?: string; // permanent id (key) of the containing document
+ docId: string; // ephemeral contentId for the DocumentContent
documentContent: HTMLElement | null;
scale?: number;
widthPct?: number;
@@ -85,6 +66,8 @@ interface IToolTileBaseProps {
model: ToolTileModelType;
readOnly?: boolean;
onSetCanAcceptDrop: (tileId?: string) => void;
+ onRequestTilesOfType: (tileType: string) => Array<{ id: string, title?: string }>;
+ onRequestUniqueTitle: (tileId: string) => string | undefined;
onRequestRowHeight: (tileId: string, height?: number, deltaHeight?: number) => void;
}
@@ -98,16 +81,19 @@ export interface IToolTileProps extends IToolTileBaseProps, IRegisterToolApiProp
}
interface IProps extends IToolTileBaseProps {
- toolApiInterface?: IToolApiInterface;
}
-const kToolComponentMap: any = {
- [kPlaceholderToolID]: PlaceholderToolComponent,
- [kDrawingToolID]: DrawingToolComponent,
- [kGeometryToolID]: GeometryToolComponent,
- [kImageToolID]: ImageToolComponent,
- [kTableToolID]: TableToolComponent,
- [kTextToolID]: TextToolComponent
+interface ToolComponentInfo {
+ ToolComponent: any;
+ toolTileClass: string;
+}
+const kToolComponentMap: Record = {
+ [kPlaceholderToolID]: { ToolComponent: PlaceholderToolComponent, toolTileClass: "placeholder-tile" },
+ [kDrawingToolID]: { ToolComponent: DrawingToolComponent, toolTileClass: "drawing-tool-tile" },
+ [kGeometryToolID]: { ToolComponent: GeometryToolComponent, toolTileClass: "geometry-tool-tile" },
+ [kImageToolID]: { ToolComponent: ImageToolComponent, toolTileClass: "image-tool-tile" },
+ [kTableToolID]: { ToolComponent: TableToolComponent, toolTileClass: "table-tool-tile" },
+ [kTextToolID]: { ToolComponent: TextToolComponent, toolTileClass: "text-tool-tile" }
};
interface IDragTileButtonProps {
@@ -133,6 +119,9 @@ interface IState {
@observer
export class ToolTileComponent extends BaseComponent {
+ static contextType = ToolApiInterfaceContext;
+ declare context: React.ContextType;
+
private modelId: string;
private domElement: HTMLDivElement | null;
private resizeObserver: ResizeObserver;
@@ -191,10 +180,10 @@ export class ToolTileComponent extends BaseComponent {
const { model, readOnly, widthPct } = this.props;
const { hoverTile } = this.state;
const { appConfig, ui } = this.stores;
- const ToolComponent = kToolComponentMap[model.content.type];
+ const { ToolComponent, toolTileClass } = kToolComponentMap[model.content.type];
const isPlaceholderTile = ToolComponent === PlaceholderToolComponent;
const isTileSelected = ui.isSelectedTile(model);
- const classes = classNames("tool-tile", {
+ const classes = classNames("tool-tile", model.display, toolTileClass, {
placeholder: isPlaceholderTile,
readonly: readOnly,
hovered: this.state.hoverTile,
@@ -231,62 +220,57 @@ export class ToolTileComponent extends BaseComponent {
private renderTile(ToolComponent: any) {
const tileId = this.props.model.id;
- const { toolApiInterface, ...otherProps } = this.props;
return ToolComponent != null
?
: null;
}
private renderLinkIndicators() {
- const { model, toolApiInterface } = this.props;
+ const { model } = this.props;
+ const toolApiInterface = this.context;
const toolApi = toolApiInterface?.getToolApi(model.id);
const clientTableLinks = toolApi?.getLinkedTables?.();
- const tableLinkIndex = toolApi?.getLinkIndex?.();
return clientTableLinks
? clientTableLinks.map((id, index) => {
return ;
})
- : (tableLinkIndex != null) && (tableLinkIndex >= 0)
- ?
- : null;
+ : null; // tables don't use the original link indicator any more
}
private renderTileComments() {
const tileId = this.props.model.id;
- const { toolApiInterface } = this.props;
const { documents } = this.stores;
const documentContent = documents.findDocumentOfTile(tileId);
if (documentContent) {
const commentsModel = documentContent.comments.get(tileId);
if (commentsModel) {
- return ;
+ return ;
}
}
}
private getToolResizeHandler = () => {
- const { model, toolApiInterface } = this.props;
+ const { model } = this.props;
+ const toolApiInterface = this.context;
return toolApiInterface?.getToolApi(`${model.id}[layout]`)?.handleTileResize ||
toolApiInterface?.getToolApi(model.id)?.handleTileResize;
}
private handleRegisterToolApi = (toolApi: IToolApi, facet?: string) => {
const id = facet ? `${this.modelId}[${facet}]` : this.modelId;
- this.props.toolApiInterface?.register(id, toolApi);
+ const toolApiInterface = this.context;
+ toolApiInterface?.register(id, toolApi);
// trigger initial render
this.forceUpdate();
}
private handleUnregisterToolApi = (facet?: string) => {
const id = facet ? `${this.modelId}[${facet}]` : this.modelId;
- this.props.toolApiInterface?.unregister(id);
+ const toolApiInterface = this.context;
+ toolApiInterface?.unregister(id);
}
private handleKeyDown = (e: React.KeyboardEvent) => {
@@ -306,7 +290,7 @@ export class ToolTileComponent extends BaseComponent {
return;
}
- const ToolComponent = kToolComponentMap[model.content.type];
+ const ToolComponent = kToolComponentMap[model.content.type].ToolComponent;
if (ToolComponent?.tileHandlesSelection) {
ui.setSelectedTile(model, {append: hasSelectionModifier(e)});
}
@@ -344,7 +328,7 @@ export class ToolTileComponent extends BaseComponent {
}
// set the drag data
const { model, docId, height, scale } = this.props;
- const ToolComponent = kToolComponentMap[model.content.type];
+ const ToolComponent = kToolComponentMap[model.content.type].ToolComponent;
// can't drag placeholder tiles
if (ToolComponent === PlaceholderToolComponent) {
e.preventDefault();
diff --git a/src/components/utilities/error-alert.scss b/src/components/utilities/error-alert.scss
new file mode 100644
index 0000000000..9ff577f1a6
--- /dev/null
+++ b/src/components/utilities/error-alert.scss
@@ -0,0 +1,12 @@
+@import "../../components/vars.sass";
+
+.custom-modal.error-alert {
+ width: 400px;
+ height: 160px;
+ outline: none;
+
+ .modal-icon svg {
+ width: 36px * 0.7;
+ height: 34px * 0.7;
+ }
+}
diff --git a/src/components/utilities/error-alert.tsx b/src/components/utilities/error-alert.tsx
new file mode 100644
index 0000000000..c764e74d50
--- /dev/null
+++ b/src/components/utilities/error-alert.tsx
@@ -0,0 +1,16 @@
+import React, { useEffect } from "react";
+import { IErrorAlertProps, useErrorAlert } from "./use-error-alert";
+
+// Component wrapper for useErrorAlert() for use by class components.
+const ErrorAlert: React.FC = (props) => {
+
+ const [showAlert, hideAlert] = useErrorAlert(props);
+
+ useEffect(() => {
+ showAlert();
+ return () => hideAlert();
+ }, [hideAlert, showAlert]);
+
+ return null;
+};
+export default ErrorAlert;
diff --git a/src/components/utilities/single-string-dialog.scss b/src/components/utilities/single-string-dialog.scss
new file mode 100644
index 0000000000..3017a9b73c
--- /dev/null
+++ b/src/components/utilities/single-string-dialog.scss
@@ -0,0 +1,27 @@
+@import "../../components/vars.sass";
+
+.custom-modal.single-string {
+ width: 400px;
+ height: 183px;
+
+ .modal-icon svg {
+ width: 36px * 0.65;
+ height: 34px * 0.65;
+ fill: $charcoal;
+ }
+
+ .input-row {
+ height: 30px;
+ display: flex;
+ align-items: center;
+
+ label {
+ display: inline-block;
+ flex: 0 0 auto;
+ }
+ input {
+ height: 100%;
+ flex: 1 1 auto;
+ }
+ }
+}
diff --git a/src/components/utilities/single-string-dialog.tsx b/src/components/utilities/single-string-dialog.tsx
index 9fa1d0e93d..49b12b0647 100644
--- a/src/components/utilities/single-string-dialog.tsx
+++ b/src/components/utilities/single-string-dialog.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { Button, Dialog } from "@blueprintjs/core";
+import React, { useEffect } from "react";
+import { useSingleStringDialog } from "./use-single-string-dialog";
interface IProps {
parentId?: string;
@@ -12,73 +12,27 @@ interface IProps {
maxLength?: number;
}
-interface IState {
- content: string;
-}
-
-export default
-class SingleStringDialog extends React.Component {
-
- public state = {
- content: this.props.content || ""
- };
-
- public render() {
- const { title, prompt, placeholder, maxLength } = this.props;
- return (
-
- );
- }
-
- private handleChange = (evt: React.FormEvent) => {
- this.setState({ content: (evt.target as HTMLInputElement).value });
- }
-
- private handleAccept = () => {
- const { onAccept, parentId } = this.props;
- const { content } = this.state;
- onAccept && onAccept(content, parentId);
- }
-
- private handleCancel = () => {
- const { onClose } = this.props;
- onClose && onClose();
- }
-
- private handleKeyDown = (evt: React.KeyboardEvent) => {
- evt.stopPropagation();
- if (evt.keyCode === 13) {
- this.handleAccept();
- } else if (evt.keyCode === 27) {
- this.handleCancel();
- }
- }
-
-}
+// Component wrapper for useSingleStringDialog() for use by class components.
+const SingleStringDialog: React.FC = ({
+ parentId, title, prompt, placeholder, content, maxLength, onAccept, onClose
+}) => {
+
+ const [showDialog, hideDialog] = useSingleStringDialog({
+ title: title || "",
+ prompt,
+ placeholder,
+ value: content,
+ maxLength,
+ context: parentId,
+ onAccept,
+ onClose
+ });
+
+ useEffect(() => {
+ showDialog();
+ return () => hideDialog();
+ }, [hideDialog, showDialog]);
+
+ return null;
+};
+export default SingleStringDialog;
diff --git a/src/components/utilities/tile-utils.ts b/src/components/utilities/tile-utils.ts
index 815e6cc26a..137c2cadca 100644
--- a/src/components/utilities/tile-utils.ts
+++ b/src/components/utilities/tile-utils.ts
@@ -1,6 +1,7 @@
export interface IGetToolbarLocationBaseArgs {
documentContent?: HTMLElement | null;
toolTile?: HTMLElement | null;
+ scale?: number;
toolbarHeight: number;
minToolContent?: number;
toolbarLeftOffset?: number;
@@ -13,8 +14,9 @@ interface IGetToolbarLocationArgs extends IGetToolbarLocationBaseArgs {
}
export function getToolbarLocation({
- documentContent, toolTile, toolbarHeight, minToolContent, toolLeft, toolBottom, toolbarLeftOffset, toolbarTopOffset
- }: IGetToolbarLocationArgs) {
+ documentContent, toolTile, scale,
+ toolbarHeight, minToolContent, toolLeft, toolBottom, toolbarLeftOffset, toolbarTopOffset
+}: IGetToolbarLocationArgs) {
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
let minToolbarTop = minToolContent || 30;
let maxToolbarTop = viewportHeight - toolbarHeight;
@@ -22,13 +24,14 @@ export function getToolbarLocation({
let tileTopOffset = 0;
if (documentContent && toolTile) {
+ const _scale = scale || 1;
const docBounds = documentContent.getBoundingClientRect();
const tileBounds = toolTile.getBoundingClientRect();
const topOffset = tileBounds.top - docBounds.top;
const leftOffset = tileBounds.left - docBounds.left;
if ((topOffset != null) && (leftOffset != null)) {
- tileTopOffset = topOffset;
- tileLeftOffset = leftOffset;
+ tileTopOffset = topOffset / _scale;
+ tileLeftOffset = leftOffset / _scale;
}
minToolbarTop += topOffset;
maxToolbarTop -= docBounds.top;
diff --git a/src/components/utilities/use-caution-alert.tsx b/src/components/utilities/use-caution-alert.tsx
new file mode 100644
index 0000000000..fbcf6864f1
--- /dev/null
+++ b/src/components/utilities/use-caution-alert.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import CautionSvg from "../../assets/icons/caution.svg";
+import { useCustomModal } from "../../hooks/use-custom-modal";
+
+import "./error-alert.scss";
+
+interface IProps {
+ className?: string;
+ title?: string;
+ content: string | React.FC;
+ confirmLabel?: string;
+ cancelLabel?: string;
+ onConfirm: () => void;
+ onClose?: () => void;
+}
+
+interface ITextProps {
+ content: string;
+}
+const TextContent: React.FC = ({ content }) => {
+ return {content}
;
+};
+
+export const useCautionAlert = ({
+ className, title, content, confirmLabel, cancelLabel, onConfirm, onClose
+}: IProps) => {
+
+ const Content = typeof content === "string"
+ ? TextContent
+ : content;
+ const contentProps = typeof content === "string" ? { content } : {};
+
+ const handleConfirm = () => {
+ onConfirm();
+ };
+
+ const [showAlert, hideAlert] = useCustomModal({
+ className: `error-alert ${className || ""}`,
+ title: title || "",
+ Icon: CautionSvg,
+ Content,
+ contentProps,
+ buttons: [
+ { label: cancelLabel || "Cancel" },
+ { label: confirmLabel || "OK", isDefault: true, onClick: handleConfirm }
+ ],
+ onClose
+ });
+
+ return [showAlert, hideAlert];
+};
diff --git a/src/components/utilities/use-error-alert.tsx b/src/components/utilities/use-error-alert.tsx
new file mode 100644
index 0000000000..2eb907a0ab
--- /dev/null
+++ b/src/components/utilities/use-error-alert.tsx
@@ -0,0 +1,42 @@
+import React, { useCallback } from "react";
+import ErrorSvg from "../../assets/icons/error.svg";
+import { useCustomModal } from "../../hooks/use-custom-modal";
+
+import "./error-alert.scss";
+
+export interface IErrorAlertProps {
+ className?: string;
+ title?: string;
+ content: string | React.FC;
+ canCancel?: boolean;
+ buttonLabel?: string;
+ onClick?: () => void;
+ onClose?: () => void;
+}
+
+export const useErrorAlert = ({
+ className, title, content, canCancel, buttonLabel, onClick, onClose
+}: IErrorAlertProps) => {
+
+ const TextContent: React.FC = useCallback(() => {
+ return {content}
;
+ }, [content]);
+ const Content = typeof content === "string"
+ ? TextContent
+ : content;
+
+ const [showAlert, hideAlert] = useCustomModal({
+ className: `error-alert ${className || ""}`,
+ title: title || "",
+ Icon: ErrorSvg,
+ Content,
+ contentProps: {},
+ canCancel,
+ buttons: [
+ { label: buttonLabel || "OK", isDefault: true, onClick }
+ ],
+ onClose
+ });
+
+ return [showAlert, hideAlert];
+};
diff --git a/src/components/utilities/use-single-string-dialog.tsx b/src/components/utilities/use-single-string-dialog.tsx
new file mode 100644
index 0000000000..4f7fab86d6
--- /dev/null
+++ b/src/components/utilities/use-single-string-dialog.tsx
@@ -0,0 +1,53 @@
+import React, { useRef } from "react";
+import TextInputSvg from "../../assets/icons/text-input.svg";
+import { useCustomModal } from "../../hooks/use-custom-modal";
+
+import "./single-string-dialog.scss";
+
+interface IProps {
+ className?: string;
+ title: string;
+ prompt?: string;
+ label?: string;
+ placeholder?: string;
+ value?: string;
+ maxLength?: number;
+ context?: any;
+ onAccept: (value: string, context?: any) => void;
+ onClose?: () => void;
+}
+export const useSingleStringDialog = ({
+ className, title, prompt, label, placeholder, value, maxLength, context, onAccept, onClose
+}: IProps) => {
+
+ const inputRef = useRef(null);
+ const valueRef = useRef(value);
+
+ const Content: React.FC = () => {
+ return (
+ <>
+ {prompt && {prompt}
}
+
+ {label && }
+ valueRef.current = inputRef.current?.value}/>
+
+
+ );
+ };
+
+ return useCustomModal({
+ className: `single-string ${className || ""}`,
+ title,
+ Icon: TextInputSvg,
+ Content,
+ contentProps: {},
+ focusElement: "#string-input",
+ buttons: [
+ { label: "Cancel" },
+ { label: "OK", isDefault: true,
+ onClick: () => onAccept(inputRef.current?.value || valueRef.current || "", context)}
+ ],
+ onClose
+ });
+};
diff --git a/src/components/vars.sass b/src/components/vars.sass
index 57b7a00d47..45057dc72b 100644
--- a/src/components/vars.sass
+++ b/src/components/vars.sass
@@ -312,6 +312,11 @@ $id-orange: #ffc89c
$id-purple: #ffc1eb
$id-green: #91e7a2
+$highlight-blue: #0081ff
+$highlight-blue-50: #80c0ff // $highlight-blue @ 50% opacity
+$highlight-blue-25: #c0e0ff // $highlight-blue @ 25% opacity
+$highlight-blue-50-35: #c3efff // $highlight-blue-50 @ 35% opacity
+
//
// shared component dimensions
//
diff --git a/src/hooks/custom-modal.scss b/src/hooks/custom-modal.scss
new file mode 100644
index 0000000000..e76ff320d3
--- /dev/null
+++ b/src/hooks/custom-modal.scss
@@ -0,0 +1,123 @@
+@import "../components/vars.sass";
+
+$modal-header-height: 34px;
+$modal-header-icon-width: 36px;
+$modal-header-border-radius: 6px;
+$modal-padding: 0 20px;
+$modal-control-height: 30px;
+$modal-control-border: solid 1.5px $charcoal-light-1;
+$modal-control-border-radius: 5px;
+$modal-button-min-width: 62px;
+$modal-button-spacing: 10px;
+$modal-footer-height: 45px;
+
+.custom-modal {
+ position: absolute;
+ color: $charcoal-dark-2;
+ background-color: white;
+ border: solid 2px $workspace-teal;
+ border-radius: 8px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ outline: none;
+
+ .modal-header {
+ width: 100%;
+ height: $modal-header-height;
+ flex: 0 0 auto;
+ background-color: $charcoal-light-6;
+ border-top-left-radius: $modal-header-border-radius;
+ border-top-right-radius: $modal-header-border-radius;
+ font-weight: bold;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .modal-icon {
+ position: absolute;
+ left: 0;
+ width: $modal-header-icon-width;
+ height: $modal-header-height;
+ border-top-left-radius: $modal-header-border-radius;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .modal-close {
+ position: absolute;
+ right: 0;
+ width: $modal-header-icon-width;
+ height: $modal-header-height;
+ border: none;
+ border-top-right-radius: $modal-header-border-radius;
+ outline: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover, &:focus {
+ background-color: $charcoal-light-4;
+ }
+
+ &:active {
+ background-color: $charcoal-light-2;
+ }
+ }
+ }
+
+ .modal-content {
+ width: 100%;
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ padding: $modal-padding;
+
+ input {
+ height: $modal-control-height;
+ border: $modal-control-border;
+ border-radius: $modal-control-border-radius;
+ }
+ }
+
+ .modal-footer {
+ width: 100%;
+ height: $modal-footer-height;
+ flex: 0 0 auto;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-start;
+ padding: $modal-padding;
+
+ .modal-button {
+ height: $modal-control-height;
+ min-width: $modal-button-min-width;
+ margin-left: $modal-button-spacing;
+ color: $charcoal-dark-2;
+ background-color: white;
+ border: $modal-control-border;
+ border-radius: $modal-control-border-radius;
+ outline: none;
+
+ &.disabled {
+ opacity: 35%;
+ }
+
+ &.default:not(.disabled) {
+ background-color: $charcoal-light-6;
+ }
+
+ &:hover:not(.disabled), &:focus:not(.disabled) {
+ background-color: $workspace-teal-light-4;
+ }
+
+ &:active:not(.disabled) {
+ background-color: $workspace-teal-light-3;
+ }
+ }
+ }
+}
diff --git a/src/hooks/use-custom-modal.tsx b/src/hooks/use-custom-modal.tsx
new file mode 100644
index 0000000000..cb0ccf7948
--- /dev/null
+++ b/src/hooks/use-custom-modal.tsx
@@ -0,0 +1,119 @@
+import classNames from "classnames";
+import React, { useCallback, useRef } from "react";
+import Modal from "react-modal";
+import { useModal } from "react-modal-hook";
+import CloseIconSvg from "../assets/icons/close/close.svg";
+
+import "./custom-modal.scss";
+
+// constant for use as return value from client onClick handlers
+export const kLeaveModalOpen = true;
+
+interface IModalButton {
+ className?: string;
+ label: string | React.FC;
+ isDefault?: boolean;
+ isDisabled?: boolean;
+ onClick?: (() => void) | (() => boolean); // close dialog on falsy return value
+}
+
+const invokeButton = (button: IModalButton, onClose: () => void) => {
+ // close dialog on falsy return value from onClick
+ !button.isDisabled && !button.onClick?.() && onClose();
+};
+
+interface IProps {
+ className?: string;
+ title: string | React.FC;
+ Icon?: React.FC;
+ Content: React.FC;
+ contentProps: IContentProps;
+ focusElement?: string;
+ canCancel?: boolean;
+ // defined left-to-right, e.g. Extra Button, Cancel, OK
+ buttons: IModalButton[];
+ onClose?: () => void;
+}
+export const useCustomModal = ({
+ className, Icon, title, Content, contentProps, focusElement, canCancel, buttons, onClose
+}: IProps, dependencies?: any[]) => {
+
+ const contentElt = useRef();
+ const hideModalRef = useRef<() => void>();
+ const handleCloseRef = useRef<() => void>(() => hideModalRef.current?.());
+
+ const blurModal = useCallback(() => {
+ // focusing the content element blurs any input control
+ contentElt.current?.focus();
+ }, []);
+
+ const handleKeyDown = useCallback((e: KeyboardEvent) => {
+ if (e.key === "Enter") {
+ const defaultButton = buttons.find(b => b.isDefault);
+ if (defaultButton && !defaultButton.isDisabled) {
+ blurModal();
+ // useRef to avoid circular dependencies
+ invokeButton(defaultButton, handleCloseRef.current);
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ }
+ }, [blurModal, buttons, handleCloseRef]);
+
+ const handleAfterOpen = ({overlayEl, contentEl}: { overlayEl: Element, contentEl: HTMLDivElement }) => {
+ contentElt.current = contentEl;
+
+ contentEl.addEventListener("keydown", handleKeyDown, true);
+
+ const element = focusElement && contentEl.querySelector(focusElement) as HTMLElement || contentEl;
+ element && setTimeout(() => {
+ element.focus?.();
+ (element as HTMLInputElement).select?.();
+ });
+ };
+
+ const handleClose = useCallback(() => {
+ contentElt.current?.removeEventListener("keydown", handleKeyDown, true);
+ hideModalRef.current?.();
+ }, [handleKeyDown]);
+ handleCloseRef.current = handleClose;
+
+ const [showModal, hideModal] = useModal(() => {
+ return (
+
+
+
+ {Icon && }
+
+
{title}
+ {canCancel !== false &&
+
}
+
+
+
+
+ {buttons.map((b, i) => {
+ const classes = classNames("modal-button", b.className, { default: b.isDefault, disabled: b.isDisabled });
+ const key = `${i}-${b.className}`;
+ const handleClick = () => invokeButton(b, handleClose);
+ return (
+
+ );
+ })}
+
+
+ );
+ }, dependencies);
+ hideModalRef.current = hideModal;
+
+ return [showModal, handleClose, blurModal];
+};
diff --git a/src/hooks/use-stores.ts b/src/hooks/use-stores.ts
index 396ed0016a..b1ca6729c0 100644
--- a/src/hooks/use-stores.ts
+++ b/src/hooks/use-stores.ts
@@ -3,7 +3,8 @@ import { useContext } from "react";
import { ProblemModelType } from "../models/curriculum/problem";
import { AppConfigModelType } from "../models/stores/app-config-model";
import { GroupsModelType } from "../models/stores/groups";
-import { IStores } from "../models/stores/stores";
+import { SelectionStoreModelType } from "../models/stores/selection";
+import { getSettingFromStores, isFeatureSupported, IStores } from "../models/stores/stores";
import { UserModelType } from "../models/stores/user";
import { UIModelType } from "../models/stores/ui";
@@ -28,6 +29,18 @@ export function useProblemStore(): ProblemModelType {
return useStores().problem;
}
+export function useSettingFromStores(key: string, group?: string) {
+ return getSettingFromStores(useStores(), key, group);
+}
+
+export function useSharedSelectionStore(): SelectionStoreModelType {
+ return useStores().selection;
+}
+
export function useUIStore(): UIModelType {
return useStores().ui;
}
+
+export function useFeatureFlag(feature: string) {
+ return isFeatureSupported(useStores(), feature);
+}
diff --git a/src/hooks/use-tool-api-interface.ts b/src/hooks/use-tool-api-interface.ts
deleted file mode 100644
index 8381621df0..0000000000
--- a/src/hooks/use-tool-api-interface.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { each } from "lodash";
-import { useRef } from "react";
-import { IToolApi, IToolApiInterface, IToolApiMap } from "../components/tools/tool-tile";
-
-export function useToolApiInterface(): [IToolApiMap, IToolApiInterface] {
- const toolApiMap = useRef({});
- const toolApiInterface = useRef({
- register: (id: string, toolApi: IToolApi) => {
- toolApiMap.current[id] = toolApi;
- },
- unregister: (id: string) => {
- delete toolApiMap.current[id];
- },
- getToolApi: (id: string) => {
- return toolApiMap.current[id];
- },
- forEach: (callback: (api: IToolApi) => void) => {
- each(toolApiMap.current, api => callback(api));
- }
- });
- return [toolApiMap.current, toolApiInterface.current];
-}
diff --git a/src/hooks/use-tooltip-options.ts b/src/hooks/use-tooltip-options.ts
index 3e623261f9..197287984f 100644
--- a/src/hooks/use-tooltip-options.ts
+++ b/src/hooks/use-tooltip-options.ts
@@ -1,5 +1,8 @@
+import { useMemo } from "react";
import { TooltipProps } from "react-tippy";
+import "react-tippy/dist/tippy.css";
+
const kDefaultTooltipOptions: TooltipProps = {
position: "bottom",
distance: 0,
@@ -11,5 +14,5 @@ const kDefaultTooltipOptions: TooltipProps = {
};
export const useTooltipOptions = (options?: TooltipProps) => {
- return { ...kDefaultTooltipOptions, ...options };
+ return useMemo(() => ({ ...kDefaultTooltipOptions, ...options }), [options]);
};
diff --git a/src/index.html b/src/index.html
index 17328547e7..31fc0d32f0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -61,13 +61,6 @@
-
- right-arrow
-
-
-
- down-arrow
-
Star
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index f089357f4b..42d77dad50 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,15 +1,16 @@
+import initials from "initials";
import jwt from "jsonwebtoken";
import superagent from "superagent";
import { AppMode } from "../models/stores/stores";
import { QueryParams, DefaultUrlParams } from "../utilities/url-params";
import { NUM_FAKE_STUDENTS, NUM_FAKE_TEACHERS } from "../components/demo/demo-creator";
import { AppConfigModelType } from "../models/stores/app-config-model";
-import { IPortalClassOffering, UserType } from "../models/stores/user";
+import { IPortalClassOffering } from "../models/stores/user";
+import { UserType } from "../models/stores/user-types";
import { getErrorMessage } from "../utilities/super-agent-helpers";
import { getPortalOfferings, getPortalClassOfferings, getProblemIdForAuthenticatedUser } from "./portal-api";
import { PortalJWT, PortalFirebaseJWT } from "./portal-types";
import { Logger, LogEventName } from "../lib/logger";
-import initials from "initials";
export const PORTAL_JWT_URL_SUFFIX = "api/v1/jwt/portal";
export const FIREBASE_JWT_URL_SUFFIX = "api/v1/jwt/firebase";
diff --git a/src/lib/logger.test.ts b/src/lib/logger.test.ts
index ea5a4f6870..121ba9b589 100644
--- a/src/lib/logger.test.ts
+++ b/src/lib/logger.test.ts
@@ -8,7 +8,7 @@ import { InvestigationModel } from "../models/curriculum/investigation";
import { IStores, createStores } from "../models/stores/stores";
import { WorkspaceModel, ProblemWorkspace, WorkspaceModelType } from "../models/stores/workspace";
import { defaultTextContent } from "../models/tools/text/text-content";
-import { createToolTileModelFromContent, IDragTileItem } from "../models/tools/tool-tile";
+import { IDragTileItem, ToolTileModel } from "../models/tools/tool-tile";
import { createSingleTileContent } from "../utilities/test-utils";
import { UserModel } from "../models/stores/user";
@@ -63,7 +63,7 @@ describe("logger", () => {
});
it("can log tile creation", async (done) => {
- const tile = createToolTileModelFromContent(defaultTextContent());
+ const tile = ToolTileModel.create({ content: defaultTextContent() });
mock.post(/.*/, (req, res) => {
const request = JSON.parse(req.body());
diff --git a/src/lib/logger.ts b/src/lib/logger.ts
index fbeff3d926..a96f7b0a7e 100644
--- a/src/lib/logger.ts
+++ b/src/lib/logger.ts
@@ -68,6 +68,8 @@ export enum LogEventName {
SHOW_WORK,
SHOW_TAB,
SHOW_TAB_SECTION,
+ HIDE_SOLUTIONS,
+ SHOW_SOLUTIONS,
GRAPH_TOOL_CHANGE,
DRAWING_TOOL_CHANGE,
diff --git a/src/models/curriculum/section.ts b/src/models/curriculum/section.ts
index a2d95648e2..7e4fad8691 100644
--- a/src/models/curriculum/section.ts
+++ b/src/models/curriculum/section.ts
@@ -1,7 +1,7 @@
import { types } from "mobx-state-tree";
import { DocumentContentModel } from "../document/document-content";
import { SupportModel } from "./support";
-import { cloneDeep } from "lodash";
+import { each } from "lodash";
export type SectionType = string;
@@ -21,11 +21,20 @@ export const kUnknownSectionType = "unknown";
export const kDefaultPlaceholder = "Create or drag tiles here";
const kUnknownSectionInfo = { initials: "?", title: "Unknown", placeholder: kDefaultPlaceholder };
-let gSectionInfoMap: ISectionInfoMap = { [kAllSectionType]: kAllSectionInfo };
+const gSectionInfoMap: ISectionInfoMap = { [kAllSectionType]: kAllSectionInfo };
export function setSectionInfoMap(sectionInfoMap?: ISectionInfoMap) {
- gSectionInfoMap = cloneDeep(sectionInfoMap) || {};
- gSectionInfoMap[kAllSectionType] = kAllSectionInfo;
+ // regular content and teacher guide are two separate units, so we merge them into a single map
+ // teacher guide section types should be unique from regular content; we don't replace existing entries
+ each(sectionInfoMap, (sectionInfo, sectionType) => {
+ if (!gSectionInfoMap[sectionType]) {
+ gSectionInfoMap[sectionType] = sectionInfo;
+ }
+ else {
+ console.warn("setSectionInfoMap skipping redundant assignment of section type:",
+ `${sectionType} "${sectionInfo.title}"`);
+ }
+ });
}
function getSectionInfo(type: SectionType) {
diff --git a/src/models/curriculum/unit.ts b/src/models/curriculum/unit.ts
index 440fd48627..646cfd3f05 100644
--- a/src/models/curriculum/unit.ts
+++ b/src/models/curriculum/unit.ts
@@ -1,4 +1,4 @@
-import { types } from "mobx-state-tree";
+import { Instance, types } from "mobx-state-tree";
import { DocumentContentModel } from "../document/document-content";
import { InvestigationModel } from "./investigation";
import { ISectionInfoMap, setSectionInfoMap } from "./section";
@@ -48,20 +48,42 @@ export const UnitModel = types
const investigation = self.getInvestigation(investigationOrdinal);
return {
investigation,
- problem: investigation && investigation.getProblem(problemOrdinal)
+ problem: investigation?.getProblem(problemOrdinal)
};
}
}));
+export type UnitModelType = Instance;
-export type UnitModelType = typeof UnitModel.Type;
-
-export function getUnitJson(unitId: string | undefined, appConfig: AppConfigModelType ) {
- const unitUrlParam = unitId && appConfig.units.get(unitId);
- if (!unitUrlParam){
+function getUnitSpec(unitId: string | undefined, appConfig: AppConfigModelType) {
+ const requestedUnit = unitId ? appConfig.getUnit(unitId) : undefined;
+ if (unitId && !requestedUnit) {
console.warn(`unitId "${unitId}" not found in appConfig.units`);
}
- const urlParam = unitUrlParam || appConfig.defaultUnit && appConfig.units.get(appConfig.defaultUnit);
- return fetch(urlParam!)
+ return requestedUnit || (appConfig.defaultUnit ? appConfig.getUnit(appConfig.defaultUnit) : undefined);
+}
+
+export function getUnitJson(unitId: string | undefined, appConfig: AppConfigModelType) {
+ const unitSpec = getUnitSpec(unitId, appConfig);
+ const unitUrl = unitSpec?.content;
+ return fetch(unitUrl!)
+ .then(response => {
+ if (response.ok) {
+ return response.json();
+ }
+ else {
+ throw Error(`Request rejected with status ${response.status}`);
+ }
+ })
+ .catch(error => {
+ throw Error(`Request rejected with exception`);
+ });
+}
+
+export function getGuideJson(unitId: string | undefined, appConfig: AppConfigModelType) {
+ const unitSpec = getUnitSpec(unitId, appConfig);
+ const guideUrl = unitSpec?.guide;
+ if (!guideUrl) return;
+ return fetch(guideUrl)
.then(response => {
if (response.ok) {
return response.json();
diff --git a/src/models/document/document-content.test.ts b/src/models/document/document-content.test.ts
index aa80d06e62..2a269a101f 100644
--- a/src/models/document/document-content.test.ts
+++ b/src/models/document/document-content.test.ts
@@ -1,9 +1,17 @@
-import { DocumentContentModel, DocumentContentModelType, cloneContentWithUniqueIds, DocumentContentSnapshotType
- } from "./document-content";
+import {
+ DocumentContentModel, DocumentContentModelType, cloneContentWithUniqueIds, DocumentContentSnapshotType
+} from "./document-content";
import { IDropRowInfo } from "../../models/document/document-content";
import { cloneTileSnapshotWithoutId, IDragTileItem } from "../../models/tools/tool-tile";
import { defaultTextContent } from "../tools/text/text-content";
+// mock uniqueId so we can recognize auto-generated IDs
+const { uniqueId, safeJsonParse } = jest.requireActual("../../utilities/js-utils");
+jest.mock("../../utilities/js-utils", () => ({
+ uniqueId: () => `testid-${uniqueId()}`,
+ safeJsonParse: (json: string) => safeJsonParse(json)
+}));
+
describe("DocumentContentModel", () => {
let documentContent: DocumentContentModelType;
@@ -244,7 +252,7 @@ describe("DocumentContentModel -- sectioned documents --", () => {
it("will remove placeholder tiles when adding a new tile in an interior section", () => {
// [Header:A, Placeholder, Header:B, Text]
- content.addTileInNewRow(defaultTextContent("foo"), { rowIndex: 1 });
+ content.addTileContentInNewRow(defaultTextContent("foo"), { rowIndex: 1 });
// [Header:A, Text, Header:B, Text]
expect(content.rowCount).toBe(4);
expect(isContentSection("A")).toBe(true);
@@ -695,7 +703,7 @@ describe("DocumentContentModel -- move/copy tiles --", () => {
const rowLayout: any = {};
documentContent.rowOrder.forEach(rowId => {
const row = documentContent.getRow(rowId);
- const key = rowId.indexOf("-") !== -1 ? "NEW_ROW" : rowId;
+ const key = rowId.indexOf("testid-") !== -1 ? "NEW_ROW" : rowId;
rowLayout[key] = [];
row?.tiles.forEach((rowTile, index) => {
const tileType = documentContent.getTile(rowTile.tileId)!.content.type.toUpperCase();
diff --git a/src/models/document/document-content.ts b/src/models/document/document-content.ts
index 9509261058..5f6eb66c1f 100644
--- a/src/models/document/document-content.ts
+++ b/src/models/document/document-content.ts
@@ -1,3 +1,4 @@
+import { cloneDeep, each } from "lodash";
import { types, getSnapshot, Instance, SnapshotIn } from "mobx-state-tree";
import { kDrawingToolID, StampModelType } from "../tools/drawing/drawing-content";
import { kGeometryToolID } from "../tools/geometry/geometry-content";
@@ -7,24 +8,28 @@ import { kTableToolID } from "../tools/table/table-content";
import { kTextToolID } from "../tools/text/text-content";
import { getToolContentInfoById } from "../tools/tool-content-info";
import { ToolContentUnionType } from "../tools/tool-types";
-import { createToolTileModelFromContent, ToolTileModel, ToolTileModelType, ToolTileSnapshotOutType
- } from "../tools/tool-tile";
+import {
+ ToolTileModel, ToolTileModelType, ToolTileSnapshotInType, ToolTileSnapshotOutType
+} from "../tools/tool-tile";
import { TileRowModel, TileRowModelType, TileRowSnapshotType, TileRowSnapshotOutType } from "../document/tile-row";
-import { cloneDeep, each } from "lodash";
-import { v4 as uuid } from "uuid";
import { Logger, LogEventName } from "../../lib/logger";
import { IDragTileItem } from "../../models/tools/tool-tile";
import { DocumentsModelType } from "../stores/documents";
+import { DisplayUserType } from "../stores/user-types";
+import { safeJsonParse, uniqueId } from "../../utilities/js-utils";
import { getParentWithTypeName } from "../../utilities/mst-utils";
import { DocumentTool, IDocumentAddTileOptions } from "./document";
-import { safeJsonParse } from "../../utilities/js-utils";
export interface INewTileOptions {
rowHeight?: number;
rowIndex?: number;
}
-export interface INewGeometryTileOptions extends INewTileOptions {
+export interface INewTitledTileOptions extends INewTileOptions {
+ title?: string;
+}
+
+export interface INewGeometryTileOptions extends INewTitledTileOptions {
addSidecarNotes?: boolean;
}
@@ -54,6 +59,11 @@ export interface IDocumentContentAddTileOptions extends IDocumentAddTileOptions
insertRowInfo?: IDropRowInfo;
}
+export interface IDragToolCreateInfo {
+ tool: DocumentTool;
+ title?: string;
+}
+
export interface ITileCountsPerSection {
[key: string]: number;
}
@@ -75,7 +85,7 @@ export const DocumentContentModel = types
}))
.views(self => {
// used for drag/drop self-drop detection, for instance
- const contentId = uuid();
+ const contentId = uniqueId();
function rowContainsTile(rowId: string, tileId: string) {
const row = self.rowMap.get(rowId);
@@ -104,7 +114,7 @@ export const DocumentContentModel = types
},
getTileContent(tileId: string): ToolContentUnionType | undefined {
const tile = self.tileMap.get(tileId);
- return tile && tile.content;
+ return tile?.content;
},
get rowCount() {
return self.rowOrder.length;
@@ -168,7 +178,7 @@ export const DocumentContentModel = types
snapshot.tileMap = (tileMap => {
const _tileMap: { [id: string]: ToolTileSnapshotOutType } = {};
each(tileMap, (tile, id) => {
- idMap[id] = tile.id = uuid();
+ idMap[id] = tile.id = uniqueId();
_tileMap[tile.id] = tile;
});
return _tileMap;
@@ -182,7 +192,7 @@ export const DocumentContentModel = types
snapshot.rowMap = (rowMap => {
const _rowMap: { [id: string]: TileRowSnapshotOutType } = {};
each(rowMap, (row, id) => {
- idMap[id] = row.id = uuid();
+ idMap[id] = row.id = uniqueId();
row.tiles = row.tiles.map(tileLayout => {
tileLayout.tileId = idMap[tileLayout.tileId];
return tileLayout;
@@ -232,11 +242,35 @@ export const DocumentContentModel = types
});
return tiles;
},
+ getTilesOfType(type: string) {
+ const tiles: string[] = [];
+ self.rowOrder.forEach(rowId => {
+ const row = self.getRow(rowId);
+ each(row?.tiles, tileEntry => {
+ const tile = self.getTile(tileEntry.tileId);
+ if (tile?.content.type === type) {
+ tiles.push(tileEntry.tileId);
+ }
+ });
+ });
+ return tiles;
+ },
publish() {
return JSON.stringify(self.snapshotWithUniqueIds());
}
}))
.views(self => ({
+ getUniqueTitle(tileType: string, titleBase: string, getTileTitle: (tileId: string) => string | undefined) {
+ const tiles = self.getTilesOfType(tileType);
+ const maxDefaultTitleIndex = tiles.reduce((maxIndex: number, tileId: string) => {
+ const title = getTileTitle(tileId);
+ const match = title?.match(new RegExp(`${titleBase} (\\d+)`));
+ return match?.[1]
+ ? Math.max(maxIndex, +match[1])
+ : maxIndex;
+ }, 0);
+ return `${titleBase} ${maxDefaultTitleIndex + 1}`;
+ },
getTileCountsPerSection(sectionIds: string[]): ITileCountsPerSection {
const counts: ITileCountsPerSection = {};
sectionIds.forEach(sectionId => {
@@ -326,8 +360,7 @@ export const DocumentContentModel = types
self.addPlaceholderRowIfAppropriate(i);
}
},
- addTileInNewRow(content: ToolContentUnionType, options?: INewTileOptions): INewRowTile {
- const tile = createToolTileModelFromContent(content);
+ addTileInNewRow(tile: ToolTileModelType, options?: INewTileOptions): INewRowTile {
const o = options || {};
if (o.rowIndex === undefined) {
// by default, insert new tiles after last visible on screen
@@ -339,9 +372,17 @@ export const DocumentContentModel = types
row.setRowHeight(o.rowHeight);
}
return { rowId: row.id, tileId: tile.id };
+ }
+ }))
+ .actions(self => ({
+ addTileContentInNewRow(content: ToolContentUnionType, options?: INewTileOptions): INewRowTile {
+ return self.addTileInNewRow(ToolTileModel.create({ content }), options);
},
- addTileInExistingRow(content: ToolContentUnionType, options: INewTileOptions): INewRowTile | undefined {
- const tile = createToolTileModelFromContent(content);
+ addTileSnapshotInNewRow(snapshot: ToolTileSnapshotInType, options?: INewTileOptions): INewRowTile {
+ return self.addTileInNewRow(ToolTileModel.create(snapshot), options);
+ },
+ addTileSnapshotInExistingRow(snapshot: ToolTileSnapshotInType, options: INewTileOptions): INewRowTile | undefined {
+ const tile = ToolTileModel.create(snapshot);
const o = options || {};
if (o.rowIndex === undefined) {
// by default, insert new tiles after last visible on screen
@@ -371,38 +412,38 @@ export const DocumentContentModel = types
addPlaceholderTile(sectionId?: string) {
const placeholderContentInfo = getToolContentInfoById(kPlaceholderToolID);
const content = placeholderContentInfo?.defaultContent(sectionId);
- return self.addTileInNewRow(content, { rowIndex: self.rowCount });
+ return self.addTileContentInNewRow(content, { rowIndex: self.rowCount });
},
addGeometryTile(options?: INewGeometryTileOptions) {
const geometryContentInfo = getToolContentInfoById(kGeometryToolID);
- const result = self.addTileInNewRow(
- geometryContentInfo?.defaultContent(),
+ const result = self.addTileContentInNewRow(
+ geometryContentInfo?.defaultContent({ title: options?.title }),
{ rowHeight: geometryContentInfo?.defaultHeight, ...options });
if (options?.addSidecarNotes) {
const { rowId } = result;
const row = self.rowMap.get(rowId);
const textContentInfo = getToolContentInfoById(kTextToolID);
if (row && textContentInfo) {
- const tile = createToolTileModelFromContent(textContentInfo.defaultContent());
+ const tile = ToolTileModel.create({ content: textContentInfo.defaultContent() });
self.insertNewTileInRow(tile, row, 1);
result.additionalTileIds = [ tile.id ];
}
}
return result;
},
- addTableTile(options?: INewTileOptions) {
+ addTableTile(options?: INewTitledTileOptions) {
const tableContentInfo = getToolContentInfoById(kTableToolID);
- return self.addTileInNewRow(
- tableContentInfo?.defaultContent(),
+ return self.addTileContentInNewRow(
+ tableContentInfo?.defaultContent({ title: options?.title }),
{ rowHeight: tableContentInfo?.defaultHeight, ...options });
},
addTextTile(options?: INewTextTileOptions) {
const textContentInfo = getToolContentInfoById(kTextToolID);
- return self.addTileInNewRow(textContentInfo?.defaultContent(options?.text), options);
+ return self.addTileContentInNewRow(textContentInfo?.defaultContent(options?.text), options);
},
addImageTile(options?: INewImageTileOptions) {
const imageContentInfo = getToolContentInfoById(kImageToolID);
- return self.addTileInNewRow(imageContentInfo?.defaultContent(options?.url), options);
+ return self.addTileContentInNewRow(imageContentInfo?.defaultContent(options?.url), options);
},
addDrawingTile(options?: INewTileOptions) {
let defaultStamps: StampModelType[];
@@ -413,7 +454,7 @@ export const DocumentContentModel = types
defaultStamps = [];
}
const drawingContentInfo = getToolContentInfoById(kDrawingToolID);
- return self.addTileInNewRow(
+ return self.addTileContentInNewRow(
drawingContentInfo?.defaultContent({stamps: defaultStamps}),
{ rowHeight: drawingContentInfo.defaultHeight, ...options });
},
@@ -430,7 +471,7 @@ export const DocumentContentModel = types
if (tile.rowHeight) {
rowOptions.rowHeight = tile.rowHeight;
}
- result = self.addTileInExistingRow(content, rowOptions);
+ result = self.addTileSnapshotInExistingRow({ content }, rowOptions);
}
results.push(result);
});
@@ -453,14 +494,14 @@ export const DocumentContentModel = types
rowOptions.rowHeight = tile.rowHeight;
}
if (tile.rowIndex !== lastRowIndex) {
- result = self.addTileInNewRow(content, rowOptions);
+ result = self.addTileContentInNewRow(content, rowOptions);
if (lastRowIndex !== -1) {
rowDelta++;
}
lastRowIndex = tile.rowIndex;
}
else {
- result = self.addTileInExistingRow(content, rowOptions);
+ result = self.addTileSnapshotInExistingRow({ content }, rowOptions);
}
}
results.push(result);
@@ -589,7 +630,7 @@ export const DocumentContentModel = types
}
},
addTile(tool: DocumentTool, options?: IDocumentContentAddTileOptions) {
- const {addSidecarNotes, url, insertRowInfo} = options || {};
+ const { title, addSidecarNotes, url, insertRowInfo } = options || {};
// for historical reasons, this function initially places new rows at
// the end of the content and then moves them to the desired location.
const addTileOptions = { rowIndex: self.rowCount };
@@ -599,10 +640,10 @@ export const DocumentContentModel = types
tileInfo = self.addTextTile(addTileOptions);
break;
case "table":
- tileInfo = self.addTableTile(addTileOptions);
+ tileInfo = self.addTableTile({ title, ...addTileOptions });
break;
case "geometry":
- tileInfo = self.addGeometryTile({ addSidecarNotes, ...addTileOptions });
+ tileInfo = self.addGeometryTile({ title, addSidecarNotes, ...addTileOptions });
break;
case "image":
tileInfo = self.addImageTile({ url, ...addTileOptions });
@@ -776,31 +817,59 @@ export interface IAuthoredTile {
}
export interface IAuthoredDocumentContent {
- tiles: IAuthoredTile[];
+ tiles: Array;
}
-function migrateSnapshot(snapshot: any): any {
- interface OriginalTileLayoutModel {
- height?: number;
- }
+interface OriginalTileLayoutModel {
+ height?: number;
+}
- interface OriginalToolTileModel {
- layout?: OriginalTileLayoutModel;
- content: any;
+interface OriginalToolTileModel {
+ display?: DisplayUserType;
+ layout?: OriginalTileLayoutModel;
+ content: any;
+}
+type OriginalTilesSnapshot = Array;
+
+function migrateTile(content: DocumentContentModelType, tile: OriginalToolTileModel) {
+ const { layout, ...newTile } = cloneDeep(tile);
+ const tileHeight = layout?.height;
+ const { isSectionHeader, sectionId } = newTile.content;
+ if (isSectionHeader && sectionId) {
+ content.addSectionHeaderRow(sectionId);
+ }
+ else {
+ const options = { rowIndex: content.rowCount, rowHeight: tileHeight };
+ content.addTileSnapshotInNewRow(newTile, options);
}
+}
+function migrateRow(content: DocumentContentModelType, tiles: OriginalToolTileModel[]) {
+ let insertRowIndex = content.rowCount;
+ tiles.forEach((tile, tileIndex) => {
+ const { layout, ...newTile } = cloneDeep(tile);
+ const tileHeight = layout?.height;
+ const options = { rowIndex: insertRowIndex, rowHeight: tileHeight };
+ if (tileIndex === 0) {
+ const newRowInfo = content.addTileSnapshotInNewRow(newTile, options);
+ const newRowIndex = content.getRowIndex(newRowInfo.rowId);
+ (newRowIndex >= 0) && (insertRowIndex = newRowIndex);
+ }
+ else {
+ content.addTileSnapshotInExistingRow(newTile, options);
+ }
+ });
+}
+
+function migrateSnapshot(snapshot: any): any {
const docContent = DocumentContentModel.create();
- const tiles: OriginalToolTileModel[] = snapshot.tiles;
- tiles.forEach(tile => {
- const newTile = cloneDeep(tile);
- const tileHeight = newTile.layout && newTile.layout.height;
- const { isSectionHeader, sectionId } = newTile.content;
- if (isSectionHeader && sectionId) {
- docContent.addSectionHeaderRow(sectionId);
+ const tilesOrRows: OriginalTilesSnapshot = snapshot.tiles;
+ tilesOrRows.forEach(tileOrRow => {
+ if (Array.isArray(tileOrRow)) {
+ migrateRow(docContent, tileOrRow);
}
else {
- const options = { rowIndex: docContent.rowCount, rowHeight: tileHeight };
- docContent.addTileInNewRow(newTile.content, options);
+ migrateTile(docContent, tileOrRow);
}
});
return getSnapshot(docContent);
diff --git a/src/models/document/document.ts b/src/models/document/document.ts
index e872eeb5bc..3e93c09857 100644
--- a/src/models/document/document.ts
+++ b/src/models/document/document.ts
@@ -12,6 +12,7 @@ import { IDocumentProperties } from "../../lib/db-types";
import { getLocalTimeStamp } from "../../utilities/time";
export interface IDocumentAddTileOptions {
+ title?: string;
addSidecarNotes?: boolean;
url?: string;
}
@@ -113,8 +114,10 @@ export const DocumentModel = types
if (!docDisplayIdPropertyName) return undefined;
if (docDisplayIdPropertyName === "key") return self.key;
return self.getProperty(docDisplayIdPropertyName);
+ },
+ getUniqueTitle(tileType: string, titleBase: string, getTileTitle: (tileId: string) => string | undefined) {
+ return self.content.getUniqueTitle(tileType, titleBase, getTileTitle);
}
-
}))
.views(self => ({
isMatchingSpec(type: DocumentType, properties: string[]) {
diff --git a/src/models/document/tile-row.ts b/src/models/document/tile-row.ts
index 4f55fec678..bd7a6c5d2d 100644
--- a/src/models/document/tile-row.ts
+++ b/src/models/document/tile-row.ts
@@ -1,6 +1,6 @@
import { types, Instance, SnapshotIn, SnapshotOut } from "mobx-state-tree";
-import { v4 as uuid } from "uuid";
import { ToolTileModelType } from "../tools/tool-tile";
+import { uniqueId } from "../../utilities/js-utils";
export const TileLayoutModel = types
.model("TileLayout", {
@@ -22,7 +22,7 @@ export type TileLayoutModelType = Instance;
export const TileRowModel = types
.model("TileRow", {
- id: types.optional(types.identifier, () => uuid()),
+ id: types.optional(types.identifier, () => uniqueId()),
height: types.maybe(types.number),
isSectionHeader: false,
sectionId: types.maybe(types.string),
@@ -53,10 +53,6 @@ export const TileRowModel = types
},
indexOfTile(tileId: string) {
return self.tiles.findIndex(tileRef => tileRef.tileId === tileId);
- },
- renderWidth(tileId: string) {
- // for now, tiles divide row evenly
- return 100 / (self.tiles.length || 1);
}
}))
.actions(self => ({
diff --git a/src/models/image-map.ts b/src/models/image-map.ts
index 34a231ea9b..4ff8a1ae9c 100644
--- a/src/models/image-map.ts
+++ b/src/models/image-map.ts
@@ -112,11 +112,11 @@ export const ImageMapModel = types
getImageDimensions(entry && entry.displayUrl || url)
.then(dimensions => {
- const _entry = self.images.get(url);
- if (_entry) {
+ const imageEntry = self.images.get(url);
+ if (imageEntry) {
self.setDimensions(url, dimensions.width, dimensions.height);
- self.syncContentUrl(url, _entry);
- resolve(self.images.get(url));
+ self.syncContentUrl(url, imageEntry);
+ resolve(imageEntry);
}
});
});
@@ -171,8 +171,9 @@ export const ImageMapModel = types
resolve(clone(self.images.get(placeholderImage)!));
}
- if (self.images.has(url)) {
- return resolve(self.images.get(url));
+ const imageEntry = self.images.get(url);
+ if (imageEntry) {
+ return resolve(imageEntry);
}
const handler = self.getHandler(url);
diff --git a/src/models/stores/app-config-model.ts b/src/models/stores/app-config-model.ts
index 9cacdb9974..67d5057abd 100644
--- a/src/models/stores/app-config-model.ts
+++ b/src/models/stores/app-config-model.ts
@@ -5,6 +5,12 @@ import { ToolButtonModel } from "../tools/tool-types";
import { ENavTab, NavTabModel, NavTabSpec } from "../view/nav-tabs";
import { SettingsMstType } from "./settings";
+const UnitSpecModel = types
+ .model("UnitSpec", {
+ content: types.string,
+ guide: ""
+ });
+
const DocumentSpecModel = types
.model("DocumentSpec", {
documentType: types.string,
@@ -46,7 +52,7 @@ export const AppConfigModel = types
appName: "",
pageTitle: "",
demoProblemTitle: "",
- units: types.map(types.string),
+ units: types.map(UnitSpecModel),
unitCodeMap: types.map(types.string),
defaultProblemOrdinal: "",
defaultUnit: "",
@@ -75,6 +81,10 @@ export const AppConfigModel = types
settings: types.maybe(SettingsMstType)
})
.views(self => ({
+ getUnit(unitId: string) {
+ const unitCode = self.unitCodeMap.get(unitId) || unitId;
+ return self.units.get(unitCode);
+ },
get defaultDocumentContent(): DocumentContentModelType | undefined {
return cloneContentWithUniqueIds(self.defaultDocumentTemplate);
},
diff --git a/src/models/stores/stores.ts b/src/models/stores/stores.ts
index aaefaf66f5..def14b7a9a 100644
--- a/src/models/stores/stores.ts
+++ b/src/models/stores/stores.ts
@@ -1,5 +1,5 @@
import { AppConfigModelType, AppConfigModel } from "./app-config-model";
-import { getUnitJson, UnitModel, UnitModelType } from "../curriculum/unit";
+import { getGuideJson, getUnitJson, UnitModel, UnitModelType } from "../curriculum/unit";
import { InvestigationModelType, InvestigationModel } from "../curriculum/investigation";
import { ProblemModel, ProblemModelType } from "../curriculum/problem";
import { UIModel, UIModelType } from "./ui";
@@ -24,6 +24,7 @@ export interface IBaseStores {
unit: UnitModelType;
investigation: InvestigationModelType;
problem: ProblemModelType;
+ teacherGuide?: ProblemModelType;
user: UserModelType;
ui: UIModelType;
groups: GroupsModelType;
@@ -102,17 +103,27 @@ export const setUnitAndProblem = async (stores: IStores, unitId: string | undefi
const unit = UnitModel.create(unitJson);
const {investigation, problem} = unit.getProblem(problemOrdinal || stores.appConfig.defaultProblemOrdinal);
- if (unit) {
- stores.unit = unit;
- stores.documents.setUnit(stores.unit);
- if (investigation && problem) {
- stores.investigation = investigation;
- stores.problem = problem;
- }
- stores.problemPath = getProblemPath(stores);
+ stores.unit = unit;
+ stores.documents.setUnit(stores.unit);
+ if (investigation && problem) {
+ stores.investigation = investigation;
+ stores.problem = problem;
+ }
+ stores.problemPath = getProblemPath(stores);
+
+ const guideJson = await getGuideJson(unitId, stores.appConfig);
+ const unitGuide = guideJson && UnitModel.create(guideJson);
+ const teacherGuide = unitGuide?.getProblem(problemOrdinal || stores.appConfig.defaultProblemOrdinal)?.problem;
+ if (teacherGuide) {
+ stores.teacherGuide = teacherGuide;
}
};
+export function isShowingTeacherContent(stores: IStores) {
+ const { ui: { showTeacherContent }, user: { isTeacher } } = stores;
+ return isTeacher && showTeacherContent;
+}
+
export function isFeatureSupported(stores: IStores, feature: string, sectionId?: string) {
const { unit, investigation, problem } = stores;
const section = sectionId && problem.getSectionById(sectionId);
diff --git a/src/models/stores/ui.ts b/src/models/stores/ui.ts
index fcb0d04737..ea04c9f9e1 100644
--- a/src/models/stores/ui.ts
+++ b/src/models/stores/ui.ts
@@ -11,8 +11,8 @@ export type ToggleElement = "leftNavExpanded";
export const UIDialogTypeEnum = types.enumeration("dialogType", ["alert", "confirm", "prompt"]);
export type UIDialogType = typeof UIDialogTypeEnum.Type;
-type BooleanDialogResolver = (value?: boolean | PromiseLike | undefined) => void;
-type StringDialogResolver = (value?: string | PromiseLike | undefined) => void;
+type BooleanDialogResolver = (value: boolean | PromiseLike) => void;
+type StringDialogResolver = (value: string | PromiseLike) => void;
let dialogResolver: BooleanDialogResolver | StringDialogResolver | undefined;
export const UIDialogModel = types
@@ -36,6 +36,7 @@ export const UIModel = types
selectedTileIds: types.array(types.string),
showDemo: false,
showDemoCreator: false,
+ showTeacherContent: true,
dialog: types.maybe(UIDialogModel),
problemWorkspace: WorkspaceModel,
learningLogWorkspace: WorkspaceModel,
@@ -119,6 +120,9 @@ export const UIModel = types
toggleNavTabContent(show: boolean) {
self.navTabContentShown = show;
},
+ toggleShowTeacherContent(show: boolean) {
+ self.showTeacherContent = show;
+ },
setError(error: string|null) {
self.error = error ? error.toString() : error;
},
diff --git a/src/models/stores/user-types.ts b/src/models/stores/user-types.ts
new file mode 100644
index 0000000000..fd3a43fd8b
--- /dev/null
+++ b/src/models/stores/user-types.ts
@@ -0,0 +1,7 @@
+import { Instance, types } from "mobx-state-tree";
+
+export const UserTypeEnum = types.enumeration("type", ["student", "teacher"]);
+export type UserType = Instance;
+
+export const DisplayUserTypeEnum = types.maybe(UserTypeEnum);
+export type DisplayUserType = Instance;
diff --git a/src/models/stores/user.ts b/src/models/stores/user.ts
index 192c8257e3..f3d3093522 100644
--- a/src/models/stores/user.ts
+++ b/src/models/stores/user.ts
@@ -1,10 +1,8 @@
+import initials from "initials";
import { types } from "mobx-state-tree";
import { AuthenticatedUser } from "../../lib/auth";
import { PortalFirebaseStudentJWT } from "../../lib/portal-types";
-import initials from "initials";
-
-export const UserTypeEnum = types.enumeration("type", ["student", "teacher"]);
-export type UserType = typeof UserTypeEnum.Type;
+import { UserTypeEnum } from "./user-types";
export const PortalClassOffering = types
.model("PortalClassOffering", {
diff --git a/src/models/tools/geometry/geometry-content.test.ts b/src/models/tools/geometry/geometry-content.test.ts
index a198208b12..b4f408bd10 100644
--- a/src/models/tools/geometry/geometry-content.test.ts
+++ b/src/models/tools/geometry/geometry-content.test.ts
@@ -1,16 +1,22 @@
import { GeometryContentModel, GeometryContentModelType,
kGeometryToolID, defaultGeometryContent, GeometryMetadataModel } from "./geometry-content";
import { JXGChange } from "./jxg-changes";
-import { isBoard } from "./jxg-board";
-import { isPoint, isFreePoint } from "./jxg-point";
-import { isPointInPolygon, isPolygon, getPointsForVertexAngle } from "./jxg-polygon";
+import { isPointInPolygon, getPointsForVertexAngle } from "./jxg-polygon";
import { canSupportVertexAngle, getVertexAngle, updateVertexAnglesFromObjects } from "./jxg-vertex-angle";
-import { isUuid } from "../../../utilities/test-utils";
+import { isBoard, isFreePoint, isPoint, isPolygon } from "./jxg-types";
import { clone } from "lodash";
import { destroy } from "mobx-state-tree";
import placeholderImage from "../../../assets/image_placeholder.png";
+// mock uniqueId so we can recognize auto-generated IDs
+const { uniqueId, castArrayCopy, safeJsonParse } = jest.requireActual("../../../utilities/js-utils");
+jest.mock("../../../utilities/js-utils", () => ({
+ uniqueId: () => `testid-${uniqueId()}`,
+ castArrayCopy: (itemOrArray: any) => castArrayCopy(itemOrArray),
+ safeJsonParse: (json: string) => safeJsonParse(json)
+}));
+
describe("GeometryContent", () => {
const divId = "1234";
@@ -142,7 +148,7 @@ describe("GeometryContent", () => {
content.removeObjects(board, p1Id);
expect(board.objects[p1Id]).toBeUndefined();
const p3: JXG.Point = content.addPoint(board, [2, 2]) as JXG.Point;
- expect(isUuid(p3.id)).toBe(true);
+ expect(p3.id.startsWith("testid-")).toBe(true);
// requests to remove points with invalid IDs are ignored
content.removeObjects(board, ["foo"]);
content.applyChange(board, { operation: "delete", target: "point" });
@@ -159,7 +165,7 @@ describe("GeometryContent", () => {
let polygon: JXG.Polygon | undefined = content.createPolygonFromFreePoints(board) as JXG.Polygon;
expect(isPolygon(polygon)).toBe(true);
const polygonId = polygon.id;
- expect(isUuid(polygonId)).toBe(true);
+ expect(polygonId.startsWith("testid-")).toBe(true);
const ptInPolyCoords = new JXG.Coords(JXG.COORDS_BY_USER, [3, 2], board);
const [, ptInScrX, ptInScrY] = ptInPolyCoords.scrCoords;
diff --git a/src/models/tools/geometry/geometry-content.ts b/src/models/tools/geometry/geometry-content.ts
index 4104ed0b08..38c51aa951 100644
--- a/src/models/tools/geometry/geometry-content.ts
+++ b/src/models/tools/geometry/geometry-content.ts
@@ -4,22 +4,26 @@ import { Optional } from "utility-types";
import { SelectionStoreModelType } from "../../stores/selection";
import { addLinkedTable } from "../table-links";
import { registerToolContentInfo } from "../tool-content-info";
-import { getTableContent, ITableChange, ITableLinkProperties, kLabelAttrName } from "../table/table-content";
-import { getAxisAnnotations, getBaseAxisLabels, guessUserDesiredBoundingBox, isBoard,
+import {
+ getAxisLabelsFromDataSet, getRowLabelFromLinkProps, getTableContent, IColumnProperties,
+ ICreateRowsProperties, IRowProperties, ITableChange, ITableLinkProperties, kLabelAttrName
+} from "../table/table-content";
+import { canonicalizeValue, linkedPointId } from "../table/table-model-types";
+import { getAxisAnnotations, getBaseAxisLabels, getObjectById, guessUserDesiredBoundingBox,
kAxisBuffer, kGeometryDefaultAxisMin, kGeometryDefaultHeight, kGeometryDefaultWidth,
kGeometryDefaultPixelsPerUnit, syncAxisLabels, toObj } from "./jxg-board";
import { ESegmentLabelOption, forEachNormalizedChange, ILinkProperties, JXGChange, JXGCoordPair,
JXGProperties, JXGParentType, JXGUnsafeCoordPair, JXGStringPair } from "./jxg-changes";
import { applyChange, applyChanges, IDispatcherChangeContext } from "./jxg-dispatcher";
import { isMovableLine } from "./jxg-movable-line";
-import { isFreePoint, isPoint, kPointDefaults, kSnapUnit } from "./jxg-point";
-import { isPolygon, isVisibleEdge, prepareToDeleteObjects } from "./jxg-polygon";
-import { isLinkedPoint } from "./jxg-table-link";
-import { isComment } from "./jxg-types";
-import { isVertexAngle } from "./jxg-vertex-angle";
+import { kPointDefaults, kSnapUnit } from "./jxg-point";
+import { prepareToDeleteObjects } from "./jxg-polygon";
+import { getTableIdFromLinkChange } from "./jxg-table-link";
+import {
+ isBoard, isComment, isFreePoint, isLinkedPoint, isPoint, isPolygon, isVertexAngle, isVisibleEdge
+} from "./jxg-types";
import { IDataSet } from "../../data/data-set";
import { assign, castArray, each, keys, omit, size as _size } from "lodash";
-import { v4 as uuid } from "uuid";
import { safeJsonParse, uniqueId } from "../../../utilities/js-utils";
import { getTileContentById } from "../../../utilities/mst-utils";
import { Logger, LogEventName } from "../../../lib/logger";
@@ -87,9 +91,15 @@ function defaultGeometryBoardChange(overrides?: JXGProperties) {
}
export function defaultGeometryContent(overrides?: JXGProperties): GeometryContentModelType {
- const change = defaultGeometryBoardChange(overrides);
- const changeJson = JSON.stringify(change);
- return GeometryContentModel.create({ changes: [changeJson] });
+ const { title, ...boardProps } = overrides || {};
+ const changes: string[] = [];
+ if (title) {
+ const titleChange: JXGChange = { operation: "update", target: "metadata", properties: { title } };
+ changes.push(JSON.stringify(titleChange));
+ }
+ const boardChange = defaultGeometryBoardChange(boardProps);
+ changes.push(JSON.stringify(boardChange));
+ return GeometryContentModel.create({ changes });
}
export function getGeometryContent(target: IAnyStateTreeNode, tileId: string): GeometryContentModelType | undefined {
@@ -114,6 +124,7 @@ const LinkedTableEntryModel = types
export const GeometryMetadataModel = types
.model("GeometryMetadata", {
id: types.string,
+ title: types.maybe(types.string),
disabled: types.array(types.string),
selection: types.map(types.boolean),
linkedTables: types.array(LinkedTableEntryModel)
@@ -122,12 +133,23 @@ export const GeometryMetadataModel = types
sharedSelection: undefined as any as SelectionStoreModelType,
tableLinkDisposers: {} as { [id: string]: Lambda }
}))
+ .views(self => ({
+ isSharedSelected(id: string) {
+ const _id = id?.includes(":") ? id.split(":")[0] : id;
+ let isSelected = false;
+ self.sharedSelection?.sets.forEach(set => {
+ // ignore labels with auto-assigned IDs associated with selected points
+ if (set.isSelected(_id) && !id.endsWith("Label")) isSelected = true;
+ });
+ return isSelected;
+ },
+ }))
.views(self => ({
isDisabled(feature: string) {
return self.disabled.indexOf(feature) >= 0;
},
isSelected(id: string) {
- return !!self.selection.get(id);
+ return !!self.selection.get(id) || self.isSharedSelected(id);
},
hasSelection() {
return Array.from(self.selection.values()).some(isSelected => isSelected);
@@ -157,6 +179,9 @@ export const GeometryMetadataModel = types
}
}))
.actions(self => ({
+ setTitle(title: string) {
+ self.title = title;
+ },
setSharedSelection(sharedSelection: SelectionStoreModelType) {
self.sharedSelection = sharedSelection;
},
@@ -208,7 +233,7 @@ export const GeometryMetadataModel = types
export type GeometryMetadataModelType = Instance;
export function setElementColor(board: JXG.Board, id: string, selected: boolean) {
- const element = board.objects[id];
+ const element = getObjectById(board, id);
if (element) {
const fillColor = element.getAttribute("clientFillColor") || kPointDefaults.fillColor;
const strokeColor = element.getAttribute("clientStrokeColor") || kPointDefaults.strokeColor;
@@ -241,19 +266,15 @@ export const GeometryContentModel = types
}))
.preProcessSnapshot(snapshot => preprocessImportFormat(snapshot))
.views(self => ({
+ get title() {
+ return self.metadata.title;
+ },
isSelected(id: string) {
return self.metadata.isSelected(id);
},
hasSelection() {
return self.metadata.hasSelection();
},
- get selectedIds() {
- const selected: string[] = [];
- self.metadata.selection.forEach((isSelected, id) => {
- isSelected && selected.push(id);
- });
- return selected;
- },
get isLinked() {
return self.metadata.linkedTables.length > 0;
},
@@ -262,6 +283,12 @@ export const GeometryContentModel = types
}
}))
.views(self => ({
+ getSelectedIds(board: JXG.Board) {
+ // returns the ids in creation order
+ return board.objectsList
+ .filter(obj => self.isSelected(obj.id))
+ .map(obj => obj.id);
+ },
getDeletableSelectedIds(board: JXG.Board) {
// returns the ids in creation order
return board.objectsList
@@ -299,7 +326,7 @@ export const GeometryContentModel = types
return self.getDeletableSelectedIds(board).length > 0;
},
selectedObjects(board: JXG.Board) {
- return self.selectedIds.map(id => board.objects[id]);
+ return board.objectsList.filter(obj => self.isSelected(obj.id));
}
}))
.actions(self => ({
@@ -364,33 +391,45 @@ export const GeometryContentModel = types
function handleWillApplyChange(board: JXG.Board | string, change: JXGChange) {
const op = change.operation.toLowerCase();
const target = change.target.toLowerCase();
- if (target === "tablelink") {
- const tableId = (change.targetID as string) ||
- (change.parents && change.parents[0] as string);
- if (tableId) {
- const links = change.links as ITableLinkProperties;
- const labels = links && links.labels;
- const xEntry = labels && labels.find(entry => entry.id === "xAxis");
- const yEntry = labels && labels.find(entry => entry.id === "yAxis");
- if (op === "create") {
- const tableContent = getTableContent(self, tableId);
- if (tableContent) {
- const axes: IAxisLabels = { x: xEntry && xEntry.label, y: yEntry && yEntry.label };
- self.metadata.addTableLink(tableId, axes);
- }
- }
- else if (op === "delete") {
- self.metadata.removeTableLink(tableId);
+
+ if ((op === "update") && (target === "metadata")) {
+ const props = change?.properties as JXGProperties | undefined;
+ if (props?.title) {
+ self.metadata.setTitle(props.title);
+ }
+ }
+
+ const tableId = getTableIdFromLinkChange(change);
+ if (tableId) {
+ const links = change.links as ITableLinkProperties;
+ const xLabel = links?.labels?.find(entry => entry.id === "xAxis")?.label;
+ const yLabel = links?.labels?.find(entry => entry.id === "yAxis")?.label;
+ if (op === "create") {
+ const tableContent = getTableContent(self, tableId);
+ if (tableContent) {
+ const axes: IAxisLabels = { x: xLabel, y: yLabel };
+ self.metadata.addTableLink(tableId, axes);
}
- else if (op === "update") {
- if (xEntry || yEntry) {
- self.metadata.setTableLinkNames(tableId, xEntry && xEntry.label, yEntry && yEntry.label);
- }
+ }
+ else if (op === "delete") {
+ self.metadata.removeTableLink(tableId);
+ }
+ else if (op === "update") {
+ if (xLabel || yLabel) {
+ self.metadata.setTableLinkNames(tableId, xLabel, yLabel);
}
}
}
}
+ function getLinkedTableChange(change: JXGChange) {
+ const links = change.links as ITableLinkProperties | undefined;
+ const linkId = links?.id;
+ const tableId = links?.tileIds[0];
+ const tableContent = tableId ? getTableContent(self, tableId) : undefined;
+ return linkId ? tableContent?.getLinkedChange(linkId) : undefined;
+ }
+
function handleDidApplyChange(board: JXG.Board | undefined, change: JXGChange) {
const { operation } = change;
const target = change.target.toLowerCase();
@@ -548,7 +587,7 @@ export const GeometryContentModel = types
operation: "create",
target: "image",
parents: [url, coords, size],
- properties: assign({ id: uuid() }, properties)
+ properties: assign({ id: uniqueId() }, properties)
};
const image = _applyChange(board, change);
return image ? image as JXG.Image : undefined;
@@ -561,7 +600,7 @@ export const GeometryContentModel = types
operation: "create",
target: "point",
parents,
- properties: assign({ id: uuid() }, properties)
+ properties: assign({ id: uniqueId() }, properties)
};
const point = _applyChange(board, change);
return point ? point as JXG.Point : undefined;
@@ -576,7 +615,7 @@ export const GeometryContentModel = types
operation: "create",
target: links ? "linkedPoint" : "point",
parents,
- properties: parents.map((p, i) => ({ id: uuid(), ...(props && props[i] || props[0]) })),
+ properties: parents.map((p, i) => ({ id: uniqueId(), ...(props && props[i] || props[0]) })),
links
};
const points = _applyChange(board, change);
@@ -588,7 +627,7 @@ export const GeometryContentModel = types
operation: "create",
target: "movableLine",
parents,
- properties: {id: uuid(), ...properties}
+ properties: {id: uniqueId(), ...properties}
};
const elems = _applyChange(board, change);
return elems ? elems as JXG.GeometryElement[] : undefined;
@@ -598,7 +637,7 @@ export const GeometryContentModel = types
const change: JXGChange = {
operation: "create",
target: "comment",
- properties: {id: uuid(), anchor: anchorId }
+ properties: {id: uniqueId(), anchor: anchorId }
};
const elems = _applyChange(board, change);
return elems ? elems as JXG.GeometryElement[] : undefined;
@@ -614,6 +653,15 @@ export const GeometryContentModel = types
return _applyChange(board, change);
}
+ function updateTitle(board: JXG.Board | undefined, title: string) {
+ const change: JXGChange = {
+ operation: "update",
+ target: "metadata",
+ properties: { title }
+ };
+ return _applyChange(board, change);
+ }
+
function updateObjects(board: JXG.Board | undefined,
ids: string | string[],
properties: JXGProperties | JXGProperties[],
@@ -629,17 +677,19 @@ export const GeometryContentModel = types
}
function createPolygonFromFreePoints(
- board: JXG.Board, linkedTableId?: string, properties?: JXGProperties): JXG.Polygon | undefined {
+ board: JXG.Board, linkedTableId?: string, linkedColumnId?: string, properties?: JXGProperties
+ ): JXG.Polygon | undefined {
const freePtIds = board.objectsList
.filter(elt => isFreePoint(elt) &&
- (linkedTableId === elt?.getAttribute("linkedTableId")))
+ (linkedTableId === elt?.getAttribute("linkedTableId")) &&
+ (linkedColumnId === elt?.getAttribute("linkedColId")))
.map(pt => pt.id);
if (freePtIds && freePtIds.length > 1) {
const change: JXGChange = {
operation: "create",
target: "polygon",
parents: freePtIds,
- properties: assign({ id: uuid() }, properties)
+ properties: assign({ id: uniqueId() }, properties)
};
const polygon = _applyChange(board, change);
return polygon ? polygon as any as JXG.Polygon : undefined;
@@ -653,31 +703,43 @@ export const GeometryContentModel = types
operation: "create",
target: "vertexAngle",
parents,
- properties: assign({ id: uuid(), radius: 1 }, properties)
+ properties: assign({ id: uniqueId(), radius: 1 }, properties)
};
const angle = _applyChange(board, change);
return angle ? angle as any as JXG.Angle : undefined;
}
- function addTableLink(board: JXG.Board, tableId: string, dataSet: IDataSet, links: ILinkProperties) {
- const xAttr = dataSet.attributes.length >= 1 ? dataSet.attributes[0] : undefined;
- const yAttr = dataSet.attributes.length >= 2 ? dataSet.attributes[1] : undefined;
+ function addTableLink(
+ board: JXG.Board | undefined, tableId: string, dataSet: IDataSet, links: ITableLinkProperties) {
const axes = {
- x: xAttr ? xAttr.name : undefined,
- y: yAttr ? yAttr.name : undefined
+ x: links.labels?.find(entry => entry.id === "xAxis")?.label,
+ y: links.labels?.find(entry => entry.id === "yAxis")?.label
};
+ if (!axes.x || !axes.y) {
+ const [xAxisLabel, yAxisLabel] = getAxisLabelsFromDataSet(dataSet);
+ !axes.x && xAxisLabel && (axes.x = xAxisLabel);
+ !axes.y && yAxisLabel && (axes.y = yAxisLabel);
+ }
+
+ // takes labels from dataSet (added by TableContent.getSharedData) if not in links.labels
+ const xAttr = dataSet.attributes.length >= 1 ? dataSet.attributes[0] : undefined;
const labelAttr = dataSet.attrFromName(kLabelAttrName);
const caseCount = dataSet.cases.length;
const ids: string[] = [];
const points: Array<{ label?: string, coords: JXGUnsafeCoordPair }> = [];
for (let i = 0; i < caseCount; ++i) {
- const id = dataSet.cases[i].__id__;
- const label = labelAttr ? String(dataSet.getValue(id, labelAttr.id)) : undefined;
- const x = xAttr ? Number(dataSet.getValue(id, xAttr.id)) : undefined;
- const y = yAttr ? Number(dataSet.getValue(id, yAttr.id)) : undefined;
- if (id) {
- ids.push(id);
- points.push({ label, coords: [x, y] });
+ const caseId = dataSet.cases[i].__id__;
+ const labelFromLinks = getRowLabelFromLinkProps(links, caseId);
+ const label = labelFromLinks ||
+ (labelAttr ? String(dataSet.getValue(caseId, labelAttr.id)) : undefined);
+ const x = xAttr ? Number(dataSet.getValue(caseId, xAttr.id)) : undefined;
+ for (let attrIndex = 1; attrIndex < dataSet.attributes.length; ++attrIndex) {
+ const yAttr = dataSet.attributes[attrIndex];
+ if (caseId && yAttr) {
+ const y = yAttr ? Number(dataSet.getValue(caseId, yAttr.id)) : undefined;
+ ids.push(`${caseId}:${yAttr.id}`);
+ points.push({ label, coords: [x, y] });
+ }
}
}
self.metadata.addTableLink(tableId, axes);
@@ -889,7 +951,7 @@ export const GeometryContentModel = types
// map old ids to new ones
const newIds: { [oldId: string]: string } = {};
selectedIds.forEach(id => {
- newIds[id] = uuid();
+ newIds[id] = uniqueId();
});
// create change objects for each object to be copied
@@ -1015,6 +1077,7 @@ export const GeometryContentModel = types
get batchChangeCount() {
return batchChanges.length;
},
+ getLinkedTableChange,
copySelection,
findObjects,
getOneSelectedPoint,
@@ -1047,6 +1110,7 @@ export const GeometryContentModel = types
addPoints,
addMovableLine,
removeObjects,
+ updateTitle,
updateObjects,
createPolygonFromFreePoints,
addVertexAngle,
@@ -1103,7 +1167,177 @@ export const GeometryContentModel = types
}
}
};
- });
+ })
+ .views(self => ({
+ getPositionOfPoint(dataSet: IDataSet, caseId: string, attrId: string): JXGUnsafeCoordPair {
+ const attrCount = dataSet.attributes.length;
+ const xAttr = attrCount > 0 ? dataSet.attributes[0] : undefined;
+ const yAttr = dataSet.attrFromID(attrId);
+ const xValue = xAttr ? dataSet.getValue(caseId, xAttr.id) : undefined;
+ const yValue = yAttr ? dataSet.getValue(caseId, yAttr.id) : undefined;
+ return [canonicalizeValue(xValue), canonicalizeValue(yValue)];
+ }
+ }))
+ .views(self => ({
+ getPointPositionsForColumns(dataSet: IDataSet, attrIds: string[]): [string[], JXGUnsafeCoordPair[]] {
+ const pointIds: string[] = [];
+ const positions: JXGUnsafeCoordPair[] = [];
+ dataSet.cases.forEach(aCase => {
+ const caseId = aCase.__id__;
+ attrIds.forEach(attrId => {
+ pointIds.push(linkedPointId(caseId, attrId));
+ positions.push(self.getPositionOfPoint(dataSet, caseId, attrId));
+ });
+ });
+ return [pointIds, positions];
+ },
+ getPointPositionsForRowsChange(dataSet: IDataSet, change: ITableChange): [string[], JXGUnsafeCoordPair[]] {
+ const pointIds: string[] = [];
+ const positions: JXGUnsafeCoordPair[] = [];
+ const caseIds = castArray(change.ids);
+ const propsArray: IRowProperties[] = change.action === "create"
+ ? (change.props as ICreateRowsProperties)?.rows
+ : castArray(change.props as any);
+ const xAttrId = dataSet.attributes.length > 0 ? dataSet.attributes[0].id : undefined;
+ caseIds.forEach((caseId, caseIndex) => {
+ const tableProps = (propsArray[caseIndex] || propsArray[0]) as IRowProperties;
+ // if x value changes, all points in row are affected
+ if (xAttrId && tableProps[xAttrId] != null) {
+ for (let attrIndex = 1; attrIndex < dataSet.attributes.length; ++attrIndex) {
+ const attrId = dataSet.attributes[attrIndex].id;
+ const pointId = linkedPointId(caseId, attrId);
+ const position = self.getPositionOfPoint(dataSet, caseId, attrId);
+ if (pointId && position) {
+ pointIds.push(pointId);
+ positions.push(position);
+ }
+ }
+ }
+ // otherwise, only points with y-value changes are affected
+ else {
+ each(tableProps, (value, attrId) => {
+ const pointId = linkedPointId(caseId, attrId);
+ const position = self.getPositionOfPoint(dataSet, caseId, attrId);
+ if (pointId && position) {
+ pointIds.push(pointId);
+ positions.push(position);
+ }
+ });
+ }
+ });
+ return [pointIds, positions];
+ }
+ }))
+ .actions(self => ({
+ syncColumnsChange(dataSet: IDataSet, change: ITableChange, links: ITableLinkProperties) {
+ const tableId = links.tileIds[0];
+ let shouldUpdateAxisLabels = false;
+ switch (change.action) {
+ case "create": {
+ // new column => new point for each case
+ const attrIds = castArray(change.ids);
+ const [pointIds, positions] = self.getPointPositionsForColumns(dataSet, attrIds);
+ const props = pointIds.map(id => ({ id }));
+ pointIds && pointIds.length && self.addPoints(undefined, positions, props, links);
+ shouldUpdateAxisLabels = true;
+ break;
+ }
+ case "update": {
+ const ids = castArray(change.ids);
+ const attrIdsWithExpr: string[] = [];
+ const changeProps: IColumnProperties[] = castArray(change.props as any);
+ ids.forEach((attrId, index) => {
+ const props = changeProps[index] || changeProps[0];
+ // update column name => update axis labels
+ if (props.name != null) {
+ shouldUpdateAxisLabels = true;
+ }
+ // update column expression => update points associated with column
+ if (props.expression != null) {
+ attrIdsWithExpr.push(attrId);
+ }
+ });
+ if (attrIdsWithExpr.length) {
+ const [pointIds, positions] = self.getPointPositionsForColumns(dataSet, attrIdsWithExpr);
+ const props = positions.map(position => ({ position }));
+ pointIds && pointIds.length && self.updateObjects(undefined, pointIds, props, links);
+ }
+ break;
+ }
+ case "delete": {
+ // delete column => remove points associated with column
+ const pointIds: string[] = [];
+ const ids = castArray(change.ids);
+ ids.forEach(attrId => {
+ dataSet.cases.forEach(aCase => {
+ const caseId = aCase.__id__;
+ pointIds.push(linkedPointId(caseId, attrId));
+ });
+ shouldUpdateAxisLabels = true;
+ });
+ pointIds && pointIds.length && self.removeObjects(undefined, pointIds, links);
+ break;
+ }
+ }
+ shouldUpdateAxisLabels && self.updateAxisLabels(undefined, tableId, links);
+ },
+ syncRowsChange(dataSet: IDataSet, change: ITableChange, links: ITableLinkProperties) {
+ switch (change.action) {
+ case "create": {
+ // new table row => new points for each attribute in row
+ const [pointIds, positions] = self.getPointPositionsForRowsChange(dataSet, change);
+ const props = pointIds.map(id => ({ id }));
+ pointIds && pointIds.length && self.addPoints(undefined, positions, props, links);
+ break;
+ }
+ case "update": {
+ // update table row => update points associated with row
+ const [pointIds, positions] = self.getPointPositionsForRowsChange(dataSet, change);
+ const props = positions.map(position => ({ position }));
+ pointIds && pointIds.length && self.updateObjects(undefined, pointIds, props, links);
+ break;
+ }
+ case "delete": {
+ // delete table row => remove points associated with row
+ const pointIds: string[] = [];
+ const caseIds = castArray(change.ids);
+ caseIds.forEach(caseId => {
+ for (let attrIndex = 1; attrIndex < dataSet.attributes.length; ++attrIndex) {
+ pointIds.push(linkedPointId(caseId, dataSet.attributes[attrIndex].id));
+ }
+ });
+ change.ids && self.removeObjects(undefined, pointIds, links);
+ break;
+ }
+ }
+ },
+ syncTableLinkChange(dataSet: IDataSet, change: ITableChange, links: ITableLinkProperties) {
+ const tableId = links.tileIds[0];
+ switch (change.action) {
+ case "create":
+ self.addTableLink(undefined, tableId, dataSet, links);
+ break;
+ case "delete":
+ self.removeTableLink(undefined, tableId, links);
+ break;
+ }
+ }
+ }))
+ .actions(self => ({
+ syncLinkedChange(dataSet: IDataSet, change: ITableChange, links: ITableLinkProperties) {
+ switch (change.target) {
+ case "columns":
+ self.syncColumnsChange(dataSet, change, links);
+ break;
+ case "rows":
+ self.syncRowsChange(dataSet, change, links);
+ break;
+ case "geometryLink":
+ self.syncTableLinkChange(dataSet, change, links);
+ break;
+ }
+ }
+ }));
export type GeometryContentModelType = Instance;
@@ -1153,10 +1387,21 @@ interface IMovableLineImportSpec {
type IObjectImportSpec = IPointImportSpec | IPolygonImportSpec | IImageImportSpec | IMovableLineImportSpec;
+interface IImportSpec {
+ title?: string;
+ board: IBoardImportSpec;
+ objects: IObjectImportSpec[];
+}
+
function preprocessImportFormat(snapshot: any) {
- const boardSpecs = snapshot.board as IBoardImportSpec;
- const objectSpecs = snapshot.objects as IObjectImportSpec[];
- if (!objectSpecs) return snapshot;
+ if (!snapshot.objects) return snapshot;
+
+ const { title, board: boardSpecs, objects: objectSpecs } = snapshot as IImportSpec;
+ const changes: JXGChange[] = [];
+
+ if (title) {
+ changes.push({ operation: "update", target: "metadata", properties: { title } });
+ }
function addBoard(boardSpec: IBoardImportSpec) {
const { properties } = boardSpec || {} as IBoardImportSpec;
@@ -1170,11 +1415,10 @@ function preprocessImportFormat(snapshot: any) {
boundingBox, ...others }));
}
- const changes: JXGChange[] = [];
addBoard(boardSpecs);
function addComment(props: Record) {
- const id = uuid();
+ const id = uniqueId();
changes.push({ operation: "create", target: "comment", properties: {id, ...props }});
return id;
}
@@ -1263,8 +1507,10 @@ export function mapTileIdsInGeometrySnapshot(snapshot: SnapshotOut {
const change: JXGChange = safeJsonParse(changeJson);
- if ((change.operation === "create") && (change.target === "tableLink")) {
- change.targetID = idMap[change.targetID as string];
+ if ((change.target === "tableLink") && change.targetID) {
+ change.targetID = Array.isArray(change.targetID)
+ ? change.targetID.map(id => idMap[id])
+ : idMap[change.targetID];
}
if (change.links) {
change.links.tileIds = change.links.tileIds.map(id => idMap[id]);
@@ -1287,6 +1533,7 @@ export function getImageUrl(change?: JXGChange) {
registerToolContentInfo({
id: kGeometryToolID,
tool: "geometry",
+ titleBase: "Graph",
modelClass: GeometryContentModel,
metadataClass: GeometryMetadataModel,
addSidecarNotes: true,
diff --git a/src/models/tools/geometry/jxg-board.ts b/src/models/tools/geometry/jxg-board.ts
index 4215c64883..b3963be28d 100644
--- a/src/models/tools/geometry/jxg-board.ts
+++ b/src/models/tools/geometry/jxg-board.ts
@@ -1,7 +1,9 @@
-import { JXGChange, JXGChangeAgent, JXGProperties } from "./jxg-changes";
import "./jxg";
+import { JXGChange, JXGChangeAgent, JXGProperties } from "./jxg-changes";
+import { isAxis, isBoard, isLinkedPoint, isPoint } from "./jxg-types";
import { goodTickValue } from "../../../utilities/graph-utils";
-import { assign, find, values } from "lodash";
+import { assign, each, find } from "lodash";
+import { ITableLinkProperties } from "../table/table-content";
const kScalerClasses = ["canvas-scaler", "scaled-list-item"];
@@ -11,10 +13,52 @@ export const kGeometryDefaultWidth = 480;
export const kGeometryDefaultHeight = 320;
export const kGeometryDefaultPixelsPerUnit = 18.3; // matches S&S curriculum images
export const kGeometryDefaultAxisMin = 0;
+
+export function getObjectById(board: JXG.Board, id: string): JXG.GeometryElement | undefined {
+ let obj: JXG.GeometryElement | undefined = board.objects[id];
+ if (!obj && id?.includes(":")) {
+ // legacy support for early tiles in which points were identified by caseId,
+ // before we added support for multiple columns, i.e. multiple points per row/case
+ // newer code uses `${caseId}:${attrId}` for the id of points
+ const caseId = id.split(":")[0];
+ obj = board.objects[caseId];
+ }
+ return obj;
+}
+
+export function getPointsByCaseId(board: JXG.Board, caseId: string) {
+ if (!caseId || caseId.includes(":")) {
+ const obj = getObjectById(board, caseId);
+ return obj ? [obj] : [];
+ }
+ return board.objectsList.filter(obj => isPoint(obj) && (obj.id.split(":")[0] === caseId));
+}
+
+export function syncLinkedPoints(board: JXG.Board, links: ITableLinkProperties) {
+ if (board && links?.labels) {
+ // build map of points associated with each case
+ const ptsForCaseMap: Record = {};
+ each(board.objects, (obj, id) => {
+ if (isLinkedPoint(obj)) {
+ const caseId = obj.getAttribute("linkedRowId");
+ if (caseId) {
+ if (!ptsForCaseMap[caseId]) ptsForCaseMap[caseId] = [obj];
+ else ptsForCaseMap[caseId].push(obj);
+ }
+ }
+ });
+ // assign case label to each point associated with a given case
+ links.labels.forEach(item => {
+ const { id, label } = item;
+ const ptsForCase = ptsForCaseMap[id];
+ if (ptsForCase) {
+ ptsForCase.forEach(pt => pt?.setAttribute({ name: label }));
+ }
+ });
+ }
+}
+
export const kAxisBuffer = 20;
-export const isBoard = (v: any) => v instanceof JXG.Board;
-export const isAxis = (v: any) => (v instanceof JXG.Line) && (v.elType === "axis");
-export const isAxisLabel = (v: any) => v instanceof JXG.Text && !!values(v.ancestors).find(el => isAxis(el));
export const getAxisType = (v: any) => {
// stdform encodes orientation of axes
const [ , stdFormY, stdFormX] = v.stdform;
diff --git a/src/models/tools/geometry/jxg-changes.ts b/src/models/tools/geometry/jxg-changes.ts
index f9e338eeb2..b139bedfd1 100644
--- a/src/models/tools/geometry/jxg-changes.ts
+++ b/src/models/tools/geometry/jxg-changes.ts
@@ -1,8 +1,8 @@
import { castArray } from "lodash";
export type JXGOperation = "create" | "update" | "delete";
-export type JXGObjectType = "board" |"comment" | "image" | "linkedPoint" | "movableLine" | "object" |
- "point" | "polygon" | "tableLink" | "vertexAngle";
+export type JXGObjectType = "board" | "comment" | "image" | "linkedPoint" | "metadata" | "movableLine" |
+ "object" | "point" | "polygon" | "tableLink" | "vertexAngle";
export type JXGCoordPair = [number, number];
export type JXGUnsafeCoordPair = [number?, number?];
@@ -20,6 +20,7 @@ export interface JXGProperties {
id?: string;
labelOption?: ESegmentLabelOption;
position?: JXGUnsafeCoordPair;
+ title?: string; // metadata property
url?: string;
xMin?: number;
yMin?: number;
diff --git a/src/models/tools/geometry/jxg-comment.ts b/src/models/tools/geometry/jxg-comment.ts
index c5def77eeb..3fc3541810 100644
--- a/src/models/tools/geometry/jxg-comment.ts
+++ b/src/models/tools/geometry/jxg-comment.ts
@@ -1,9 +1,8 @@
+import { getObjectById } from "./jxg-board";
import { JXGChangeAgent } from "./jxg-changes";
-import { isBoard } from "./jxg-board";
import { isMovableLine } from "./jxg-movable-line";
import { objectChangeAgent } from "./jxg-object";
-import { isPoint } from "./jxg-point";
-import { isPolygon, isVisibleEdge } from "./jxg-polygon";
+import { isBoard, isPoint, isPolygon, isVisibleEdge } from "./jxg-types";
import { values } from "lodash";
import { uniqueId } from "../../../utilities/js-utils";
@@ -70,14 +69,14 @@ export const commentChangeAgent: JXGChangeAgent = {
if (isBoard(board)) {
const _board = board as JXG.Board;
const centroidCoordinateGetter = (index: number) => () => {
- const anchor = _board.objects[commentProps.anchor];
- const centroid = getCentroid(anchor);
+ const anchor = getObjectById(_board, commentProps.anchor);
+ const centroid = anchor && getCentroid(anchor);
if (centroid) {
return centroid[index];
}
};
// Comments on table-linked points will not copy to new documents because the anchor isn't copied
- if (!_board.objects[commentProps.anchor]) return;
+ if (!getObjectById(_board, commentProps.anchor)) return;
const id = commentProps.id;
const comment = _board.create("text", [0, -1, commentText], commentProps);
diff --git a/src/models/tools/geometry/jxg-dispatcher.ts b/src/models/tools/geometry/jxg-dispatcher.ts
index 0b03b08429..92898f2734 100644
--- a/src/models/tools/geometry/jxg-dispatcher.ts
+++ b/src/models/tools/geometry/jxg-dispatcher.ts
@@ -1,6 +1,6 @@
import { JXGChange, JXGChangeAgent, JXGChangeResult, JXGCreateHandler, JXGObjectType, IChangeContext
} from "./jxg-changes";
-import { boardChangeAgent, isBoard, kReverse, sortByCreation } from "./jxg-board";
+import { boardChangeAgent, getObjectById, kReverse, sortByCreation } from "./jxg-board";
import { commentChangeAgent } from "./jxg-comment";
import { imageChangeAgent } from "./jxg-image";
import { movableLineChangeAgent } from "./jxg-movable-line";
@@ -8,6 +8,7 @@ import { objectChangeAgent } from "./jxg-object";
import { pointChangeAgent } from "./jxg-point";
import { polygonChangeAgent } from "./jxg-polygon";
import { linkedPointChangeAgent, tableLinkChangeAgent } from "./jxg-table-link";
+import { isBoard } from "./jxg-types";
import { vertexAngleChangeAgent } from "./jxg-vertex-angle";
import { castArrayCopy } from "../../../utilities/js-utils";
import { castArray } from "lodash";
@@ -61,9 +62,7 @@ export function applyChange(board: JXG.Board|string, change: JXGChange,
const target = change.target.toLowerCase();
// give clients a chance to intercede before the change is applied
- if (context && context.onWillApplyChange) {
- context.onWillApplyChange(board, change);
- }
+ context?.onWillApplyChange?.(board, change);
// special case for update/object, where we dispatch by object type
if ((change.operation === "update") && (target === "object")) {
@@ -78,7 +77,7 @@ export function applyChange(board: JXG.Board|string, change: JXGChange,
const result = dispatchChange(board, change, context);
// give clients a chance to intercede after the change has been applied
- if (context && context.onDidApplyChange) {
+ if (context?.onDidApplyChange) {
if (isBoard(result)) _board = result as JXG.Board;
else if (Array.isArray(result) && isBoard(result?.[0])) _board = result[0] as JXG.Board;
context.onDidApplyChange(_board, change);
@@ -90,7 +89,7 @@ export function applyChange(board: JXG.Board|string, change: JXGChange,
function applyUpdateObjects(board: JXG.Board, change: JXGChange, context?: IChangeContext) {
const ids = castArray(change.targetID);
ids.forEach((id, index) => {
- const obj = id && board.objects[id];
+ const obj = id && getObjectById(board, id);
const target = obj
? obj.getAttribute("clientType") || obj.elType as JXGObjectType
: "object";
@@ -112,7 +111,7 @@ function applyDeleteObjects(board: JXG.Board, change: JXGChange, context?: IChan
const ids = castArrayCopy(change.targetID);
sortByCreation(board, ids, kReverse);
ids.forEach(id => {
- const obj = id && board.objects[id];
+ const obj = id && getObjectById(board, id);
const target = obj
? obj.getAttribute("clientType") || obj.elType as JXGObjectType
: "object";
diff --git a/src/models/tools/geometry/jxg-image.ts b/src/models/tools/geometry/jxg-image.ts
index b7feefe7ec..e208f7568f 100644
--- a/src/models/tools/geometry/jxg-image.ts
+++ b/src/models/tools/geometry/jxg-image.ts
@@ -1,8 +1,8 @@
+import { getObjectById } from "./jxg-board";
import { JXGChangeAgent } from "./jxg-changes";
import { objectChangeAgent } from "./jxg-object";
import { gImageMap } from "../../image-map";
-import { assign } from "lodash";
-import { v4 as uuid } from "uuid";
+import { uniqueId } from "../../../utilities/js-utils";
export const isImage = (v: any) => v instanceof JXG.Image;
@@ -14,7 +14,7 @@ export const imageChangeAgent: JXGChangeAgent = {
const imageEntry = url && gImageMap.getCachedImage(url);
const displayUrl = imageEntry && imageEntry.displayUrl || "";
parents[0] = displayUrl;
- const props = assign({ id: uuid(), fixed: true }, change.properties);
+ const props = { id: uniqueId(), fixed: true, ...change.properties };
return parents && parents.length >= 3
? _board.create("image", parents, props)
: undefined;
@@ -25,7 +25,7 @@ export const imageChangeAgent: JXGChangeAgent = {
const ids = Array.isArray(change.targetID) ? change.targetID : [change.targetID];
const props = Array.isArray(change.properties) ? change.properties : [change.properties];
ids.forEach((id, index) => {
- const obj = board.objects[id] as JXG.GeometryElement;
+ const obj = getObjectById(board, id);
const image = isImage(obj) ? obj as JXG.Image : undefined;
const objProps = index < props.length ? props[index] : props[0];
if (image && objProps) {
diff --git a/src/models/tools/geometry/jxg-movable-line.ts b/src/models/tools/geometry/jxg-movable-line.ts
index d487bb5eca..a7588366f7 100644
--- a/src/models/tools/geometry/jxg-movable-line.ts
+++ b/src/models/tools/geometry/jxg-movable-line.ts
@@ -1,10 +1,10 @@
-import { getBaseAxisLabels, isBoard } from "./jxg-board";
+import { castArray, find, uniqWith } from "lodash";
+import { getBaseAxisLabels, getObjectById } from "./jxg-board";
import { JXGChangeAgent } from "./jxg-changes";
import { objectChangeAgent } from "./jxg-object";
import { syncClientColors } from "./jxg-point";
-import { castArray, each, find, uniqWith } from "lodash";
+import { isBoard } from "./jxg-types";
import { uniqueId } from "../../../utilities/js-utils";
-import { GeometryContentModelType } from "./geometry-content";
export const isMovableLine = (v: any) => {
return v && (v.elType === "line") && (v.getAttribute("clientType") === kMovableLineType);
@@ -16,19 +16,6 @@ export const isMovableLineControlPoint = (v: any) => {
return v instanceof JXG.Point && v.getAttribute("clientType") === kMovableLineType;
};
-// When a control point is clicked, deselect the rest of the line so the line slope can be changed
-export const handleControlPointClick = (point: JXG.Point, content: GeometryContentModelType) => {
- const line = find(point.descendants, el => isMovableLine(el));
- if (line) {
- content.deselectElement(undefined, line.id);
- each(line.ancestors, (parentPoint, parentId) => {
- if (parentId !== point.id) {
- content.deselectElement(undefined, parentId);
- }
- });
- }
-};
-
export const isMovableLineLabel = (v: any) => {
return v instanceof JXG.Text && v.getAttribute("clientType") === kMovableLineType;
};
@@ -188,7 +175,7 @@ export const movableLineChangeAgent: JXGChangeAgent = {
if (!change.targetID) return;
const ids = castArray(change.targetID);
ids.forEach((id) => {
- const obj = board.objects[id] as JXG.GeometryElement;
+ const obj = getObjectById(board, id);
if (isMovableLine(obj)) {
const line = obj as JXG.Line;
board.removeObject(line);
diff --git a/src/models/tools/geometry/jxg-object.ts b/src/models/tools/geometry/jxg-object.ts
index bf93cfc469..9d7d03147f 100644
--- a/src/models/tools/geometry/jxg-object.ts
+++ b/src/models/tools/geometry/jxg-object.ts
@@ -1,5 +1,7 @@
-import { sortByCreation, kReverse } from "./jxg-board";
+import { sortByCreation, kReverse, getObjectById, syncLinkedPoints } from "./jxg-board";
import { JXGChangeAgent, JXGProperties, JXGCoordPair, JXGUnsafeCoordPair } from "./jxg-changes";
+import { isLinkedPoint } from "./jxg-types";
+import { ITableLinkProperties } from "../table/table-content";
import { castArrayCopy } from "../../../utilities/js-utils";
import { castArray, size } from "lodash";
@@ -39,8 +41,10 @@ export const objectChangeAgent: JXGChangeAgent = {
const ids = castArray(change.targetID);
const props: JXGProperties[] = castArray(change.properties);
let hasSuspendedTextUpdates = false;
+ let hasLinkedPoints = false;
ids.forEach((id, index) => {
- const obj = board.objects[id] as JXG.GeometryElement;
+ const obj = getObjectById(board, id);
+ if (isLinkedPoint(obj)) hasLinkedPoints = true;
const textObj = isText(obj) ? obj as JXG.Text : undefined;
const objProps = index < props.length ? props[index] : props[0];
if (obj && objProps) {
@@ -73,6 +77,7 @@ export const objectChangeAgent: JXGChangeAgent = {
}
}
});
+ if (hasLinkedPoints) syncLinkedPoints(board, change.links as ITableLinkProperties);
if (hasSuspendedTextUpdates) board.suspendUpdate();
board.update();
return undefined;
@@ -84,10 +89,8 @@ export const objectChangeAgent: JXGChangeAgent = {
sortByCreation(board, ids, kReverse);
// remove objects in reverse order of creation
ids.forEach((id) => {
- const obj = board.objects[id] as JXG.GeometryElement;
- if (obj) {
- board.removeObject(obj);
- }
+ const obj = getObjectById(board, id);
+ obj && board.removeObject(obj);
});
board.update();
}
diff --git a/src/models/tools/geometry/jxg-point.ts b/src/models/tools/geometry/jxg-point.ts
index 273b6778d5..48e5267e92 100644
--- a/src/models/tools/geometry/jxg-point.ts
+++ b/src/models/tools/geometry/jxg-point.ts
@@ -1,22 +1,9 @@
import { JXGChangeAgent, JXGCoordPair, JXGUnsafeCoordPair } from "./jxg-changes";
import { objectChangeAgent, isPositionGraphable, getGraphablePosition } from "./jxg-object";
import { prepareToDeleteObjects } from "./jxg-polygon";
-import { isCommentType } from "./jxg-types";
-import { castArray, values } from "lodash";
+import { castArray } from "lodash";
import { v4 as uuid } from "uuid";
-export const isPoint = (v: any) => v instanceof JXG.Point;
-
-export const isVisiblePoint = (v: any) => isPoint(v) && v.visProp.visible;
-
-export const isFreePoint = (v: any) => {
- if (isVisiblePoint(v)) {
- const point = v as JXG.Point;
- return values(point.childElements).filter(el => !isCommentType(el)).length <= 1 &&
- values(point.descendants).filter(el => !isCommentType(el)).length <= 1;
- }
-};
-
// For snap to grid
const kPrevSnapUnit = 0.2;
export const kSnapUnit = 0.1;
diff --git a/src/models/tools/geometry/jxg-polygon.ts b/src/models/tools/geometry/jxg-polygon.ts
index 0c547f2b34..cbd8d78c4e 100644
--- a/src/models/tools/geometry/jxg-polygon.ts
+++ b/src/models/tools/geometry/jxg-polygon.ts
@@ -1,14 +1,9 @@
+import { each, filter, find, uniqueId, values } from "lodash";
+import { getObjectById } from "./jxg-board";
import { ESegmentLabelOption, JXGChange, JXGChangeAgent } from "./jxg-changes";
import { getElementName, objectChangeAgent } from "./jxg-object";
-import { isPoint } from "./jxg-point";
-import { isVertexAngle } from "./jxg-vertex-angle";
+import { isPoint, isPolygon, isVertexAngle, isVisibleEdge } from "./jxg-types";
import { wn_PnPoly } from "./soft-surfer-sunday";
-import { assign, each, filter, find, values } from "lodash";
-import { v4 as uuid } from "uuid";
-
-export const isPolygon = (v: any) => v instanceof JXG.Polygon;
-
-export const isVisibleEdge = (v: any) => v instanceof JXG.Line && (v.elType === "segment") && v.visProp.visible;
export function isPointInPolygon(x: number, y: number, polygon: JXG.Polygon) {
const v = polygon.vertices.map(vertex => {
@@ -31,8 +26,8 @@ export function getPolygonEdges(polygon: JXG.Polygon) {
}
export function getPolygonEdge(board: JXG.Board, polygonId: string, pointIds: string[]) {
- const point1 = board.objects[pointIds[0]];
- const segment = find(point1.childElements, child => {
+ const point1 = getObjectById(board, pointIds[0]);
+ const segment = find(point1?.childElements, child => {
const seg = isVisibleEdge(child) ? child as JXG.Line : undefined;
if (!seg) return false;
const isEdgeOfPolygon = seg.parentPolygon?.id === polygonId;
@@ -96,8 +91,8 @@ export function prepareToDeleteObjects(board: JXG.Board, ids: string[]) {
// Identify polygons and angles scheduled for deletion and points that are vertices of polygons
const polygonVertexMap: { [id: string]: string[] } = {};
ids.forEach(id => {
- const elt = board.objects[id];
- if (isPoint(elt)) {
+ const elt = getObjectById(board, id);
+ if (elt && isPoint(elt)) {
each(elt.childElements, child => {
if (isPolygon(child)) {
if (!polygonVertexMap[child.id]) {
@@ -110,20 +105,20 @@ export function prepareToDeleteObjects(board: JXG.Board, ids: string[]) {
else if (isPolygon(elt)) {
polygonsToDelete[id] = elt as JXG.Polygon;
}
- else if (isVertexAngle(elt)) {
+ else if (elt && isVertexAngle(elt)) {
anglesToDelete[id] = elt;
}
});
// Consider each polygon with vertices to be deleted
each(polygonVertexMap, (vertexIds, polygonId) => {
- const polygon = board.objects[polygonId] as JXG.Polygon;
+ const polygon = getObjectById(board, polygonId) as JXG.Polygon;
const vertexCount = polygon.vertices.length - 1;
const deleteCount = vertexIds.length;
// remove points from polygons if possible
if (vertexCount - deleteCount >= 2) {
vertexIds.forEach(id => {
- const pt = board.objects[id] as JXG.Point;
+ const pt = getObjectById(board, id) as JXG.Point;
// removing multiple points at one time sometimes gives unexpected results
polygon.removePoints(pt);
});
@@ -194,14 +189,15 @@ export const polygonChangeAgent: JXGChangeAgent = {
create: (board, change) => {
const _board = board as JXG.Board;
const parents = (change.parents || [])
- .map(id => _board.objects[id as string])
+ .map(id => getObjectById(_board, id as string))
.filter(pt => pt != null);
- const props = assign({
- id: uuid(),
+ const props = {
+ id: uniqueId(),
hasInnerPoints: true,
clientFillColor: "#00FF00",
- clientSelectedFillColor: "#00FF00"
- }, change.properties);
+ clientSelectedFillColor: "#00FF00",
+ ...change.properties
+ };
const poly = parents.length ? _board.create("polygon", parents, props) : undefined;
if (poly) {
const segments = getPolygonEdges(poly);
diff --git a/src/models/tools/geometry/jxg-table-link.ts b/src/models/tools/geometry/jxg-table-link.ts
index d8a888acfc..532d40ab3f 100644
--- a/src/models/tools/geometry/jxg-table-link.ts
+++ b/src/models/tools/geometry/jxg-table-link.ts
@@ -1,8 +1,16 @@
-import { JXGChangeAgent, JXGCoordPair, ILinkProperties } from "./jxg-changes";
-import { createPoint, isPoint, pointChangeAgent } from "./jxg-point";
+import { syncLinkedPoints } from "./jxg-board";
+import { ILinkProperties, JXGChange, JXGChangeAgent, JXGCoordPair } from "./jxg-changes";
+import { createPoint, pointChangeAgent } from "./jxg-point";
+import { isPoint } from "./jxg-types";
import { ITableLinkProperties } from "../table/table-content";
+import { splitLinkedPointId } from "../table/table-model-types";
-export const isLinkedPoint = (v: any) => isPoint(v) && (v.getAttribute("clientType") === "linkedPoint");
+export function getTableIdFromLinkChange(change: JXGChange) {
+ return change.target.toLowerCase() === "tablelink"
+ // during development id was initially stored in parents
+ ? (change.targetID || change.parents?.[0]) as string
+ : undefined;
+}
export interface ITableLinkColors {
fill: string;
@@ -18,6 +26,7 @@ export function injectGetTableLinkColorsFunction(getTableLinkColors: GetTableLin
function createLinkedPoint(board: JXG.Board, parents: JXGCoordPair, props: any, links?: ILinkProperties) {
const tableId = links?.tileIds?.[0];
+ const [linkedRowId, linkedColId] = splitLinkedPointId(props?.id);
const linkColors = sGetTableLinkColors(tableId);
if (!linkColors) return;
const linkedProps = {
@@ -30,22 +39,13 @@ function createLinkedPoint(board: JXG.Board, parents: JXGCoordPair, props: any,
clientSelectedFillColor: linkColors.stroke,
clientSelectedStrokeColor: linkColors.stroke,
linkedTableId: tableId,
- linkedRowId: props && props.id
+ linkedRowId,
+ linkedColId
};
const _props = { ...props, ...linkedProps };
return createPoint(board as JXG.Board, parents, _props);
}
-function syncLinkedPoints(board: JXG.Board, links: ITableLinkProperties) {
- if (board && links && links.labels) {
- links.labels.forEach(item => {
- const { id, label } = item;
- const elt = board.objects[id];
- elt && elt.setAttribute({ name: label });
- });
- }
-}
-
export const linkedPointChangeAgent: JXGChangeAgent = {
create: (board, change) => {
let result: JXG.Point | JXG.Point[] = [];
@@ -96,8 +96,7 @@ export const tableLinkChangeAgent: JXGChangeAgent = {
delete: (board, change) => {
if (board) {
- // during development id was initially stored in parents
- const tableId = change.targetID || (change.parents && change.parents[0]);
+ const tableId = getTableIdFromLinkChange(change);
const pts = board.objectsList.filter(elt => {
return isPoint(elt) && tableId && (elt.getAttribute("linkedTableId") === tableId);
});
diff --git a/src/models/tools/geometry/jxg-types.ts b/src/models/tools/geometry/jxg-types.ts
index 6b9dc2b282..ca64e948d7 100644
--- a/src/models/tools/geometry/jxg-types.ts
+++ b/src/models/tools/geometry/jxg-types.ts
@@ -1,2 +1,28 @@
+import { values } from "lodash";
+
+export const isBoard = (v: any) => v instanceof JXG.Board;
+export const isAxis = (v: any) => (v instanceof JXG.Line) && (v.elType === "axis");
+export const isAxisLabel = (v: any) => v instanceof JXG.Text && !!values(v.ancestors).find(el => isAxis(el));
+
+export const isPoint = (v: any) => v instanceof JXG.Point;
+export const isVisiblePoint = (v: any) => isPoint(v) && v.visProp.visible;
+
+export const isLinkedPoint = (v: any) => isPoint(v) && (v.getAttribute("clientType") === "linkedPoint");
+
export const isCommentType = (v: any) => v && v.getAttribute("clientType") === "comment";
export const isComment = (v: any) => isCommentType(v) && (v instanceof JXG.Text) && (v.elType === "text");
+
+export const isFreePoint = (v: any) => {
+ if (isVisiblePoint(v)) {
+ const point = v as JXG.Point;
+ return values(point.childElements).filter(el => !isCommentType(el)).length <= 1 &&
+ values(point.descendants).filter(el => !isCommentType(el)).length <= 1;
+ }
+};
+
+export const isPolygon = (v: any) => v instanceof JXG.Polygon;
+export const isVisibleEdge = (v: any) => v instanceof JXG.Line && (v.elType === "segment") && v.visProp.visible;
+
+export const isVertexAngle = (v: any) =>
+ (v instanceof JXG.Curve) && (v.elType === "angle") &&
+ (v.getAttribute("clientType") === "vertexAngle");
diff --git a/src/models/tools/geometry/jxg-vertex-angle.ts b/src/models/tools/geometry/jxg-vertex-angle.ts
index 94f1ab7394..4ddb3ef0c9 100644
--- a/src/models/tools/geometry/jxg-vertex-angle.ts
+++ b/src/models/tools/geometry/jxg-vertex-angle.ts
@@ -1,13 +1,10 @@
+import { castArray, each, values } from "lodash";
+import { getObjectById } from "./jxg-board";
import { JXGChangeAgent } from "./jxg-changes";
import { objectChangeAgent } from "./jxg-object";
-import { isPoint } from "./jxg-point";
import { getPointsForVertexAngle } from "./jxg-polygon";
-import { assign, castArray, each, values } from "lodash";
-import { v4 as uuid } from "uuid";
-
-export const isVertexAngle = (v: any) =>
- (v instanceof JXG.Curve) && (v.elType === "angle") &&
- (v.getAttribute("clientType") === "vertexAngle");
+import { isPoint, isVertexAngle } from "./jxg-types";
+import { uniqueId } from "../../../utilities/js-utils";
export const canSupportVertexAngle = (vertex: JXG.Point): boolean => {
const children = values(vertex.childElements);
@@ -72,12 +69,12 @@ export const vertexAngleChangeAgent: JXGChangeAgent = {
create: (board, change) => {
const _board = board as JXG.Board;
const parents = (change.parents || [])
- .map(id => _board.objects[id as string])
+ .map(id => getObjectById(_board, id as string))
.filter(pt => pt != null);
// cf. http://jsxgraph.uni-bayreuth.de/wiki/index.php/Positioning_of_labels
const overrides: any = { name() { return `${this.Value ? JXG.toFixed(this.Value() * 180 / Math.PI, 0) : ""}°`; },
clientType: "vertexAngle" };
- const props = assign({ id: uuid(), radius: 1 }, change.properties, overrides);
+ const props = { id: uniqueId(), radius: 1, ...change.properties, ...overrides };
return parents.length === 3 ? _board.create("angle", parents, props) : undefined;
},
@@ -91,7 +88,7 @@ export const vertexAngleChangeAgent: JXGChangeAgent = {
// get orphaned when deleting the angle.
const dotIds: string[] = [];
ids.forEach(id => {
- const obj = board.objects[id];
+ const obj = getObjectById(board, id);
if (isVertexAngle(obj)) {
const angle = obj as JXG.Angle;
if (angle.dot && isPoint(angle.dot)) {
diff --git a/src/models/tools/table-links.scss b/src/models/tools/table-links.scss
index fc091bc8ce..084a667f27 100644
--- a/src/models/tools/table-links.scss
+++ b/src/models/tools/table-links.scss
@@ -13,6 +13,48 @@ $link-color-4-dark: $terra-dark-5;
$link-color-5-light: $rust-light-1;
$link-color-5-dark: $rust-dark-5;
+.link-color-0 {
+ background-color: $link-color-0-light !important;
+ &:active:not(.disabled) {
+ background-color: $link-color-0-dark !important;
+ }
+}
+
+.link-color-1 {
+ background-color: $link-color-1-light !important;
+ &:active:not(.disabled) {
+ background-color: $link-color-1-dark !important;
+ }
+}
+
+.link-color-2 {
+ background-color: $link-color-2-light !important;
+ &:active:not(.disabled) {
+ background-color: $link-color-2-dark !important;
+ }
+}
+
+.link-color-3 {
+ background-color: $link-color-3-light !important;
+ &:active:not(.disabled) {
+ background-color: $link-color-3-dark !important;
+ }
+}
+
+.link-color-4 {
+ background-color: $link-color-4-light !important;
+ &:active:not(.disabled) {
+ background-color: $link-color-4-dark !important;
+ }
+}
+
+.link-color-5 {
+ background-color: $link-color-5-light !important;
+ &:active:not(.disabled) {
+ background-color: $link-color-5-dark !important;
+ }
+}
+
:export {
linkColor0Light: $link-color-0-light;
linkColor0Dark: $link-color-0-dark;
diff --git a/src/models/tools/table-links.ts b/src/models/tools/table-links.ts
index 276b0ae149..98b10a7466 100644
--- a/src/models/tools/table-links.ts
+++ b/src/models/tools/table-links.ts
@@ -11,10 +11,14 @@ export function getTableDocument(tableId: string) {
return sTableDocumentMap.get(tableId);
}
-export function addTable(documentId: string, tableId: string) {
+export function addTableToDocumentMap(documentId: string, tableId: string) {
sTableDocumentMap.set(tableId, documentId);
}
+export function removeTableFromDocumentMap(tableId: string) {
+ sTableDocumentMap.delete(tableId);
+}
+
export function getLinkedTables(documentId: string) {
return sDocumentLinkedTables.get(documentId);
}
diff --git a/src/models/tools/table/table-content.md b/src/models/tools/table/table-content.md
new file mode 100644
index 0000000000..c34d2b2626
--- /dev/null
+++ b/src/models/tools/table/table-content.md
@@ -0,0 +1,160 @@
+## Table Changes
+
+### createTable
+```typescript
+interface ICreateTable {
+ action: "create";
+ target: "table";
+ ids: string[]; // ids of columns to create; ids will be auto-generated if not provided
+ props: {
+ name?: string; // name of table
+ columns?: Array<{
+ name?: string; // name of column
+ }>
+ }
+}
+```
+
+### createColumns
+```typescript
+interface ICreateColumns {
+ action: "create";
+ target: "columns";
+ ids: string[]; // ids of columns to create; ids will be auto-generated if not provided
+ props: {
+ columns?: Array<{ name?: string; }> // name of each column
+ }
+}
+```
+
+### createColumnsDeprecated
+```typescript
+// converted to canonical form automatically
+interface ICreateColumnsDeprecated {
+ action: "create";
+ target: "columns";
+ ids: string[]; // ids of columns to create; ids will be auto-generated if not provided
+ props: Array<{ name?: string; }> // name of each column
+}
+```
+
+### createRowsDeprecated
+```typescript
+// converted to canonical form automatically
+interface ICreateRowsDeprecated {
+ action: "create";
+ target: "rows";
+ ids: string[]; // ids of rows to create; ids will be auto-generated if not provided
+ props: Array>; // each property is { [attributeID]: attributeValue }
+}
+```
+
+### setTableName(name: string)
+```typescript
+interface ISetTableName {
+ action: "update";
+ target: "table";
+ props: { name: string };
+}
+```
+
+### setAttributeName(id: string, name: string)
+```typescript
+interface ISetAttributeName {
+ action: "update";
+ target: "columns";
+ ids: string; // expects single attribute ID despite name
+ props: { name: string };
+}
+```
+
+### removeAttributes(ids: string[])
+```typescript
+interface IRemoveAttributes {
+ action: "delete";
+ target: "columns";
+ ids: string[]; // array of column/attribute IDs
+}
+```
+
+### setExpression(id: string, expression: string, rawExpression: string)
+```typescript
+interface ISetExpression {
+ action: "update";
+ target: "columns";
+ ids: string; // expects single attribute ID despite name
+ props: {
+ expression: string, // canonicalized in terms of __x__
+ rawExpression: string // what the user actually typed
+ }
+}
+```
+
+### addCanonicalCases(cases: ICaseCreation[], beforeID?: string | string[], links?: ILinkProperties)
+```typescript
+interface IAddCanonicalCases {
+ action: "create";
+ target: "rows";
+ ids: string[]; // array of row/case IDs
+ props: {
+ rows: Array>; // each property is { [attributeID]: attributeValue }
+ beforeId?: string | string[]; // either the id of row to place all new rows before
+ // or an array of row IDs to place each new row before
+ },
+ links?: { // ILinkProperties
+ id: string;
+ tileIds: string[]; // ids of geometry tiles to which these cases are connected
+ }
+}
+```
+
+### setCanonicalCaseValues(caseValues: ICase[], links?: ILinkProperties)
+```typescript
+interface ISetCanonicalCaseValues {
+ action: "update";
+ target: "rows";
+ ids: string[]; // array of row/case IDs
+ props: Array>; // each property is { [attributeID]: attributeValue }
+ links?: { // ILinkProperties
+ id: string;
+ tileIds: string[]; // ids of geometry tiles to which these cases are connected
+ }
+}
+```
+
+### removeCases(ids: string[], links?: ILinkProperties)
+```typescript
+interface IRemoveCases {
+ action: "delete";
+ target: "rows";
+ ids: string[]; // ids of rows/cases to remove
+ links?: { // ILinkProperties
+ id: string;
+ tileIds: string[]; // ids of geometry tiles to which these cases are connected
+ }
+}
+```
+
+### addGeometryLink(geometryId: string, links: ILinkProperties)
+```typescript
+interface IAddGeometryLink {
+ action: "create";
+ target: "geometryLink";
+ ids: string; // id of geometry tile to link
+ links: { // ILinkProperties
+ id: string;
+ tileIds: string[]; // ids of connected geometry tiles
+ }
+}
+```
+
+### removeGeometryLinks(geometryIds: string | string[], links?: ILinkProperties)
+```typescript
+ action: "delete";
+ target: "geometryLink";
+ ids: string | string[]; // id or array of ids of affected geometry tiles
+ links?: { // ILinkProperties
+ id: string;
+ tileIds: string[]; // ids of connected geometry tiles
+ }
+```
diff --git a/src/models/tools/table/table-content.ts b/src/models/tools/table/table-content.ts
index 219e3f385c..4947d0d163 100644
--- a/src/models/tools/table/table-content.ts
+++ b/src/models/tools/table/table-content.ts
@@ -1,15 +1,16 @@
-import { types, Instance, SnapshotOut, IAnyStateTreeNode } from "mobx-state-tree";
+import { Parser } from "expr-eval";
+import { castArray, each } from "lodash";
+import { types, IAnyStateTreeNode, Instance, SnapshotIn, SnapshotOut } from "mobx-state-tree";
+import { getRowLabel, kSerializedXKey, canonicalizeValue, isLinkableValue } from "./table-model-types";
import { registerToolContentInfo } from "../tool-content-info";
import { addLinkedTable } from "../table-links";
import { IDataSet, ICaseCreation, ICase, DataSet } from "../../data/data-set";
+import { canonicalizeExpression } from "../../../components/tools/table-tool/expression-utils";
import { safeJsonParse, uniqueId } from "../../../utilities/js-utils";
-import { castArray, each } from "lodash";
import { getGeometryContent } from "../geometry/geometry-content";
import { JXGChange } from "../geometry/jxg-changes";
import { getTileContentById } from "../../../utilities/mst-utils";
import { Logger, LogEventName } from "../../../lib/logger";
-import { Parser } from "expr-eval";
-import { kSerializedXKey } from "../../../components/tools/table-tool/update-expression-dialog";
export const kTableToolID = "Table";
export const kCaseIdName = "__id__";
@@ -17,33 +18,57 @@ export const kLabelAttrName = "__label__";
export const kTableDefaultHeight = 160;
-export function defaultTableContent() {
+export function defaultTableContent(props?: { title?: string }) {
return TableContentModel.create({
type: "Table",
+ name: props?.title,
columns: [
{ name: "x" },
{ name: "y" }
]
- } as any);
+ } as SnapshotIn);
}
-export function isLinkableValue(value: number | string | null | undefined) {
- return value == null || Number.isNaN(value as any) || isFinite(Number(value));
+export function getTableContent(target: IAnyStateTreeNode, tileId: string): TableContentModelType | undefined {
+ const content = getTileContentById(target, tileId);
+ return content && content as TableContentModelType;
}
-export function canonicalizeValue(value: number | string | undefined) {
- if (value == null || value === "") return undefined;
- const num = Number(value);
- return isFinite(num) ? num : undefined;
+interface IGetTableContentHeight {
+ dataRows: number;
+ rowHeight?: number;
+ readOnly?: boolean;
+ hasExpressions?: boolean;
+ padding?: number;
}
+export const getTableContentHeight = ({
+ dataRows, rowHeight, readOnly, hasExpressions, padding
+}: IGetTableContentHeight) => {
+ const kDefaultRowHeight = 34;
+ const kDefaultPadding = 10;
+ const headerRows = 2 + (hasExpressions ? 1 : 0);
+ const inputRows = readOnly ? 0 : 1;
+ const kBorders = 2 * 2;
+ const _padding = 2 * (padding || kDefaultPadding);
+ return (headerRows + dataRows + inputRows) * (rowHeight || kDefaultRowHeight) + kBorders + _padding;
+};
-export function getRowLabel(index: number, prefix = "p") {
- return `${prefix}${index + 1}`;
-}
+export function getAxisLabelsFromDataSet(dataSet: IDataSet): [string | undefined, string | undefined] {
+ // label for x axis
+ const xAttr = dataSet.attributes.length > 0 ? dataSet.attributes[0] : undefined;
+ const xLabel = xAttr?.name;
-export function getTableContent(target: IAnyStateTreeNode, tileId: string): TableContentModelType | undefined {
- const content = getTileContentById(target, tileId);
- return content && content as TableContentModelType;
+ // label for y axis
+ let yLabel = undefined;
+ for (let yIndex = 1; yIndex < dataSet.attributes.length; ++yIndex) {
+ // concatenate column names for y axis label
+ const yAttr = dataSet.attributes[yIndex];
+ if (yAttr.name && (yAttr.name !== kLabelAttrName)) {
+ if (!yLabel) yLabel = yAttr.name;
+ else yLabel += `, ${yAttr.name}`;
+ }
+ }
+ return [xLabel, yLabel];
}
export interface ITransferCase {
@@ -59,11 +84,13 @@ export interface IRowLabel {
}
export interface IColumnProperties {
- name: string;
+ name?: string;
+ expression?: string;
+ rawExpression?: string;
}
-export interface IRowProperties {
- [key: string]: any;
+export interface IColumnCreationProperties extends IColumnProperties{
+ name: string;
}
export interface ILinkProperties {
@@ -72,23 +99,46 @@ export interface ILinkProperties {
}
export interface ITableLinkProperties extends ILinkProperties {
+ // labels should be included when adding/removing rows,
+ // so that clients can synchronize any label changes
labels?: IRowLabel[];
}
-export interface ITableProperties {
- columns?: IColumnProperties[];
- rows?: IRowProperties[];
- beforeId?: string | string[];
+export function getRowLabelFromLinkProps(links: ITableLinkProperties, rowId: string) {
+ const found = links.labels?.find(entry => entry.id === rowId);
+ return found?.label;
+}
+
+export interface ICreateColumnsProperties {
+ columns?: IColumnCreationProperties[];
+}
+
+export type IUpdateColumnsProperties = IColumnProperties | IColumnProperties[];
+
+export interface IUpdateTableProperties {
name?: string;
- expression?: string;
- rawExpression?: string;
}
+export interface ICreateTableProperties extends IUpdateTableProperties, ICreateColumnsProperties {
+}
+
+export type IRowProperties = Record;
+
+export interface ICreateRowsProperties {
+ rows: IRowProperties[];
+ beforeId?: string | string[];
+}
+
+export type IUpdateRowsProperties = IRowProperties | IRowProperties[];
+
+export type ITableChangeProperties = ICreateTableProperties | IUpdateTableProperties |
+ ICreateColumnsProperties | IUpdateColumnsProperties |
+ ICreateRowsProperties | IUpdateRowsProperties;
export interface ITableChange {
action: "create" | "update" | "delete";
target: "table" | "rows" | "columns" | "geometryLink";
ids?: string | string[];
- props?: ITableProperties;
+ props?: ITableChangeProperties;
links?: ILinkProperties;
}
@@ -105,6 +155,12 @@ export const TableMetadataModel = types
},
get linkCount() {
return self.linkedGeometries.length;
+ },
+ get hasExpressions() {
+ return Array.from(self.expressions.values()).some(expr => !!expr);
+ },
+ hasExpression(attrId: string) {
+ return !!self.expressions.get(attrId);
}
}))
.actions(self => ({
@@ -123,11 +179,25 @@ export const TableMetadataModel = types
clearLinkedGeometries() {
self.linkedGeometries.clear();
},
- setExpression(colId: string, expression: string) {
- self.expressions.set(colId, expression);
+ setExpression(colId: string, expression?: string) {
+ if (expression) {
+ self.expressions.set(colId, expression);
+ }
+ else {
+ self.expressions.delete(colId);
+ }
+ },
+ setRawExpression(colId: string, rawExpression?: string) {
+ if (rawExpression) {
+ self.rawExpressions.set(colId, rawExpression);
+ }
+ else {
+ self.rawExpressions.delete(colId);
+ }
},
- setRawExpression(colId: string, rawExpression: string) {
- self.rawExpressions.set(colId, rawExpression);
+ clearExpression(colId: string) {
+ self.rawExpressions.delete(colId);
+ self.expressions.delete(colId);
},
clearRawExpressions(varName: string) {
const parser = new Parser();
@@ -155,11 +225,11 @@ export const TableContentModel = types
.preProcessSnapshot(snapshot => {
const s = snapshot as any;
// handle import format
- if (s && s.columns) {
+ if (s?.columns) {
return { isImported: true, changes: convertImportToChanges(s) };
}
// handle early change formats
- if (s && s.changes && s.changes.length) {
+ if (s?.changes?.length) {
const { changes, ...snapOthers } = s;
const parsedChanges = changes.map((change: string) => safeJsonParse(change));
const isConversionRequired = parsedChanges.some((c: any) => {
@@ -192,24 +262,38 @@ export const TableContentModel = types
get isLinked() {
return self.metadata.linkedGeometries.length > 0;
},
- getRowLabel(index: number) {
- return getRowLabel(index);
+ get hasExpressions() {
+ return self.metadata.hasExpressions;
}
}))
.views(self => ({
- getClientLinks(linkId: string, dataSet: IDataSet, addLabelMap: boolean): ITableLinkProperties {
- let labels: IRowLabel[] = [];
- if (addLabelMap && dataSet) {
- labels = dataSet.cases.map((aCase, i) => ({ id: aCase.__id__, label: self.getRowLabel(i) }));
- }
- ["xAxis", "yAxis"].forEach((axis, index) => {
- const attr = dataSet.attributes.length > index ? dataSet.attributes[index] : undefined;
- if (attr) {
- labels.unshift({ id: axis, label: attr.name });
- }
- });
+ /*
+ * Returns link metadata for attaching to client (e.g. geometry) tool actions
+ * that includes label information.
+ */
+ getClientLinks(linkId: string, dataSet: IDataSet): ITableLinkProperties {
+ const labels: IRowLabel[] = [];
+
+ // add axis labels
+ const [xAxisLabel, yAxisLabel] = getAxisLabelsFromDataSet(dataSet);
+ xAxisLabel && labels.push({ id: "xAxis", label: xAxisLabel });
+ yAxisLabel && labels.push({ id: "yAxis", label: yAxisLabel });
+
+ // add label for each case, indexed by case ID
+ labels.push(...dataSet.cases.map((aCase, i) => ({ id: aCase.__id__, label: getRowLabel(i) })));
+
return { id: linkId, tileIds: [self.metadata.id], labels };
},
+ getLinkedChange(linkId: string) {
+ let parsedChange: ITableChange | undefined;
+ const foundIndex = self.changes.findIndex(changeJson => {
+ const change = safeJsonParse(changeJson) as ITableChange | undefined;
+ const isFound = change?.links?.id === linkId;
+ isFound && (parsedChange = change);
+ return isFound;
+ });
+ return foundIndex >= 0 ? parsedChange : undefined;
+ },
canUndo() {
return false;
// const hasUndoableChanges = self.changes.length > 1;
@@ -243,14 +327,14 @@ export const TableContentModel = types
willRemoveFromDocument() {
self.metadata.linkedGeometries.forEach(geometryId => {
const geometryContent = getGeometryContent(self, geometryId);
- geometryContent && geometryContent.removeTableLink(undefined, self.metadata.id);
+ geometryContent?.removeTableLink(undefined, self.metadata.id);
});
self.metadata.clearLinkedGeometries();
},
appendChange(change: ITableChange) {
self.changes.push(JSON.stringify(change));
- const toolId = self.metadata && self.metadata.id || "";
+ const toolId = self.metadata?.id || "";
Logger.logToolChange(LogEventName.TABLE_TOOL_CHANGE, change.action, change, toolId);
}
}))
@@ -262,27 +346,52 @@ export const TableContentModel = types
props: { name }
});
},
- setAttributeName(id: string, name: string) {
+ addAttribute(id: string, name: string, links?: ILinkProperties) {
+ self.appendChange({
+ action: "create",
+ target: "columns",
+ ids: [id],
+ props: { columns: [{ name }] },
+ links
+ });
+ },
+ setAttributeName(id: string, name: string, links?: ILinkProperties) {
self.appendChange({
action: "update",
target: "columns",
ids: id,
- props: { name }
+ props: { name },
+ links
});
},
- removeAttributes(ids: string[]) {
+ removeAttributes(ids: string[], links?: ILinkProperties) {
self.appendChange({
action: "delete",
target: "columns",
- ids
+ ids,
+ links
});
},
- setExpression(id: string, expression: string, rawExpression: string) {
+ setExpression(id: string, expression: string, rawExpression: string, links?: ILinkProperties) {
self.appendChange({
action: "update",
target: "columns",
ids: id,
- props: { expression, rawExpression }
+ props: { expression, rawExpression },
+ links
+ });
+ },
+ setExpressions(rawExpressions: Map, xName: string, links?: ILinkProperties) {
+ self.appendChange({
+ action: "update",
+ target: "columns",
+ ids: Array.from(rawExpressions.keys()),
+ props: Array.from(rawExpressions.values())
+ .map(rawExpr => ({
+ expression: canonicalizeExpression(rawExpr, xName),
+ rawExpression: rawExpr
+ })),
+ links
});
},
addCanonicalCases(cases: ICaseCreation[], beforeID?: string | string[], links?: ILinkProperties) {
@@ -311,7 +420,7 @@ export const TableContentModel = types
action: "update",
target: "rows",
ids,
- props: values as ITableProperties,
+ props: values,
links
});
},
@@ -373,26 +482,28 @@ export const TableContentModel = types
}))
.views(self => ({
applyCreate(dataSet: IDataSet, change: ITableChange, dataSetOnly = false) {
- const tableProps = change && change.props as ITableProperties;
switch (change.target) {
- case "table":
+ case "table": {
+ const props = change?.props as ICreateTableProperties;
+ (props?.name != null) && dataSet.setName(props.name);
+ }
+ // fallthrough
case "columns": {
- (tableProps?.name != null) && dataSet.setName(tableProps.name);
- const columns = tableProps && tableProps.columns;
- columns && columns.forEach((col: any, index: number) => {
- const id = change.ids && change.ids[index] || uniqueId();
+ const props = change?.props as ICreateColumnsProperties;
+ props?.columns?.forEach((col, index) => {
+ const id = change.ids?.[index] || uniqueId();
dataSet.addAttributeWithID({ id, ...col });
});
break;
}
case "rows": {
- const rows = tableProps && tableProps.rows &&
- tableProps.rows.map((row: any, index: number) => {
- const id = change.ids && change.ids[index] || uniqueId();
- return { __id__: id, ...row };
- });
- const beforeId = tableProps && tableProps.beforeId;
- if (rows && rows.length) {
+ const props = change?.props as ICreateRowsProperties;
+ const rows = props?.rows?.map((row: any, index: number) => {
+ const id = change.ids?.[index] || uniqueId();
+ return { __id__: id, ...row };
+ });
+ const beforeId = props?.beforeId;
+ if (rows?.length) {
dataSet.addCanonicalCasesWithIDs(rows, beforeId);
self.updateDatasetByExpressions(dataSet);
}
@@ -410,38 +521,49 @@ export const TableContentModel = types
applyUpdate(dataSet: IDataSet, change: ITableChange, dataSetOnly = false) {
const ids = castArray(change.ids);
switch (change.target) {
- case "table":
- (change.props?.name != null) && dataSet.setName(change.props.name);
+ case "table": {
+ const props = change.props as IUpdateTableProperties;
+ (props?.name != null) && dataSet.setName(props.name);
break;
+ }
case "columns": {
- const colProps = change && change.props && castArray(change.props);
- colProps && colProps.forEach((col: any, colIndex) => {
- each(col, (value, prop) => {
- switch (prop) {
- case "name": {
- const colId = ids[colIndex];
- dataSet.setAttributeName(colId, value);
- if (colIndex === 0) {
- self.metadata.clearRawExpressions(kSerializedXKey);
+ const props = change.props as IUpdateColumnsProperties;
+ const colProps = castArray(props);
+ colProps?.forEach((col, colIndex) => {
+ const colId = ids[colIndex];
+ if (dataSet.attrFromID(colId)) {
+ each(col, (value, prop) => {
+ const _value = value as string;
+ switch (prop) {
+ case "name": {
+ dataSet.setAttributeName(colId, _value);
+ if (colIndex === 0) {
+ self.metadata.clearRawExpressions(kSerializedXKey);
+ }
+ break;
}
- break;
+ case "expression":
+ self.metadata.setExpression(colId, _value);
+ self.updateDatasetByExpressions(dataSet);
+ break;
+ case "rawExpression":
+ self.metadata.setRawExpression(colId, _value);
+ break;
}
- case "expression":
- self.metadata.setExpression(ids[colIndex], value);
- self.updateDatasetByExpressions(dataSet);
- break;
- case "rawExpression":
- self.metadata.setRawExpression(ids[colIndex], value);
- break;
- }
- });
+ });
+ }
+ else {
+ // encountered this situation during development, perhaps due to a prior bug
+ console.warn(`TableContent.applyUpdate: skipping attempt to update non-existent column ${colId}:`,
+ JSON.stringify(col));
+ }
});
break;
}
case "rows": {
- const rowProps = change && change.props && castArray(change.props);
+ const rowProps: IRowProperties[] | undefined = change?.props && castArray(change.props as any);
if (rowProps) {
- rowProps.forEach((row: any, rowIndex) => {
+ rowProps.forEach((row, rowIndex) => {
dataSet.setCanonicalCaseValues([{ __id__: ids[rowIndex], ...row }]);
});
self.updateDatasetByExpressions(dataSet);
@@ -454,12 +576,16 @@ export const TableContentModel = types
const ids = change && castArray(change.ids);
switch (change.target) {
case "columns":
- if (ids && ids.length) {
- ids.forEach(id => dataSet.removeAttribute(id));
+ if (ids?.length) {
+ ids.forEach(id => {
+ dataSet.removeAttribute(id);
+ // remove expressions from maps
+ self.metadata.clearExpression(id);
+ });
}
break;
case "rows":
- if (ids && ids.length) {
+ if (ids?.length) {
dataSet.removeCases(ids);
}
break;
@@ -486,12 +612,23 @@ export const TableContentModel = types
}))
.views(self => ({
applyChanges(dataSet: IDataSet, start = 0) {
+ let hasColumnChanges = false;
+ let hasRowChanges = false;
for (let i = start; i < self.changes.length; ++i) {
const change = safeJsonParse(self.changes[i]);
if (change) {
+ if ((change.target === "columns") || change.props?.columns) {
+ hasColumnChanges = true;
+ // most column changes (creation, deletion, expression changes) require re-rendering rows as well
+ hasRowChanges = true;
+ }
+ if ((change.target === "rows") || change.props?.rows) {
+ hasRowChanges = true;
+ }
self.applyChange(dataSet, change);
}
}
+ return [hasColumnChanges, hasRowChanges];
},
applyChangesToDataSet(dataSet: IDataSet) {
self.changes.forEach(jsonChange => {
@@ -507,12 +644,13 @@ export const TableContentModel = types
const dataSet = DataSet.create();
self.applyChangesToDataSet(dataSet);
+ // add a __label__ attribute to returned dataSet (used by GeometryContent.addTableLink)
const attrIds = dataSet.attributes.map(attr => attr.id);
const kLabelId = uniqueId();
dataSet.addAttributeWithID({ id: kLabelId, name: kLabelAttrName });
for (let i = 0; i < dataSet.cases.length; ++i) {
const caseId = dataSet.cases[i].__id__;
- const label = self.getRowLabel(i);
+ const label = getRowLabel(i);
const caseValues: ICase = { __id__: caseId, [kLabelId]: label };
if (canonicalize) {
attrIds.forEach(attrId => {
@@ -524,9 +662,8 @@ export const TableContentModel = types
}
return dataSet;
},
- isValidForGeometryLink() {
- const dataSet = DataSet.create();
- self.applyChangesToDataSet(dataSet);
+ isValidDataSetForGeometryLink(dataSet: IDataSet) {
+ if ((dataSet.attributes.length < 2) || (dataSet.cases.length < 1)) return false;
const attrIds = dataSet.attributes.map(attr => attr.id);
for (const aCase of dataSet.cases) {
@@ -535,6 +672,27 @@ export const TableContentModel = types
}
}
return true;
+ },
+ hasLinkableCases(dataSet: IDataSet) {
+ if ((dataSet.attributes.length < 2) || (dataSet.cases.length < 1)) return false;
+
+ const attrIds = dataSet.attributes.map(attr => attr.id);
+ const isLinkableCaseValue = (value: number | string | null | undefined) =>
+ (value != null) && (value !== "") && isFinite(Number(value));
+ for (const aCase of dataSet.cases) {
+ if (attrIds.every(attrId => isLinkableCaseValue(dataSet.getValue(aCase.__id__, attrId)))) {
+ // we have at least one valid linkable case
+ return true;
+ }
+ }
+ return false;
+ }
+ }))
+ .views(self => ({
+ isValidForGeometryLink() {
+ const dataSet = DataSet.create();
+ self.applyChangesToDataSet(dataSet);
+ return self.isValidDataSetForGeometryLink(dataSet);
}
}));
@@ -554,7 +712,7 @@ export function convertImportToChanges(snapshot: any) {
// create rows
const rowCount = columns.reduce((max, col) => {
- const len = col.values && col.values.length || 0;
+ const len = col.values?.length || 0;
return Math.max(max, len);
}, 0);
const rows: any[] = [];
@@ -562,7 +720,7 @@ export function convertImportToChanges(snapshot: any) {
const row: any = { __id__: uniqueId() };
columnProps.forEach((col: any, colIndex) => {
const values = columns[colIndex].values;
- if (col && col.id && i < values.length) {
+ if (col?.id && i < values.length) {
row[col.id] = values[i];
}
});
@@ -578,8 +736,10 @@ export function mapTileIdsInTableSnapshot(snapshot: SnapshotOut {
const change: ITableChange = safeJsonParse(changeJson);
- if ((change.action === "create") && (change.target === "geometryLink")) {
- change.ids = idMap[change.ids as string];
+ if ((change.target === "geometryLink") && change.ids) {
+ change.ids = Array.isArray(change.ids)
+ ? change.ids.map(id => idMap[id])
+ : idMap[change.ids];
}
if (change.links) {
change.links.tileIds = change.links.tileIds.map(id => idMap[id]);
@@ -592,6 +752,7 @@ export function mapTileIdsInTableSnapshot(snapshot: SnapshotOut `${caseId}:${attrId}`;
+export const legacyLinkedPointId = (caseId: string) => caseId;
+export const splitLinkedPointId = (id: string) => id.split(":");
diff --git a/src/models/tools/tool-content-info.ts b/src/models/tools/tool-content-info.ts
index a4c9798c3e..addeabc5b6 100644
--- a/src/models/tools/tool-content-info.ts
+++ b/src/models/tools/tool-content-info.ts
@@ -7,6 +7,7 @@ export type ToolTileModelContentSnapshotPostProcessor =
export interface IToolContentInfo {
id: string;
tool: string;
+ titleBase?: string;
modelClass: any;
metadataClass?: any;
addSidecarNotes?: boolean;
diff --git a/src/models/tools/tool-tile.ts b/src/models/tools/tool-tile.ts
index 2fdb01cf22..66862bc9a4 100644
--- a/src/models/tools/tool-tile.ts
+++ b/src/models/tools/tool-tile.ts
@@ -1,9 +1,9 @@
-import { types, getSnapshot, Instance, SnapshotOut } from "mobx-state-tree";
-import { kPlaceholderToolID } from "./placeholder/placeholder-content";
-import { findMetadata, ToolContentUnion, ToolContentUnionType } from "./tool-types";
-import { v4 as uuid } from "uuid";
import { cloneDeep } from "lodash";
-import { Optional } from "utility-types";
+import { getSnapshot, Instance, SnapshotIn, SnapshotOut, types } from "mobx-state-tree";
+import { kPlaceholderToolID } from "./placeholder/placeholder-content";
+import { findMetadata, ToolContentUnion } from "./tool-types";
+import { DisplayUserTypeEnum } from "../stores/user-types";
+import { uniqueId } from "../../utilities/js-utils";
// generally negotiated with app, e.g. single column width for table
export const kDefaultMinWidth = 60;
@@ -22,20 +22,17 @@ export interface IDragTiles {
items: IDragTileItem[];
}
-export function createToolTileModelFromContent(content: ToolContentUnionType) {
- return ToolTileModel.create({ content });
-}
-
export function cloneTileSnapshotWithoutId(tile: ToolTileModelType) {
- const copy: Optional = cloneDeep(getSnapshot(tile));
- delete copy.id;
+ const { id, display, ...copy } = cloneDeep(getSnapshot(tile));
return copy;
}
export const ToolTileModel = types
.model("ToolTile", {
// if not provided, will be generated
- id: types.optional(types.identifier, () => uuid()),
+ id: types.optional(types.identifier, () => uniqueId()),
+ // whether to restrict display to certain users
+ display: DisplayUserTypeEnum,
// e.g. "GeometryContentModel", "ImageContentModel", "TableContentModel", "TextContentModel"
content: ToolContentUnion
})
@@ -79,4 +76,5 @@ export const ToolTileModel = types
}));
export type ToolTileModelType = Instance;
+export type ToolTileSnapshotInType = SnapshotIn;
export type ToolTileSnapshotOutType = SnapshotOut;
diff --git a/src/models/view/nav-tabs.ts b/src/models/view/nav-tabs.ts
index 826d372265..4b5eadd3dc 100644
--- a/src/models/view/nav-tabs.ts
+++ b/src/models/view/nav-tabs.ts
@@ -1,8 +1,10 @@
import { types, SnapshotIn, Instance } from "mobx-state-tree";
-import { UserModelType, UserTypeEnum } from "../stores/user";
+import { UserModelType } from "../stores/user";
+import { UserTypeEnum } from "../stores/user-types";
export enum ENavTab {
kProblems = "problems",
+ kTeacherGuide = "teacher-guide",
kStudentWork = "student-work",
kMyWork = "my-work",
kClassWork = "class-work",
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_2_Anchor.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_2_Anchor.png
new file mode 100644
index 0000000000..2e12d49560
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_2_Anchor.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_2_Anchor2.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_2_Anchor2.png
new file mode 100644
index 0000000000..08e5933150
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_2_Anchor2.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_2_CountingSquares.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_2_CountingSquares.png
new file mode 100644
index 0000000000..7b07a25a08
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_2_CountingSquares.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Anchor.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Anchor.png
new file mode 100644
index 0000000000..a5bf8c09e9
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Anchor.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_EqnCompare.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_EqnCompare.png
new file mode 100644
index 0000000000..39ade7b3a0
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_EqnCompare.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_GraphConstant.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_GraphConstant.png
new file mode 100644
index 0000000000..746acd9203
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_GraphConstant.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Height.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Height.png
new file mode 100644
index 0000000000..321601e81d
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Height.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Intersection.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Intersection.png
new file mode 100644
index 0000000000..bce667bd2d
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Intersection.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Table.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Table.png
new file mode 100644
index 0000000000..24023eeddc
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_Table.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare1.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare1.png
new file mode 100644
index 0000000000..c91f7233a7
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare1.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare2.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare2.png
new file mode 100644
index 0000000000..249c7647b6
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare2.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare3.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare3.png
new file mode 100644
index 0000000000..2dbda80167
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare3.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare4.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare4.png
new file mode 100644
index 0000000000..aa6fe3ae92
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare4.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare5.png b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare5.png
new file mode 100644
index 0000000000..caf64185af
Binary files /dev/null and b/src/public/curriculum/moving-straight-ahead/images/MSA_TG_1_3_TableCompare5.png differ
diff --git a/src/public/curriculum/moving-straight-ahead/moving-straight-ahead.json b/src/public/curriculum/moving-straight-ahead/moving-straight-ahead.json
index ac563fd73d..edce4b35f5 100644
--- a/src/public/curriculum/moving-straight-ahead/moving-straight-ahead.json
+++ b/src/public/curriculum/moving-straight-ahead/moving-straight-ahead.json
@@ -163,6 +163,16 @@
"What do you think your walking rate is?- Make a prediction about your walking rate.
- Use a meter stick and timer to help answer the following following questions about your walking rate. What is your walking rate in meters per second?
<
"
]
}
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "Student answers will vary. It will be easier for students to find their walking rates by seeing how far they walk in, for example, 5 or 10 seconds and then divide the number of meters they walked by the number of seconds for which they walked."
+ ]
+ }
}
]
},
@@ -188,7 +198,136 @@
"format": "html",
"text": [
"Situation A. Walking at a Consistent Rate",
- "Assume you continue to walk at the consistent rate determined in the Initial Challenge. - How long would it take you to walk 500 meters?
- How far could you walk in 5 seconds, 10 seconds, 30 seconds? In 60 seconds? In 1 hour?
- Write an equation that represents the distance d in meters that you could walk in t seconds. Compare your equation to your classmates’ equations.
- Describe what a graph of your equation would look like. Check your answer by making a graph of your data.
"
+ "Assume you continue to walk at the consistent rate determined in the Initial Challenge."
+ ]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "Answers will vary depending on the student’s walking rate. Sample answers are provided for a walking rate of 2 meters per second, and for a student who walks r meters per second."
+ ]
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "1. How long would it take you to walk 500 meters?"
+ ]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "A student who walks 2 meters per second will walk 500 meters in 250 seconds, or 4 minutes and 10 seconds.",
+ "A student who walks r meters per second will walk 500 meters in 500/r seconds."
+ ]
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "2. How far could you walk in 5 seconds, 10 seconds, 30 seconds? In 60 seconds? In 1 hour?"
+ ]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "A student who walks 2 meters per second will walk 10 meters in 5 seconds, 20 meters in 10 seconds, 60 meters in 30 seconds, 120 meters in 60 seconds, and 7200 meters in 1 hour.",
+ "A student who walks r meters per second will walk 5r meters in 5 seconds, 10r meters in 10 seconds, 30r meters in 30 seconds, 60r meters in 60 seconds, and 3600r meters in 1 hour."
+ ]
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "3. Write an equation that represents the distance d in meters that you could walk in t seconds. Compare your equation to your classmates’ equations. Describe what a graph of your equation would look like. Check your answer by making a graph of your data. "
+ ]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "For a walking rate of 2 meters per second, an equation is d = 2t, where d is the distance in meters and t is the time in seconds.",
+ "For a walking rate of r meters per second, an equation is d = rt, where d is the distance in meters and t is the time in seconds."
+ ]
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "4. Describe what a graph of your equation would look like. Check your answer by making a graph of your data. "
+ ]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "Possible answers.\nFor a walking rate of 2 meters per second: The graph would be a line starting at (0,0). For every one second walked, the distance increases by 2.",
+ "For a walking rate of r meters per second: The graph would be a line starting at (0,0). For every one second walked, the distance increases by r."
+ ]
+ }
+ },
+ {
+ "layout": {
+ "height": 340
+ },
+ "display": "teacher",
+ "content": {
+ "type":"Geometry",
+ "board": {
+ "properties": {
+ "axisNames": ["Time (seconds)", "Distance (meters)"],
+ "axisMin": [-1, -1],
+ "axisRange": [8, 10]
+ }
+ },
+ "objects": [
+ {
+ "type": "point",
+ "parents": [0, 0],
+ "properties": {
+ "name": ""
+ }
+ },
+ {
+ "type": "point",
+ "parents": [1, 2],
+ "properties": {
+ "name": ""
+ }
+ },
+ {
+ "type": "point",
+ "parents": [4, 8],
+ "properties": {
+ "name": ""
+ }
+ }
]
}
},
@@ -198,7 +337,17 @@
"format": "html",
"text": [
"Situation B. Liz’s Claim",
- "Liz claimed that walking rates are like ratios and she used proportional reasoning to answer the questions in Situation A. She wrote:\n The walking rate is a multiplicative comparison statement. If I walk 1.5 m per sec, then I walk 7.5 m in 5 seconds, 15 m in 10 sec, … or 500 m in about 333 sec, etc.
\n\nIs she correct? Explain. "
+ "Liz claimed that walking rates are like ratios and she used proportional reasoning to answer the questions in Situation A. She wrote:\n The walking rate is a multiplicative comparison statement. If I walk 1.5 m per sec, then I walk 7.5 m in 5 seconds, 15 m in 10 sec, … or 500 m in about 333 sec, etc.\n\nIs she correct? Explain. "
+ ]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "Sample answer: She is correct. The ratio of meters walked to seconds always stays the same, so, for example, 1.5 meters/1 second = 7.5 meters/5 seconds = 15 meters/10 seconds. So you can always predict how long it will take to walk a specific distance based on this constant ratio."
]
}
}
@@ -219,7 +368,18 @@
"format": "html",
"text": ["Assume you continue to walk at the rate determined in the Initial Challenge. Describe in words the distance you could walk in a given number of seconds. Then write an equation to represent this information."]
}
- }]
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": [
+ "For a walking rate of r meters per second, you can walk a distance in meters that is r times the number of seconds. That is, you can scale the ratio, meters per second, up or down by multiplying both meters and seconds by the same number. d = rt."
+ ]
+ }
+ }
+ ]
},
"supports": [
]
@@ -280,29 +440,187 @@
"text": "Alana, Gilberto, and Leanne were students in Ms. Chang’s class. They each did the walking experiment to find their walking rates."
}
},
+ [
+ {
+ "content": {
+ "type": "Table",
+ "name": "Walking Rates",
+ "columns": [
+ { "name": "Name",
+ "type": "string",
+ "values": ["Alana", "Gilberto", "Leanne"]
+ },
+ { "name": "Walking Rate",
+ "type": "string",
+ "values": ["1 meter per second", "2 meters per second", "2.5 meters per second"]
+ }
+ ]
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "They had some questions concerning the different representations (tables, graphs and equations) of their walking data. To help them answer the questions:"
+ }
+ }
+ ],
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "\u0089\u2022\u0009Make a table showing the distance walked by each student for the first ten seconds."
+ }
+ },
{
+ "display": "teacher",
"content": {
"type": "Table",
+ "name": "Walking Rates (Distance / Time)",
"columns": [
- { "name": "Name",
- "type": "string",
- "values": ["Alana", "Gilberto", "Leanne"]
+ {
+ "name": "Time (sec)",
+ "type": "number",
+ "values": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
- { "name": "Walking Rate",
- "type": "string",
- "values": ["1 meter per second", "2 meters per second", "2.5 meters per second"]
+ {
+ "name": "Alana's D (m)",
+ "type": "number",
+ "values": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+ },
+ {
+ "name": "Gilberto's D(m)",
+ "type": "number",
+ "values": [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
+ },
+ {
+ "name": "Leanne's D(m)",
+ "type": "number",
+ "values": [0, 2.5, 5.0, 7.5, 10, 12.5, 15, 17.5, 20, 22.5, 25]
}
]
- },
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "\u0089\u2022\u0009Graph the times and distances on the same coordinate axes. Label each line with the name of the person. Use a different color for each student."
+ }
+ },
+ {
"layout": {
- "height": 110
+ "height": 300
+ },
+ "display": "teacher",
+ "content": {
+ "title": "Walking Rates",
+ "type": "Geometry",
+ "board": {
+ "properties": {
+ "axisNames": ["t, D"],
+ "axisLabels": ["Time (seconds)", "Distance (meters)"],
+ "axisMin": [-1, -2],
+ "axisRange": [10, 25]
+ }
+ },
+ "objects": [
+ {
+ "type": "movableLine",
+ "parents": [
+ {
+ "type": "point",
+ "parents": [0, 0]
+ },
+ {
+ "type": "point",
+ "parents": [10, 10],
+ "properties": {
+ "name": "Alana"
+ }
+ }
+ ]
+ },
+ {
+ "type": "movableLine",
+ "parents": [
+ {
+ "type": "point",
+ "parents": [0, 0]
+ },
+ {
+ "type": "point",
+ "parents": [9, 18],
+ "properties": {
+ "name": "Gilberto"
+ }
+ }
+ ]
+ },
+ {
+ "type": "movableLine",
+ "parents": [
+ {
+ "type": "point",
+ "parents": [0, 0]
+ },
+ {
+ "type": "point",
+ "parents": [6, 15],
+ "properties": {
+ "name": "Leanne"
+ }
+ }
+ ]
+ }
+ ]
+ }
+ },
+ [
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "\u0089\u2022\u0009Write an equation that represents the relationship between the time t and distance d walked by each student."
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "Alana: d = t or d = 1t; Gilberto: d = 2t; Leanne: d = 2.5t."
+ }
+ }
+ ],
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "How are the different walking rates represented in the different equations, tables, and graphs?"
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "In the equation the walking rate is represented as the number that you multiply by the time to get distance. (Note that students will learn later that the multiplier is called the coefficient.) \nIn the table, the walking rate is represented as the difference between values for distance in consecutive rows (1 second apart). So, as the x-values increase by 1, the y values will increase by the walking rate. (Note that students will learn later that this is called the rate of change.)\nIn the graph, the walking rate is represented as the steepness of the graph – the greater the walking rate, the steeper the line on the graph. (Note that students will learn later that this is called the slope.)"
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "Which representation is more useful than another to solve a problem about walking? Explain."
}
},
{
+ "display": "teacher",
"content": {
"type": "Text",
"format": "html",
- "text": "They had some questions concerning the different representations (tables, graphs and equations) of their walking data. To help them answer the questions- Make a table showing the distance walked by each student for the first ten seconds.
- Graph the times and distances on the same coordinate axes. Label each line with the name of the person. Use a different color for each student.
- Write an equation that represents the relationship between the time t and distance d walked by each student.
- How are the different walking rates represented in the different equations, tables, and graphs?
- Which representation is more useful than another to solve a problem about walking? Explain.
"
+ "text": "Answers will vary. Sample answers: The table is the most helpful because I can figure out the pattern, but I can also see many values that would answer questions.\nThe graph is the most important because I can see the pattern for the walking rates. I can also see how the pattern of change for one line is related to the pattern of change for another. I can also find or approximate answers to questions.\nThe equation is the most useful because I can use any amount of time to find the distance, not just small values for time like on a graph or table."
}
}
]
@@ -321,34 +639,73 @@
"content": {
"type": "Text",
"format": "html",
- "text": ["Situation A. Yvonne’s Claims - Yvonne claims she can tell from the table that the relationships between time and distance are proportional. What evidence in the table shows they are proportional? Is this the same thing as saying the relationships are linear?
- Yvonne claims that she can use a table or a graph to answer the question:\n\u00a0\u00a0\u00a0For each student, if time t increases by 1 second, by how much \n\u00a0\u00a0\u00a0does the distance d change? \nIs she correct? Explain.
- Yvonne also claimed that the time and distance data represented in part 1 is the Constant of Proportionality. What do you think?
"]
+ "text": ["Situation A. Yvonne’s Claims \n\n1. Yvonne claims she can tell from the table that the relationships between time and distance are proportional. What evidence in the table shows they are proportional? Is this the same thing as saying the relationships are linear? "]
}
},
- {
+ {
+ "display": "teacher",
"content": {
"type": "Text",
"format": "html",
- "text": ["Situation B. Valentina and Omar have the Same Walking Rate\nValentina and Omar have the same walking rate. Each made a graph to represent their data. "]
+ "text": "The relationships are proportional. On the table, you can take any two coordinate pairs and write a proportion. Also, you can see this because any distance divided by time gives a constant ratio. Since the relationship is proportional, it is also linear because distance divided by time gives a constant rate of change. (Note: Not all linear relationships are proportional.)"
}
},
- {
+ {
"content": {
"type": "Text",
"format": "html",
- "text": ["Omar's Walking Rate: Distance d\u00a0 in meters vs. time t\u00a0 in seconds"]
+ "text": ["2. Yvonne claims that she can use a table or a graph to answer the question:\n\u00a0\u00a0\u00a0For each student, if time t increases by 1 second, by how much \n\u00a0\u00a0\u00a0does the distance d change? \nIs she correct? Explain."]
}
},
{
- "layout": {
- "height": 320
- },
+ "display": "teacher",
"content": {
- "type":"Geometry",
- "board": {
- "properties": {
- "axisNames": ["t", "d"],
- "axisMin": [-5, -10],
- "axisRange": [60, 100]
+ "type": "Text",
+ "format": "html",
+ "text": "She is correct. If time increases by 1 second, she can find the change in distance on a graph by looking at the steepness of the line. If time increases by 1 second, she can find the change in distance on a table by looking at the distance in two consecutive rows (one second apart) and calculating the difference."
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": ["3. Yvonne also claimed that the time and distance data represented in part 1 is the Constant of Proportionality. What do you think?"]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "Yvonne is correct. All of the relationships are of the form d = rt. The value of r is the constant of proportionality for each relationship."
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": ["Situation B. Valentina and Omar have the Same Walking Rate\nValentina and Omar have the same walking rate. Each made a graph to represent their data. "]
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": ["Omar's Walking Rate: Distance d\u00a0 in meters vs. time t\u00a0 in seconds"]
+ }
+ },
+ {
+ "layout": {
+ "height": 320
+ },
+ "content": {
+ "title": "Omar's Walking Rate",
+ "type":"Geometry",
+ "board": {
+ "properties": {
+ "axisNames": ["t", "d"],
+ "axisMin": [-5, -10],
+ "axisRange": [60, 100]
}
},
"objects": [
@@ -430,6 +787,7 @@
"height": 300
},
"content": {
+ "title": "Valentina’s Walking Rate",
"type":"Geometry",
"board": {
"properties": {
@@ -474,7 +832,30 @@
"content": {
"type": "Text",
"format": "html",
- "text": ["- How are their graphs similar? How are they different?
- Which expression could represent their distance?\n\n 5t \u00a0\u00a0\u00a0\u00a0 2t \u00a0\u00a0\u00a0\u00a0 0.5t
"]
+ "text": ["1. How are their graphs similar? How are they different?"]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "Valentina and Omar’s graphs are similar in that, when the points are connected, the graphs have the same rate of change and y-intercept. Omar graphed his walking rate for 40 seconds, whereas Valentina graphed his walking rate for 4 seconds. Their scales are different as well. Omar uses intervals of 5 seconds and 10 meters, whereas Valentina uses intervals of 1 second and 1 meter. The different scales makes it appear that Valentina has a faster walking rate. However, their walking rates are the same. Because Omar’s vertical scale has twice the value as the horizontal scale, it appears to “pull down” the points as you have less vertical “movement” for every point. Valentina’s scales both have a value of one for every grid line. So, you will have the “same” movement on the horizontal and vertical axes for each coordinate pair."
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": ["2. Which expression could represent their distance?\n\n 5t \u00a0\u00a0\u00a0\u00a0 2t \u00a0\u00a0\u00a0\u00a0 0.5t"]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "The expression 2t could represent their distance. On both graphs, the distance traveled is always twice the time in seconds, so they are traveling 2 meters every second."
}
},
{
@@ -500,9 +881,6 @@
"values": [0, 2, 9, 11, 20, 25]
}
]
- },
- "layout": {
- "height": 210
}
},
{
@@ -521,9 +899,6 @@
"values": [0, 3, 6, 9, 12, 15]
}
]
- },
- "layout": {
- "height": 210
}
},
{
@@ -540,6 +915,14 @@
"type": "Image",
"url": "curriculum/moving-straight-ahead/images/MSA_1_2_evos_walkathon_graph.png"
}
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "Elizabeth and Billie’s relationships are linear. Elizabeth walks at a constant rate of 3 meters every 2 seconds, which you can see in the table. Billie walks at a constant rate of 2.25 m/s, since the equation is in the form of d = rt, similar to the equations for Alana, Gilberto, and Leanne. Both of these relationships are also proportional, since at 0 seconds they have walked 0 meters.\n\n George’s, Evo’s, and Bob’s relationships are not linear. The table for George does not show a constant rate of change. Evo’s graph does not make a straight line, so it does not show a constant rate of change. In the equation for Bob, the rate is a variable, so the walking rate is not constant. (Some students may make graphs and claim the relationships are either linear or not based on whether the data lie on a straight line.)"
+ }
}
]
},
@@ -551,12 +934,22 @@
{
"type": "nowWhatDoYouKnow",
"content": {
- "tiles": [{
- "content": {
- "type": "Text",
- "text": "How do you recognize a linear pattern of change in a verbal context, a table, a graph, an expression, or an equation?"
+ "tiles": [
+ {
+ "content": {
+ "type": "Text",
+ "text": "How do you recognize a linear pattern of change in a verbal context, a table, a graph, an expression, or an equation?"
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "- Main idea: Relationships are linear when there is a constant rate of change.
- Verbal context: key words include constant, [increase/decrease] by the same amount every [year/second/month]
- Table: The values of one variable change at a constant rate when the other variable changes at a constant rate.
- Graph: The graph is a straight line.
- Expression: The independent variable is multiplied by a constant.
- Equation: The independent variable is multiplied by a constant, so the dependent variable will change at a constant rate.
"
+ }
}
- }]
+ ]
},
"supports": [
]
@@ -582,7 +975,7 @@
]
}
},
- {
+ {
"content": {
"type": "Text",
"format": "html",
@@ -620,65 +1013,551 @@
"values": ["$10 regardless of how far she walks", "$2 per kilometer (km)", "$5 donation plus 50¢ per kilometer"]
}
]
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": ["- Who will raise the most money? Explain.
"]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": "The answer depends on how long the walkathon is. \nLeanne will raise the most money if the walkathon is shorter than 5 kilometers; Gilberto will “catch up” to Leanne when he walks 5 kilometers because he raises $2 per kilometer.\nGilberto will raise the most money if the walkathon is longer than 5 kilometers.\nAlana will never raise the most money because she has a smaller starting donation than Leanne and a smaller per-kilometer-walked donation than Gilberto."
+ }
+ },
+ {
+ "layout": {
+ "height": 330
},
+ "display": "teacher",
+ "content": {
+ "title": "Comparing Walking Rates",
+ "type": "Geometry",
+ "board": {
+ "properties": {
+ "axisNames": ["t, D"],
+ "axisLabels": ["Time (seconds)", "Distance (meters)"],
+ "axisMin": [-1, -2],
+ "axisRange": [12, 15]
+ }
+ },
+ "objects": [
+ {
+ "type": "movableLine",
+ "parents": [
+ {
+ "type": "point",
+ "parents": [0, 10],
+ "properties": {
+ "name": "Leanne"
+ }
+ },
+ {
+ "type": "point",
+ "parents": [10, 10],
+ "properties": {
+ "name": ""
+ }
+ }
+ ]
+ },
+ {
+ "type": "movableLine",
+ "parents": [
+ {
+ "type": "point",
+ "parents": [0, 0]
+ },
+ {
+ "type": "point",
+ "parents": [6, 12],
+ "properties": {
+ "name": "Gilberto"
+ }
+ }
+ ]
+ },
+ {
+ "type": "movableLine",
+ "parents": [
+ {
+ "type": "point",
+ "parents": [0, 5]
+ },
+ {
+ "type": "point",
+ "parents": [16, 10],
+ "properties": {
+ "name": "Alana"
+ }
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "display": "teacher",
+ "content": {
+ "type": "Table",
+ "name": "Donations",
+ "columns": [
+ {
+ "name": "Distance (km)",
+ "type": "number",
+ "values": [0, 1, 2, 3, 4, 5, 6]
+ },
+ {
+ "name": "Leanne's ($)",
+ "type": "number",
+ "values": [10, 10, 10, 10, 10, 10]
+ },
+ {
+ "name": "Gilbero's ($)",
+ "type": "number",
+ "values": [0, 2, 4, 6, 8, 10]
+ },
+ {
+ "name": "Alana's ($)",
+ "type": "number",
+ "values": [0, 2, 4, 6, 8, 10]
+ }
+ ]
+ }
+ },
+ {
+ "content": {
+ "type": "Text",
+ "format": "html",
+ "text": ["