Graph manual points editing

cypress/e2e/functional/tile_tests/xy_plot_tool_spec.js

@@ -40,6 +40,23 @@ function buildTable(data) {
   });
 }
 
+// Parse `transform` attributes (used for point positioning)
+function xAttributeOfTransform(matcher) {
+  return attributeOfTransform(matcher, 1);
+}
+function yAttributeOfTransform(matcher) {
+  return attributeOfTransform(matcher, 2);
+}
+function attributeOfTransform(matcher, n) {
+  return matcher
+    .invoke('attr', 'transform')
+    .then(transform => {
+      return transform.match(/translate\((-?[0-9.]+), *(-?[0-9.]+)\)/)[n];
+    })
+    .then(parseFloat);
+}
+
+
 function beforeTest(params) {
   cy.clearQAData('all');
   cy.visit(params);
@@ -80,6 +97,8 @@ context('XYPlot Tool Tile', function () {
       cy.log("Link Table");
       clueCanvas.clickToolbarButton('graph', 'link-tile-multiple');
       xyTile.linkTable("Table Data 1");
+      cy.wait(1000); // Needs a little extra time, probably due to legend resizing.
+      // Otherwise the upcoming typeInTableCell fails.
 
       cy.log("shows edit boxes on axes");
       xyTile.getEditableAxisBox("bottom", "min").should("exist");
@@ -468,5 +487,66 @@ context('XYPlot Tool Tile', function () {
       // Only the unlink remove button should remain
       xyTile.getRemoveVariablesButtons().should("have.length", 1);
     });
+
+    it('Test points by hand', () => {
+      beforeTest(queryParamsMultiDataset);
+      cy.log('Add XY Plot Tile');
+      cy.collapseResourceTabs();
+      clueCanvas.addTile('graph');
+      xyTile.getTile('.primary-workspace').should('be.visible');
+      clueCanvas.toolbarButtonIsDisabled('graph', 'move-points');
+      clueCanvas.toolbarButtonIsNotSelected('graph', 'move-points');
+      clueCanvas.toolbarButtonIsDisabled('graph', 'add-points');
+      clueCanvas.toolbarButtonIsNotSelected('graph', 'add-points');
+
+      // Create manual layer
+      clueCanvas.clickToolbarButton('graph', 'add-points-by-hand');
+      clueCanvas.toolbarButtonIsDisabled('graph', 'add-points-by-hand'); // only one manual set allowed
+      clueCanvas.toolbarButtonIsEnabled('graph', 'move-points');
+      clueCanvas.toolbarButtonIsEnabled('graph', 'add-points');
+      clueCanvas.toolbarButtonIsSelected('graph', 'add-points'); // automatically turns on "add" mode
+      xyTile.getXAttributesLabel().should('have.length', 1).should('contain.text', 'X Variable');
+      xyTile.getYAttributesLabel().should('have.length', 1).should('contain.text', 'Y Variable 1');
+      xyTile.getLayerName().should('have.length', 1).should('contain.text', 'Added by hand');
+      xyTile.getLayerNameInput().should('not.be.visible');
+
+      // Rename manual layer
+      xyTile.getLayerNameEditButton().click();
+      xyTile.getLayerNameEditButton().should('have.length', 0);
+      xyTile.getLayerNameInput().should('be.visible').type('Renamed{enter}');
+      xyTile.getLayerNameInput().should('not.be.visible');
+      xyTile.getLayerName().should('have.length', 1).should('contain.text', 'Renamed');
+
+      // Add points
+      xyTile.getGraphDot().should('have.length', 0);
+      xyTile.getTile('.primary-workspace').should('have.length', 1);
+      xyTile.getGraphBackground().should('have.length', 1).click(150, 50);
+      xyTile.getGraphBackground().click(200, 100);
+      xyTile.getGraphDot().should('have.length', 2);
+
+      // Switch to 'select/move' mode
+      clueCanvas.clickToolbarButton('graph', 'move-points');
+      clueCanvas.toolbarButtonIsSelected('graph', 'move-points');
+      clueCanvas.toolbarButtonIsNotSelected('graph', 'add-points');
+      xyTile.getGraphBackground().click(250, 100); // should not add a point
+      xyTile.getGraphDot().should('have.length', 2);
+
+      // Drag a point to reposition.  Should start out where we initially clicked
+      xAttributeOfTransform(xyTile.getGraphDot().eq(0)).should("be.closeTo", 150, 10);
+      yAttributeOfTransform(xyTile.getGraphDot().eq(0)).should("be.closeTo", 50, 10);
+      // {force: true} seems to be necessary, not sure why
+      xyTile.getGraphDot().eq(0).children('circle').eq(1)
+        .trigger("mousedown", 150, 50, { force: true })
+        .trigger("drag", 175, 75, { force: true })
+        .trigger("mouseup", 175, 75, { force: true });
+      cy.wait(1000);
+      xAttributeOfTransform(xyTile.getGraphDot().eq(0)).should("be.closeTo", 175, 10);
+      yAttributeOfTransform(xyTile.getGraphDot().eq(0)).should("be.closeTo", 75, 10);
+
+      // Click toolbar button again to leave edit mode
+      clueCanvas.clickToolbarButton('graph', 'move-points');
+      clueCanvas.toolbarButtonIsNotSelected('graph', 'move-points');
+      clueCanvas.toolbarButtonIsNotSelected('graph', 'add-points');
+    });
   });
 });

