Merge branch 'dataflow' into dataflow-production

cypress/integration/dataflow/branch/canvas_test_spec.js

@@ -28,7 +28,7 @@ before(()=>{
 })
 
 context('canvas test',()=>{
-    var buttons = ['Sensor','Number','Generator', 'Timer', 'Math','Logic','Transform','Relay', 'Data Storage'];
+    var buttons = ['Sensor','Number','Generator','Timer','Math','Logic','Transform','Relay','Light Bulb','Data Storage'];
     const numButtons = buttons.length;
 
     describe('canvas ui',()=>{

cypress/integration/dataflow/branch/sensor_block_spec.js

@@ -45,17 +45,16 @@ context('Sensor block tests',()=>{
             dfblock.getInputNodesNum(testBlock).should('not.exist');
         })
         it('verify changing sensor type changes the hub list selection',()=>{
-            var sensorTypes=['Humidity','Temperature','Particulates'];
+            var sensorTypes = ['Humidity','Temperature','Particulates'];
 
             cy.wrap(sensorTypes).each((sensor, index, sensorList)=>{
                 dfblock.selectSensorType(sensor);
                 cy.wait(10000)
                 dfblock.openHubSensorComboListDropdown();
-                dfblock.getHubSensorComboOptionList().each(($option, index, $optionList)=>{
-                    if(($optionList.length<2)) {
-                        expect($option).to.contain('None Available');
-                    }
-                    else {
+                dfblock.getHubSensorComboOptionList().each(($option, index, $optionList) => {
+                    if (index === 0) {
+                        expect($option).to.contain(sensor + " Demo Data");
+                    } else {
                         expect($option).to.contain(sensor.toLowerCase());
                     }
                 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concord-consortium/dataflow",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "description": "A digital tool for experimental control and data acquisition using Internet-of-Things sensors.",
   "main": "index.js",
   "config": {
@@ -79,109 +79,108 @@
   },
   "homepage": "https://github.com/concord-consortium/collaborative-learning#readme",
   "devDependencies": {
-    "@cypress/webpack-preprocessor": "^4.1.1",
-    "@firebase/app-types": "^0.5.1",
-    "@types/chart.js": "^2.9.7",
-    "@types/classnames": "^2.2.9",
-    "@types/enzyme": "^3.10.5",
+    "@cypress/webpack-preprocessor": "^4.1.5",
+    "@firebase/app-types": "^0.5.3",
+    "@types/chart.js": "^2.9.34",
+    "@types/enzyme": "^3.10.9",
     "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/file-saver": "^2.0.1",
-    "@types/is-hotkey": "^0.1.1",
-    "@types/jest": "^25.1.2",
-    "@types/jsonwebtoken": "^8.3.7",
-    "@types/lodash": "^4.14.149",
+    "@types/file-saver": "^2.0.2",
+    "@types/is-hotkey": "^0.1.2",
+    "@types/jest": "^25.2.3",
+    "@types/jsonwebtoken": "^8.5.3",
+    "@types/lodash": "^4.14.170",
     "@types/nanoid": "^2.0.0",
     "@types/nock": "^10.0.3",
-    "@types/node": "^12.7.5",
+    "@types/node": "^12.20.15",
     "@types/query-string": "^6.3.0",
-    "@types/react": "^16.9.19",
-    "@types/react-dom": "^16.9.5",
-    "@types/slate": "^0.47.5",
-    "@types/slate-html-serializer": "^0.6.3",
+    "@types/react": "^16.14.10",
+    "@types/react-dom": "^16.9.13",
+    "@types/slate": "^0.47.9",
+    "@types/slate-html-serializer": "^0.6.5",
     "@types/slate-plain-serializer": "^0.6.1",
     "@types/slate-react": "^0.22.9",
-    "@types/superagent": "^4.1.6",
-    "@types/uuid": "^3.4.7",
-    "autoprefixer": "^9.7.4",
-    "copy-webpack-plugin": "^5.1.1",
-    "cross-env": "^7.0.0",
-    "css-loader": "^3.4.2",
+    "@types/superagent": "^4.1.12",
+    "@types/uuid": "^3.4.10",
+    "autoprefixer": "^9.8.6",
+    "copy-webpack-plugin": "^5.1.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^3.6.0",
     "cypress": "^3.8.3",
-    "cypress-commands": "^1.0.0",
+    "cypress-commands": "^1.1.0",
     "cypress-file-upload": "^3.5.3",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "file-loader": "^5.0.2",
-    "firebase-admin": "^8.9.2",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "file-loader": "^5.1.0",
+    "firebase-admin": "^8.13.0",
     "fork-ts-checker-webpack-plugin": "^3.1.1",
     "html-webpack-plugin": "^3.2.0",
-    "is-hotkey": "^0.1.6",
-    "jest": "^25.1.0",
+    "is-hotkey": "^0.1.8",
+    "jest": "^25.5.4",
     "mini-css-extract-plugin": "^0.9.0",
     "nock": "^10.0.6",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^3.0.0",
     "prompt-confirm": "^2.0.4",
     "rimraf": "^3.0.2",
     "sass-loader": "^8.0.2",
     "script-loader": "^0.7.2",
-    "style-loader": "^1.1.3",
-    "ts-jest": "^25.2.0",
-    "ts-loader": "^6.2.1",
-    "ts-node": "^8.6.2",
+    "style-loader": "^1.3.0",
+    "ts-jest": "^25.5.1",
+    "ts-loader": "^6.2.2",
+    "ts-node": "^8.10.2",
     "tslint": "^5.20.1",
     "tslint-loader": "^3.6.0",
     "tslint-react": "^4.2.0",
-    "typescript": "^3.7.5",
+    "typescript": "^3.9.10",
     "url-loader": "^3.0.0",
-    "wait-on": "^4.0.0",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.3",
+    "wait-on": "^4.0.2",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.2",
     "xhr-mock": "^2.5.1"
   },
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "^22.1.1",
     "@ag-grid-community/core": "^22.1.1",
     "@ag-grid-community/react": "^22.1.2",
-    "@blueprintjs/core": "^3.23.1",
+    "@blueprintjs/core": "^3.46.0",
     "@concord-consortium/jsxgraph": "^0.99.8-cc.1",
     "@concord-consortium/react-components": "^0.1.14",
-    "aws-sdk": "^2.528.0",
-    "chart.js": "^2.9.3",
-    "classnames": "^2.2.6",
+    "aws-sdk": "^2.940.0",
+    "chart.js": "^2.9.4",
+    "classnames": "^2.3.1",
     "expr-eval": "^2.0.2",
-    "file-saver": "^2.0.2",
+    "file-saver": "^2.0.5",
     "firebase": "^7.8.0",
     "immutable": "^3.8.2",
-    "initials": "^3.0.1",
+    "initials": "^3.1.1",
     "jsonwebtoken": "^8.5.0",
-    "lodash": "^4.17.15",
-    "mobx": "^5.15.4",
-    "mobx-react": "^6.1.7",
-    "mobx-state-tree": "^3.15.0",
+    "lodash": "^4.17.21",
+    "mobx": "^5.15.7",
+    "mobx-react": "^6.3.1",
+    "mobx-state-tree": "^3.17.3",
     "mqtt": "^2.18.8",
     "nanoid": "^2.1.11",
-    "query-string": "^6.10.1",
-    "react": "^16.12.0",
-    "react-chartjs-2": "^2.7.6",
-    "react-dom": "^16.12.0",
+    "query-string": "^6.14.1",
+    "react": "^16.14.0",
+    "react-chartjs-2": "^2.11.2",
+    "react-dom": "^16.14.0",
     "react-dom-factories": "^1.0.2",
     "react-sizeme": "^2.6.12",
-    "rete": "^1.4.3-rc.1",
+    "rete": "^1.4.4",
     "rete-area-plugin": "^0.2.1",
     "rete-connection-plugin": "^0.9.0",
-    "rete-react-render-plugin": "^0.2.0",
-    "rollbar": "^2.14.4",
+    "rete-react-render-plugin": "^0.2.1",
+    "rollbar": "^2.24.0",
     "slate": "^0.47.9",
-    "slate-html-serializer": "^0.8.11",
-    "slate-md-serializer": "^5.4.4",
-    "slate-plain-serializer": "^0.7.11",
+    "slate-html-serializer": "^0.8.13",
+    "slate-md-serializer": "^5.5.4",
+    "slate-plain-serializer": "^0.7.13",
     "slate-react": "^0.22.10",
-    "superagent": "^5.2.1",
-    "ts-polyfill": "^3.7.5",
+    "superagent": "^5.3.1",
+    "ts-polyfill": "^3.8.2",
     "uuid": "^3.4.0",
-    "whatwg-fetch": "^3.0.0"
+    "whatwg-fetch": "^3.6.2"
   }
 }

src/components/document/document-workspace.tsx

@@ -43,6 +43,9 @@ export class DocumentWorkspaceComponent extends BaseComponent<IProps, {}> {
 
   public componentDidMount() {
     this.guaranteeInitialDocuments();
+    if (this.stores.appMode !== "qa") {
+      this.stores.ui.welcome();
+    }
   }
 
   public render() {

src/components/document/document.tsx

@@ -62,14 +62,14 @@ const DownloadButton = ({ onClick }: { onClick: SVGClickHandler }) => {
 const PublishButton = ({ onClick, dataTestName }: { onClick: () => void, dataTestName?: string }) => {
   return (
     <IconButton icon="publish" key="publish" className="action icon-publish" dataTestName={dataTestName}
-                onClickButton={onClick} title="Publish Workspace" />
+                onClickButton={onClick} title="Publish Program" />
   );
 };
 
 const PublishedButton = ({ onClick, dataTestName }: { onClick: () => void, dataTestName?: string }) => {
   return (
     <IconButton icon="published" key="published" className="action icon-published" dataTestName={dataTestName}
-                onClickButton={onClick} title="Published Workspace" />
+                onClickButton={onClick} title="Published Program" />
   );
 };
 
@@ -83,21 +83,21 @@ const PublishSupportButton = ({ onClick }: { onClick: () => void }) => {
 const NewButton = ({ onClick }: { onClick: () => void }) => {
   return (
     <IconButton icon="new" key="new" className="action icon-new"
-                onClickButton={onClick} title="Create New Workspace" />
+                onClickButton={onClick} title="Create New Program" />
   );
 };
 
 const EditButton = ({ onClick }: { onClick: () => void }) => {
   return (
     <IconButton icon="edit" key="edit" className="action icon-edit"
-                onClickButton={onClick} title="Rename Workspace" />
+                onClickButton={onClick} title="Rename Program" />
   );
 };
 
 const CopyButton = ({ onClick }: { onClick: () => void }) => {
   return (
     <IconButton icon="copy" key="copy" className="action icon-copy"
-                onClickButton={onClick} title="Copy Workspace" />
+                onClickButton={onClick} title="Copy Program" />
   );
 };
 
@@ -124,7 +124,7 @@ const DeleteButton = ({ onClick, enabled }: { onClick: () => void, enabled: bool
     return (
       <IconButton icon="delete" key={`delete-${enabledClass}`} className={`action icon-delete delete-${enabledClass}`}
                   enabled={enabled} innerClassName={enabledClass}
-                  onClickButton={enabled ? onClick : undefined} title="Delete Workspace" />
+                  onClickButton={enabled ? onClick : undefined} title="Delete Program" />
     );
 };
 

src/components/navigation/right-nav.sass

@@ -29,6 +29,7 @@ $list-item-scale: 0.11
       box-shadow: -$half-border-width $half-border-width 0 0 rgba(0,0,0,0.20)
       margin-top: $half-margin
       padding: 0 $padding
+      cursor: pointer
 
       &.active
         background: $color5-selected
@@ -155,6 +156,7 @@ $list-item-scale: 0.11
             border: 1px solid #aaa
             width: $list-item-width * $list-item-scale
             height: $list-item-height * $list-item-scale
+            cursor: pointer
 
             .scaled-list-item
               transform: scale($list-item-scale)

src/components/tools/geometry-tool/geometry-tool.tsx

@@ -106,7 +106,6 @@ export default class GeometryToolComponent extends BaseComponent<IGeometryProps,
             return (
               <div className="geometry-size-me">
                 <GeometryContentComponent
-                  size={size}
                   onSetBoard={this.handleSetBoard}
                   onSetActionHandlers={this.handleSetActionHandlers}
                   onUpdateToolbar={this.handleUpdateToolbar}

src/components/utilities/dialog.sass

@@ -38,6 +38,9 @@
       padding: $double-padding
 
       .dialog-text
+        .welcome
+          margin: 0 0 10px 0
+          font-size: 16px
       .dialog-input
         margin: $margin 0
 
@@ -49,3 +52,4 @@
         button
           padding: $half-padding $padding
           margin: $margin $half-margin 0 0
+          cursor: pointer

src/components/utilities/dialog.tsx

@@ -53,6 +53,10 @@ export class DialogComponent extends BaseComponent<IProps, IState> {
           title = title || "Prompt";
           contents = this.renderPromptContents(dialog);
           break;
+        case "welcome":
+          title = title || "Welcome to Dataflow";
+          contents = this.renderWelcomeContents(dialog);
+          break;
         default:
         case "alert":
           title = title || "Alert";
@@ -75,6 +79,33 @@ export class DialogComponent extends BaseComponent<IProps, IState> {
     }
   }
 
+  private renderWelcomeContents(dialog: UIDialogModelType) {
+    const welcome1 = "This is a limited version of Dataflow for demonstration purposes.";
+    const welcome2 = "Dataflow allows you to collect data from real-world sensors and create programs to process and store that data. You can also write programs to control real-world devices, such as relays.";
+    const welcome3 = "Dataflow programs create a \"flow\" of data by connecting \"blocks\" to one another. You can add blocks to your program from the toolbar at the left. Use Sensor blocks to connect to real sensors, and Math blocks to process the incoming data. To connect blocks, click and drag from the connection pins on each block.";
+    const welcome4 = "This limited demo version does not connect to real sensors or relays. To test out Dataflow programming, try using a Generator block as a source of data and a Light Bulb block as an output.";
+    const welcome5 = "Dataflow is designed to be used in science classrooms. Programs and datasets are saved in the \"My Work\" tab at the right and can be shared with the whole class (and will appear in the \"Shared Work\" tab).";
+    const welcome6 = "Read more about Dataflow and the InSPECT project ";
+    return (
+      <div className="dialog-contents">
+        <div className="dialog-text">
+          <div className="welcome">{welcome1}</div>
+          <div className="welcome">{welcome2}</div>
+          <div className="welcome">{welcome3}</div>
+          <div className="welcome">{welcome4}</div>
+          <div className="welcome">{welcome5}</div>
+          <div className="welcome">
+            {welcome6}
+            <a href="https://concord.org/our-work/research-projects/inspect/" target="_blank">here</a>.
+          </div>
+        </div>
+        <div className="dialog-buttons" data-test="dialog-buttons">
+          <button id="okButton" onClick={this.handleCancelDialog}>Ok</button>
+        </div>
+      </div>
+    );
+  }
+
   private renderAlertContents(dialog: UIDialogModelType) {
     return (
       <div className="dialog-contents">

src/dataflow/components/dataflow-program-graph.sass

@@ -72,6 +72,7 @@
     border: 0
     outline: 0
     border-radius: 3px
+    cursor: pointer
     &.program
       position: absolute
       width: 128px

src/dataflow/components/dataflow-program-toolbar.sass

@@ -13,6 +13,7 @@ $button-math: $math-green
 $button-logic: $logic-green
 $button-transform: $transform-green
 $button-relay: $relay-orange
+$button-light-bulb: $light-bulb-orange
 $button-data-storage: $data-storage-orange
 
 $button-hover: $gray-light-hover
@@ -37,6 +38,7 @@ $button-label-text: $gray-text
     background-color: $toolbar-background
     border: 0
     outline: 0
+    cursor: pointer
     &:hover:not([disabled])
       background-color: $button-hover
     &:active:not([disabled])
@@ -82,6 +84,8 @@ $button-label-text: $gray-text
         background-color: $button-transform
       &.relay
         background-color: $button-relay
+      &.light-bulb
+        background-color: $button-data-storage
       &.data-storage
         background-color: $button-data-storage