Bar graph sync

cypress/support/elements/tile/BarGraphTile.js

@@ -1,79 +1,79 @@
 class BarGraphTile {
 
   getTiles(workspaceClass) {
-    return cy.get(`${workspaceClass || ".primary-workspace"} .canvas-area .bar-graph-tile`);
+    return cy.get(`${workspaceClass || ".primary-workspace"} .canvas .bar-graph-tile`);
   }
 
-  getTile(tileIndex = 0, workspaceClass) {
-    return this.getTiles().eq(tileIndex);
+  getTile(workspaceClass, tileIndex = 0) {
+    return this.getTiles(workspaceClass).eq(tileIndex);
   }
 
-  getTileTitle(tileIndex = 0, workspaceClass) {
-    return this.getTile(tileIndex, workspaceClass).find(`.editable-tile-title-text`);
+  getTileTitle(workspaceClass, tileIndex = 0) {
+    return this.getTile(workspaceClass, tileIndex).find(`.editable-tile-title-text`);
   }
 
-  getTileContent(tileIndex = 0, workspaceClass) {
-    return this.getTile(tileIndex, workspaceClass).find(`[data-testid="bar-graph-content"]`);
+  getTileContent(workspaceClass, tileIndex = 0) {
+    return this.getTile(workspaceClass, tileIndex).find(`[data-testid="bar-graph-content"]`);
   }
 
-  getChakraMenuItem(tileIndex = 0, workspaceClass) {
+  getChakraMenuItem(workspaceClass, tileIndex = 0) {
     return cy.get(`body .chakra-portal button`).filter(':visible');
   }
 
-  getChartArea(tileIndex = 0, workspaceClass) {
-    return this.getTile(tileIndex, workspaceClass).find(`svg.bar-graph-svg`);
+  getChartArea(workspaceClass, tileIndex = 0) {
+    return this.getTile(workspaceClass, tileIndex).find(`svg.bar-graph-svg`);
   }
 
-  getYAxisLabel(tileIndex = 0, workspaceClass) {
-    return this.getChartArea(tileIndex, workspaceClass).find(`.editable-axis-label`);
+  getYAxisLabel(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`.editable-axis-label`);
   }
 
-  getYAxisLabelButton(tileIndex = 0, workspaceClass) {
-    return this.getChartArea(tileIndex, workspaceClass).find(`[data-testid="axis-label-button"]`);
+  getYAxisLabelButton(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`[data-testid="axis-label-button"]`);
   }
 
-  getYAxisLabelEditor(tileIndex = 0, workspaceClass) {
-    return this.getChartArea(tileIndex, workspaceClass).find(`[data-testid="axis-label-editor"] input`);
+  getYAxisLabelEditor(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`[data-testid="axis-label-editor"] input`);
   }
 
-  getXAxisPulldown(tileIndex = 0, workspaceClass) {
-    return this.getChartArea(tileIndex, workspaceClass).find(`[data-testid="category-pulldown"]`);
+  getXAxisPulldown(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`[data-testid="category-pulldown"]`);
   }
 
-  getXAxisPulldownButton(tileIndex = 0, workspaceClass) {
-    return this.getXAxisPulldown(tileIndex, workspaceClass).find(`button`);
+  getXAxisPulldownButton(workspaceClass, tileIndex = 0) {
+    return this.getXAxisPulldown(workspaceClass, tileIndex).find(`button`);
   }
 
-  getYAxisTickLabel(tileIndex = 0, workspaceClass) {
-    return this.getChartArea(tileIndex, workspaceClass).find(`.visx-axis-left text`);
+  getYAxisTickLabel(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`.visx-axis-left text`);
   }
 
-  getXAxisTickLabel(tileIndex = 0, workspaceClass) {
-    return this.getChartArea(tileIndex, workspaceClass).find(`.visx-axis-bottom text`);
+  getXAxisTickLabel(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`.visx-axis-bottom text`);
   }
 
-  getBar(tileIndex = 0, workspaceClass) {
-    return this.getChartArea(tileIndex, workspaceClass).find(`.visx-bar`);
+  getBar(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`.visx-bar`);
   }
 
-  getLegendArea(tileIndex = 0, workspaceClass) {
-    return this.getTile(tileIndex, workspaceClass).find(`.bar-graph-legend`);
+  getLegendArea(workspaceClass, tileIndex = 0) {
+    return this.getTile(workspaceClass, tileIndex).find(`.bar-graph-legend`);
   }
 
-  getDatasetLabel(tileIndex = 0, workspaceClass) {
-    return this.getLegendArea(tileIndex, workspaceClass).find(`.dataset-header .dataset-name`);
+  getDatasetLabel(workspaceClass, tileIndex = 0) {
+    return this.getLegendArea(workspaceClass, tileIndex).find(`.dataset-header .dataset-name`);
   }
 
-  getDatasetUnlinkButton(tileIndex = 0, workspaceClass) {
-    return this.getLegendArea(tileIndex, workspaceClass).find(`.dataset-header .dataset-icon a`);
+  getDatasetUnlinkButton(workspaceClass, tileIndex = 0) {
+    return this.getLegendArea(workspaceClass, tileIndex).find(`.dataset-header .dataset-icon a`);
   }
 
-  getSortByMenuButton(tileIndex = 0, workspaceClass) {
-    return this.getLegendArea(tileIndex, workspaceClass).find(`.sort-by button.chakra-menu__menu-button`);
+  getSortByMenuButton(workspaceClass, tileIndex = 0) {
+    return this.getLegendArea(workspaceClass, tileIndex).find(`.sort-by button.chakra-menu__menu-button`);
   }
 
-  getSecondaryValueName(tileIndex = 0, workspaceClass) {
-    return this.getLegendArea(tileIndex, workspaceClass).find(`.secondary-values .secondary-value-name`);
+  getSecondaryValueName(workspaceClass, tileIndex = 0) {
+    return this.getLegendArea(workspaceClass, tileIndex).find(`.secondary-values .secondary-value-name`);
   }
 
 }

cypress/support/elements/tile/TableToolTile.js

@@ -4,10 +4,10 @@ function wsclass(workspaceClass) {
 
 class TableToolTile{
     getTableTile(workspaceClass) {
-        return cy.get(`${wsclass(workspaceClass)} .canvas-area .table-tool`);
+        return cy.get(`${wsclass(workspaceClass)} .canvas .table-tool`);
     }
     getTableTitle(workspaceClass){
-      return cy.get(`${wsclass(workspaceClass)} .canvas-area .table-title`);
+      return cy.get(`${wsclass(workspaceClass)} .canvas .table-title`);
     }
     getAddColumnButton(){
       return cy.get('.add-column-button');
@@ -39,7 +39,7 @@ class TableToolTile{
       this.getRemoveRowButton().click();
     }
     getTableRow(){
-      return cy.get('.canvas-area .rdg-row');
+      return cy.get('.canvas .rdg-row');
     }
     getColumnHeaderText(i){
       return cy.get('.column-header-cell .editable-header-cell .header-name').text();
@@ -89,7 +89,7 @@ class TableToolTile{
         this.getTableCell().eq(cell).type(num+'{enter}');
     }
     getTableIndexColumnCell(){
-        return cy.get('.canvas-area .rdg-cell.index-column');
+        return this.getTableTile().find('.rdg-cell.index-column');
     }
     // Fill in a table tile with the given data (a list of lists)
     // Table tile should in the default state (2 columns, no rows)

src/components/doc-editor/doc-editor-app.tsx

@@ -228,13 +228,13 @@ export const DocEditorApp = observer(function DocEditorApp() {
           { showLocalReadOnly &&
             <>
               <div className="readonly-header">Read Only Local</div>
-              <ReadonlyCanvas document={document}/>
+              <ReadonlyCanvas document={document} className="read-only-local-workspace"/>
             </>
           }
           { showRemoteReadOnly &&
             <>
               <div className="readonly-header">Read Only Remote (emulated)</div>
-              <ReadonlyCanvas document={remoteDocument}/>
+              <ReadonlyCanvas document={remoteDocument} className="read-only-remote-workspace"/>
             </>
           }
         </div>
@@ -243,7 +243,7 @@ export const DocEditorApp = observer(function DocEditorApp() {
   );
 });
 
-const ReadonlyCanvas = ({document}:{document: DocumentModelType}) => {
+const ReadonlyCanvas = ({document, className}:{document: DocumentModelType, className: string}) => {
   const readOnlyScale = 0.5;
   const scaledStyle = {
     position: "absolute",
@@ -254,7 +254,7 @@ const ReadonlyCanvas = ({document}:{document: DocumentModelType}) => {
   } as const;
 
   return (
-    <div className="canvas-container">
+    <div className={`canvas-container ${className}`}>
       <div className="canvas-scaler" style={scaledStyle} >
         <CanvasComponent
           document={document}

src/lib/logger-types.ts

@@ -32,6 +32,7 @@ export enum LogEventName {
   HIDE_SOLUTIONS,
   SHOW_SOLUTIONS,
 
+  BARGRAPH_TOOL_CHANGE,
   GEOMETRY_TOOL_CHANGE,
   DRAWING_TOOL_CHANGE,
   TABLE_TOOL_CHANGE,

src/plugins/bar-graph/bar-graph-content.test.ts

@@ -26,10 +26,21 @@ function sharedSampleDataSet() {
   return SharedDataSet.create({ dataSet: sampleDataSet });
 }
 
-const TestableBarGraphContentModel = BarGraphContentModel
+// This is a testable version of the BarGraphContentModel that doesn't rely on the shared model manager
+// It just lets you set a SharedModel and returns that.
+const TestingBarGraphContentModel = BarGraphContentModel
+  .volatile(() => ({
+    storedSharedModel: undefined as SharedDataSetType | undefined
+  }))
   .actions(self => ({
-    setDataSet(ds: SharedDataSetType) {
-      self.dataSet = ds;
+    setSharedModel(sharedModel: SharedDataSetType) {
+      self.storedSharedModel = sharedModel;
+      self.updateAfterSharedModelChanges(sharedModel);
+    }
+  }))
+  .views(self => ({
+    get sharedModel() {
+      return self.storedSharedModel;
     }
   }));
 
@@ -44,6 +55,7 @@ describe("Bar Graph Content", () => {
     expect(content.yAxisLabel).toBe("Counts");
     expect(getSnapshot(content)).toMatchInlineSnapshot(`
 Object {
+  "dataSetId": undefined,
   "primaryAttribute": undefined,
   "secondaryAttribute": undefined,
   "type": "BarGraph",
@@ -78,20 +90,21 @@ Object {
   });
 
   it("returns empty data array when there are no cases", () => {
-    const content = TestableBarGraphContentModel.create({ });
-    content.setDataSet(sharedEmptyDataSet());
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedEmptyDataSet());
     expect(content.dataArray).toEqual([]);
   });
 
   it("returns empty data array when there is no primary attribute", () => {
-    const content = TestableBarGraphContentModel.create({ });
-    content.setDataSet(sharedSampleDataSet());
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedSampleDataSet());
+    content.setPrimaryAttribute(undefined);
     expect(content.dataArray).toEqual([]);
   });
 
   it("returns expected data array with primary attribute", () => {
-    const content = TestableBarGraphContentModel.create({ });
-    content.setDataSet(sharedSampleDataSet());
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedSampleDataSet());
     content.setPrimaryAttribute("att-s");
     expect(content.dataArray).toEqual([
       { "att-s": "cat", "value": 2 },
@@ -105,9 +118,18 @@ Object {
     ]);
   });
 
+  it("sets first dataset attribute as the primary attribute by default", () => {
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedSampleDataSet());
+    expect(content.dataArray).toEqual([
+      { "att-s": "cat", "value": 2 },
+      { "att-s": "owl","value": 2}
+    ]);
+  });
+
   it("returns expected data array with primary and secondary attributes", () => {
-    const content = TestableBarGraphContentModel.create({ });
-    content.setDataSet(sharedSampleDataSet());
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedSampleDataSet());
     content.setPrimaryAttribute("att-s");
     content.setSecondaryAttribute("att-l");
     expect(content.dataArray).toEqual([
@@ -117,10 +139,10 @@ Object {
   });
 
   it("fills in missing values with (no value)", () => {
-    const content = TestableBarGraphContentModel.create({ });
+    const content = TestingBarGraphContentModel.create({ });
     const dataSet = sharedSampleDataSet();
     dataSet.dataSet?.attributes[1].setValue(3, undefined); // hide forest owl's location
-    content.setDataSet(dataSet);
+    content.setSharedModel(dataSet);
     content.setPrimaryAttribute("att-s");
     content.setSecondaryAttribute("att-l");
     expect(content.dataArray).toEqual([
@@ -138,23 +160,23 @@ Object {
   });
 
   it("extracts primary keys", () => {
-    const content = TestableBarGraphContentModel.create({ });
-    content.setDataSet(sharedSampleDataSet());
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedSampleDataSet());
     content.setPrimaryAttribute("att-s");
     expect(content.primaryKeys).toEqual(["cat", "owl"]);
   });
 
   it("extracts secondary keys", () => {
-    const content = TestableBarGraphContentModel.create({ });
-    content.setDataSet(sharedSampleDataSet());
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedSampleDataSet());
     content.setPrimaryAttribute("att-s");
     content.setSecondaryAttribute("att-l");
     expect(content.secondaryKeys).toEqual(["yard", "forest"]);
   });
 
   it("calculates the maximum data value", () => {
-    const content = TestableBarGraphContentModel.create({ });
-    content.setDataSet(sharedSampleDataSet());
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedSampleDataSet());
     content.setPrimaryAttribute("att-s");
     expect(content.maxDataValue).toBe(2);