Merge pull request #2398 from concord-consortium/188127118-bar-graph-…

…link

bar graph link

cypress/e2e/functional/tile_tests/xy_plot_tool_spec.js

@@ -19,27 +19,6 @@ const queryParamsPlotVariables = `${Cypress.config("qaNoGroupShareUnitStudent5")
 
 const problemDoc = '1.1 Unit Toolbar Configuration';
 
-// Construct and fill in a table tile with the given data (a list of lists)
-function buildTable(data) {
-  // at least two cols, or as many as the longest row in the data array
-  const cols = Math.max(2, ...data.map(row => row.length));
-  clueCanvas.addTile('table');
-  tableToolTile.getTableTile().last().should('be.visible');
-  tableToolTile.getTableTile().last().within((tile) => {
-    // tile will start with two columns; make more if desired
-    for (let i=2; i<cols; i++) {
-      tile.getAddColumnButton().click();
-    }
-    for (let i=0; i<data.length; i++) {
-      for (let j=0; j<data[i].length; j++) {
-        const cellContent = data[i][j];
-        tableToolTile.typeInTableCellXY(i, j, cellContent);
-        tableToolTile.getTableCellXY(i, j).should('contain', cellContent);
-      }
-    }
-  });
-}
-
 // Parse `transform` attributes (used for point positioning)
 function xAttributeOfTransform(matcher) {
   return attributeOfTransform(matcher, 1);
@@ -256,7 +235,8 @@ context('XYPlot Tool Tile', function () {
       beforeTest(queryParamsMultiDataset);
       cy.collapseResourceTabs();
 
-      buildTable([[1, 2], [2, 4], [3, 9], [4, 16]]);
+      clueCanvas.addTile("table");
+      tableToolTile.fillTable(tableToolTile.getTableTile(), [[1, 2], [2, 4], [3, 9], [4, 16]]);
 
       clueCanvas.addTile("graph");
       xyTile.getTile().should("have.length", 1).should('be.visible');
@@ -432,8 +412,10 @@ context('XYPlot Tool Tile', function () {
       clueCanvas.addTile("graph");
       xyTile.getTile().should('be.visible');
 
-      buildTable([[1, 2], [2, 4], [3, 9]]);
-      buildTable([[1, 1], [2, 5], [3, 1], [4, 5]]);
+      clueCanvas.addTile("table");
+      tableToolTile.fillTable(tableToolTile.getTableTile().last(), [[1, 2], [2, 4], [3, 9]]);
+      clueCanvas.addTile("table");
+      tableToolTile.fillTable(tableToolTile.getTableTile().last(), [[1, 1], [2, 5], [3, 1], [4, 5]]);
 
       tableToolTile.getTableTile().should('have.length', 2);
 

cypress/support/elements/common/cCanvas.js

@@ -11,6 +11,7 @@ import ExpressionToolTile from '../tile/ExpressionToolTile';
 import Canvas from './Canvas';
 import Dialog from './Dialog';
 import XYPlotToolTile from '../tile/XYPlotToolTile';
+import BarGraphTile from '../tile/BarGraphTile';
 
 let graphToolTile = new GeometryToolTile,
     imageToolTile = new ImageToolTile,
@@ -23,6 +24,7 @@ let graphToolTile = new GeometryToolTile,
     numberlineToolTile = new NumberlineToolTile,
     expressionToolTile = new ExpressionToolTile,
     xyPlotToolTile = new XYPlotToolTile,
+    barGraphTile = new BarGraphTile,
     canvas = new Canvas,
     dialog = new Dialog;
 
@@ -295,6 +297,9 @@ class ClueCanvas {
             case 'xyplot':
                 tileElement = xyPlotToolTile.getTile().last().click({ force: true });
                 break;
+            case 'bargraph':
+                tileElement = barGraphTile.getTile().last().click({ force: true });
+                break;
         }
         tileElement.should('have.class','selected');
     }

cypress/support/elements/tile/BarGraphTile.js

@@ -1,39 +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`);
   }
 