cypress/support/elements/tile/TableToolTile.js

@@ -64,14 +64,12 @@ class TableToolTile{
       return cy.get('.rdg-row .rdg-cell .rdg-text-editor');
     }
     typeInTableCellXY(row, col, text) {
-      this.getTableCellXY(row, col).dblclick().then(() => {
-        this.getTableCellEdit().type(`${text}{enter}`);
-      });
+      this.getTableCellXY(row, col).dblclick();
+      this.getTableCellEdit().type(`${text}{enter}`);
     }
     typeInTableCell(i, text) {
-      this.getTableCell().eq(i).dblclick().then(() => {
-        this.getTableCellEdit().type(`${text}{enter}`);
-      });
+      this.getTableCell().eq(i).dblclick();
+      this.getTableCellEdit().type(`${text}{enter}`);
     }
     getTableCellWithColIndex(colIndex, colValue){
         return cy.get('.rdg-row').contains('.rdg-cell[aria-colindex="' + colIndex + '"]', colValue);

cypress/support/elements/tile/XYPlotToolTile.js

@@ -6,6 +6,9 @@ class XYPlotToolTile {
   getTile(workspaceClass) {
     return cy.get(`${wsClass(workspaceClass)} .canvas-area .graph-tool-tile`);
   }
+  getGraphBackground(workspaceClass) {
+    return cy.get(`${wsClass(workspaceClass)} svg [data-testid=graph-background]`);
+  }
   getXYPlotTitle(workspaceClass) {
     return cy.get(`${wsClass(workspaceClass)} .canvas-area .editable-tile-title`);
   }
@@ -51,6 +54,15 @@ class XYPlotToolTile {
   getYAxisInput(workspaceClass) {
     return this.getAxisInput("left", workspaceClass);
   }
+  getLayerName(workspaceClass) {
+    return cy.get(`${wsClass(workspaceClass)} .canvas-area .multi-legend .legend-row .layer-name`);
+  }
+  getLayerNameEditButton(workspaceClass) {
+    return cy.get(`${wsClass(workspaceClass)} .canvas-area .multi-legend .legend-row .layer-name button`);
+  }
+  getLayerNameInput(workspaceClass) {
+    return cy.get(`${wsClass(workspaceClass)} .canvas-area .multi-legend .legend-row .layer-name input`);
+  }
   getXAttributesLabel(workspaceClass) {
     return cy.get(`${wsClass(workspaceClass)} .canvas-area .multi-legend .legend-row .bottom .simple-attribute-label`);
   }

docs/mst-detached-error.md

@@ -12,7 +12,7 @@ Below is a strategy for tracking down the cause and a solution for one particula
 
 Hopefully from the message you can figure out the rough area of the code where the problem is happening. If you can pin point the UI action that causes the warning to be printed then you can use the following approach.
 
-In your local code find `kEnableLivelinessChecking` located in `index.tsx` and set to be `true`. This will cause these console warnings to actually be thrown errors instead. In many cases these thrown errors will be caught and ignored so after you set this to true you probably won't see any messages in the console if you try to duplicate the problem again.
+In your local code find `kEnableLivelinessChecking` located in `initialize-app.tsx` and set to be `true`. This will cause these console warnings to actually be thrown errors instead. In many cases these thrown errors will be caught and ignored so after you set this to true you probably won't see any messages in the console if you try to duplicate the problem again.
 
 Instead of looking in the console, what you should do is use the dev tools debugger to track it down. Setup the app to just before the error would normally be printed to the console. Then in the debug panel turn on "pause on exceptions" and check the box "pause on caught exceptions". Now trigger the error. The app should pause and you should be in the debugger.
 

docs/unit-configuration.md

@@ -165,13 +165,16 @@ Not updated to common toolbar framework and does not support toolbar configurati
 - `emptyPlotIsNumeric`: boolean, default true
 - `scalePlotOnValueChange`: boolean, default true
 
-Common toolbar framework; default toolbar buttons:
+Uses the common toolbar framework. Default toolbar buttons:
 
 - `link-tile` (opens dialog to replace dataset with a new one)
+- `add-points-by-hand` (creates a dataset owned by the graph)
 - `fit-all` (rescale axes to fit all points in view)
 - `toggle-lock` (lock axes so they won't automatically rescale)
+- `move-points` (mode where points can be moved)
+- `add-points` (mode where points can be added)
 
-Also available:
+Additional buttons available not in default set:
 
 - `link-tile-multiple` (opens dialog to add an additional dataset or link variables)
 

src/clue/app-config.json

@@ -269,9 +269,13 @@
         "disableAttributeDnD": true,
         "tools": [
           "link-tile",
+          "add-points-by-hand",
           "|",
           "fit-all",
-          "toggle-lock"
+          "toggle-lock",
+          "|",
+          "move-points",
+          "add-points"
         ]
       },
       "simulator": {

src/components/utilities/editable-label-with-button.scss

@@ -0,0 +1,23 @@
+@import "../vars.sass";
+
+.chakra-editable {
+  .chakra-editable__preview[hidden] {
+    display: none;
+  }
+
+  button {
+    background: inherit;
+    border: none;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $workspace-teal-light-6;
+    }
+
+    svg {
+      height: 1em;
+      width: 1em;
+      vertical-align: baseline;
+    }
+  }
+}

src/components/utilities/editable-label-with-button.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { Editable, EditableInput, EditablePreview, useEditableControls } from "@chakra-ui/react";
+
+import EditIcon from "../../assets/edit.svg";
+
+import "./editable-label-with-button.scss";
+
+interface IProps {
+  defaultValue: string|undefined;
+  onSubmit: (value:string) => void;
+}
+
+/**
+ * Generic component for an in-place editable label.
+ *
+ * Differs from stock <Editable> in that there's an explicit edit button rather
+ * than invoking edit mode by clicking on the label text itself.
+ */
+export const EditableLabelWithButton = observer(function EditableDataSetName({defaultValue, onSubmit}: IProps) {
+
+  return (
+    <Editable
+      defaultValue={defaultValue}
+      isPreviewFocusable={false}
+      onSubmit={onSubmit}
+    >
+      <EditablePreview />
+      <EditableInput />
+      <EditButton />
+    </Editable>
+  );
+});
+
+function EditButton() {
+  const { isEditing, getEditButtonProps } = useEditableControls();
+  if (!isEditing) {
+    return (
+      <button aria-label="Edit name" {...getEditButtonProps()}>
+        <EditIcon/>
+      </button>
+    );
+  } else {
+    return null;
+  }
+}

src/models/data/data-set.ts

@@ -221,6 +221,7 @@ export const DataSet = types.model("DataSet", {
       self.cases.push(newCase);
       beforeIndex = self.cases.length - 1;
     }
+    return newCase;
   }
 
   // `affectedAttributes` are not used in the function, but are present as a potential
@@ -639,6 +640,7 @@ export const DataSet = types.model("DataSet", {
         for (let i = attribute.values.length; i < self.cases.length; ++i) {
           attribute.values.push("");
         }
+        return attribute;
       },
 
       setAttributeName(attributeID: string, name: string) {
@@ -688,14 +690,16 @@ export const DataSet = types.model("DataSet", {
       },
 
       addCanonicalCasesWithIDs(cases: ICase[], beforeID?: string | string[]) {
+        const newCases: ICase[] = [];
         cases.forEach((aCase, index) => {
           const beforeIndex = beforeIndexForInsert(index, beforeID);
           self.attributes.forEach((attr: IAttribute) => {
             const value = aCase[attr.id];
             attr.addValue(value != null ? value : undefined, beforeIndex);
           });
-          insertCaseIDAtIndex(aCase.__id__, beforeIndex);
+          newCases.push(insertCaseIDAtIndex(aCase.__id__, beforeIndex));
         });
+        return newCases;
       },
 
       setCaseValues(cases: ICase[], affectedAttributes?: string[]) {
@@ -882,7 +886,7 @@ export function addAttributeToDataSet(dataset: IDataSet, snapshot: IAttributeSna
   if (!snapshot.id) {
     snapshot.id = uniqueId();
   }
-  dataset.addAttributeWithID(snapshot, beforeID);
+  return dataset.addAttributeWithID(snapshot, beforeID);
 }
 
 export function addCasesToDataSet(dataset: IDataSet, cases: ICaseCreation[], beforeID?: string | string[]) {
@@ -903,7 +907,7 @@ export function addCanonicalCasesToDataSet(dataset: IDataSet, cases: ICaseCreati
       aCase.__id__ = newCaseId();
     }
   });
-  dataset.addCanonicalCasesWithIDs(newCases, beforeID);
+  return dataset.addCanonicalCasesWithIDs(newCases, beforeID);
 }
 
 export function getDataSetBounds(dataSet: IDataSet) {

src/models/document/document-content-types.ts

@@ -1,5 +1,4 @@
 import { IArrowAnnotation } from "../annotations/arrow-annotation";
-import { SharedModelSnapshotType } from "../shared/shared-model";
 import { IDragSharedModelItem } from "../shared/shared-model-manager";
 import { IDragTileItem } from "../tiles/tile-model";
 import { IDropRowInfo } from "./tile-row";
@@ -46,10 +45,3 @@ export interface IDragTilesData {
   annotations: IArrowAnnotation[];
 }
 
-export interface PartialTile {
-  id: string;
-}
-export interface PartialSharedModelEntry {
-  sharedModel: SharedModelSnapshotType;
-  tiles: PartialTile[];
-}