-  getYAxisLabel(tileIndex = 0, workspaceClass) {
-    return this.getTile(tileIndex, workspaceClass).find(`.editable-axis-label`);
+  getTileContent(workspaceClass, tileIndex = 0) {
+    return this.getTile(workspaceClass, tileIndex).find(`[data-testid="bar-graph-content"]`);
   }
 
-  getYAxisLabelButton(tileIndex = 0, workspaceClass) {
-    return this.getTile(tileIndex, workspaceClass).find(`[data-testid="axis-label-button"]`);
+  getChakraMenuItem(workspaceClass, tileIndex = 0) {
+    return cy.get(`body .chakra-portal button`).filter(':visible');
   }
 
-  getYAxisLabelEditor(tileIndex = 0, workspaceClass) {
-    return this.getTile(tileIndex, workspaceClass).find(`[data-testid="axis-label-editor"] input`);
+  getChartArea(workspaceClass, tileIndex = 0) {
+    return this.getTile(workspaceClass, tileIndex).find(`svg.bar-graph-svg`);
   }
 
-  getXAxisPulldown(tileIndex = 0, workspaceClass) {
-    return this.getTile(tileIndex, workspaceClass).find(`[data-testid="category-pulldown"]`);
+  getYAxisLabel(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`.editable-axis-label`);
   }
 
-  getXAxisPulldownButton(tileIndex = 0, workspaceClass) {
-    return this.getXAxisPulldown(tileIndex, workspaceClass).find(`button`);
+  getYAxisLabelButton(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`[data-testid="axis-label-button"]`);
   }
 
-  getXAxisPulldownMenuItem(tileIndex = 0, workspaceClass) {
-    return cy.get(`body .chakra-portal button`).filter(':visible');
+  getYAxisLabelEditor(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`[data-testid="axis-label-editor"] input`);
+  }
+
+  getXAxisPulldown(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`[data-testid="category-pulldown"]`);
+  }
+
+  getXAxisPulldownButton(workspaceClass, tileIndex = 0) {
+    return this.getXAxisPulldown(workspaceClass, tileIndex).find(`button`);
+  }
+
+  getYAxisTickLabel(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`.visx-axis-left text`);
+  }
+
+  getXAxisTickLabel(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`.visx-axis-bottom text`);
+  }
+
+  getBar(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`.visx-bar`);
+  }
+
+  getLegendArea(workspaceClass, tileIndex = 0) {
+    return this.getTile(workspaceClass, tileIndex).find(`.bar-graph-legend`);
+  }
+
+  getDatasetLabel(workspaceClass, tileIndex = 0) {
+    return this.getLegendArea(workspaceClass, tileIndex).find(`.dataset-header .dataset-name`);
+  }
+
+  getDatasetUnlinkButton(workspaceClass, tileIndex = 0) {
+    return this.getLegendArea(workspaceClass, tileIndex).find(`.dataset-header .dataset-icon a`);
+  }
+
+  getSortByMenuButton(workspaceClass, tileIndex = 0) {
+    return this.getLegendArea(workspaceClass, tileIndex).find(`.sort-by button.chakra-menu__menu-button`);
+  }
+
+  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,8 +89,28 @@ 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)
+    fillTable($tile, data) {
+      // at least two cols, or as many as the longest row in the data array
+      const cols = Math.max(2, ...data.map(row => row.length));
+      $tile.within((tile) => {
+        // tile will start with two columns; make more if desired
+        for (let i=2; i<cols; i++) {
+          this.getAddColumnButton().click();
+        }
+        for (let i=0; i<data.length; i++) {
+          for (let j=0; j<data[i].length; j++) {
+            const cellContent = data[i][j];
+            this.typeInTableCellXY(i, j, cellContent);
+            this.getTableCellXY(i, j).should('contain', cellContent);
+          }
+        }
+      });
     }
+
     getLinkGraphButton(){
       return cy.get('.link-tile-button');
     }

docs/unit-configuration.md

@@ -120,6 +120,12 @@ Under 'dataset', there is one option:
 
 - `cellsSelectCases`: boolean
 
+#### Bar Graph
+
+Common toolbar framework.  One default button:
+
+- `link-tile`: bring up the linking dialog to connect/disconnect a dataset
+
 #### Data Deck
 
 Not updated to common toolbar framework. However, supports toolbar configuration in a similar manner. Default buttons:

src/clue/app-config.json

@@ -241,6 +241,11 @@
     "placeholderText": "",
     "stamps": [],
     "settings": {
+      "bargraph": {
+        "tools": [
+          "link-tile"
+        ]
+      },
       "dataset": {
         "cellsSelectCases": false
       },

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/hooks/use-provider-tile-linking.tsx

@@ -5,8 +5,9 @@ import { isGraphModel } from "../plugins/graph/models/graph-model";
 import { getSharedModelManager } from "../models/tiles/tile-environment";
 import { SharedModelType } from "../models/shared/shared-model";
 import { LogEventName } from "../lib/logger-types";
-
 import { logSharedModelDocEvent } from "../models/document/log-shared-model-document-event";
+import { getTileContentInfo } from "../models/tiles/tile-content-info";
+import { useAppConfig } from "./use-stores";
 
 interface IProps {
   actionHandlers?: any;
@@ -36,6 +37,7 @@ interface IProps {
 export const useProviderTileLinking = ({
   actionHandlers, model, readOnly, sharedModelTypes, allowMultipleGraphDatasets
 }: IProps) => {
+  const appConfig = useAppConfig();
   const {handleRequestTileLink, handleRequestTileUnlink} = actionHandlers || {};
   const sharedModelManager = getSharedModelManager(model);
   const sharedModels: SharedModelType[] = [];
@@ -55,10 +57,14 @@ export const useProviderTileLinking = ({
 
   const linkTile = useCallback((sharedModel: SharedModelType) => {
     if (!readOnly && sharedModelManager?.isReady) {
-      // TODO: this is temporary while we are working on getting Graph to work with multiple datasets
-      // Once multiple datasets are fully implemented, we should look at the "consumesMultipleDataSets"
-      // setting for the tile type; but for now graph has to allow multiples while not having that be the default.
-      if (!allowMultipleGraphDatasets && isGraphModel(model.content)) {
+      // Depending on the unit configuration, graphs sometimes allow multiple datasets and sometimes not.
+      // Other tiles register their ability to consume multiple datasets as part of their content info.
+      const allowsMultiple = isGraphModel(model.content)
+       ? allowMultipleGraphDatasets
+       : getTileContentInfo(model.content.type)?.consumesMultipleDataSets?.(appConfig);
+
+      if (!allowsMultiple) {
+        // Remove any existing shared models before adding the new one
         for (const shared of sharedModelManager.getTileSharedModels(model.content)) {
           sharedModelManager.removeTileSharedModel(model.content, shared);
         }
@@ -68,7 +74,7 @@ export const useProviderTileLinking = ({
       logSharedModelDocEvent(LogEventName.TILE_LINK, model, sharedTiles, sharedModel);
 
     }
-  }, [readOnly, sharedModelManager, model, allowMultipleGraphDatasets]);
+  }, [appConfig, readOnly, sharedModelManager, model, allowMultipleGraphDatasets]);
 
   const unlinkTile = useCallback((sharedModel: SharedModelType) => {
     if (!readOnly && sharedModelManager?.isReady) {

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,