diff --git a/bin/deploy_storyq b/bin/deploy_storyq
index 61878f6..d36e73c 100755
--- a/bin/deploy_storyq
+++ b/bin/deploy_storyq
@@ -1,4 +1,4 @@
 npm run build
-rm -rf storyq
-mv build storyq
-rsync -av storyq codap-server.concord.org:public_html
\ No newline at end of file
+rm -rf storyqV2
+mv build storyqV2
+rsync -av storyqV2 codap-server.concord.org:public_html
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a4ddb06..b615017 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1204,9 +1204,9 @@
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
     "@devexpress/utils": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@devexpress/utils/-/utils-1.3.3.tgz",
-      "integrity": "sha512-fQdPPq5snZtNhWVp/I75xE4VvHWC3ApQC19AuMnDuhKnHMKqkA4f5nSEkUatBcvt3bhbLw0Bki4KuKtDb65xTA==",
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@devexpress/utils/-/utils-1.3.10.tgz",
+      "integrity": "sha512-cq1bxLqbvhfoXDjLBZQAG7RBdxiVKhTxZnmY7hT4ZNPBMV7xESO0Q5xHH8rHaiPdXAxLJKciOtibaC7DxO86wA==",
       "requires": {
         "tslib": "2.0.1"
       },
@@ -1218,6 +1218,17 @@
         }
       }
     },
+    "@devextreme/vdom": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@devextreme/vdom/-/vdom-1.2.2.tgz",
+      "integrity": "sha512-e8WCJ9u/5cZ2onWzWwVFhRKjbO5EmQaZBNLwWrbZwpKKLHmXEwC5lOJtQ6onDXPAhDfZDX8jDin9G+DDX4SSbg==",
+      "requires": {
+        "inferno": "^7.4.6",
+        "inferno-compat": "^7.4.6",
+        "inferno-create-element": "^7.4.6",
+        "inferno-hydrate": "^7.4.6"
+      }
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -2944,14 +2955,6 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
-    "asn1": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
-      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
-      "requires": {
-        "safer-buffer": "~2.1.0"
-      }
-    },
     "asn1.js": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
@@ -2994,11 +2997,6 @@
         }
       }
     },
-    "assert-plus": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
-    },
     "assign-symbols": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
@@ -3061,16 +3059,6 @@
         "postcss-value-parser": "^4.1.0"
       }
     },
-    "aws-sign2": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
-    },
-    "aws4": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
-      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
-    },
     "axe-core": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.3.tgz",
@@ -3602,14 +3590,6 @@
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
     },
-    "bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "requires": {
-        "tweetnacl": "^0.14.3"
-      }
-    },
     "bfj": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
@@ -4022,11 +4002,6 @@
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz",
       "integrity": "sha512-/4YgnZS8y1UXXmC02xD5rRrBEu6T5ub+mQHLNRj0fzTRbgdBYhsNo2V5EqwgqrExjxsjtF/OpAKAMkKsxbD5XQ=="
     },
-    "caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
-    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -4208,14 +4183,6 @@
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
       "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="
     },
-    "combined-stream": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
-      "integrity": "sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==",
-      "requires": {
-        "delayed-stream": "~1.0.0"
-      }
-    },
     "commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -4836,19 +4803,6 @@
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
       "integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw=="
     },
-    "dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "requires": {
-        "assert-plus": "^1.0.0"
-      }
-    },
-    "dasherize": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dasherize/-/dasherize-2.0.0.tgz",
-      "integrity": "sha1-bYCcnNDPe7iVLYD8hPoT1H3bEwg="
-    },
     "data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -5079,21 +5033,21 @@
       }
     },
     "devexpress-diagram": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/devexpress-diagram/-/devexpress-diagram-2.0.11.tgz",
-      "integrity": "sha512-ZxLLBOQJuv54Keh4hcSK17YodOQ4PBvhgrAmqPiWI29winEa+Q6lFYwTakPpGa72FYAmFekwgtac8/WOS/x2ZQ==",
+      "version": "2.1.25",
+      "resolved": "https://registry.npmjs.org/devexpress-diagram/-/devexpress-diagram-2.1.25.tgz",
+      "integrity": "sha512-ZyWkstgtCXIvRX+LWqIBW8kdSPZP1Voq/GYLDuUbotf0uorsxKN5dUd21qgrV+zwyX+zfZrWGLcu5shLrkAc+Q==",
       "requires": {
-        "@devexpress/utils": "1.3",
+        "@devexpress/utils": "1.3.10",
         "es6-object-assign": "^1.1.0"
       }
     },
     "devexpress-gantt": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/devexpress-gantt/-/devexpress-gantt-2.0.18.tgz",
-      "integrity": "sha512-tmcZPd1V4NccrO4ei9zcMMuxGCdReEIrS0KVxyu9H4DMEIQyW4qLrffgyfoCbWoJcOZbGeSwfcq1i4b44YYzCw==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/devexpress-gantt/-/devexpress-gantt-3.0.4.tgz",
+      "integrity": "sha512-diAZ6t46Yj09FAceUowlHgv83QWt54/CihDGS3CHoV3BxrHFK0X2T1D40urc9S/tOAG4GXXD1YnLBaamN+op4A==",
       "requires": {
         "@devexpress/utils": "1.3.2",
-        "tslib": "2.0.1"
+        "tslib": "2.1.0"
       },
       "dependencies": {
         "@devexpress/utils": {
@@ -5102,34 +5056,46 @@
           "integrity": "sha512-Ii7hpz6ItNMLKz23qQOlHom/k0e1TSnIQKCwZlKuYBwpIEBX5I/PQxvAwbdBnu5EZZSkdjnhzxl6luhl/k4LdA==",
           "requires": {
             "tslib": "2.0.1"
+          },
+          "dependencies": {
+            "tslib": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+              "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+            }
           }
         },
         "tslib": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
-          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
         }
       }
     },
     "devextreme": {
-      "version": "20.2.5",
-      "resolved": "https://registry.npmjs.org/devextreme/-/devextreme-20.2.5.tgz",
-      "integrity": "sha512-KPMq/y+zlPu3JOxdaV0TvqA9AzDKqljpuuhetLc9k6IFRTRhMa2yWiHvePp/FZmfWhumIDIj1AEVedUySDlCUQ==",
-      "requires": {
-        "devexpress-diagram": "2.0.11",
-        "devexpress-gantt": "2.0.18",
-        "devextreme-quill": "~0.9.8",
+      "version": "21.1.5",
+      "resolved": "https://registry.npmjs.org/devextreme/-/devextreme-21.1.5.tgz",
+      "integrity": "sha512-/mauCqWs7ajOrWZ5nOSMyY+L3PThTAAGdKJiWcEzU2LuXxkDkcZyn/uSBU/WhGdcaneqifKKECkP+YYoXIWQTA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@devextreme/vdom": "1.2.2",
+        "devexpress-diagram": "2.1.25",
+        "devexpress-gantt": "3.0.4",
+        "devextreme-quill": "~1.3.0",
+        "inferno": "^7.4.6",
+        "inferno-compat": "^7.4.6",
+        "inferno-create-element": "^7.4.6",
+        "inferno-hydrate": "^7.4.6",
         "jszip": "^2.0.0 || ^3.0.0",
-        "preact": "^10.4.5",
         "rrule": "2.6.6",
-        "showdown": "^1.8.6",
-        "turndown": "^6.0.0"
+        "showdown": "^1.9.1",
+        "turndown": "~7.0.0"
       }
     },
     "devextreme-quill": {
-      "version": "0.9.8",
-      "resolved": "https://registry.npmjs.org/devextreme-quill/-/devextreme-quill-0.9.8.tgz",
-      "integrity": "sha512-acrAE+ukbRjoacC/r+bRNhCo/xTOxcnNhZ2KUtxoOuiaqPN9WEK4HCfcv44G9JIKPQCmZUFr6O/AYg1fgOYwrA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/devextreme-quill/-/devextreme-quill-1.3.1.tgz",
+      "integrity": "sha512-zhtbAogQnOOA9b/4ymJGB8C2FeirftLJ7QwliV6I7B0lW9HZBAw6YJ0Z+J8poy1IMtf84S5kvQR63e2VidUEpQ==",
       "requires": {
         "core-js": "^3.6.5",
         "eventemitter3": "^4.0.0",
@@ -5138,22 +5104,13 @@
         "lodash.merge": "^4.5.0",
         "parchment": "2.0.0-dev.2",
         "quill-delta": "4.2.2"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "3.9.1",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.9.1.tgz",
-          "integrity": "sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg=="
-        }
       }
     },
     "devextreme-react": {
-      "version": "20.2.5",
-      "resolved": "https://registry.npmjs.org/devextreme-react/-/devextreme-react-20.2.5.tgz",
-      "integrity": "sha512-exrMx2TjszwGOqNPByr0bKYKsqlYnoJwEjS45c4NYp5Bpe+0WZuMwW0RzWTBqGrJfiwbVfLCb8t+adHwKajAeA==",
+      "version": "21.1.5",
+      "resolved": "https://registry.npmjs.org/devextreme-react/-/devextreme-react-21.1.5.tgz",
+      "integrity": "sha512-wU4cBsFvkFv729AK2oeJske57F3qTASfGx14h7D+2G8r8lQw7meyQJ72HFJmlreEtkiD0WxrjOvt2DTdTkoKkw==",
       "requires": {
-        "dasherize": "^2.0.0",
-        "dot": "^1.1.2",
         "prop-types": "^15.6.1"
       }
     },
@@ -5281,6 +5238,11 @@
         }
       }
     },
+    "domino": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.6.tgz",
+      "integrity": "sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ=="
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -5290,11 +5252,6 @@
         "domelementtype": "1"
       }
     },
-    "dot": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dot/-/dot-1.1.3.tgz",
-      "integrity": "sha512-/nt74Rm+PcfnirXGEdhZleTwGC2LMnuKTeeTIlI82xb5loBBoXNYzr2ezCroPSMtilK8EZIfcNZwOcHN+ib1Lg=="
-    },
     "dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -5345,15 +5302,6 @@
         "stream-shift": "^1.0.0"
       }
     },
-    "ecc-jsbn": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "requires": {
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.1.0"
-      }
-    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6501,11 +6449,6 @@
         }
       }
     },
-    "extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
-    },
     "extend-shallow": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
@@ -6584,11 +6527,6 @@
         }
       }
     },
-    "extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
-    },
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
@@ -6807,11 +6745,6 @@
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
       "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
     },
-    "forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
-    },
     "fork-ts-checker-webpack-plugin": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz",
@@ -6928,16 +6861,6 @@
         }
       }
     },
-    "form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "requires": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
-        "mime-types": "^2.1.12"
-      }
-    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -7068,14 +6991,6 @@
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
       "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
     },
-    "getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "requires": {
-        "assert-plus": "^1.0.0"
-      }
-    },
     "glob": {
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
@@ -7158,20 +7073,6 @@
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
     },
-    "har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
-    },
-    "har-validator": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
-      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
-      "requires": {
-        "ajv": "^6.5.5",
-        "har-schema": "^2.0.0"
-      }
-    },
     "harmony-reflect": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
@@ -7612,16 +7513,6 @@
         }
       }
     },
-    "http-signature": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "requires": {
-        "assert-plus": "^1.0.0",
-        "jsprim": "^1.2.2",
-        "sshpk": "^1.7.0"
-      }
-    },
     "https-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
@@ -7766,6 +7657,78 @@
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
     },
+    "inferno": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/inferno/-/inferno-7.4.10.tgz",
+      "integrity": "sha512-L/qPVapN/b4WSrQND6fN0LOvhIeCVpGFQRbDplZvovOJoxRRZyE21k92tL/C76hQVFOp2FIgjZ7fjy9AnKPS+A==",
+      "requires": {
+        "inferno-shared": "7.4.10",
+        "inferno-vnode-flags": "7.4.10",
+        "opencollective-postinstall": "^2.0.3"
+      }
+    },
+    "inferno-clone-vnode": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/inferno-clone-vnode/-/inferno-clone-vnode-7.4.10.tgz",
+      "integrity": "sha512-mVNyOGInJj5mkvGXwL2KcqttJlhKPQkvejNvVOvuq4ozeeFDkPXk4jqgjl0YSRk2gnFtJR5u4J1yCUWDPXr6ng==",
+      "requires": {
+        "inferno": "7.4.10"
+      }
+    },
+    "inferno-compat": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/inferno-compat/-/inferno-compat-7.4.10.tgz",
+      "integrity": "sha512-Qm8EMCgi+/1ucqYUMDw/vINkrpY2jCt9rLnCNNBX215qfQkt3zGuu2i2v1CjSCZ0/QP+H/VBy3Q5VsQ20Ir2Ow==",
+      "requires": {
+        "inferno": "7.4.10",
+        "inferno-clone-vnode": "7.4.10",
+        "inferno-create-class": "7.4.10",
+        "inferno-create-element": "7.4.10",
+        "inferno-extras": "7.4.10"
+      }
+    },
+    "inferno-create-class": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/inferno-create-class/-/inferno-create-class-7.4.10.tgz",
+      "integrity": "sha512-ql6JCBo3hQ/leFwbU9eGFoa/D8gizvWb+fKwziqa/3x+qAbwpeOxIwwujDpdkO+LIm+hwpOtLKdDWxSlkk09hA==",
+      "requires": {
+        "inferno": "7.4.10"
+      }
+    },
+    "inferno-create-element": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/inferno-create-element/-/inferno-create-element-7.4.10.tgz",
+      "integrity": "sha512-Gvq0FHL7qHofYjItVkpsOJtr8f2Ok1kxftBedbQb1fCUpHIEwiUvJSh+HX83ZunVwE9tisoPc/ddQPYFJ+x72Q==",
+      "requires": {
+        "inferno": "7.4.10"
+      }
+    },
+    "inferno-extras": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/inferno-extras/-/inferno-extras-7.4.10.tgz",
+      "integrity": "sha512-fdXtG8XEo8HKC1VI11RJJS4cuPFIgVWQrah1ngiFjc9SPZKov1szreqC43L9qcJ/2k05hxLNE13t887pXBfCRA==",
+      "requires": {
+        "inferno": "7.4.10"
+      }
+    },
+    "inferno-hydrate": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/inferno-hydrate/-/inferno-hydrate-7.4.10.tgz",
+      "integrity": "sha512-bHJo7wd0ZKAmRlzoHqBjGhEgmOYFBh9LL58bIOeOXiuuyXJFUA6tP/vW91sx7j68K9Zq36SMwtbb/QnQ7R4mug==",
+      "requires": {
+        "inferno": "7.4.10"
+      }
+    },
+    "inferno-shared": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/inferno-shared/-/inferno-shared-7.4.10.tgz",
+      "integrity": "sha512-d7wlcW8NhchfX4vSg+6k9/FwFHAooo81GfWZtnDXtUvZNS4WEMaPH2j1YV6VnN4X3R0850dHRxR7830PdKh4Iw=="
+    },
+    "inferno-vnode-flags": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/inferno-vnode-flags/-/inferno-vnode-flags-7.4.10.tgz",
+      "integrity": "sha512-OzfnqXrJx8Rl3FtyjhdFk7gzuCLMPCbDTiO8Bz0lw6P3ngW9Md5N5LPeg7Jz510PM0NisScQtxxHPwsFQxDIfw=="
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -8064,11 +8027,6 @@
         "isobject": "^3.0.1"
       }
     },
-    "is-potential-custom-element-name": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz",
-      "integrity": "sha1-DFLlS8yjkbssSUsh6GJtczbG45c="
-    },
     "is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -8147,11 +8105,6 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
-    "isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
-    },
     "istanbul-lib-coverage": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz",
@@ -9737,11 +9690,6 @@
         "esprima": "^4.0.0"
       }
     },
-    "jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
-    },
     "jsdom": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
@@ -9821,11 +9769,6 @@
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
-    "json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
-    },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -9836,11 +9779,6 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
     },
-    "json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
-    },
     "json3": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
@@ -9863,17 +9801,6 @@
         "universalify": "^2.0.0"
       }
     },
-    "jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "requires": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
-        "verror": "1.10.0"
-      }
-    },
     "jsx-ast-utils": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz",
@@ -10048,11 +9975,6 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
-    "lodash.sortby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
-    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -10117,9 +10039,9 @@
       }
     },
     "luxon": {
-      "version": "1.26.0",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.26.0.tgz",
-      "integrity": "sha512-+V5QIQ5f6CDXQpWNICELwjwuHdqeJM1UenlZWx5ujcRMc9venvluCjFb4t5NYLhb6IhkbMVOxzVuOqkgMxee2A==",
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
+      "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==",
       "optional": true
     },
     "magic-string": {
@@ -10418,6 +10340,24 @@
         "minimist": "^1.2.5"
       }
     },
+    "mobx": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.3.3.tgz",
+      "integrity": "sha512-JoNU50rO6d1wHwKPJqKq4rmUMbYnI9CsJmBo+Cu4exBYenFvIN77LWrZENpzW6reZPADtXMmB1DicbDSfy8Clw=="
+    },
+    "mobx-react": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.2.0.tgz",
+      "integrity": "sha512-KHUjZ3HBmZlNnPd1M82jcdVsQRDlfym38zJhZEs33VxyVQTvL77hODCArq6+C1P1k/6erEeo2R7rpE7ZeOL7dg==",
+      "requires": {
+        "mobx-react-lite": "^3.2.0"
+      }
+    },
+    "mobx-react-lite": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.2.1.tgz",
+      "integrity": "sha512-hwURgfmP2apX3HQrB55V9DN47kuN3C6KlQvI5UIfJRibXma72C/JudcNt2r9dWjAdFMrcZoz1ivvtXMCkJ2aQA=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10691,11 +10631,6 @@
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
       "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ=="
     },
-    "oauth-sign": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
-    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -10859,6 +10794,11 @@
         "is-wsl": "^2.1.1"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
@@ -12256,11 +12196,6 @@
         "uniq": "^1.0.1"
       }
     },
-    "preact": {
-      "version": "10.5.12",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.12.tgz",
-      "integrity": "sha512-r6siDkuD36oszwlCkcqDJCAKBQxGoeEGytw2DGMD5A/GGdu5Tymw+N2OBXwvOLxg6d1FeY8MgMV3cc5aVQo4Cg=="
-    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -12392,11 +12327,6 @@
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
     },
-    "psl": {
-      "version": "1.1.31",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.31.tgz",
-      "integrity": "sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw=="
-    },
     "public-encrypt": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
@@ -12457,11 +12387,6 @@
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
     },
-    "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
-    },
     "query-string": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
@@ -13363,13 +13288,6 @@
       "requires": {
         "luxon": "^1.21.3",
         "tslib": "^1.10.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
       }
     },
     "rsvp": {
@@ -13865,11 +13783,6 @@
             "locate-path": "^3.0.0"
           }
         },
-        "get-caller-file": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
-        },
         "locate-path": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -13879,14 +13792,6 @@
             "path-exists": "^3.0.0"
           }
         },
-        "p-limit": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
         "p-locate": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
@@ -13895,16 +13800,6 @@
             "p-limit": "^2.0.0"
           }
         },
-        "p-try": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-        },
-        "require-main-filename": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-        },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
@@ -13933,11 +13828,6 @@
             "strip-ansi": "^5.0.0"
           }
         },
-        "y18n": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
-          "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ=="
-        },
         "yargs": {
           "version": "14.2.3",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
@@ -13957,9 +13847,9 @@
           }
         },
         "yargs-parser": {
-          "version": "15.0.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-15.0.1.tgz",
-          "integrity": "sha512-0OAMV2mAZQrs3FkNpDQcBk1x5HXb8X4twADss4S0Iuk+2dGnLOE/fRHrsYm542GduMveyA77OF4wrNJuanRCWw==",
+          "version": "15.0.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-15.0.3.tgz",
+          "integrity": "sha512-/MVEVjTXy/cGAjdtQf8dW3V9b97bPN7rNn8ETj6BmAQL7ibC7O1Q9SPJbGjgh3SlwoBNXMzj/ZGIj8mBgl12YA==",
           "requires": {
             "camelcase": "^5.0.0",
             "decamelize": "^1.2.0"
@@ -14339,22 +14229,6 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
-    "sshpk": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
-      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
-      "requires": {
-        "asn1": "~0.2.3",
-        "assert-plus": "^1.0.0",
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.0.2",
-        "tweetnacl": "~0.14.0"
-      }
-    },
     "ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -14412,11 +14286,6 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
-    "stealthy-require": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="
-    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@@ -15088,290 +14957,14 @@
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
     },
-    "tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
     "turndown": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/turndown/-/turndown-6.0.0.tgz",
-      "integrity": "sha512-UVJBhSyRHCpNKtQ00mNWlYUM/i+tcipkb++F0PrOpt0L7EhNd0AX9mWEpL2dRFBu7LWXMp4HgAMA4OeKKnN7og==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/turndown/-/turndown-7.0.0.tgz",
+      "integrity": "sha512-G1FfxfR0mUNMeGjszLYl3kxtopC4O9DRRiMlMDDVHvU1jaBkGFg4qxIyjIk2aiKLHyDyZvZyu4qBO2guuYBy3Q==",
       "requires": {
-        "jsdom": "^16.2.0"
-      },
-      "dependencies": {
-        "abab": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
-          "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q=="
-        },
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
-        },
-        "acorn-globals": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
-          "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
-          "requires": {
-            "acorn": "^7.1.1",
-            "acorn-walk": "^7.1.1"
-          }
-        },
-        "acorn-walk": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
-        },
-        "browser-process-hrtime": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
-          "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
-        },
-        "cssom": {
-          "version": "0.4.4",
-          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
-          "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw=="
-        },
-        "cssstyle": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-          "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
-          "requires": {
-            "cssom": "~0.3.6"
-          },
-          "dependencies": {
-            "cssom": {
-              "version": "0.3.8",
-              "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-              "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
-            }
-          }
-        },
-        "data-urls": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
-          "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
-          "requires": {
-            "abab": "^2.0.3",
-            "whatwg-mimetype": "^2.3.0",
-            "whatwg-url": "^8.0.0"
-          }
-        },
-        "domexception": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
-          "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
-          "requires": {
-            "webidl-conversions": "^5.0.0"
-          },
-          "dependencies": {
-            "webidl-conversions": {
-              "version": "5.0.0",
-              "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
-              "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA=="
-            }
-          }
-        },
-        "escodegen": {
-          "version": "1.14.3",
-          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
-          "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
-          "requires": {
-            "esprima": "^4.0.1",
-            "estraverse": "^4.2.0",
-            "esutils": "^2.0.2",
-            "optionator": "^0.8.1",
-            "source-map": "~0.6.1"
-          }
-        },
-        "html-encoding-sniffer": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
-          "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
-          "requires": {
-            "whatwg-encoding": "^1.0.5"
-          }
-        },
-        "jsdom": {
-          "version": "16.4.0",
-          "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.4.0.tgz",
-          "integrity": "sha512-lYMm3wYdgPhrl7pDcRmvzPhhrGVBeVhPIqeHjzeiHN3DFmD1RBpbExbi8vU7BJdH8VAZYovR8DMt0PNNDM7k8w==",
-          "requires": {
-            "abab": "^2.0.3",
-            "acorn": "^7.1.1",
-            "acorn-globals": "^6.0.0",
-            "cssom": "^0.4.4",
-            "cssstyle": "^2.2.0",
-            "data-urls": "^2.0.0",
-            "decimal.js": "^10.2.0",
-            "domexception": "^2.0.1",
-            "escodegen": "^1.14.1",
-            "html-encoding-sniffer": "^2.0.1",
-            "is-potential-custom-element-name": "^1.0.0",
-            "nwsapi": "^2.2.0",
-            "parse5": "5.1.1",
-            "request": "^2.88.2",
-            "request-promise-native": "^1.0.8",
-            "saxes": "^5.0.0",
-            "symbol-tree": "^3.2.4",
-            "tough-cookie": "^3.0.1",
-            "w3c-hr-time": "^1.0.2",
-            "w3c-xmlserializer": "^2.0.0",
-            "webidl-conversions": "^6.1.0",
-            "whatwg-encoding": "^1.0.5",
-            "whatwg-mimetype": "^2.3.0",
-            "whatwg-url": "^8.0.0",
-            "ws": "^7.2.3",
-            "xml-name-validator": "^3.0.0"
-          }
-        },
-        "nwsapi": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
-          "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ=="
-        },
-        "parse5": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
-          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
-        },
-        "request": {
-          "version": "2.88.2",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-          "requires": {
-            "aws-sign2": "~0.7.0",
-            "aws4": "^1.8.0",
-            "caseless": "~0.12.0",
-            "combined-stream": "~1.0.6",
-            "extend": "~3.0.2",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.3.2",
-            "har-validator": "~5.1.3",
-            "http-signature": "~1.2.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.19",
-            "oauth-sign": "~0.9.0",
-            "performance-now": "^2.1.0",
-            "qs": "~6.5.2",
-            "safe-buffer": "^5.1.2",
-            "tough-cookie": "~2.5.0",
-            "tunnel-agent": "^0.6.0",
-            "uuid": "^3.3.2"
-          },
-          "dependencies": {
-            "tough-cookie": {
-              "version": "2.5.0",
-              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-              "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-              "requires": {
-                "psl": "^1.1.28",
-                "punycode": "^2.1.1"
-              }
-            }
-          }
-        },
-        "request-promise-core": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.4.tgz",
-          "integrity": "sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==",
-          "requires": {
-            "lodash": "^4.17.19"
-          }
-        },
-        "request-promise-native": {
-          "version": "1.0.9",
-          "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.9.tgz",
-          "integrity": "sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==",
-          "requires": {
-            "request-promise-core": "1.1.4",
-            "stealthy-require": "^1.1.1",
-            "tough-cookie": "^2.3.3"
-          },
-          "dependencies": {
-            "tough-cookie": {
-              "version": "2.5.0",
-              "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-              "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-              "requires": {
-                "psl": "^1.1.28",
-                "punycode": "^2.1.1"
-              }
-            }
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "optional": true
-        },
-        "symbol-tree": {
-          "version": "3.2.4",
-          "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-          "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
-        },
-        "tough-cookie": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
-          "integrity": "sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==",
-          "requires": {
-            "ip-regex": "^2.1.0",
-            "psl": "^1.1.28",
-            "punycode": "^2.1.1"
-          }
-        },
-        "tr46": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.0.2.tgz",
-          "integrity": "sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==",
-          "requires": {
-            "punycode": "^2.1.1"
-          }
-        },
-        "w3c-hr-time": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
-          "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
-          "requires": {
-            "browser-process-hrtime": "^1.0.0"
-          }
-        },
-        "webidl-conversions": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-          "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
-        },
-        "whatwg-url": {
-          "version": "8.4.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.4.0.tgz",
-          "integrity": "sha512-vwTUFf6V4zhcPkWp/4CQPr1TW9Ml6SF4lVyaIMBdJw5i6qUUJ1QWM4Z6YYVkfka0OUIzVo/0aNtGVGk256IKWw==",
-          "requires": {
-            "lodash.sortby": "^4.7.0",
-            "tr46": "^2.0.2",
-            "webidl-conversions": "^6.1.0"
-          }
-        },
-        "ws": {
-          "version": "7.5.5",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
-          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w=="
-        }
+        "domino": "^2.1.6"
       }
     },
-    "tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
-    },
     "type": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
@@ -15433,9 +15026,9 @@
       }
     },
     "typescript": {
-      "version": "3.3.3333",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.3333.tgz",
-      "integrity": "sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw=="
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.7.tgz",
+      "integrity": "sha512-MmQdgo/XenfZPvVLtKZOq9jQQvzaUAUpcKW8Z43x9B2fOm4S5g//tPtMweZUIP+SoBqrVPEIm+dJeQ9dfO0QdA=="
     },
     "unbox-primitive": {
       "version": "1.0.1",
@@ -15752,16 +15345,6 @@
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
       "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w=="
     },
-    "verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "requires": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      }
-    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
diff --git a/package.json b/package.json
index a0c9325..43bfe3f 100644
--- a/package.json
+++ b/package.json
@@ -11,14 +11,16 @@
     "@types/pluralize": "0.0.29",
     "@types/react": "16.8.6",
     "@types/react-dom": "16.8.2",
-    "devextreme": "20.2.5",
-    "devextreme-react": "20.2.5",
+    "devextreme": "21.1",
+    "devextreme-react": "21.1",
     "iframe-phone": "^1.3.1",
+    "mobx": "^6.3.3",
+    "mobx-react": "^7.2.0",
     "pluralize": "^8.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "4.0.3",
-    "typescript": "3.3.3333"
+    "typescript": "3.7.7"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/classification_manager.tsx b/src/classification_manager.tsx
deleted file mode 100755
index ac74277..0000000
--- a/src/classification_manager.tsx
+++ /dev/null
@@ -1,735 +0,0 @@
-/**
- * Classification manager allows the user to choose an existing model and use it to classify
- * phrases in a dataset.
- */
-
-import React, {Component} from 'react';
-import codapInterface, {CODAP_Notification} from "./lib/CodapInterface";
-import {
-	getCaseCount, getCollectionNames,
-	getDatasetInfoWithFilter, isAModel, isNotAModel, deselectAllCasesIn, entityInfo, scrollCaseTableToRight
-} from './lib/codap-helper';
-import {wordTokenizer} from "./lib/one_hot";
-import './storyq.css';
-import {LogitPrediction} from './lib/logit_prediction';
-import TextFeedbackManager, {TFMStorage} from "./text_feedback_manager";
-import Button from 'devextreme-react/button';
-import {SelectBox} from "devextreme-react/select-box";
-import {computeKappa} from "./utilities";
-
-// import tf from "@tensorflow/tfjs";
-
-export interface Classification_StorageCallbackFuncs {
-	createStorageCallback: () => any,
-	restoreStorageCallback: (iStorage: any) => void
-}
-
-export interface Classification_Props {
-	status: string,
-	setStorageCallbacks: (iCallbacks: Classification_StorageCallbackFuncs) => void
-}
-
-interface ClassificationStorage {
-	modelsDatasetName: string,
-	modelToplevelName: string,
-	modelCaseIndex: number,
-	modelCollectionName: string,
-	modelCategories: string[],
-	modelColumnFeatures: string[],
-	targetDatasetInfo: entityInfo,
-	targetDatasetName: string | null,
-	targetCollectionName: string,
-	targetAttributeName: string,
-	targetClassAttributeName: string,
-	status: string
-	textFeedbackManagerStorage: TFMStorage
-}
-
-interface ClassificationModel {
-	features: string[],
-	weights: number[],
-	caseIDs: number[],
-	usages: number[][],
-	labels: string[],
-	positiveLabel: string,
-	modelColumnFeatures: string[],
-	threshold: number,
-	constantWeightTerm: number,
-	predictor: any
-}
-
-const kFeatureIDsAttributeName = 'featureIDs';
-
-export class ClassificationManager extends Component<Classification_Props, {
-	status: string,
-	count: number
-}> {
-	[indexindex: string]: any;
-
-	private modelDatasetInfoArray: entityInfo[] = [];
-	private modelsDatasetName: string = '';
-	private modelToplevelNames: string[] = [];
-	private modelToplevelName: string = '';
-	private modelCaseIndex: number = 0;
-	private modelCollectionName = 'models';
-	private modelCategories: string[] = [];
-	private modelColumnFeatures: string[] = [];
-	private targetDatasetInfoArray: entityInfo[] = [];
-	private targetDatasetInfo: entityInfo = {name: '', title: '', id: -1};
-	private targetCollectionNames: string[] = [];
-	private targetCollectionName = '';
-	private targetAttributeName = '';
-	private targetAttributeNames: string[] = [];
-	private targetClassAttributeName = '';
-	private targetPredictedLabelAttributeName = 'classification';
-	private targetProbabilityAttributeName = 'probability of positive';
-	private subscriberIndex: number = -1;
-	private textFeedbackManager: TextFeedbackManager | null = null;
-	private restoredStatus: string = '';
-	private results: {
-		targetTitle: string, modelName: string,
-		numPositive: number, numNegative: number,
-		accuracy: number, kappa: number
-	};
-
-	constructor(props: Classification_Props) {
-		super(props);
-		this.state = {
-			status: props.status,
-			count: 0
-		};
-		this.handleNotification = this.handleNotification.bind(this);
-		this.createStorage = this.createStorage.bind(this);
-		this.restoreStorage = this.restoreStorage.bind(this);
-		props.setStorageCallbacks({
-			createStorageCallback: this.createStorage,
-			restoreStorageCallback: this.restoreStorage
-		});
-		this.results = {
-			targetTitle: '', modelName: '', numPositive: 0, numNegative: 0,
-			accuracy: 0, kappa: 0
-		};
-	}
-
-	public async componentDidMount() {
-		this.props.setStorageCallbacks({
-			createStorageCallback: this.createStorage,
-			restoreStorageCallback: this.restoreStorage
-		});
-		await this.updateTargetNames();
-		this.subscriberIndex = codapInterface.on('notify', '*', '', this.handleNotification);
-		this.setState({count: this.state.count + 1});
-		if (this.restoredStatus !== '') {
-			this.setState({status: this.restoredStatus});
-			this.restoredStatus = '';
-		}
-	}
-
-	public componentWillUnmount() {
-		codapInterface.off(this.subscriberIndex);
-		this.getTextFeedbackManager().closeTextComponent();
-	}
-
-	public createStorage(): ClassificationStorage {
-		return {
-			modelsDatasetName: this.modelsDatasetName,
-			modelToplevelName: this.modelToplevelName || '',
-			modelCaseIndex: this.modelCaseIndex,
-			modelCollectionName: this.modelCollectionName,
-			modelCategories: this.modelCategories,
-			modelColumnFeatures: this.modelColumnFeatures,
-			targetDatasetInfo: this.targetDatasetInfo,
-			targetDatasetName: null,
-			targetCollectionName: this.targetCollectionName,
-			targetAttributeName: this.targetAttributeName,
-			targetClassAttributeName: this.targetClassAttributeName,
-			status: this.state.status,
-			textFeedbackManagerStorage: this.getTextFeedbackManager().createStorage()
-		}
-	}
-
-	public restoreStorage(iStorage: ClassificationStorage) {
-		if (typeof iStorage.targetDatasetName === 'string') { // backward compatibility
-			iStorage.targetDatasetInfo = {name: iStorage.targetDatasetName, title: iStorage.targetDatasetName, id: -1};
-			iStorage.targetDatasetName = null;
-		}
-		this.modelsDatasetName = iStorage.modelsDatasetName;
-		this.modelToplevelName = iStorage.modelToplevelName || '';
-		this.modelCaseIndex = iStorage.modelCaseIndex;
-		this.modelCollectionName = iStorage.modelCollectionName || '';
-		this.modelCategories = iStorage.modelCategories || [];
-		this.modelColumnFeatures = iStorage.modelColumnFeatures || [];
-		this.targetDatasetInfo = iStorage.targetDatasetInfo || {name: '', title: '', id: -1};
-		this.targetCollectionName = iStorage.targetCollectionName || '';
-		this.targetAttributeName = iStorage.targetAttributeName || '';
-		this.targetClassAttributeName = iStorage.targetClassAttributeName || '';
-		this.restoredStatus = iStorage.status || 'testing';
-		this.getTextFeedbackManager().restoreStorage(iStorage.textFeedbackManagerStorage);
-	}
-
-	private async getModelToplevelNames(): Promise<string[]> {
-		let tCollectionNames = await getCollectionNames(this.modelsDatasetName),
-			tModelTopLevelCases: any = await codapInterface.sendRequest({
-				"action": "get",
-				"resource": `dataContext[${this.modelsDatasetName}].collection[${tCollectionNames[0]}].caseFormulaSearch[true]`
-			}).catch(() => {
-					console.log('Error getting model cases');
-				}
-			);
-		return tModelTopLevelCases.values.map((aCase: any) => {
-			return aCase.values['Model'];
-		});
-	}
-
-	private async getTargetCollectionNames(): Promise<string[]> {
-		return await getCollectionNames(this.targetDatasetInfo.name);
-	}
-
-	private async getTargetAttributeNames(): Promise<string[]> {
-		const tCollNames = await this.getTargetCollectionNames();
-		if (tCollNames.length === 0)
-			return [];
-		this.targetCollectionName = tCollNames[tCollNames.length - 1];
-		const tListResult: any = await codapInterface.sendRequest(
-			{
-				action: 'get',
-				resource: `dataContext[${this.targetDatasetInfo.name}].collection[${this.targetCollectionName}].attributeList`
-			}
-		)
-			.catch((reason) => {
-				console.log('Error getting attribute names because', reason);
-			});
-		console.log('getTargetAttributeNames, success', tListResult.success);
-		if (tListResult.success) {
-			return tListResult.values.map((iValue: any) => {
-				return iValue.name;
-			});
-		} else return [];
-	}
-
-	public getConstructedFeatureNames(): string[] {
-		return [];
-	}
-
-	/**
-	 * Lazy instantiation since we can't properly initizlize until we've chosen a model and dataset of phrases
-	 */
-	private getTextFeedbackManager(): TextFeedbackManager {
-		if (!this.textFeedbackManager) {
-			this.textFeedbackManager = new TextFeedbackManager(this.modelCategories, this.targetAttributeName);
-		} else {
-			this.textFeedbackManager.targetAttributeName = this.targetAttributeName;
-			this.textFeedbackManager.targetCategories = this.modelCategories;
-		}
-		return this.textFeedbackManager;
-	}
-
-	private async getModelCategories(): Promise<string[]> {
-		let tResult: string[] = [];
-		if (this.modelsDatasetName !== '') {
-			let tCollectionNames = await getCollectionNames(this.modelsDatasetName),
-				tModelInfoResult: any = await codapInterface.sendRequest({
-					action: 'get',
-					resource: `dataContext[${this.modelsDatasetName}].collection[${tCollectionNames[0]}].caseByIndex[
-						${this.modelCaseIndex}]`
-				});
-			tResult = JSON.parse(tModelInfoResult.values.case.values['Classes'] || '[]');
-		}
-		return tResult;
-	}
-
-	/**
-	 * We update as many name lists as necessary to be able to display them as choices in the UI.
-	 * @private
-	 */
-	private async updateTargetNames() {
-
-		async function allValuesAreInArray(iDatasetName: string, collectionName: string,
-																			 iAttrName: string, iCategories: string[]) {
-			let tFormula = `\`${iAttrName}\`!=\"${iCategories[0]}\" and \`${iAttrName}\`!=\"${iCategories[1]}\"`;
-			// console.log(tFormula);
-			let tCasesResult: any = await codapInterface.sendRequest({
-				action: 'get',
-				resource: `dataContext[${iDatasetName}].collection[${collectionName}].caseFormulaSearch[${tFormula}]`
-			});
-			return tCasesResult.values.length === 0;
-		}
-
-		this.modelDatasetInfoArray = await getDatasetInfoWithFilter(isAModel);
-		if (this.modelsDatasetName === '') {
-			if (this.modelDatasetInfoArray.length > 0)
-				this.modelsDatasetName = this.modelDatasetInfoArray[0].name;
-		}
-		if (this.modelsDatasetName !== '') {
-			this.modelToplevelNames = await this.getModelToplevelNames();
-			if (this.modelToplevelName === '' && this.modelToplevelNames.length > 0) {
-				this.modelToplevelName = this.modelToplevelNames[0];
-				this.modelCaseIndex = 0;
-			} else if (this.modelToplevelName !== '')
-				this.modelCaseIndex = this.modelToplevelNames.indexOf(this.modelToplevelName);
-		}
-		this.targetDatasetInfoArray = await getDatasetInfoWithFilter(isNotAModel);
-		if (this.targetDatasetInfo.name === '') {
-			if (this.targetDatasetInfoArray.length > 0)
-				this.targetDatasetInfo = this.targetDatasetInfoArray[0];
-		}
-		if (this.targetDatasetInfo.name !== '') {
-			this.targetCollectionNames = await this.getTargetCollectionNames();
-			if (this.targetCollectionName === '' && this.targetCollectionNames.length > 0)
-				this.targetCollectionName = this.targetCollectionNames[this.targetCollectionNames.length - 1];
-			this.targetAttributeNames = await this.getTargetAttributeNames();
-			if (this.targetAttributeName === '' && this.targetAttributeNames.length > 0)
-				this.targetAttributeName = this.targetAttributeNames[0];
-			if (this.targetClassAttributeName === '' && this.targetAttributeNames.length > 1) {
-				this.modelCategories = await this.getModelCategories();
-				let tCandidate = this.targetAttributeNames[1];
-				if (allValuesAreInArray(this.targetDatasetInfo.name, this.targetCollectionName, tCandidate, this.modelCategories))
-					this.targetClassAttributeName = tCandidate;
-			}
-		}
-		console.log('targetAttributeName', this.targetAttributeName);
-		this.setState({count: this.count + 1});
-	}
-
-	/**
-	 *
-	 * @param iNotification    (from CODAP)
-	 */
-	private async handleNotification(iNotification: CODAP_Notification) {
-		if (iNotification.action === 'notify') {
-			if (iNotification.values.operation === 'dataContextCountChanged') {
-				this.modelDatasetInfoArray = await getDatasetInfoWithFilter(isAModel);
-				this.targetDatasetInfoArray = await getDatasetInfoWithFilter(isNotAModel);
-				// Force next render to allow choices if they exist
-				this.modelsDatasetName = '';
-				this.targetDatasetInfo = {name: '', title: '', id: -1};
-				this.setState({count: this.state.count + 1});
-			} else if (iNotification.values.operation === 'selectCases') {
-				// @ts-ignore
-				let tDataContextName: string = iNotification.resource && iNotification.resource.match(/\[(.+)]/)[1];
-				if (tDataContextName === this.modelsDatasetName && !this.isSelectingFeatures) {
-					this.isSelectingTargetPhrases = true;
-					await this.getTextFeedbackManager().handleFeatureSelection(this);
-					this.isSelectingTargetPhrases = false;
-				} else if (tDataContextName === this.targetDatasetInfo.name && !this.isSelectingTargetPhrases) {
-					this.isSelectingFeatures = true;
-					await this.getTextFeedbackManager().handleTargetSelection(this);
-					this.isSelectingFeatures = false;
-				}
-			} else if (['titleChange', 'updateAttributes'].includes(iNotification.values.operation)) {
-				this.updateTargetNames();
-			} else if (iNotification.resource === `dataContextChangeNotice[${this.targetDatasetInfo.name}]` &&
-				iNotification.values.operation === 'createCases') {
-				await this.classify();
-			}
-		}
-	}
-
-	private async addAttributesToTarget() {
-		// Add the predicted label attribute to the target collection
-		await codapInterface.sendRequest(
-			{
-				action: 'create',
-				resource: `dataContext[${this.targetDatasetInfo.name}].collection[${this.targetCollectionName}].attribute`,
-				values: [
-					{
-						name: this.targetPredictedLabelAttributeName,
-						description: 'The label predicted by the model'
-					},
-					{
-						name: this.targetProbabilityAttributeName,
-						description: 'The probability predicted by the model that the classification is positive',
-						precision: 5
-					},
-					{
-						name: kFeatureIDsAttributeName,
-						hidden: true
-					}
-				]
-			}
-		)
-			.catch((reason) => {
-				console.log('Error adding target attributes because', reason);
-			});
-		await scrollCaseTableToRight(this.targetDatasetInfo.name);
-	}
-
-	/**
-	 * Extract relevant info from model dataset and use it to classify phrases in target dataset
-	 * @private
-	 */
-	private async classify() {
-		let this_ = this,
-			tModel: ClassificationModel = {
-				features: [],
-				weights: [],
-				caseIDs: [],
-				labels: [],
-				positiveLabel: '',
-				modelColumnFeatures: [],
-				usages: [],
-				threshold: 0.5,
-				constantWeightTerm: 0,
-				predictor: null
-			},
-			tLabelValues: { id: number, values: any }[] = [];
-
-		async function buildModelFromDataset() {
-			let tModelCollectionNames = await getCollectionNames(this_.modelsDatasetName),
-				tModelParentCollectionName = tModelCollectionNames[0];
-			this_.modelCollectionName = tModelCollectionNames.pop() || 'cases';
-			let tCaseCount = await getCaseCount(this_.modelsDatasetName, this_.modelCollectionName);
-			for (let i = 0; i < tCaseCount; i++) {
-				const tGetResult: any = await codapInterface.sendRequest({
-					"action": "get",
-					"resource": `dataContext[${this_.modelsDatasetName}].collection[${this_.modelCollectionName}].caseByIndex[${i}]`
-				})
-					.catch(() => {
-						console.log('unable to get feature');
-					});
-
-				tModel.features.push(tGetResult.values.case.values['feature']);
-				tModel.weights.push(tGetResult.values.case.values['weight']);
-				tModel.caseIDs.push(tGetResult.values.case.id);
-				tModel.usages.push([]);
-			}
-			const tParentCaseResult: any = await codapInterface.sendRequest({
-				"action": "get",
-				"resource":
-					`dataContext[${this_.modelsDatasetName}].collection[${tModelParentCollectionName}].caseByIndex[${this_.modelCaseIndex}]`
-			})
-				.catch((e) => {
-					console.log(`Error ${e} while getting parent case`);
-				});
-			let tLabels = tParentCaseResult.values.case.values['Classes'] || `["negative", "positive"]`;
-			tModel.labels = JSON.parse(tLabels);
-			tModel.positiveLabel = tParentCaseResult.values.case.values['Target Class'] || `positive`;
-			this_.targetPredictedLabelAttributeName = tParentCaseResult.values.case.values['Predicted Column Name'] || `classification`;
-			this_.targetProbabilityAttributeName = 'probability of ' + tModel.positiveLabel;
-			this_.modelCategories = tModel.labels;	// Needed to pass to TextFeedbackManager
-			let tColumnFeatures = tParentCaseResult.values.case.values['Column Features'] || `[]`;
-			tModel.modelColumnFeatures = tColumnFeatures.split(',').map((iFeature: string) => {
-				return iFeature.trimLeft();
-			});
-			this_.modelColumnFeatures = tModel.modelColumnFeatures;	// So they get saved and used to get values
-			tModel.threshold = tParentCaseResult.values.case.values['Threshold'];
-			tModel.constantWeightTerm = tParentCaseResult.values.case.values['Constant Weight'];
-			tModel.predictor = new LogitPrediction(tModel.constantWeightTerm, tModel.weights, tModel.threshold);
-		}
-
-		async function addUsagesAttributeToModelDataset() {
-			await codapInterface.sendRequest({
-					action: 'create',
-					resource: `dataContext[${this_.modelsDatasetName}].collection[${this_.modelCollectionName}].attribute`,
-					values: [
-						{
-							name: 'usages',
-							description: 'IDs of cases with phrase that use this feature',
-							hidden: true
-						}
-					]
-				}
-			)
-		}
-
-		async function classifyEachPhrase() {
-			let tPhraseCount = await getCaseCount(this_.targetDatasetInfo.name, this_.targetCollectionName),
-				tCorrect = 0,
-				tMatrix = {posPos: 0, negPos: 0, posNeg: 0, negNeg: 0},
-				tNegativeLabel = tModel.positiveLabel === tModel.labels[0] ? tModel.labels[1] : tModel.labels[0];
-			for (let i = 0; i < tPhraseCount; i++) {
-				const tGetResult: any = await codapInterface.sendRequest({
-					"action": "get",
-					"resource": `dataContext[${this_.targetDatasetInfo.name}].collection[${this_.targetCollectionName}].caseByIndex[${i}]`
-				})
-					.catch(() => {
-						console.log('unable to get target phrase');
-					});
-				let tPhraseID = tGetResult.values.case.id,
-					tPhrase = tGetResult.values.case.values[this_.targetAttributeName],
-					tActual = this_.targetClassAttributeName === '' ? '' :
-						tGetResult.values.case.values[this_.targetClassAttributeName],
-					tGiven = Array(tModel.features.length).fill(0),
-					tFeatureIDs: number[] = [];
-				// Find the index of each feature the phrase
-				wordTokenizer(tPhrase, false).forEach((iFeature) => {
-					let tIndex = tModel.features.indexOf(iFeature);
-					if (tIndex >= 0) {	// We've found a feature
-						// Mark it in the array
-						tGiven[tIndex] = 1;
-						// Add the case ID to the list of featureIDs for this phrase
-						tFeatureIDs.push(tModel.caseIDs[tIndex]);
-						tModel.usages[tIndex].push(tPhraseID);
-					}
-				});
-				// The column features are names of attributes we expect to find having values true or false
-				tModel.modelColumnFeatures.forEach(iFeature => {
-					if (tGetResult.values.case.values[iFeature]) {
-						let tIndex = tModel.features.indexOf(iFeature);
-						if (tIndex >= 0) {
-							// Mark it in the array
-							tGiven[tIndex] = 1;
-							// Add the case ID to the list of featureIDs for this phrase
-							tFeatureIDs.push(tModel.caseIDs[tIndex]);
-							tModel.usages[tIndex].push(tPhraseID);
-						}
-					}
-				});
-				let tCaseValues: { [key: string]: string } = {},
-					tPrediction = tModel.predictor.predict(tGiven);
-				tCaseValues[this_.targetPredictedLabelAttributeName] = tPrediction.class ?
-					tModel.positiveLabel : tNegativeLabel;
-				tCaseValues[this_.targetProbabilityAttributeName] = tPrediction.probability;
-				tCaseValues[kFeatureIDsAttributeName] = JSON.stringify(tFeatureIDs);
-				tLabelValues.push({
-					id: tGetResult.values.case.id,
-					values: tCaseValues
-				});
-				// Increment results
-				let tActualBool = tActual === tModel.positiveLabel;
-				if (tPrediction.class) {
-					this_.results.numPositive++;
-					if (tActualBool)
-						tMatrix.posPos++;
-					else
-						tMatrix.negPos++;
-				} else {
-					this_.results.numNegative++;
-					if (tActualBool)
-						tMatrix.posNeg++;
-					else
-						tMatrix.negNeg++;
-				}
-				if (tActualBool === tPrediction.class) {
-					tCorrect++;
-				}
-			}
-			// Send the values to CODAP
-			await codapInterface.sendRequest({
-				action: 'update',
-				resource: `dataContext[${this_.targetDatasetInfo.name}].collection[${this_.targetCollectionName}].case`,
-				values: tLabelValues
-			});
-			// Add the usages to each feature case
-			let tFeatureUpdates = tModel.caseIDs.map((iID, iIndex) => {
-				return {
-					id: iID,
-					values: {usages: JSON.stringify(tModel.usages[iIndex])}
-				}
-			});
-			await codapInterface.sendRequest({
-				action: 'update',
-				resource: `dataContext[${this_.modelsDatasetName}].collection[${this_.modelCollectionName}].case`,
-				values: tFeatureUpdates
-			});
-			if (this_.targetClassAttributeName !== '') {
-				let computedKappa = computeKappa( tPhraseCount, tMatrix.posPos, tMatrix.negNeg,
-					tMatrix.posPos + tMatrix.posNeg, tMatrix.posPos + tMatrix.negPos);
-				this_.results.accuracy = Number(computedKappa.observed.toFixed(3));
-				this_.results.kappa = Number(computedKappa.kappa.toFixed(3));
-			}
-		}
-
-		function wipeResults() {
-			this_.results = {
-				targetTitle: '',
-				modelName: '',
-				numPositive: 0,
-				numNegative: 0,
-				accuracy: 0,
-				kappa: 0
-			}
-		}
-
-		/**
-		 * Setting results will cause them to be displayed
-		 */
-		function reportResults() {
-			this_.results.targetTitle = this_.targetDatasetInfo.title;
-			this_.results.modelName = this_.modelToplevelName;
-			this_.setState({count: this_.state.count + 1})
-		}
-
-		wipeResults();
-		await deselectAllCasesIn(this.targetDatasetInfo.name);
-		await deselectAllCasesIn(this.modelsDatasetName);
-		await buildModelFromDataset();
-		await addUsagesAttributeToModelDataset();
-		await this.addAttributesToTarget();
-		await classifyEachPhrase();
-		reportResults();
-		await this.getTextFeedbackManager().addTextComponent();
-	}
-
-	private renderForActiveState() {
-		const kNoModels = 'No models to choose from',
-			kNoTargets = 'No phrases to classify found';
-		let this_ = this;
-
-		function entityPropertyControl(entityInfoArray: entityInfo[], propName: string, prompt: string, noneFoundPrompt: string) {
-			if (entityInfoArray.length === 1)
-				this_[propName] = entityInfoArray[0];
-			if (entityInfoArray.length === 0) {
-				return (
-					<p>{prompt}<em>{noneFoundPrompt}</em></p>
-				)
-			} else {
-				return (
-					<div>
-						<label>
-							<span>{prompt}</span>
-							<SelectBox
-								dataSource={entityInfoArray.map(iInfo => iInfo.title)}
-								placeholder={'Choose one'}
-								value={this_[propName].title}
-								style={{display: 'inline-block'}}
-								onValueChange={async (e) => {
-									this_[propName] = entityInfoArray.find(iInfo => iInfo.title === e);
-									await this_.updateTargetNames();
-									this_.setState({count: this_.count + 1});
-								}
-								}
-							>
-							</SelectBox>
-						</label>
-						<br/>
-					</div>
-				);
-			}
-		}
-
-		function stringPropertyControl(listOfNames: string[], propName: string, prompt: string, noneFoundPrompt: string) {
-			if (listOfNames.length === 1)
-				this_[propName] = listOfNames[0];
-			if (listOfNames.length === 0) {
-				return (
-					<p>{prompt}<em>{noneFoundPrompt}</em></p>
-				)
-			} else {
-				return (
-					<label>
-						<span>{prompt}</span>
-						<SelectBox
-							dataSource={listOfNames}
-							placeholder={'Choose one'}
-							value={this_[propName]}
-							style={{display: 'inline-block'}}
-							onValueChange={async (e) => {
-								this_[propName] = e;
-								await this_.updateTargetNames();
-								this_.setState({count: this_.count + 1});
-							}
-							}
-						>
-						</SelectBox>
-					</label>
-				);
-			}
-		}
-
-		function modelDatasetsControl() {
-			return stringPropertyControl(this_.modelDatasetInfoArray.map(iInfo => iInfo.name),
-				'modelsDatasetName', 'Models dataset: ',
-				kNoModels);
-		}
-
-		function modelNamesControl() {
-			return stringPropertyControl(this_.modelToplevelNames, 'modelToplevelName', 'Model to use: ',
-				kNoModels);
-		}
-
-		function targetControl() {
-			return entityPropertyControl(this_.targetDatasetInfoArray, 'targetDatasetInfo',
-				'Dataset to use for classification: ',
-				kNoTargets);
-		}
-
-		function getTargetAttributeControl() {
-			if (this_.targetDatasetInfo.name === '')
-				return '';
-			return (stringPropertyControl(this_.targetAttributeNames,
-				'targetAttributeName', 'Column to classify: ', 'No columns found'));
-		}
-
-		function doItButton() {
-			if (this_.targetDatasetInfo.name === '' && this_.modelsDatasetName === '') {
-				return (
-					<div>
-						<br/>
-						<p>Cannot classify without both a model and phrases to classify.</p>
-					</div>
-				);
-			} else if (this_.targetDatasetInfo.name === '') {
-				return (
-					<div>
-						<br/>
-						<p>Cannot classify without phrases to classify.</p>
-					</div>
-				);
-			} else if (this_.modelsDatasetName === '') {
-				return (
-					<div>
-						<br/>
-						<p>Cannot classify without a model.</p>
-					</div>
-				);
-			} else {
-				return (
-					<div>
-						<br/>
-						<Button onClick={() => {
-							this_.classify();
-						}}>Classify!</Button>
-					</div>
-				);
-			}
-
-		}
-
-		function getResults() {
-
-			function getAccuracyAndKappa() {
-				return (this_.targetClassAttributeName === '' ? '' :
-					(<div>
-							<li>Accuracy = {this_.results.accuracy}</li>
-							<li>Kappa = {this_.results.kappa}</li>
-						</div>
-					));
-			}
-
-			if (this_.results.targetTitle === '')
-				return '';
-			else {
-				return (
-					<div>
-						<br/>
-						<p>Results of classifying <strong>{this_.results.targetTitle}</strong> using
-							<strong> {this_.results.modelName}</strong></p>
-						<ul>
-							<li>{this_.results.numPositive} were classified as <strong>{this_.modelCategories[1]}</strong></li>
-							<li>{this_.results.numNegative} were classified as <strong>{this_.modelCategories[0]}</strong></li>
-							{getAccuracyAndKappa()}
-						</ul>
-					</div>
-				);
-			}
-		}
-
-		return (<div className='sq-options'>
-			{modelDatasetsControl()}
-			{modelNamesControl()}
-			{targetControl()}
-			{getTargetAttributeControl()}
-			{doItButton()}
-			{getResults()}
-		</div>)
-	}
-
-	public render() {
-		return (
-			<div>
-				{this.renderForActiveState()}
-			</div>
-		)
-	}
-}
diff --git a/src/components/component_utilities.tsx b/src/components/component_utilities.tsx
new file mode 100644
index 0000000..2c722aa
--- /dev/null
+++ b/src/components/component_utilities.tsx
@@ -0,0 +1,27 @@
+/**
+ * These utilities are used by more than one component
+ */
+
+import React from "react";
+import {SelectBox} from "devextreme-react/select-box";
+import {action} from "mobx";
+
+export function choicesMenu(iPrompt: string, iPlaceHolder: string, iHint:string,
+														iChoices: string[], iValue: string, iNoDataText:string, iCallback: (choice: string) => void) {
+	return (
+		<div className='sq-choice'>
+			<span>{iPrompt}:</span>
+			<SelectBox
+				dataSource={iChoices}
+				placeholder={iPlaceHolder}
+				hint={iHint}
+				value={iValue}
+				noDataText={iNoDataText}
+				style={{display: 'inline-block'}}
+				onValueChange={action(async (e) => iCallback(e))}
+				width={'100%'}
+			>
+			</SelectBox>
+		</div>
+	)
+}
diff --git a/src/components/feature_component.tsx b/src/components/feature_component.tsx
new file mode 100644
index 0000000..45fd85e
--- /dev/null
+++ b/src/components/feature_component.tsx
@@ -0,0 +1,309 @@
+/**
+ * This component provides the space for a user to construct and edit a feature
+ */
+
+import React, {Component} from "react";
+import {
+	Feature,
+	featureDescriptors,
+	kKindOfThingOptionList,
+	kKindOfThingOptionPunctuation,
+	kKindOfThingOptionText,
+	SearchDetails
+} from "../stores/store_types_and_constants";
+import {DomainStore} from "../stores/domain_store";
+import {observer} from "mobx-react";
+import {UiStore} from "../stores/ui_store";
+import {TextBox} from "devextreme-react";
+import {action, toJS} from "mobx";
+import {SelectBox} from "devextreme-react/select-box";
+import {stopWords} from "../lib/stop_words";
+import {CheckBox} from "devextreme-react/check-box";
+import {SQ} from "../lists/lists";
+import Button from "devextreme-react/button";
+import {NumberBox} from "devextreme-react/number-box";
+
+interface FeatureComponentInfo {
+	subscriberIndex: number
+}
+
+export interface FeatureComponentProps {
+	uiStore: UiStore
+	domainStore: DomainStore
+	feature: Feature
+	shortened: boolean
+}
+
+export const FeatureComponent = observer(class FeatureComponent extends Component<FeatureComponentProps, {}> {
+
+		private featureInfo: FeatureComponentInfo;
+
+		constructor(props: any) {
+			super(props);
+			this.state = {
+				count: 0
+			};
+			this.featureInfo = {subscriberIndex: -1}
+		}
+
+		async updateFeaturesDataset(iFeature: Feature) {
+			if (!iFeature.inProgress) {
+				await this.props.domainStore.targetStore.addOrUpdateFeatureToTarget(iFeature, true)
+				switch (iFeature.info.kind) {
+					case 'search':
+					case 'count':
+					case 'column':
+						await this.props.domainStore.updateNonNtigramFeaturesDataset()
+						break
+					case 'ngram':
+						await this.props.domainStore.updateNgramFeatures()
+						break
+				}
+			}
+		}
+
+		render() {
+			const this_ = this
+
+			/*
+						function nameBox() {
+							return (
+								<TextBox
+									className='sq-fc-part'
+									valueChangeEvent={'keyup'}
+									placeholder="type the feature's name"
+									onValueChanged={action(async (e) => {
+										tFeature.name = e.value
+										await this_.updateFeaturesDataset(tFeature)
+									})}
+									value={tFeature.name}
+									onFocusOut={action(() => {
+										tFeature.name = this_.props.domainStore.featureStore.guaranteeUniqueFeatureName(tFeature.name)
+									})}
+									maxLength={20}
+								/>
+							)
+						}
+			*/
+
+			function kindOfContainsChoice() {
+				tFeatureDescriptors.featureKinds[2].items = this_.props.domainStore.targetStore.targetColumnFeatureNames.map(iColumnName => {
+					return {
+						name: iColumnName,
+						value: `{"kind": "column", "details": {"columName":"${iColumnName}"}}`,
+						key: 'Choose other columns as features'
+					}
+				})
+				// @ts-ignore
+				tFeatureDescriptors.featureKinds[1].items[0].disabled = this_.props.domainStore.featureStore.hasNgram()
+				return (
+					<SelectBox
+						className='sq-new-feature-item sq-fc-part'
+						dataSource={tFeatureDescriptors.featureKinds}
+						valueExpr='value'
+						displayExpr='name'
+						grouped={true}
+						placeholder={'choose a method'}
+						value={tContainsOption}
+						style={{display: 'inline-block'}}
+						onValueChanged={action((e) => {
+							tFeature.infoChoice = e.value
+							tFeature.info.kind = JSON.parse(e.value).kind
+							tFeature.info.details = Object.assign(tFeature.info.details || {}, JSON.parse(e.value).details)
+							if (tFeature.info.kind === 'ngram') {
+								tFeature.info.frequencyThreshold = 4
+								tFeature.info.ignoreStopWords = true
+							} else if (tFeature.info.kind === 'column') {
+								tFeature.name = JSON.parse(e.value).details['columName']
+								tFeature.type = 'column'
+							}
+							// await this_.updateFeaturesDataset(tFeature)
+						})}
+					/>
+				)
+			}
+
+			function kindOfThingContainedChoice() {
+				if (tFeature.info.kind === 'search') {
+					return (
+						<SelectBox
+							className='sq-new-feature-item sq-fc-part'
+							dataSource={featureDescriptors.kindOfThingContainedOptions}
+							placeholder={'choose from'}
+							value={tKindOption}
+							style={{display: 'inline-block'}}
+							onValueChanged={action(async (e) => {
+								(tFeature.info.details as SearchDetails).what = e.value
+								await this_.updateFeaturesDataset(tFeature)
+							})}
+						/>
+					)
+				}
+			}
+
+			function freeFormTextBox() {
+				const tContainsDetails = tFeature.info.details as SearchDetails
+				if (tContainsDetails && tContainsDetails.what === kKindOfThingOptionText) {
+					return (
+						<TextBox
+							className='sq-fc-part'
+							valueChangeEvent={'keyup'}
+							placeholder="type something here"
+							onValueChanged={action(async (e) => {
+								tContainsDetails.freeFormText = e.value
+								await this_.updateFeaturesDataset(tFeature)
+							})}
+							value={tContainsDetails.freeFormText}
+							maxLength={100}
+						/>
+					)
+				}
+			}
+
+			function punctuationChoice() {
+				const tContainsDetails = tFeature.info.details as SearchDetails
+				if (tContainsDetails && tContainsDetails.what === kKindOfThingOptionPunctuation) {
+					return (
+						<TextBox
+							className='sq-fc-part'
+							valueChangeEvent={'keyup'}
+							placeholder="punctuation mark"
+							onValueChanged={action(async (e) => {
+								tContainsDetails.punctuation = e.value
+								await this_.updateFeaturesDataset(tFeature)
+							})}
+							value={tContainsDetails.punctuation}
+							maxLength={1}
+						/>
+					)
+				}
+			}
+
+			function wordListChoice() {
+				const tContainsDetails = tFeature.info.details as SearchDetails
+				if (tContainsDetails && tContainsDetails.what === kKindOfThingOptionList) {
+					const tWordListSpecs = this_.props.domainStore.featureStore.wordListSpecs,
+						tWordListDatasetNames = tWordListSpecs.map(iDataset => {
+							return iDataset.datasetName;
+						}),
+						tLists = Object.keys(SQ.lists).concat(tWordListDatasetNames)
+					return (
+						<SelectBox
+							dataSource={tLists}
+							defaultValue={tContainsDetails.wordList}
+							placeholder={'choose list'}
+							style={{display: 'inline-block'}}
+							onValueChange={action((option) => {
+								const tWordListSpec = tWordListSpecs.find((iSpec) => {
+									return iSpec.datasetName === option
+								})
+								let tAttributeName = ''
+								if (tWordListSpec) {
+									tAttributeName = tWordListSpec.firstAttributeName
+								}
+								(tFeature.info.details as SearchDetails).wordList = {
+									datasetName: option,
+									firstAttributeName: tAttributeName
+								}
+							})}
+						/>
+					)
+				}
+			}
+
+			function ngramSettings() {
+				if (tFeature.info.kind === 'ngram')
+					return (<div className='sq-feature-ngram-settings'>
+						<CheckBox
+							text=' Ignore stopwords'
+							value={tFeature.info.ignoreStopWords}
+							hint={Object.keys(stopWords).join(', ')}
+							onValueChange={
+								action((e: boolean) => {
+									tFeature.info.ignoreStopWords = e
+								})
+							}
+						/>
+						<div className='sq-feature-ngram-ignore-settings'>
+							<span>Ignore words that appear fewer than </span>
+							<NumberBox
+								width={40}
+								// onInitialized={this.saveInputInstance}
+								min={1}
+								max={100}
+								value={tFeature.info.frequencyThreshold}
+								onValueChanged={action((e) => {
+									tFeature.info.frequencyThreshold = e.value
+								})}
+								onEnterKey={() => {
+									// this.blurInput();
+								}}
+							/>
+							<span> times</span>
+						</div>
+						{/*
+						<NumericInput
+							label='Frequency threshold'
+							min={1}
+							max={100}
+							getter={() => {
+								return tFeature.info.frequencyThreshold
+							}}
+							setter={action((newValue: number) => {
+								tFeature.info.frequencyThreshold = newValue
+							})
+							}
+						/>
+*/}
+					</div>)
+			}
+
+			const tFeature = this.props.feature
+			const tFeatureDescriptors = toJS(featureDescriptors)
+			const tContainsOption = tFeature.infoChoice ? tFeature.infoChoice : ''
+			const tKindOption = tFeature.info.details ? (tFeature.info.details as SearchDetails).what : ''
+
+			if (!this.props.shortened) {
+				return (
+					<div className='sq-component'>
+						{kindOfContainsChoice()}
+						{kindOfThingContainedChoice()}
+						{freeFormTextBox()}
+						{punctuationChoice()}
+						{wordListChoice()}
+						{ngramSettings()}
+					</div>
+				)
+			} else {
+				const tHint = tFeature.chosen ? SQ.hints.featureTableCheckboxRemove :
+					SQ.hints.featureTableCheckboxAdd
+				return (
+					<div className='sq-component'>
+						<CheckBox
+							text=''
+							value={tFeature.chosen}
+							onValueChange={action(async () => {
+								await this.props.domainStore.featureStore.toggleChosenFor(tFeature)
+								console.log(`type = ${tFeature.type}; chosen = ${tFeature.chosen}`)
+								if( tFeature.type === 'unigram' && tFeature.chosen)
+									this.props.domainStore.updateNgramFeatures()
+							})}
+							hint={tHint}
+						/>
+						<p><strong>{tFeature.name}</strong></p>
+						<Button
+							className='sq-feature-delete'
+							text=''
+							icon='clear'
+							onClick={action(async () => {
+								await this_.props.domainStore.featureStore.deleteFeature(tFeature)
+								await this_.props.domainStore.clearText()
+							})}
+							hint={SQ.hints.featureTableRemove}
+						/>
+					</div>
+				)
+			}
+		}
+	}
+)
\ No newline at end of file
diff --git a/src/components/feature_constructor.tsx b/src/components/feature_constructor.tsx
new file mode 100644
index 0000000..18890e0
--- /dev/null
+++ b/src/components/feature_constructor.tsx
@@ -0,0 +1,47 @@
+/**
+ * This component provides the space for a user to construct a new feature
+ */
+
+import React, {Component} from "react";
+import {DomainStore} from "../stores/domain_store";
+import {observer} from "mobx-react";
+import {UiStore} from "../stores/ui_store";
+import {FeatureComponent} from "./feature_component";
+
+interface FeatureConstructorInfo {
+	subscriberIndex: number
+}
+
+export interface FeatureConstructorProps {
+	uiStore: UiStore
+	domainStore: DomainStore
+}
+
+export const FeatureConstructor = observer(class FeatureConstructor extends Component<FeatureConstructorProps, {}> {
+
+	private featureConstructorInfo: FeatureConstructorInfo;
+
+	constructor(props: any) {
+		super(props);
+		this.state = {
+			count: 0
+		};
+		this.featureConstructorInfo = {subscriberIndex: -1}
+	}
+
+	render() {
+		const tFeatureUnderConstruction = this.props.domainStore.featureStore.featureUnderConstruction
+		if (tFeatureUnderConstruction.inProgress) {
+			return (
+				<div>
+					<FeatureComponent
+						uiStore={this.props.uiStore}
+						domainStore={this.props.domainStore}
+						feature={tFeatureUnderConstruction}
+						shortened = {false}
+					/>
+				</div>
+			)
+		} else return ''
+	}
+})
\ No newline at end of file
diff --git a/src/components/feature_list.tsx b/src/components/feature_list.tsx
new file mode 100644
index 0000000..fdbaafd
--- /dev/null
+++ b/src/components/feature_list.tsx
@@ -0,0 +1,54 @@
+/**
+ * This component lists the constructed features and provides an interface for choosing, deleting, and editing them
+ */
+
+import React, {Component} from "react";
+import {DomainStore} from "../stores/domain_store";
+import {observer} from "mobx-react";
+import {UiStore} from "../stores/ui_store";
+import {FeatureComponent} from "./feature_component";
+
+interface FeatureListInfo {
+	subscriberIndex: number
+}
+
+export interface FeatureListProps {
+	uiStore: UiStore
+	domainStore: DomainStore
+}
+
+export const FeatureList = observer(class FeatureList extends Component<FeatureListProps, {}> {
+
+	private featureListInfo: FeatureListInfo;
+
+	constructor(props: any) {
+		super(props);
+		this.state = {
+			count: 0
+		};
+		this.featureListInfo = {subscriberIndex: -1}
+	}
+
+	getList() {
+		const tFeatureList = this.props.domainStore.featureStore.features
+		return tFeatureList.map((iFeature, iIndex) => {
+			return <FeatureComponent
+				key={iIndex}
+				uiStore={this.props.uiStore}
+				domainStore={this.props.domainStore}
+				feature={iFeature}
+				shortened={true}
+			/>
+		})
+	}
+
+	render() {
+		return (
+			<div className='sq-container'>
+				<div className='sq-feature-list'>
+					{this.getList()}
+				</div>
+			</div>
+		)
+	}
+})
diff --git a/src/components/feature_pane.tsx b/src/components/feature_pane.tsx
new file mode 100644
index 0000000..a5f54a0
--- /dev/null
+++ b/src/components/feature_pane.tsx
@@ -0,0 +1,132 @@
+/**
+ * This component provides the space for a user to construct and edit features
+ */
+
+import React, {Component} from "react";
+import {DomainStore} from "../stores/domain_store";
+import {observer} from "mobx-react";
+import {UiStore} from "../stores/ui_store";
+import {Button} from "devextreme-react";
+import {FeatureConstructor} from "./feature_constructor";
+import {action} from "mobx";
+import {FeatureList} from "./feature_list";
+import {starterFeature} from "../stores/store_types_and_constants";
+import {SQ} from "../lists/lists";
+
+interface FeaturePaneState {
+	count: number,
+}
+
+interface FeaturePaneInfo {
+	subscriberIndex: number
+}
+
+export interface Feature_Props {
+	uiStore: UiStore
+	domainStore: DomainStore
+}
+
+export const FeaturePane = observer(class FeaturePane extends Component<Feature_Props, FeaturePaneState> {
+
+	private featurePaneInfo: FeaturePaneInfo;
+
+	constructor(props: any) {
+		super(props);
+		this.state = {
+			count: 0
+		};
+		this.featurePaneInfo = {subscriberIndex: -1}
+	}
+
+	getButtons() {
+		const tFeatureStore = this.props.domainStore.featureStore,
+			tFeatureUnderConstruction = tFeatureStore.featureUnderConstruction,
+			tInProgress = tFeatureUnderConstruction.inProgress,
+			tButtonLabel = tFeatureUnderConstruction.inProgress ? 'Cancel' : 'Add Features',
+			tButtonHint = tFeatureUnderConstruction.inProgress ? SQ.hints.featureCancel :
+				SQ.hints.featureAdd,
+			tAddButton =
+				(<Button
+						className='sq-button'
+						onClick={action(() => {
+							if( tInProgress) {	// Cancel
+								tFeatureStore.featureUnderConstruction = Object.assign({}, starterFeature)
+							}
+							tFeatureUnderConstruction.inProgress = !tInProgress
+						})}
+						hint={tButtonHint}
+					>
+						{tButtonLabel}
+					</Button>
+				),
+			tDoneButton = tFeatureUnderConstruction.inProgress ? (
+				<Button
+					className='sq-button'
+					disabled={!this.props.domainStore.featureStore.constructionIsDone()}
+					onClick={action(async () => {
+						if( tFeatureUnderConstruction.inProgress) {
+							if(tFeatureUnderConstruction.info.kind === 'ngram' && tFeatureStore.hasNgram()) {
+								window.alert('Sorry, you already have this feature.')
+							}
+							else {
+								tFeatureUnderConstruction.name = this.props.domainStore.featureStore.constructNameFor(tFeatureUnderConstruction)
+								await this.props.domainStore.targetStore.addOrUpdateFeatureToTarget(tFeatureUnderConstruction)
+								await this.props.domainStore.featureStore.addFeatureUnderConstruction()
+								await this.props.domainStore.updateNonNtigramFeaturesDataset()
+								await this.props.domainStore.updateNgramFeatures()
+								tFeatureUnderConstruction.inProgress = false
+							}
+						}
+					})}
+					hint={SQ.hints.featureDone}
+				>
+					Done
+				</Button>
+			) : ''
+		return (
+			<div>
+				{tAddButton}
+				{tDoneButton}
+			</div>
+		)
+	}
+
+	render() {
+		const this_ = this,
+			tFeatureStore = this.props.domainStore.featureStore
+
+		function featureInstructions() {
+			if (!tFeatureStore.featureUnderConstruction.inProgress) {
+				const
+					tFeatures =tFeatureStore.features,
+					tInstructions = tFeatures.length === 0 ?
+					<p>What features of the training data should StoryQ use to train the model?</p> :
+					<p>Add more features or go to <span
+							onClick={action(()=>this_.props.domainStore.setPanel(2))}
+							style={{cursor: 'pointer'}}
+						>
+								<strong>Training</strong></span>to train your model.</p>
+				return (
+					<div className='sq-info-prompt'>
+						{tInstructions}
+					</div>
+				)
+			}
+		}
+
+		return (
+			<div className='sq-pane'>
+				{featureInstructions()}
+				<FeatureConstructor
+					uiStore={this.props.uiStore}
+					domainStore={this.props.domainStore}
+				/>
+				{this.getButtons()}
+				<FeatureList
+					uiStore={this.props.uiStore}
+					domainStore={this.props.domainStore}
+				/>
+			</div>
+		);
+	}
+})
\ No newline at end of file
diff --git a/src/components/feature_panel.tsx b/src/components/feature_panel.tsx
new file mode 100644
index 0000000..dbde753
--- /dev/null
+++ b/src/components/feature_panel.tsx
@@ -0,0 +1,49 @@
+/**
+ * This component provides the space for a user to construct and edit features
+ */
+
+import React, {Component} from "react";
+import {DomainStore} from "../stores/domain_store";
+import {observer} from "mobx-react";
+import {UiStore} from "../stores/ui_store";
+import {TargetInfoPane} from "./target_info_pane";
+import {FeaturePane} from "./feature_pane";
+
+export interface Feature_Props {
+	uiStore: UiStore
+	domainStore: DomainStore
+}
+
+export const FeaturePanel = observer(class FeaturePanel extends Component<Feature_Props, {}> {
+
+	constructor(props: any) {
+		super(props);
+		this.state = {
+			count: 0
+		};
+	}
+
+	async componentDidMount() {
+		await this.updateFeaturesDataset();
+		await this.props.domainStore.featureStore.updateWordListSpecs()
+	}
+
+	async updateFeaturesDataset() {
+		await this.props.domainStore.updateNonNtigramFeaturesDataset()
+	}
+
+	render() {
+
+		return (
+			<div className='sq-feature-panel'>
+				<TargetInfoPane
+					domainStore={this.props.domainStore}
+				/>
+				<FeaturePane
+					uiStore={this.props.uiStore}
+					domainStore={this.props.domainStore}
+				/>
+			</div>
+		);
+	}
+})
\ No newline at end of file
diff --git a/src/numeric_input.tsx b/src/components/numeric_input.tsx
similarity index 98%
rename from src/numeric_input.tsx
rename to src/components/numeric_input.tsx
index 7ba230c..6a572e9 100644
--- a/src/numeric_input.tsx
+++ b/src/components/numeric_input.tsx
@@ -33,6 +33,7 @@ export class NumericInput extends Component<NumericInputProps, {}> {
 			<label>
 				<span>{this.props.label}</span>
 				<NumberBox
+					width={40}
 					onInitialized={this.saveInputInstance}
 					min={this.props.min}
 					max={this.props.max}
diff --git a/src/progress_bar.tsx b/src/components/progress_bar.tsx
similarity index 94%
rename from src/progress_bar.tsx
rename to src/components/progress_bar.tsx
index cfafd00..a1b118e 100644
--- a/src/progress_bar.tsx
+++ b/src/components/progress_bar.tsx
@@ -4,7 +4,7 @@
 
 import React, {Component} from "react";
 
-export class ProgressBar extends Component<{percentComplete:number, setUpdatePercentage:any}, any> {
+export class ProgressBar extends Component<{percentComplete:number}, any> {
 	private barRef:any;
 
 	constructor(props:any) {
diff --git a/src/components/storyq.tsx b/src/components/storyq.tsx
new file mode 100755
index 0000000..ef37cf8
--- /dev/null
+++ b/src/components/storyq.tsx
@@ -0,0 +1,152 @@
+import React, {Component} from 'react';
+import 'devextreme/dist/css/dx.common.css';
+import 'devextreme/dist/css/dx.light.compact.css';
+/*
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faArrowLeft, faQuestionCircle} from '@fortawesome/free-solid-svg-icons'
+*/
+import codapInterface, { CODAP_Notification } from "../lib/CodapInterface";
+// import Button from 'devextreme-react/button';
+import {
+	initializePlugin,
+	registerObservers
+} from '../lib/codap-helper';
+import '../storyq.css';
+import {TabPanel} from "devextreme-react/ui/tab-panel";
+import {Item} from "devextreme-react/tab-panel";
+import {TargetPanel} from "./target_panel";
+import {FeaturePanel} from "./feature_panel";
+import dxTabPanel from "devextreme/ui/tab_panel";
+import {UiStore} from "../stores/ui_store";
+import {observer} from "mobx-react";
+import {DomainStore} from "../stores/domain_store";
+import {action} from "mobx";
+import {TrainingPanel} from "./training_panel";
+import {TestingPanel, kNonePresent} from "./testing_panel";
+import {kStoryQPluginName} from "../stores/store_types_and_constants";
+import NotificationManager from "../managers/notification_manager";
+import {TestingManager} from "../managers/testing_manager";
+
+const Storyq = observer(class Storyq extends Component<{}, {}> {
+		private uiStore: UiStore
+		private domainStore: DomainStore
+		private notificationManager: NotificationManager
+		private kPluginName = kStoryQPluginName;
+		private kVersion = "2.15";
+		private kInitialDimensions = {
+			width: 429,
+			height: 420
+		};
+		private tabPanel: dxTabPanel | null = null;	// Todo: necessary?
+		private testingManager: TestingManager;
+
+		constructor(props: any) {
+			super(props);
+			this.uiStore = new UiStore()
+			this.domainStore = new DomainStore(this.uiStore)
+			this.notificationManager = new NotificationManager(this.domainStore)
+			this.restorePluginFromStore = this.restorePluginFromStore.bind(this);
+			this.getPluginStore = this.getPluginStore.bind(this);
+			this.saveTabPanelInstance = this.saveTabPanelInstance.bind(this);
+			this.handleSelectionChanged = this.handleSelectionChanged.bind(this);
+
+			// Listen for CODAP changes here on the root component so it does not matter if the plugin
+			// is collapsed in CODAP (which causes the tab not to render the tab panels).
+			// This code to initialize the testing manager and listen for cases being created used
+			// to live in TestingPanel.
+			this.testingManager = new TestingManager(this.domainStore, kNonePresent)
+			this.handleCaseNotification = this.handleCaseNotification.bind(this)
+			codapInterface.on('notify', '*', 'createCases', this.handleCaseNotification);
+
+			codapInterface.on('update', 'interactiveState', '', this.restorePluginFromStore);
+			codapInterface.on('get', 'interactiveState', '', this.getPluginStore);
+			initializePlugin(this.kPluginName, this.kVersion, this.kInitialDimensions, this.restorePluginFromStore)
+				.then(() => registerObservers());
+		}
+
+		getPluginStore() {
+			return {
+				success: true,
+				values: {
+					domainStore: this.domainStore.asJSON(),
+					uiStore: this.uiStore.asJSON()
+				}
+			};
+		}
+
+		async handleCaseNotification(iNotification: CODAP_Notification) {
+			const tDataContextName = iNotification.resource && iNotification.resource.match(/\[(.+)]/)[1]
+			if (tDataContextName === this.domainStore.testingStore.testingDatasetInfo.name) {
+				await this.testingManager.classify(false)
+			}
+		}
+
+		async restorePluginFromStore(iStorage: any) {
+			if (iStorage) {
+				this.uiStore.fromJSON(iStorage.uiStore);
+				this.domainStore.fromJSON(iStorage.domainStore);
+				await this.domainStore.targetStore.updateFromCODAP()
+			}
+		}
+
+		saveTabPanelInstance(iInstance: any) {
+			this.tabPanel = iInstance.component;
+		}
+
+		async handleSelectionChanged(e: any) {
+			this.uiStore.tabPanelSelectedIndex = e.component.option('selectedIndex')
+			await this.domainStore.targetStore.updateFromCODAP()
+		}
+
+		renderTabPanel() {
+			return (
+				<TabPanel
+					id='tabPanel'
+					selectedIndex={this.uiStore.tabPanelSelectedIndex}
+					onInitialized={this.saveTabPanelInstance}
+					onSelectionChanged={action(e => {
+						this.handleSelectionChanged(e)
+					})}
+				>
+					<Item title='Setup' text='Specify the text data you want to work with'>
+						<TargetPanel
+							uiStore={this.uiStore}
+							domainStore={this.domainStore}
+						/>
+					</Item>
+					<Item title='Features' disabled={!this.domainStore.featuresPanelCanBeEnabled()}>
+						<FeaturePanel
+							uiStore={this.uiStore}
+							domainStore={this.domainStore}
+						/>
+					</Item>
+					<Item title='Training' disabled={!this.domainStore.trainingPanelCanBeEnabled()}>
+						<TrainingPanel
+							uiStore={this.uiStore}
+							domainStore={this.domainStore}
+						/>
+					</Item>
+					<Item title='Testing' disabled={!this.domainStore.testingPanelCanBeEnabled()}>
+						<TestingPanel
+							uiStore={this.uiStore}
+							domainStore={this.domainStore}
+							testingManager={this.testingManager}
+						/>
+					</Item>
+				</TabPanel>
+			);
+		}
+
+		public render() {
+
+			return (
+				<div>
+					<div className="storyq">
+						{this.renderTabPanel()}
+					</div>
+				</div>
+			);
+		}
+	}
+)
+export default Storyq;
diff --git a/src/components/target_info_pane.tsx b/src/components/target_info_pane.tsx
new file mode 100644
index 0000000..c76bb40
--- /dev/null
+++ b/src/components/target_info_pane.tsx
@@ -0,0 +1,46 @@
+/**
+ * This component manages the lower part of the TargetPanel
+ */
+
+import React, {Component} from "react";
+import {observer} from "mobx-react";
+import {DomainStore} from "../stores/domain_store";
+
+export interface TargetInfoPane_Props {
+	domainStore: DomainStore
+}
+
+export const TargetInfoPane = observer(class TargetInfoPane extends Component<TargetInfoPane_Props, {}> {
+
+	render() {
+
+		function getInfo() {
+			if (tTargetStore.targetDatasetInfo.title !== '') {
+				const tPosName = tTargetStore.targetClassNames[tTargetStore.targetChosenClassColumnKey],
+					tNegKey = tTargetStore.targetChosenClassColumnKey === 'left' ? 'right' : 'left',
+					tNegName = tTargetStore.targetClassNames[tNegKey]
+				return (
+					<div className='sq-info-row'>
+						<div className='sq-info-column'>
+							<p>Text: <strong>{tTargetStore.targetAttributeName}</strong></p>
+							<p>Labels: <strong>{tTargetStore.targetClassAttributeName}</strong></p>
+						</div>
+						<div className='sq-info-column'>
+							<p>Target Label: <strong>{tPosName}</strong></p>
+							<p>Other Label(s): <strong>{tNegName}</strong></p>
+						</div>
+					</div>
+				)
+			}
+		}
+
+		let tTargetStore = this.props.domainStore.targetStore
+
+		return (
+			<div className='sq-target-info-pane'>
+				<h1>Training Data: {tTargetStore.targetDatasetInfo.title}</h1>
+				{getInfo()}
+			</div>
+		);
+	}
+})
\ No newline at end of file
diff --git a/src/components/target_panel.tsx b/src/components/target_panel.tsx
new file mode 100644
index 0000000..639be80
--- /dev/null
+++ b/src/components/target_panel.tsx
@@ -0,0 +1,360 @@
+/**
+ * This component lists constructed features and provides an interface for construction and deletion
+ */
+
+import React, {Component} from "react";
+import codapInterface from "../lib/CodapInterface";
+import {TargetTextArea} from "./target_text_area";
+import {action, toJS} from "mobx";
+import {DomainStore} from "../stores/domain_store";
+import {observer} from "mobx-react";
+import {UiStore} from "../stores/ui_store";
+import {choicesMenu} from "./component_utilities";
+import {SQ} from "../lists/lists";
+
+export interface Target_Props {
+	uiStore: UiStore
+	domainStore: DomainStore
+}
+
+export const TargetPanel = observer(class TargetPanel extends Component<Target_Props, {}> {
+
+	private targetPanelConstants = {
+		createNewEntityInfo: {
+			title: 'Create your own'/*'NEW'*/,
+			name: 'NEW',
+			id: 0
+		}
+	}
+
+	private currState: 'welcome' | 'chosen-no-target-attribute' | 'chosen-no-target-label-attribute' |
+		'chosen-no-chosen-pos-class' | 'chosen-complete' | 'create' = 'welcome'
+
+	public async componentDidMount() {
+		await this.updateTargetPanelInfo();
+	}
+
+	async updateTargetPanelInfo(iPropName?: string | null, iValue?: any) {
+		await this.props.domainStore.targetStore.updateFromCODAP(iPropName, iValue)
+	}
+
+	render() {
+
+		function welcomeText() {
+			if (this_.currState === 'welcome')
+				return (
+					<div className='sq-welcome'>
+						<h1>Welcome to StoryQ!</h1>
+						<p>StoryQ is a tool for learning how to train computer models to classify text. For example, you
+							can train models to recognize intents, filter spam emails, or detect emotions in social media feeds.
+							The possibilities are endless!</p>
+					</div>
+				)
+		}
+
+		function chooseDatasetMenu() {
+
+			function instructions() {
+				if (this_.currState === 'welcome')
+					if(tDatasetInfoArray.length === 0) {
+						return (
+							<div className='sq-info-prompt'>
+								<p>Ready to begin?</p>
+								<p>First, prepare data to train your model by
+dragging a 'csv' data file with your data into CODAP or choosing <em>Create a new dataset</em> from the dropdown menu.</p>
+							</div>
+						)
+					}
+				else {
+						return (
+							<div className='sq-info-prompt'>
+								<p>Ready to begin?</p>
+								<p>First, prepare data to train your model.</p>
+							</div>
+						)
+					}
+			}
+
+			function menu() {
+
+				async function handleChoice(iChoice: string) {
+					tTargetStore.resetTargetDataForNewTarget()
+					let newInfo = toJS(tDatasetInfoArray.find(iInfo => iInfo.title === iChoice)) ||
+						this_.targetPanelConstants.createNewEntityInfo;
+					if (newInfo.title !== this_.targetPanelConstants.createNewEntityInfo.title) {
+						tTargetStore.targetDatasetInfo = newInfo;
+						await this_.updateTargetPanelInfo()
+						action(()=> {
+							tTargetStore.targetPanelMode = 'chosen'
+						})()
+					} else if(iChoice === tNewDatasetChoice) {
+						let tContextName = 'Training Data',
+							n = 1
+						while(tDatasetChoices.includes(tContextName)) {
+							tContextName = 'Training Data ' + n
+							n++
+						}
+						const tResults:any = await codapInterface.sendRequest([
+							{
+								"action": "create",
+								"resource": "dataContext",
+								"values": {
+									"name": tContextName,
+									"title": tContextName,
+									"collections": [ {
+										"name": "Texts",
+										"title": "Texts",
+										"labels": {
+											"singleCase": "text",
+											"pluralCase": "texts"
+										},
+										"attrs": [
+											{ "name": "text" },
+											{ "name": "label" }
+										]
+									}]
+								}
+							},
+							{
+								action: 'create',
+								resource: 'component',
+								values: {
+									type: 'caseTable',
+									name: tContextName,
+									title: tContextName,
+									dataContext: tContextName
+								}
+							}
+						])
+						tTargetStore.targetDatasetInfo = {
+							title: tContextName,
+							name: tContextName,
+							id: tResults[0].values.id
+						}
+						action(()=> {
+							tTargetStore.targetPanelMode = 'chosen'
+						})()
+					}
+				}
+
+				const tNewDatasetChoice = 'Create a new dataset',
+					tPrompt = this_.currState === 'welcome' ? 'Choose the training data' : 'Training data',
+					tValue = (tTargetStore.targetDatasetInfo === this_.targetPanelConstants.createNewEntityInfo) ?
+						'' : tTargetStore.targetDatasetInfo.title,
+					tDatasetChoices: string[] = (tDatasetInfoArray.map(iInfo => iInfo.title)),
+					tHint = tValue === '' ? SQ.hints.targetDatasetChoices : SQ.hints.targetDatasetChosen
+				tDatasetChoices.push( tNewDatasetChoice)
+				return (
+					choicesMenu(tPrompt, 'Choose from',
+						tHint, tDatasetChoices, tValue, 'No datasets to choose from', handleChoice)
+				)
+			}
+
+			return (
+				<div>
+					{instructions()}
+					{menu()}
+				</div>
+			)
+		}
+
+/*
+		function createButton() {
+			if (tMode === 'welcome')
+				return (
+					<div>
+						<p className='sq-connect-text'>or</p>
+						<Button
+							className='sq-button'
+							onClick={action(() => {
+								tTargetStore.targetPanelMode = 'create'
+							})}
+							hint={'Click here to classify your text in real time.'}
+						>
+							Create text data from scratch
+						</Button>
+					</div>
+				)
+		}
+*/
+
+		function chosenMode() {
+
+			function targetAttributeInstructions() {
+				if (this_.currState === 'chosen-no-target-attribute') {
+					return (
+						<div className='sq-info-prompt'>
+							<p>What <strong>text</strong> will you use to train your model?</p>
+						</div>
+					)
+				}
+			}
+
+			function targetLabelsInstructions() {
+				if (this_.currState === 'chosen-no-target-label-attribute') {
+					return (
+						<div className='sq-info-prompt'>
+							<p>What <strong>labels</strong> will you use to train your model?</p>
+						</div>
+					)
+				}
+			}
+
+			function targetAttributeChoice() {
+				const tPrompt = this_.currState === 'chosen-no-target-attribute' ?
+					'Choose the column that has the text' : 'Text',
+					tHint = this_.currState === 'chosen-no-target-attribute' ?
+						SQ.hints.targetAttributeChoices : SQ.hints.targetAttributeChosen
+				if (tTargetStore.targetAttributeNames.length > 0) {
+					return choicesMenu(tPrompt, 'Choose from',
+						tHint,
+						tTargetStore.targetAttributeNames,
+						tTargetStore.targetAttributeName, 'No attributes to choose from',
+						async (iChoice) => {
+							tTargetStore.targetAttributeName = iChoice
+							await this_.updateTargetPanelInfo()
+							this_.props.domainStore.addTextComponent()
+						})
+				}
+			}
+
+			function targetClassChoice() {
+				const tPrompt = this_.currState === 'chosen-no-target-label-attribute' ?
+					'Choose the column that has the labels' : 'Labels',
+					tHint = this_.currState === 'chosen-no-target-label-attribute' ?
+						SQ.hints.targetClassAttributeChoices : SQ.hints.targetClassAttributeChosen
+				if (tTargetStore.targetAttributeName !== '') {
+					const tCandidateAttributeNames = tTargetStore.targetAttributeNames.filter((iName) => {
+						return this_.props.domainStore.featureStore.features.findIndex(aFeature => aFeature.name === iName) < 0
+					})
+					return choicesMenu(tPrompt,
+						'Choose an attribute with labels',
+						tHint,
+						tCandidateAttributeNames,
+						tTargetStore.targetClassAttributeName, 'No attributes to choose from', async (iChoice) => {
+							await this_.updateTargetPanelInfo('targetClassAttributeName', iChoice)
+						})
+				}
+			}
+
+			function lowerPanel() {
+				if (tTargetStore.targetCases.length > 0) {
+					return (
+						<TargetTextArea
+							uiStore={this_.props.uiStore}
+							domainStore={this_.props.domainStore}>
+						</TargetTextArea>
+					)
+				}
+			}
+
+			function positiveClassInstructions() {
+				if (this_.currState === 'chosen-no-chosen-pos-class') {
+					if (tTargetStore.targetCases.length > 0) {
+						if(tTargetStore.targetClassAttributeValues.length === 2) {
+							return (
+								<div className='sq-info-prompt'>
+									<p
+										title={SQ.hints.positiveClassInstructions}>
+										Choose your target label.</p>
+								</div>
+							)
+						}
+						else {
+							const tRightColumnKey = 'right',
+								tLeftColumnKey = 'left',
+								tLeftColumnValue = tTargetStore.targetClassNames[tLeftColumnKey]
+							return (
+								choicesMenu('Choose a target label', 'Your choice',
+									SQ.hints.targetLabelChoices,
+									tTargetStore.targetClassAttributeValues,
+									tLeftColumnValue, 'No labels were found',
+									action((e)=>{
+										tTargetStore.targetClassNames[tLeftColumnKey] = e
+										tTargetStore.targetClassNames[tRightColumnKey] = tTargetStore.targetClassAttributeValues.slice(0, 3)
+											.filter((iValue:string)=>iValue!== e).join(',') + '…'
+									}))
+							)
+						}
+					}
+				}
+			}
+
+			if (tTargetStore.targetPanelMode === 'chosen') {
+				return (
+					<div>
+						{targetAttributeInstructions()}
+						<div className='sq-target-choices-panel'>
+							{targetAttributeChoice()}
+						</div>
+						{targetLabelsInstructions()}
+						{targetClassChoice()}
+						{positiveClassInstructions()}
+						{lowerPanel()}
+					</div>
+				)
+			}
+		}
+
+		function createMode() {
+			if (tTargetStore.targetPanelMode === 'create')
+				return (
+					<div className='sq-welcome'>
+						<h1>Sorry, It's not yet possible to create a dataset from scratch.</h1>
+					</div>
+				)
+		}
+
+		function onwardInstructions() {
+			if (this_.currState === 'chosen-complete') {
+				return (
+					<div className='sq-info-prompt'
+							 title={SQ.hints.onwardInstructions}>
+						<p>Continue preparing your training data in <span
+							title={SQ.hints.featuresDef}
+							onClick={action(() => this_.props.domainStore.setPanel(1))}
+							style={{cursor: 'pointer'}}
+						>
+								<strong>Features.</strong></span></p>
+					</div>
+				)
+			}
+		}
+
+		function computeState() {
+			switch (tMode) {
+				case 'welcome':
+					this_.currState = tMode
+					break;
+				case 'chosen':
+					if (tTargetStore.targetAttributeName === '')
+						this_.currState = 'chosen-no-target-attribute'
+					else if (tTargetStore.targetClassAttributeName === '')
+						this_.currState = 'chosen-no-target-label-attribute'
+					else if (tTargetStore.targetChosenClassColumnKey === '')
+						this_.currState = 'chosen-no-chosen-pos-class'
+					else
+						this_.currState = 'chosen-complete'
+					break;
+				case 'create':
+					this_.currState = tMode
+			}
+		}
+
+		const this_ = this,
+			tTargetStore = this.props.domainStore.targetStore,
+			tDatasetInfoArray = tTargetStore.datasetInfoArray,
+			tMode = tTargetStore.targetPanelMode
+		computeState()
+		return (
+			<div className='sq-target-panel'>
+				{welcomeText()}
+				{chooseDatasetMenu()}
+				{/*{createButton()}*/}
+				{chosenMode()}
+				{createMode()}
+				{onwardInstructions()}
+			</div>
+		);
+	}
+})
\ No newline at end of file
diff --git a/src/components/target_text_area.tsx b/src/components/target_text_area.tsx
new file mode 100644
index 0000000..fe19958
--- /dev/null
+++ b/src/components/target_text_area.tsx
@@ -0,0 +1,119 @@
+/**
+ * This component manages the lower part of the TargetPanel
+ */
+
+import React, {Component} from "react";
+import {observer} from "mobx-react";
+import {DomainStore} from "../stores/domain_store";
+import {UiStore} from "../stores/ui_store";
+import {RadioGroup} from "devextreme-react";
+import {action} from "mobx";
+import {SQ} from "../lists/lists";
+
+export interface TargetTextArea_Props {
+	domainStore: DomainStore
+	uiStore: UiStore
+}
+
+export const TargetTextArea = observer(class TargetTextArea extends Component<TargetTextArea_Props, {}> {
+
+	showRefs() {
+		/*
+				const tParagraphs = this.props.domainStore.targetStore.textRefs.map(
+					(iRef) => {
+						return (iRef.ref && iRef.ref.current && iRef.ref.current.getBoundingClientRect) ?
+							`${iRef.ownerCaseID}: ${JSON.stringify(iRef.ref.current.getBoundingClientRect().y)}` : 'no rect'
+					})
+				console.log(tParagraphs)
+		*/
+	}
+
+	render() {
+		// const tTextRefs = this.props.domainStore.targetStore.textRefs
+
+		function getTexts(iClassName: string) {
+			const tTargetAttr = tTargetStore.targetAttributeName
+			const tClassAttr = tTargetStore.targetClassAttributeName
+			if (tTargetStore.targetCases.length > 0) {
+				const tFilteredCases = tTargetStore.targetCases.filter(iCase => {
+					return iClassName === '' || iCase.values[tClassAttr] === iClassName
+				})
+				// const tTempRef = React.createRef()
+				return (
+					<div className='sq-text-container'>
+						<div className='sq-target-texts'>
+							{tFilteredCases.slice(0, 40).map((iCase, iIndex) => {
+								// const tReactRef = iClassName === '' ? tTextRefs[iIndex].ref : tTempRef
+								return <p className='sq-text-card'
+													key={iIndex}
+									/*ref={tReactRef}*/>
+									{iCase.values[tTargetAttr]}
+								</p>
+							})}
+						</div>
+					</div>
+				)
+			}
+		}
+
+		/**
+		 * If index is zero we want the radio button for the 'left' column
+		 * @param index
+		 */
+		function getTargetClassName(index: number) {
+			if( tTargetStore.targetClassAttributeValues.length === 2) {
+				const
+					tDesiredColumnValue = index === 0 ? tLeftColumnValue : tRightColumnValue
+				return (
+					<div className='sq-target-choice'>
+						<RadioGroup
+							items={[tDesiredColumnValue]}
+							value={tChosenColumnValue}
+							onValueChange={action((e) => {
+								if (e) {
+									tTargetStore.targetChosenClassColumnKey =
+										index === 0 ? tLeftColumnKey : tRightColumnKey
+								}
+							})}
+							hint={SQ.hints.targetTwoGroups}
+						/>
+					</div>
+				)
+			}
+		}
+
+		const tTargetStore = this.props.domainStore.targetStore,
+			tTargetClassNames = tTargetStore.targetClassNames,
+			tLeftColumnKey = tTargetStore.targetLeftColumnKey,
+			tLeftColumnValue = tTargetStore.targetClassNames[tLeftColumnKey],
+			tRightColumnKey = tLeftColumnKey === 'left' ? 'right' : 'left',
+			tRightColumnValue = tTargetStore.targetClassNames[tRightColumnKey],
+			tChosenColumnKey = tTargetStore.targetChosenClassColumnKey,
+			tChosenColumnValue = tTargetStore.targetClassNames[tChosenColumnKey]
+		if (tTargetStore.targetClassAttributeName !== '') {
+			const tLeftClassName = tTargetClassNames[tLeftColumnKey],
+				tRightClassName = tTargetClassNames[tRightColumnKey]
+			this.showRefs()
+			return (
+				<div className='sq-target-lower-panel'>
+					<div className='sq-target-text-panel'>
+						{getTargetClassName(0)}
+						{getTexts(tLeftClassName)}
+					</div>
+					<div className='sq-target-text-panel'>
+						{getTargetClassName(1)}
+						{getTexts(tRightClassName)}
+					</div>
+				</div>
+			);
+		} else if (tTargetStore.targetAttributeName !== '') {
+			return (
+				<div className='sq-target-lower-panel'>
+					<div className='sq-target-text-panel'>
+						{getTexts('')}
+					</div>
+				</div>
+			)
+		}
+	}
+})
diff --git a/src/components/testing_panel.tsx b/src/components/testing_panel.tsx
new file mode 100644
index 0000000..8e9dbff
--- /dev/null
+++ b/src/components/testing_panel.tsx
@@ -0,0 +1,219 @@
+/**
+ * This component shows under the Testing tab
+ */
+
+import React, {Component} from "react";
+import {DomainStore} from "../stores/domain_store";
+import {observer} from "mobx-react";
+import {UiStore} from "../stores/ui_store";
+import codapInterface, {CODAP_Notification} from "../lib/CodapInterface";
+import {choicesMenu} from "./component_utilities";
+import Button from "devextreme-react/button";
+import {action, toJS} from "mobx";
+import {TestingManager} from "../managers/testing_manager";
+import {SQ} from "../lists/lists";
+
+export const kNonePresent = 'None present';
+
+export interface Testing_Props {
+	uiStore: UiStore
+	domainStore: DomainStore
+	testingManager: TestingManager
+}
+
+export const TestingPanel = observer(class TestingPanel extends Component<Testing_Props> {
+
+	testingManager: TestingManager
+
+	constructor(props: Testing_Props) {
+		super(props);
+		this.handleDataContextNotification = this.handleDataContextNotification.bind(this)
+		codapInterface.on('notify', '*', '', this.handleDataContextNotification);
+
+		this.testingManager = props.testingManager;
+	}
+
+	async handleDataContextNotification(iNotification: CODAP_Notification) {
+		if (iNotification.action === 'notify') {
+			if (iNotification.values.operation === 'dataContextCountChanged') {
+				await this.updateCodapInfo();
+			} else if (iNotification.values.operation === 'titleChange') {
+				action(() => {
+					this.props.domainStore.testingStore.testingDatasetInfo.name = ''
+				})()
+				await this.updateCodapInfo()
+			}
+		}
+	}
+
+	async updateCodapInfo() {
+		await this.props.domainStore.testingStore.updateCodapInfoForTestingPanel()
+	}
+
+	render() {
+		const this_ = this,
+			tTestingStore = this.props.domainStore.testingStore,
+			tTestingClassAttributeName = tTestingStore.testingClassAttributeName,
+			tNumModels = this.props.domainStore.trainingStore.trainingResults.length,
+			tTestingResults = tTestingStore.testingResultsArray
+
+
+		function testingInstructions() {
+			if (tTestingResults.length === 0) {
+				return (
+					<div className='sq-info-prompt'>
+						<p>Test your model{tNumModels > 1 ? 's' : ''} on new data.</p>
+					</div>
+				)
+			} else {
+				return (
+					<div className='sq-info-prompt'>
+						<p>You've tested {tTestingResults.length} time{tTestingResults.length > 1 ? 's' : ''}. Test again?</p>
+						<p>Note that if you add new texts to {tTestingStore.testingDatasetInfo.title}, the testing results will
+							update.</p>
+					</div>
+				)
+			}
+		}
+
+		function getModelChoice() {
+			const tModelChoices = this_.props.domainStore.trainingStore.trainingResults.map(iResult => iResult.name),
+				tPrompt = this_.props.domainStore.testingStore.chosenModelName === '' ? 'Choose a model to test'
+					: 'The model to test'
+			return choicesMenu(tPrompt, 'Choose a model',
+				SQ.hints.testingModelChoices,
+				tModelChoices,
+				this_.props.domainStore.testingStore.chosenModelName, 'No models to choose from', async (iChoice) => {
+					this_.props.domainStore.testingStore.chosenModelName = iChoice
+					await this_.updateCodapInfo()
+				})
+		}
+
+		function getTestingDatasetChoice() {
+			const tDatasetInfoArray = tTestingStore.testingDatasetInfoArray,
+				tDatasetNames = tDatasetInfoArray.map(iEntity => iEntity.title)
+			return choicesMenu('Choose a data set', 'Your choice',
+				SQ.hints.testingDatasetChoices,
+				tDatasetNames,
+				tTestingStore.testingDatasetInfo.title,
+				'',
+				async (iChoice) => {
+					const tChosenInfo = tDatasetInfoArray.find(iInfo => iInfo.title === iChoice)
+					if (tChosenInfo)
+						tTestingStore.testingDatasetInfo = tChosenInfo
+					await this_.updateCodapInfo()
+				})
+		}
+
+		function getTestingAttributeChoice() {
+			if (tTestingStore.testingDatasetInfo.title !== '') {
+				const tAttributeNames = tTestingStore.testingAttributeNames
+				return choicesMenu('Choose the column with text', 'Choose a column',
+					SQ.hints.testingColumnChoices,
+					tAttributeNames,
+					tTestingStore.testingAttributeName,
+					'',
+					async (iChoice) => {
+						tTestingStore.testingAttributeName = iChoice
+						await this_.updateCodapInfo()
+					})
+			}
+		}
+
+		function getClassAttributeChoice() {
+			if (tTestingStore.testingDatasetInfo.title !== '') {
+				const tAttributeNames: string[] = toJS(tTestingStore.testingAttributeNames)
+				tAttributeNames.unshift(kNonePresent)
+				return choicesMenu('Choose the column with the labels (optional)', 'Choose a column',
+					SQ.hints.testingLabelsChoices,
+					tAttributeNames,
+					tTestingClassAttributeName,
+					'',
+					async (iChoice: string) => {
+						tTestingStore.testingClassAttributeName = iChoice
+						await this_.updateCodapInfo()
+					})
+			}
+		}
+
+		function getTestButton() {
+			const
+				tTestingDatasetName = tTestingStore.testingDatasetInfo.title,
+				tChosenModelName = tTestingStore.chosenModelName,
+				tTestingAttributeName = tTestingStore.testingAttributeName,
+				tDisabled = tTestingDatasetName === '' || tChosenModelName === '' || tTestingAttributeName === '',
+				// The following hint doesn't display if the button is disabled. See
+				// https://supportcenter.devexpress.com/ticket/details/t844498/button-how-to-add-tooltip-to-disabled-button
+				// for suggested solution
+				tHint = tTestingDatasetName === '' ? SQ.hints.testingChooseDataset :
+					(tChosenModelName === '' ? SQ.hints.testingChooseModel :
+						(tTestingAttributeName === '' ? SQ.hints.testingChooseAttribute :
+							SQ.hints.testingTest))
+			return (
+				<div className='sq-training-buttons'>
+					<Button
+						className='sq-button'
+						disabled={tDisabled}
+						onClick={action(async () => {
+							await this_.testingManager.classify(true)
+						})}
+						hint={tHint}>
+						Test
+					</Button>
+				</div>
+			)
+		}
+
+		function showResults() {
+
+			function getRows() {
+				return tTestingResults.map((iResult, iIndex) => {
+					return (
+						<tr key={iIndex}>
+							<td style={{textAlign: 'center'}}>{iResult.modelName}</td>
+							<td>{iResult.targetDatasetTitle}</td>
+							<td
+								style={{textAlign: 'right'}}>{iResult.accuracy !== 0 ? (100 * iResult.accuracy).toFixed(1) + '%' : 'NA'}</td>
+						</tr>
+					)
+				})
+			}
+
+			if (tTestingResults.length > 0) {
+				return (
+					<div>
+						<table>
+							<thead>
+							<tr>
+								<th style={{textAlign: 'center'}} title={SQ.hints.testResultsName}>Model Name</th>
+								<th style={{textAlign: 'center'}}
+										title={SQ.hints.testResultsDataset}>Data set
+								</th>
+								<th style={{textAlign: 'center'}}
+										title={SQ.hints.testResultsAccuracy}>
+									Accuracy
+								</th>
+							</tr>
+							</thead>
+							<tbody>
+							{getRows()}
+							</tbody>
+						</table>
+					</div>
+				)
+			}
+		}
+
+		return (
+			<div className='sq-feature-panel'>
+				{testingInstructions()}
+				{getModelChoice()}
+				{getTestingDatasetChoice()}
+				{getTestingAttributeChoice()}
+				{getClassAttributeChoice()}
+				{getTestButton()}
+				{showResults()}
+			</div>
+		)
+	}
+})
\ No newline at end of file
diff --git a/src/components/training_pane.tsx b/src/components/training_pane.tsx
new file mode 100644
index 0000000..a85887f
--- /dev/null
+++ b/src/components/training_pane.tsx
@@ -0,0 +1,389 @@
+/**
+ * This component provides the space for a user to name and run a model
+ */
+
+import React, {Component} from "react";
+import {DomainStore} from "../stores/domain_store";
+import {observer} from "mobx-react";
+import {UiStore} from "../stores/ui_store";
+import {TextBox} from "devextreme-react";
+import {action} from "mobx";
+import Button from "devextreme-react/button";
+import {CheckBox} from "devextreme-react/check-box";
+import {ModelManager} from "../managers/model_manager";
+import {ProgressBar} from "./progress_bar";
+import {TrainingResult} from "../stores/store_types_and_constants";
+import {SQ} from "../lists/lists";
+
+export interface Training_Props {
+	uiStore: UiStore
+	domainStore: DomainStore
+}
+
+export const TrainingPane = observer(class TrainingPane extends Component<Training_Props, {}> {
+
+	private modelManager: ModelManager
+	private nameBoxRef:any
+
+	constructor(props: any) {
+		super(props);
+		this.nameBoxRef = React.createRef()
+		this.modelManager = new ModelManager(this.props.domainStore)
+	}
+
+	render() {
+		const this_ = this,
+			tModel = this.props.domainStore.trainingStore.model,
+			tNumResults = this.props.domainStore.trainingStore.trainingResults.length
+
+		function modelTrainerInstructions() {
+			if (!tModel.beingConstructed) {
+				if (tNumResults === 0) {
+					return (
+						<div className='sq-info-prompt'>
+							<p>Train your model with the features you have prepared.</p>
+						</div>
+					)
+				}
+				else {
+					return (
+						<div className='sq-info-prompt'>
+							<p>You have trained {tNumResults} model{tNumResults > 1 ? 's' : ''}. Train another or
+							proceed to <span
+									onClick={action(()=>this_.props.domainStore.setPanel(3))}
+									style={{cursor: 'pointer'}}
+								>
+								<strong>Testing</strong></span>.</p>
+						</div>
+					)
+				}
+			} else if (tModel.name === '') {
+				return (
+					<div className='sq-info-prompt'>
+						<p>Your model must have a name before you can train it.</p>
+					</div>
+				)
+			}
+			else {
+				return (
+					<div className='sq-info-prompt'>
+						<p>You can start training your model.</p>
+					</div>
+				)
+			}
+		}
+
+		function modelTrainer() {
+			const tFeatureString = this_.props.domainStore.featureStore.features.length < 2 ? 'this feature' : 'these features'
+
+			function nameBox() {
+				return (
+					<TextBox
+						className='sq-fc-part'
+						ref = {this_.nameBoxRef}
+						valueChangeEvent={'blur'}
+						placeholder="Name"
+						onValueChanged={action((e) => {
+							tModel.name = e.value
+						})}
+						onFocusOut={action(() => {
+							tModel.name = this_.modelManager.guaranteeUniqueModelName(tModel.name)
+						})}
+						onEnterKey={()=>this_.nameBoxRef.current.instance.blur()}
+						value={tModel.name}
+						maxLength={20}
+					/>
+				)
+			}
+
+			function featureList() {
+				return (
+					<div className='sq-indent'>
+						<ul>
+							{this_.props.domainStore.featureStore.getChosenFeatures().map((iFeature, iIndex) => {
+								return (
+									<li key={iIndex}><strong>{iFeature.name}</strong></li>
+								)
+							})}
+						</ul>
+					</div>
+				)
+			}
+
+			function getButtons() {
+
+				function trainButton() {
+					if (!tInProgress) {
+						const tHint = tInStepMode ? SQ.hints.trainingStep : SQ.hints.trainingTrain
+						return (
+							<Button
+								className='sq-button'
+								disabled={tDisabled}
+								onClick={action(async () => {
+									if (tInStepMode) {
+										this_.props.domainStore.trainingStore.model.trainingInStepMode = false
+									} else {
+										this_.props.uiStore.trainingPanelShowsEditor = false
+										this_.props.domainStore.trainingStore.model.trainingInProgress = true
+										await this_.modelManager.buildModel()
+										this_.modelManager.nextStep()
+									}
+								})}
+								hint={tHint}>
+								{tInStepMode ? 'Finish' : 'Train'}
+							</Button>)
+					}
+				}
+
+				function stepButton() {
+					if (!tInProgress || tInStepMode)
+						return (
+							<Button
+								className='sq-button'
+								disabled={tDisabled}
+								onClick={action(async () => {
+									const tInProgress = this_.props.domainStore.trainingStore.model.trainingInProgress
+									if (!tInProgress) {
+										this_.props.uiStore.trainingPanelShowsEditor = false
+										this_.props.domainStore.trainingStore.model.trainingInProgress = true
+										this_.props.domainStore.trainingStore.model.trainingInStepMode = true
+										await this_.modelManager.buildModel()
+									} else {
+										this_.modelManager.nextStep()
+									}
+								})}
+								hint={SQ.hints.trainingOneStep}>
+								Step
+							</Button>
+						)
+				}
+
+				function settingsButton() {
+					if (!tInStepMode && !tInProgress)
+						return (
+							<Button
+								className='sq-button'
+								onClick={action(() => {
+									this_.props.uiStore.trainingPanelShowsEditor = !this_.props.uiStore.trainingPanelShowsEditor
+								})}
+								hint={SQ.hints.trainingSettings}>
+								Settings
+							</Button>
+						)
+				}
+
+				function cancelButton() {
+					return (
+						<Button
+							className='sq-button'
+							onClick={action(async () => {
+								await this_.modelManager.cancel()
+							})}
+							hint={SQ.hints.trainingCancel}>
+							Cancel
+						</Button>
+					)
+				}
+
+				const tDisabled = this_.props.domainStore.trainingStore.model.name === '',
+					tInProgress = this_.props.domainStore.trainingStore.model.trainingInProgress,
+					tInStepMode = this_.props.domainStore.trainingStore.model.trainingInStepMode
+				return (
+					<div className='sq-training-buttons'>
+						{trainButton()}
+						{stepButton()}
+						{settingsButton()}
+						{cancelButton()}
+					</div>
+				)
+			}
+
+			function getSettingsPanel() {
+				function iterationsBox() {
+					return (
+						<TextBox
+							className='sq-fc-part'
+							valueChangeEvent={'keyup'}
+							placeholder="give your model a name"
+							hint={SQ.hints.trainingSetupIteration}
+							onValueChanged={action((e) => {
+								tModel.iterations = Number(e.value)
+							})}
+							value={String(tModel.iterations)}
+							maxLength={4}
+							width={40}
+						/>
+					)
+				}
+
+				function getCheckbox(iValue: boolean, iLabel: string, iHint: string, setter: (e: any) => void) {
+					return (
+						<CheckBox
+							text={iLabel}
+							hint={iHint}
+							value={iValue}
+							onValueChanged={
+								action((e) => {
+									setter(e)
+								})
+							}
+						/>)
+				}
+
+				if (this_.props.uiStore.trainingPanelShowsEditor) {
+					return (
+						<div className='sq-training-settings-panel'>
+							<div className='sq-fc-part'>
+								<p style={{width: '50px'}}>Model Settings</p>
+							</div>
+							<div className='sq-training-settings'>
+								<div className='sq-training-iterations'>
+									<span title={SQ.hints.trainingSetupIteration}>Iterations:</span>{iterationsBox()}
+								</div>
+								<div className='sq-training-checkboxes'>
+									{getCheckbox(this_.props.domainStore.trainingStore.model.lockInterceptAtZero,
+										'Lock intercept at 0',
+										SQ.hints.trainingLockIntercept,
+										(e) => {
+											this_.props.domainStore.trainingStore.model.lockInterceptAtZero = e.value
+										})}
+									{getCheckbox(this_.props.domainStore.trainingStore.model.usePoint5AsProbThreshold,
+										'Use 50% as probability threshold',
+										SQ.hints.trainingPointFiveAsThreshold,
+										(e) => {
+											this_.props.domainStore.trainingStore.model.usePoint5AsProbThreshold = e.value
+										})}
+								</div>
+							</div>
+						</div>
+					)
+				}
+			}
+
+			function getProgressBar() {
+				if (this_.props.domainStore.trainingStore.model.trainingInProgress) {
+					const tIterations = this_.props.domainStore.trainingStore.model.iterations,
+						tCurrentIteration = this_.props.domainStore.trainingStore.model.iteration
+					return (
+						<ProgressBar
+							percentComplete={Math.round(100 * tCurrentIteration / tIterations)}
+						/>)
+				}
+			}
+
+			if (!tModel.beingConstructed) {
+				return (
+					<Button
+						className='sq-button'
+						onClick={action(async () => {
+							tModel.reset()
+							tModel.beingConstructed = true
+						})}
+						hint={SQ.hints.trainingNewModel}>
+						+ New Model
+					</Button>
+				)
+			} else {
+				return (
+					<div className='sq-component'>
+						<div className='sq-component'>
+							<span className='sq-fc-part'> Give your model a name:</span>{nameBox()}
+						</div>
+						<div>
+							<p>Once trained,
+								<strong>{tModel.name === '' ? 'your model ' : ' ' + (tModel.name + ' ')}</strong>
+								will contain {tFeatureString}:</p>
+							{featureList()}
+						</div>
+						{getButtons()}
+						{getSettingsPanel()}
+						{getProgressBar()}
+					</div>
+				)
+			}
+		}
+
+		function getModelResults() {
+
+			function getIsActiveButon(iIndex: number) {
+				const tTrainingResult = tResults[iIndex],
+					tIsDisabled = tResults.length < 2,
+					tHint = tTrainingResult.isActive ? SQ.hints.trainingMakeModelInactive : SQ.hints.trainingMakeModelActive
+				return (
+					<td
+						style={{"textAlign": "center"}}
+					>
+						<CheckBox
+							text=''
+							value={tTrainingResult.isActive}
+							disabled={tIsDisabled}
+							style={{'fontSize': 'large'}}
+							onValueChange={action(() => {
+								this_.props.domainStore.setIsActiveForResultAtIndex(iIndex, !tTrainingResult.isActive)
+							})}
+							hint={tHint}
+						/>
+					</td>
+				)
+			}
+
+			function getSettings(aResult: TrainingResult) {
+				if (aResult.settings) {
+					return (
+						<div style={{"fontSize": "smaller", "textAlign": "left"}}>
+							<p>{aResult.settings.iterations} iterations</p>
+							<p>intercept {aResult.settings.locked ? '' : 'not'} locked</p>
+							<p>threshold = {(100 * aResult.threshold).toFixed(0)}%</p>
+						</div>
+					)
+				}
+			}
+
+			const tResults = this_.props.domainStore.trainingStore.trainingResults
+			if (tResults.length > 0) {
+				return (
+					<table>
+						<thead>
+						<tr>
+							<th
+								title={SQ.hints.trainingResultsActive}>
+								Active
+							</th>
+							<th>Model Name</th>
+							<th style={{textAlign:'center'}} title={SQ.hints.trainingResultsSettings}>Settings</th>
+							<th title={SQ.hints.trainingResultsAccuracy}>Accuracy</th>
+							{/*<th title={'This number is 0% when the model did no better than chance.'}>Kappa</th>*/}
+							<th title={SQ.hints.trainingResultsFeatures}>Features</th>
+						</tr>
+						</thead>
+						<tbody className='sq-model-table'>
+						{tResults.map((iResult, iIndex) => {
+							const tFeatureNames = iResult.featureNames && iResult.featureNames.map((iName, iIndex)=>{
+								return <p key={'f'+iIndex}>{iName}</p>
+							})
+							return (
+								<tr key={iIndex}>
+									{getIsActiveButon(iIndex)}
+									<td style={{textAlign:'center'}}>{iResult.name}</td>
+									<td>{getSettings(iResult)}</td>
+									<td style={{textAlign:'right'}}>{(100 * iResult.accuracy).toFixed(1)}%</td>
+									{/*<td>{(100 * iResult.kappa).toFixed(1)}%</td>*/}
+									<td>{tFeatureNames}</td>
+								</tr>)
+
+						})}
+						</tbody>
+					</table>
+				)
+			}
+		}
+
+		return (
+			<div className='sq-training-pane'>
+				{modelTrainerInstructions()}
+				{modelTrainer()}
+				{getModelResults()}
+			</div>
+		);
+	}
+})
\ No newline at end of file
diff --git a/src/components/training_panel.tsx b/src/components/training_panel.tsx
new file mode 100644
index 0000000..d38512b
--- /dev/null
+++ b/src/components/training_panel.tsx
@@ -0,0 +1,45 @@
+/**
+ * This component shows under the Training tab
+ */
+
+import React, {Component} from "react";
+import {DomainStore} from "../stores/domain_store";
+import {observer} from "mobx-react";
+import {UiStore} from "../stores/ui_store";
+import {TargetInfoPane} from "./target_info_pane";
+import {TrainingPane} from "./training_pane";
+
+export interface Training_Props {
+	uiStore: UiStore
+	domainStore: DomainStore
+}
+
+export const TrainingPanel = observer(class TrainingPanel extends Component<Training_Props, {}> {
+
+
+	constructor(props: any) {
+		super(props);
+		this.state = {
+			count: 0
+		};
+	}
+
+	async componentDidMount() {
+		await this.props.domainStore.updateNonNtigramFeaturesDataset()
+	}
+
+	render() {
+
+		return (
+			<div className='sq-feature-panel'>
+				<TargetInfoPane
+					domainStore={this.props.domainStore}
+				/>
+				<TrainingPane
+					uiStore={this.props.uiStore}
+					domainStore={this.props.domainStore}
+				/>
+			</div>
+		);
+	}
+})
\ No newline at end of file
diff --git a/src/data_manager.ts b/src/data_manager.ts
deleted file mode 100644
index 5574474..0000000
--- a/src/data_manager.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-import codapInterface from "./lib/CodapInterface";
-import {wordTokenizer} from "./lib/one_hot";
-
-export default class DataManager {
-
-	private dataContextID: number | undefined;
-
-	private dataSetString = (contextName: string) => `dataContext[${contextName}]`;
-	private dataSetIDString = () => `dataContext[${this.dataContextID}]`;
-
-	private wordMap: any = {};
-
-	public createDataContext(dataContextName: string) {
-		let this_ = this;
-		// Determine if CODAP already has the Data Context we need.
-		// If not, create it.
-		return codapInterface.sendRequest({
-				action: 'get',
-				resource: this.dataSetString(dataContextName)
-			}, function (result: { success: boolean; }) {
-				if (result && !result.success) {
-					codapInterface.sendRequest({
-						action: 'create',
-						resource: 'dataContext',
-						values: {
-							name: dataContextName,
-							title: dataContextName,
-							collections: [
-								{
-									name: 'items',
-									labels: {
-										pluralCase: "items",
-										setOfCasesWithArticle: "an item"
-									},
-									attrs: [{name: "word"}, {name: "count"}]
-								}
-							]
-						}
-					}, function (result: { success: boolean; values: any }) {
-						if (result && result.success) {
-							this_.dataContextID = result.values.id;
-						}
-					});
-				}
-			}
-		);
-	}
-
-	public deleteAll() {
-		codapInterface.sendRequest({
-			action: 'delete',
-			resource: this.dataSetIDString() + '.collection[items].allCases'
-		});
-	}
-
-	public async getSelectedWords():Promise<[] | string[]> {
-		let this_ = this,
-				tSelectedWords:string[] = [];
-		let tCasesRequest = [];
-		let tResult:any = await codapInterface.sendRequest({
-			action: 'get',
-			resource: `${this.dataSetIDString()}.selectionList`
-		});
-		if (tResult.success && Array.isArray(tResult.values)) {
-			tCasesRequest = tResult.values.map(function (iValue: { caseID:number }) {
-				return {
-					action: 'get',
-					resource: `${this_.dataSetIDString()}.caseByID[${iValue.caseID}]`
-				}
-			});
-			tResult = await codapInterface.sendRequest(tCasesRequest);
-			tSelectedWords = tResult.map( function( iCaseResult:any) {
-				return ( iCaseResult.success) ? ( iCaseResult.values.case.values.word) :
-					null;
-			});
-		}
-		return tSelectedWords;
-	}
-
-	public async processAndAddData(iText: string) {
-		/*
-				const commonWords = ['a', 'an', 'the', 'of', 'for', 'in', 'is', 'or', 'to', 'as', 'on', 'and', 'are', 'has',
-					'this', 'that', 'with'];
-		*/
-		let words = this.wordMap,
-			splitText: string[] = wordTokenizer(iText, false),
-			itemsToCreate: { word:string, count:number }[] = [],
-			itemsToDelete: string[] = [],
-			itemsToUpdate: { ID:number, count:number }[] = [],
-			tRequests: { action:string, resource:any, values?:any }[] = [],
-			tResults: any;
-
-		// Prepare wordMap
-		for (let key in words) {
-			if (words.hasOwnProperty(key)) {
-				words[key].state = 'untouched';
-				words[key].newCount = 0;
-			}
-		}
-
-		splitText.forEach(function (iString: string) {
-			// if (commonWords.indexOf(iString) < 0) {
-			if (!words[iString]) {
-				words[iString] = {count: 1, state: 'created', newCount: 1};
-			}
-			else {
-				words[iString].newCount++;
-				if( words[iString].state === 'untouched')
-					words[iString].state = 'changed';
-				if (words[iString].newCount > words[iString].count) {
-					words[iString].count++;
-					if(words[iString].state !== 'created')
-						words[iString].state = 'changed';
-				}
-				else if (words[iString].newCount === words[iString].count) {
-					words[iString].state = 'unchanged';
-				}
-			}
-			// }
-		});
-		for (let key in words) {
-			if (words.hasOwnProperty(key)) {
-				switch (words[key].state) {
-					case 'created':
-						itemsToCreate.push({word: key, count: words[key].count});
-						break;
-					case 'untouched':
-						itemsToDelete.push(words[key].itemID);
-						delete words[key];
-						break;
-					case 'changed':
-						words[key].count = words[key].newCount;
-						itemsToUpdate.push({ID: words[key].itemID, count: words[key].count})
-				}
-			}
-		}
-		if (itemsToCreate.length > 0) {
-			tRequests.push({
-				action: 'create',
-				resource: `${this.dataSetIDString()}.item`,
-				values: itemsToCreate
-			});
-		}
-		if (itemsToDelete.length > 0) {
-			itemsToDelete.forEach((itemID: string) => {
-				tRequests.push({
-					action: 'delete',
-					resource: `${this.dataSetIDString()}.itemByID[${itemID}]`,
-				});
-			});
-		}
-		if (itemsToUpdate.length > 0) {
-			itemsToUpdate.forEach((item: any) => {
-				tRequests.push({
-					action: 'update',
-					resource: `${this.dataSetIDString()}.itemByID[${item.ID}]`,
-					values: {count: item.count}
-				});
-			});
-		}
-
-		tResults = await codapInterface.sendRequest(tRequests);
-		// Store the item IDs of any created items
-		if (itemsToCreate.length > 0) {
-			for (let i = 0; i < itemsToCreate.length; i++) {
-				let word = itemsToCreate[i].word;
-				words[word].itemID = tResults[0].itemIDs[i];
-			}
-		}
-
-	}
-
-	public async restoreFromStorage( iStorage: any) {
-		this.dataContextID = iStorage.dataContextID;
-		if( this.dataContextID) {
-			codapInterface.sendRequest({
-				action: "delete",
-				resource: `${this.dataSetIDString()}.collection[items].allCases`
-			});
-		}
-	}
-
-	createStorage():any {
-		return {
-			dataContextID: this.dataContextID
-		}
-	}
-
-}
-
diff --git a/src/feature_constructor.tsx b/src/feature_constructor.tsx
deleted file mode 100644
index ddfbc00..0000000
--- a/src/feature_constructor.tsx
+++ /dev/null
@@ -1,416 +0,0 @@
-/**
- * This component lists constructed features and provides an interface for construction and deletion
- */
-
-import React, {Component} from "react";
-import {CheckBox} from "devextreme-react/check-box";
-import {SelectBox} from "devextreme-react/select-box";
-import Button from "devextreme-react/button";
-import {TextBox} from "devextreme-react";
-import FeatureConstructorBridge, {ConstructedFeature, WordListSpec} from "./feature_constructor_bridge";
-import {SQ} from "./lists/personal-pronouns";
-import codapInterface from "./lib/CodapInterface";
-
-export interface FCState {
-	otherFeaturesChecked: boolean,
-	featureUnderConstruction: { kind: string, name: string },
-	showingFeatureTemplate: boolean,
-	containsFeatureOptions: {
-		kindOfContains: string, 	// ['starts with', 'contains', 'does not contain', 'ends with']
-		kindOfThingContained: string, // ['number', 'date', 'from list', 'free form text']
-		caseOption: string,	// ['sensitive', 'insensitive']
-		freeFormText: string,
-		wordList: WordListSpec
-	}
-}
-
-export interface FCStorage {
-	fcState: FCState,
-	constructedFeatures: ConstructedFeature[]
-}
-
-export interface FC_StorageCallbackFuncs {
-	createStorageCallback: () => any,
-	restoreStorageCallback: (iStorage: any) => void
-}
-
-export interface FC_Props {
-	fcBridge: FeatureConstructorBridge,
-	setStorageCallbacks: (iCallbacks: FC_StorageCallbackFuncs) => void
-}
-
-export const featureKinds = ['\"contains\" feature', '\"count of\" feature']
-export const containsOptions = ['starts with', 'contains', 'does not contain', 'ends with']
-export const kindOfThingContainedOptions = ['any number', 'any from list', 'free form text'/*, 'any date'*/]
-export const caseOptions = ['sensitive', 'insensitive']
-
-export class FeatureConstructor extends Component<FC_Props, FCState> {
-	private wordListDatasetNames: WordListSpec[] = [];
-
-	constructor(props: any) {
-		super(props);
-		this.state = {
-			otherFeaturesChecked: false,
-			featureUnderConstruction: {kind: '', name: ''},
-			showingFeatureTemplate: false,
-			containsFeatureOptions: {
-				kindOfContains: '', kindOfThingContained: '',
-				caseOption: caseOptions[0], freeFormText: '', wordList: {datasetName: '', firstAttributeName: ''}
-			}
-		}
-		this.createStorage = this.createStorage.bind(this);
-		this.restoreStorage = this.restoreStorage.bind(this);
-		this.cancelFeatureConstruction = this.cancelFeatureConstruction.bind(this);
-		this.completeFeatureConstruction = this.completeFeatureConstruction.bind(this);
-	}
-
-	public async componentDidMount() {
-		this.props.setStorageCallbacks({
-			createStorageCallback: this.createStorage,
-			restoreStorageCallback: this.restoreStorage
-		});
-		await this.updateWordListDatasetNames();
-	}
-
-	public createStorage(): FCStorage {
-		return {
-			fcState: {
-				otherFeaturesChecked: this.state.otherFeaturesChecked,
-				featureUnderConstruction: this.state.featureUnderConstruction,
-				showingFeatureTemplate: this.state.showingFeatureTemplate,
-				containsFeatureOptions: this.state.containsFeatureOptions
-			},
-			constructedFeatures: this.props.fcBridge.createStorage(),
-		}
-	}
-
-	public restoreStorage(iStorage: FCStorage) {
-		if (iStorage.fcState) {
-			this.setState({otherFeaturesChecked: iStorage.fcState.otherFeaturesChecked});
-			this.setState({featureUnderConstruction: iStorage.fcState.featureUnderConstruction});
-			this.setState({showingFeatureTemplate: iStorage.fcState.showingFeatureTemplate});
-			this.setState({containsFeatureOptions: iStorage.fcState.containsFeatureOptions});
-		}
-		this.props.fcBridge.restoreFromStorage(iStorage.constructedFeatures);
-	}
-
-	async updateWordListDatasetNames() {
-		let this_ = this;
-		this.wordListDatasetNames = [];	// Start over
-		let tContextListResult: any = await codapInterface.sendRequest({
-			"action": "get",
-			"resource": "dataContextList"
-		}).catch((reason) => {
-			console.log('unable to get datacontext list because ' + reason);
-		});
-		for (let index = 0; index < tContextListResult.values.length; index++) {
-			let aValue = tContextListResult.values[index];
-			let tCollectionsResult: any = await codapInterface.sendRequest({
-				action: 'get',
-				resource: `dataContext[${aValue.id}].collectionList`
-			}).catch((reason) => {
-				console.log('unable to get collection list because ' + reason);
-			});
-			if (tCollectionsResult.values.length === 1) {
-				let tAttributesResult: any = await codapInterface.sendRequest({
-					action: 'get',
-					resource: `dataContext[${aValue.id}].collection[${tCollectionsResult.values[0].id}].attributeList`
-				}).catch((reason) => {
-					console.log('unable to get attribute list because ' + reason);
-				});
-				if (tAttributesResult.values.length === 1) {
-					this_.wordListDatasetNames.push({
-						datasetName: aValue.title,
-						firstAttributeName: tAttributesResult.values[0].name
-					});
-				}
-			}
-		}
-	}
-
-	createNewFeatureTemplate() {
-		this.setState({showingFeatureTemplate: true})
-	}
-
-	checkBox(label: string, checked: boolean, disabled: boolean, setProp: any, key?: number) {
-		return (
-			<div key={key}>
-				<CheckBox
-					text={label}
-					value={checked && !disabled}
-					disabled={disabled}
-					onValueChange={
-						e => setProp(e)
-					}
-				/>
-			</div>
-		)
-	}
-
-	cancelFeatureConstruction() {
-		this.setState({
-			featureUnderConstruction: {kind: '', name: ''},
-			showingFeatureTemplate: false
-		})
-	}
-
-	completeFeatureConstruction() {
-		this.props.fcBridge.addConstructedFeature(
-			{
-				name: this.state.featureUnderConstruction.name, chosen: true,
-				info: {
-					kind: this.state.featureUnderConstruction.kind,
-					details: {
-						containsOption: this.state.containsFeatureOptions.kindOfContains,
-						kindOption: this.state.containsFeatureOptions.kindOfThingContained,
-						caseOption: this.state.containsFeatureOptions.caseOption,
-						freeFormText: this.state.containsFeatureOptions.freeFormText,
-						wordList: this.state.containsFeatureOptions.wordList
-					}
-				},
-				description: ''
-			})
-		this.setState({
-			featureUnderConstruction: {kind: '', name: ''},
-			showingFeatureTemplate: false,
-			containsFeatureOptions: {
-				kindOfContains: '', kindOfThingContained: '', caseOption: '',
-				freeFormText: '',
-				wordList: {datasetName: '', firstAttributeName: ''}
-			}
-		});
-	}
-
-	featureTemplate(kind: string) {
-		const this_ = this;
-
-		function containsTemplate() {
-
-			function freeForm() {
-				return this_.state.containsFeatureOptions.kindOfThingContained === kindOfThingContainedOptions[2] ?
-					(<div>
-						<TextBox
-							placeholder='type something here'
-							onValueChanged={(e) => {
-								this_.setState({
-									containsFeatureOptions: {
-										kindOfContains: this_.state.containsFeatureOptions.kindOfContains,
-										kindOfThingContained: this_.state.containsFeatureOptions.kindOfThingContained,
-										caseOption: this_.state.containsFeatureOptions.caseOption,
-										freeFormText: e.value,
-										wordList: this_.state.containsFeatureOptions.wordList
-									}
-								});
-							}
-							}
-							value={this_.state.containsFeatureOptions.freeFormText}
-						/>
-						{/*
-						<span> with </span>
-						<SelectBox
-							dataSource={caseOptions}
-							defaultValue={this_.state.containsFeatureOptions.caseOption}
-							placeholder={'choose case option'}
-							style={{display: 'inline-block'}}
-							onValueChange={(option: string) => {
-								this_.setState({
-									containsFeatureOptions: {
-										kindOfContains: this_.state.containsFeatureOptions.kindOfContains,
-										kindOfThingContained: this_.state.containsFeatureOptions.kindOfThingContained,
-										caseOption: option,
-										freeFormText: this_.state.containsFeatureOptions.freeFormText,
-										wordList: this_.state.containsFeatureOptions.wordList
-									}
-								});
-							}}
-						/>
-*/}
-					</div>) : ""
-			}
-
-			function lists() {
-				let tLists = Object.keys(SQ.lists);
-				return this_.state.containsFeatureOptions.kindOfThingContained === kindOfThingContainedOptions[1] ?
-					(<div>
-						<SelectBox
-							dataSource={tLists.concat(this_.wordListDatasetNames.map(iDataset => {
-								return iDataset.datasetName;
-							}))}
-							defaultValue={this_.state.containsFeatureOptions.wordList}
-							placeholder={'choose list'}
-							style={{display: 'inline-block'}}
-							onValueChange={(option: string) => {
-								const tWordListSpec = this_.wordListDatasetNames.find((iSpec) => {
-										return iSpec.datasetName === option;
-									}),
-									tAttributeName = tWordListSpec ? tWordListSpec.firstAttributeName : '';
-								this_.setState({
-									containsFeatureOptions: {
-										kindOfContains: (tWordListSpec ? containsOptions[1] :
-											this_.state.containsFeatureOptions.kindOfContains),
-										kindOfThingContained: this_.state.containsFeatureOptions.kindOfThingContained,
-										caseOption: this_.state.containsFeatureOptions.caseOption,
-										freeFormText: this_.state.containsFeatureOptions.freeFormText,
-										wordList: {datasetName: option, firstAttributeName: tAttributeName}
-									}
-								});
-							}}
-						/>
-					</div>) : ""
-			}
-
-			return (
-				<div className='sq-new-feature-item'>
-					<SelectBox
-						dataSource={containsOptions}
-						value={this_.state.containsFeatureOptions.kindOfContains}
-						placeholder={'choose kind of contains'}
-						style={{display: 'inline-block'}}
-						onValueChange={(option: string) => {
-							this_.setState({
-								containsFeatureOptions: {
-									kindOfContains: option,
-									kindOfThingContained: this_.state.containsFeatureOptions.kindOfThingContained,
-									caseOption: this_.state.containsFeatureOptions.caseOption,
-									freeFormText: this_.state.containsFeatureOptions.freeFormText,
-									wordList: this_.state.containsFeatureOptions.wordList
-								}
-							});
-						}}
-					/>
-					<SelectBox
-						dataSource={kindOfThingContainedOptions}
-						defaultValue={this_.state.containsFeatureOptions.kindOfThingContained}
-						placeholder={'choose thing'}
-						style={{display: 'inline-block'}}
-						onValueChange={async (option: string) => {
-							if (option === kindOfThingContainedOptions[1]) // any from list
-								await this_.updateWordListDatasetNames();
-							this_.setState({
-								containsFeatureOptions: {
-									kindOfContains: this_.state.containsFeatureOptions.kindOfContains,
-									kindOfThingContained: option,
-									caseOption: this_.state.containsFeatureOptions.caseOption,
-									freeFormText: this_.state.containsFeatureOptions.freeFormText,
-									wordList: this_.state.containsFeatureOptions.wordList
-								}
-							});
-						}}
-					/>
-					{freeForm()}
-					{lists()}
-					<div className='sq-new-feature-name'>
-						<span>Name of Feature</span>
-						<TextBox
-							placeholder="type the feature's name"
-							onValueChanged={(e) => {
-								this_.setState({
-									featureUnderConstruction: {
-										kind: this_.state.featureUnderConstruction.kind,
-										name: e.value
-									}
-								});
-							}}
-							value={this_.state.featureUnderConstruction.name}
-						/>
-					</div>
-				</div>
-			);
-		}
-
-		function countOfTemplate() {
-			return (<span>The <strong>count of</strong> feature is not yet implemented</span>);
-		}
-
-		function allFilledOut(): boolean {
-
-			function freeFormOK() {
-				return this_.state.containsFeatureOptions.kindOfContains !== '' &&
-					this_.state.containsFeatureOptions.kindOfThingContained === kindOfThingContainedOptions[2] &&
-					this_.state.containsFeatureOptions.freeFormText !== '';
-			}
-
-			function listOK() {
-				return this_.state.containsFeatureOptions.kindOfContains !== '' &&
-					this_.state.containsFeatureOptions.kindOfThingContained === kindOfThingContainedOptions[1] &&
-					this_.state.containsFeatureOptions.wordList.datasetName !== '';
-			}
-
-			function otherOK() {
-				return this_.state.containsFeatureOptions.kindOfContains !== '' &&
-					this_.state.containsFeatureOptions.kindOfThingContained !== kindOfThingContainedOptions[1] &&
-					this_.state.containsFeatureOptions.kindOfThingContained !== kindOfThingContainedOptions[2];
-			}
-
-			return (
-				(this_.state.featureUnderConstruction.kind === featureKinds[0] ?
-					(freeFormOK() || listOK() || otherOK())
-					:
-					false) &&
-				this_.state.featureUnderConstruction.name !== ''
-			);
-		}
-
-		return this.state.showingFeatureTemplate ?
-			(<div className="sq-feature-template">
-				{this.state.featureUnderConstruction.kind === featureKinds[0] ?
-					containsTemplate() : countOfTemplate()}
-				<Button
-					className='sq-new-feature-button'
-					onClick={this_.cancelFeatureConstruction}
-				>
-					Cancel
-				</Button>
-				<Button
-					className='sq-new-feature-button'
-					disabled={!allFilledOut()}
-					onClick={this_.completeFeatureConstruction}
-				>
-					Done
-				</Button>
-			</div>) :
-			'';
-	}
-
-	newFeatureControl() {
-		return this.state.otherFeaturesChecked ?
-			(
-				<div className="sq-new-feature">
-					<label>
-						<SelectBox
-							className='sq-new-feature-item'
-							dataSource={featureKinds}
-							placeholder={'Choose kind of new feature'}
-							/*defaultValue={this.state.featureUnderConstruction.kind}*/
-							value={this.state.featureUnderConstruction.kind}
-							style={{display: 'inline-block'}}
-							onValueChange={(e) => {
-								this.setState({
-									featureUnderConstruction: {
-										kind: e,
-										name: this.state.featureUnderConstruction.name
-									}
-								});
-								this.createNewFeatureTemplate();
-							}
-							}
-						>
-						</SelectBox>
-					</label>
-					{this.featureTemplate(this.state.featureUnderConstruction.kind)}
-				</div>
-			) : '';
-	}
-
-	render() {
-		return (
-			<div className='sq-feature-constructor'>
-				{this.checkBox('Other features', this.state.otherFeaturesChecked, false,
-					(newValue: boolean) => {
-						this.setState({otherFeaturesChecked: newValue})
-					})}
-				{this.newFeatureControl()}
-			</div>
-		);
-	}
-}
\ No newline at end of file
diff --git a/src/feature_constructor_bridge.ts b/src/feature_constructor_bridge.ts
deleted file mode 100644
index 81ac4af..0000000
--- a/src/feature_constructor_bridge.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * The FeatureConstructorBridge serves as a bridge between the FeatureConstructor and the FeatureManager.
- * The former passes newly constructed features to the FeatureConstructorBridge and the latter requests
- * them in order to display the list of them.
- */
-
-export interface ContainsDetails {
-	containsOption: string,
-	kindOption: string,
-	caseOption: string,
-	freeFormText:string,
-	wordList:WordListSpec
-}
-
-export interface CountDetails {
-	what: string
-}
-
-export interface FeatureDetails {
-	kind: string,
-	details: ContainsDetails | CountDetails
-}
-
-export interface ConstructedFeature {
-	name: string, chosen: boolean,
-	info: FeatureDetails,
-	description: string
-}
-
-export interface WordListSpec {
-	datasetName:string, firstAttributeName:string
-}
-
-export default class FeatureConstructorBridge {
-	
-	private constructedFeaturesList:ConstructedFeature[] = [];
-	private newFeatureAddedCallback:(iFeature:ConstructedFeature)=>{};
-
-	constructor(iNewFeatureAddedCallback:any) {
-		this.newFeatureAddedCallback = iNewFeatureAddedCallback;
-	}
-	
-	public addConstructedFeature( iFeature:ConstructedFeature) {
-		iFeature.description = this.getDescriptionFor(iFeature);
-		this.constructedFeaturesList.push(iFeature);
-		this.newFeatureAddedCallback(iFeature);
-	}
-	
-	public getConstructedFeaturesList():any[] {
-		return this.constructedFeaturesList;
-	}
-
-	private getDescriptionFor(iFeature:ConstructedFeature) {
-		const tDetails = iFeature.info.details as ContainsDetails,
-					tFirstPart = `${tDetails.containsOption} ${tDetails.kindOption}`,
-					tSecondPart = tDetails.freeFormText !== '' ? `"${tDetails.freeFormText}"` : '',
-					tThirdPart = tDetails.wordList && tDetails.wordList.datasetName !== '' ?
-							` of ${tDetails.wordList.datasetName}` : '';
-		return `${tFirstPart} ${tSecondPart}${tThirdPart}`
-	}
-
-	public restoreFromStorage( iStorage: ConstructedFeature[]) {
-		this.constructedFeaturesList = iStorage || [];
-	}
-
-	createStorage():ConstructedFeature[] {
-		return this.constructedFeaturesList;
-	}
-
-}
-
diff --git a/src/feature_manager.tsx b/src/feature_manager.tsx
deleted file mode 100755
index 7ec1cfc..0000000
--- a/src/feature_manager.tsx
+++ /dev/null
@@ -1,1581 +0,0 @@
-import React, {Component} from 'react';
-import pluralize from 'pluralize';
-import codapInterface, {CODAP_Notification} from "./lib/CodapInterface";
-import {
-	addAttributesToTarget,
-	deselectAllCasesIn,
-	entityInfo,
-	getCaseCount,
-	getCollectionNames,
-	getDatasetInfoWithFilter,
-	isAModel,
-	isNotAModel,
-	scrollCaseTableToRight
-} from './lib/codap-helper';
-import Button from 'devextreme-react/button';
-import {Accordion, Item} from 'devextreme-react/accordion';
-import {SelectBox} from 'devextreme-react/select-box';
-import {oneHot} from "./lib/one_hot";
-import './storyq.css';
-import {LogisticRegression} from './lib/jsregression';
-import TextFeedbackManager, {TFMStorage} from "./text_feedback_manager";
-import {ProgressBar} from "./progress_bar";
-import {CheckBox} from "devextreme-react/check-box";
-import {NumericInput} from "./numeric_input";
-import {
-	containsOptions,
-	FC_StorageCallbackFuncs,
-	FCState,
-	FeatureConstructor,
-	featureKinds,
-	kindOfThingContainedOptions
-} from "./feature_constructor";
-import FeatureConstructorBridge, {ConstructedFeature, ContainsDetails} from "./feature_constructor_bridge";
-import {SQ} from "./lists/personal-pronouns";
-import {stopWords} from "./lib/stop_words";
-import {computeKappa} from "./utilities";
-
-// import tf from "@tensorflow/tfjs";
-
-export interface FM_StorageCallbackFuncs {
-	createStorageCallback: () => any,
-	restoreStorageCallback: (iStorage: any) => void
-}
-
-export interface FM_Props {
-	status: string,
-	setStorageCallbacks: (iCallbacks: FM_StorageCallbackFuncs) => void
-}
-
-interface FMStorage {
-	datasetName: string | null;
-	textFeedbackManagerStorage: TFMStorage | null,
-	featureConstructorStorage: FCState | null,
-	targetDatasetInfo: entityInfo | null,
-	targetDatasetInfoArray: entityInfo[] | null,
-	targetCollectionName: string,
-	targetCollectionNames: string[],
-	targetAttributeName: string,
-	targetAttributeNames: string[],
-	targetCaseCount: number,
-	targetPositiveCategory: string,
-	targetCategories: string[],
-	targetColumnFeatureNames: string[],
-	targetClassAttributeName: string,
-	modelsDatasetName: string,
-	modelsDatasetID: number,
-	featureCollectionName: string,
-	modelCurrentParentCaseID: number,
-	modelCollectionName: string,
-	featureCaseCount: number,
-	frequencyThreshold: number,
-	modelAccuracy: number,
-	modelKappa: number,
-	modelThreshold: number,
-	unigrams: boolean,
-	useColumnFeatures: boolean,
-	ignoreStopWords: boolean,
-	lockIntercept: boolean,
-	lockProbThreshold: boolean,
-	accordianSelection: Record<string, number>,
-	status: string
-}
-
-const outerNames = ['Extraction', 'Model Setup'],
-	innerNames = ['Setup', 'Features', 'Settings'];
-
-export class FeatureManager extends Component<FM_Props, {
-	status: string,
-	count: number,
-	accordianSelection: Record<string, number>,
-	unigrams: boolean,
-	iterations: number,
-	currentIteration: number,
-	frequencyThreshold: number,
-	useColumnFeatures: boolean,
-	ignoreStopWords: boolean,
-	lockIntercept: boolean,
-	lockProbThreshold: boolean,
-	showWeightsGraph: boolean
-}> {
-	[indexindex: string]: any;
-
-	private updatePercentageFunc: ((p: number) => void) | null;
-	public targetDatasetInfo: entityInfo = {name: '', title: '', id: -1};
-	private targetDatasetInfoArray: entityInfo[] = [];
-	public targetCollectionName = '';
-	public targetCollectionNames: string[] = [];
-	public targetAttributeName = '';
-	private targetAttributeNames: string[] = [];
-	public targetPredictedLabelAttributeName = '';
-	public targetClassAttributeName = '';
-	private targetCaseCount = 0;
-	private targetPositiveCategory = '';
-	private targetCategories: string[] = [];
-	private targetColumnFeatureNames: string[] = [];
-	public modelsDatasetName = 'Models';
-	private modelsDatasetID = 0;
-	private modelCollectionName = 'models';
-	private modelCurrentParentCaseID = 0;
-	private featureCollectionName = 'features';
-	private featureCaseCount = 0;
-	private subscriberIndex: number = -1;
-	private fcBridge: FeatureConstructorBridge;
-	private featureConstructorCreateStorage: any;
-	private featureConstructorRestoreStorage: any;
-	private stashedFeatureConstructorStorage: any;
-	// private nbClassifier: NaiveBayesClassifier;
-	// Some flags to prevent recursion in selecting features or target cases
-	private isSelectingTargetPhrases = false;
-	private isSelectingFeatures = false;
-	private featureTokenArray: any[] = [];	// Used during feedback process
-	// private logisticModel: tf.Sequential = new tf.Sequential();
-	// @ts-ignore
-	private logisticModel: LogisticRegression = new LogisticRegression({
-		alpha: 1,
-		iterations: 100,
-		lambda: 0.0,
-		accuracy: 0,
-		kappa: 0,
-		threshold: 0.5,
-		trace: false,
-		progressCallback: this.progressBar.bind(this),
-		feedbackCallback: this.handleFittingProgress.bind(this)
-	});
-	private feedbackNames = {
-		dataContextName: 'FittingFeedback',
-		collectionName: 'iterations',
-		iterationName: 'iteration',
-		costName: 'cost'
-	};
-	private textFeedbackManager: TextFeedbackManager | null = null;
-
-	private kProbPredAttrNamePrefix = 'probability of ';
-
-	constructor(props: FM_Props) {
-		super(props);
-		this.state = {
-			status: props.status,
-			count: 0,
-			accordianSelection: {outer: 0, inner: 0},
-			iterations: 20,
-			unigrams: false,
-			currentIteration: 0,
-			frequencyThreshold: 4,
-			useColumnFeatures: false,
-			ignoreStopWords: true,
-			lockIntercept: true,
-			lockProbThreshold: true,
-			showWeightsGraph: false
-		};
-		this.updatePercentageFunc = null;
-		this.forceUpdate = this.forceUpdate.bind(this);
-		this.extract = this.extract.bind(this);
-		this.handleNotification = this.handleNotification.bind(this);
-		this.createStorage = this.createStorage.bind(this);
-		this.restoreStorage = this.restoreStorage.bind(this);
-		this.createModelsDataset = this.createModelsDataset.bind(this);
-		this.setUpdatePercentageFunc = this.setUpdatePercentageFunc.bind(this);
-		this.setFeatureConstructorStorageCallbacks = this.setFeatureConstructorStorageCallbacks.bind(this);
-		this.newFeatureAdded = this.newFeatureAdded.bind(this);
-		this.fcBridge = new FeatureConstructorBridge(this.newFeatureAdded);
-	}
-
-	public async componentDidMount() {
-		this.props.setStorageCallbacks({
-			createStorageCallback: this.createStorage,
-			restoreStorageCallback: this.restoreStorage
-		});
-		await this.updateTargetNames();
-		this.subscriberIndex = codapInterface.on('notify', '*', '', this.handleNotification);
-		// this.nbClassifier = new NaiveBayesClassifier();
-		this.setState({count: this.state.count + 1})
-	}
-
-	public async componentWillUnmount() {
-		codapInterface.off(this.subscriberIndex);
-		this.featureTokenArray = [];
-		await this.getTextFeedbackManager().closeTextComponent();
-	}
-
-	public createStorage(): FMStorage {
-		return {
-			datasetName: null,
-			textFeedbackManagerStorage: this.textFeedbackManager ? this.textFeedbackManager.createStorage() : null,
-			featureConstructorStorage: this.featureConstructorCreateStorage ? this.featureConstructorCreateStorage() : null,
-			targetDatasetInfo: this.targetDatasetInfo,
-			targetDatasetInfoArray: this.targetDatasetInfoArray,
-			targetCollectionName: this.targetCollectionName,
-			targetCollectionNames: this.targetCollectionNames,
-			targetAttributeName: this.targetAttributeName,
-			targetAttributeNames: this.targetAttributeNames,
-			targetCaseCount: this.targetCaseCount,
-			targetPositiveCategory: this.targetPositiveCategory,
-			targetCategories: this.targetCategories,
-			targetColumnFeatureNames: this.targetColumnFeatureNames,
-			targetClassAttributeName: this.targetClassAttributeName,
-			modelsDatasetName: this.modelsDatasetName,
-			modelsDatasetID: this.modelsDatasetID,
-			modelCollectionName: this.modelCollectionName,
-			modelCurrentParentCaseID: this.modelCurrentParentCaseID,
-			featureCollectionName: this.featureCollectionName,
-			featureCaseCount: this.featureCaseCount,
-			frequencyThreshold: this.state.frequencyThreshold,
-			modelAccuracy: this.logisticModel.accuracy,
-			modelKappa: this.logisticModel.kappa,
-			modelThreshold: this.logisticModel.threshold,
-			unigrams: this.state.unigrams,
-			useColumnFeatures: this.state.useColumnFeatures,
-			ignoreStopWords: this.state.ignoreStopWords,
-			lockIntercept: this.state.lockIntercept,
-			lockProbThreshold: this.state.lockProbThreshold,
-			accordianSelection: this.state.accordianSelection,
-			status: this.state.status
-		}
-	}
-
-	public restoreStorage(iStorage: FMStorage) {
-		if( typeof iStorage.datasetName === 'string') // backward compatibility
-			iStorage.targetDatasetInfo = {name: iStorage.datasetName, title: iStorage.datasetName, id: -1};
-		if( iStorage.targetDatasetInfo)
-			this.targetDatasetInfo = iStorage.targetDatasetInfo;
-		this.targetDatasetInfoArray = iStorage.targetDatasetInfoArray || [];
-		this.targetCollectionName = iStorage.targetCollectionName;
-		this.targetCollectionNames = iStorage.targetCollectionNames || [];
-		this.targetAttributeName = iStorage.targetAttributeName;
-		this.targetAttributeNames = iStorage.targetAttributeNames || [];
-		this.targetCaseCount = iStorage.targetCaseCount;
-		this.targetPositiveCategory = iStorage.targetPositiveCategory;
-		this.targetCategories = iStorage.targetCategories;
-		this.targetColumnFeatureNames = iStorage.targetColumnFeatureNames || [];
-		this.targetClassAttributeName = iStorage.targetClassAttributeName;
-		this.modelsDatasetName = iStorage.modelsDatasetName;
-		this.modelsDatasetID = iStorage.modelsDatasetID;
-		this.modelCollectionName = iStorage.modelCollectionName;
-		this.modelCurrentParentCaseID = iStorage.modelCurrentParentCaseID;
-		this.featureCollectionName = iStorage.featureCollectionName;
-		this.featureCaseCount = iStorage.featureCaseCount;
-		this.logisticModel.accuracy = iStorage.modelAccuracy;
-		this.logisticModel.kappa = iStorage.modelKappa;
-		this.logisticModel.threshold = iStorage.modelThreshold;
-		this.getTextFeedbackManager().restoreStorage(iStorage.textFeedbackManagerStorage);
-		this.stashedFeatureConstructorStorage = iStorage.featureConstructorStorage;
-		if (this.featureConstructorRestoreStorage && this.stashedFeatureConstructorStorage) {
-			this.featureConstructorRestoreStorage(this.stashedFeatureConstructorStorage);
-			this.stashedClassificationManagerStorage = null;
-		}
-		this.setState({unigrams: iStorage.unigrams});
-		this.setState({frequencyThreshold: iStorage.frequencyThreshold || 4});
-		this.setState({useColumnFeatures: iStorage.useColumnFeatures || false});
-		this.setState({ignoreStopWords: iStorage.ignoreStopWords || false});
-		this.setState({lockIntercept: iStorage.lockIntercept || false});
-		this.setState({lockProbThreshold: iStorage.lockProbThreshold || false});
-		this.setState({accordianSelection: iStorage.accordianSelection || {inner: 0, outer: 0}});
-		this.setState({status: iStorage.status || 'active'});
-	}
-
-	public forceUpdate() {
-		this.setState({count: this.state.count + 1})
-	}
-
-	public setFeatureConstructorStorageCallbacks(iCallbackFuncs: FC_StorageCallbackFuncs) {
-		this.featureConstructorCreateStorage = iCallbackFuncs.createStorageCallback;
-		this.featureConstructorRestoreStorage = iCallbackFuncs.restoreStorageCallback;
-		if (this.stashedFeatureConstructorStorage) {
-			this.featureConstructorRestoreStorage(this.stashedFeatureConstructorStorage);
-		}
-	}
-
-	/**
-	 *
-	 * @param iNotification    (from CODAP)
-	 */
-	private async handleNotification(iNotification: CODAP_Notification) {
-		let tTargetDatasetInfo = this.targetDatasetInfo,
-				tTargetDatasetName = this.targetDatasetInfo.name;
-		if (iNotification.action === 'notify' && this.state.status !== 'inProgress') {
-			let tOperation = iNotification.values.operation;
-			if (tOperation === 'dataContextCountChanged') {
-				await this.updateTargetNames();
-				this.setState({count: this.state.count + 1});
-			} else if (tOperation === 'selectCases') {
-				// @ts-ignore
-				let tDataContextName: string = iNotification.resource && iNotification.resource.match(/\[(.+)]/)[1];
-				if (tDataContextName === this.modelsDatasetName && !this.isSelectingFeatures) {
-					console.log('about to call handleFeatureSelection');
-					this.isSelectingTargetPhrases = true;
-					await this.getTextFeedbackManager().handleFeatureSelection(this);
-					this.isSelectingTargetPhrases = false;
-				} else if (tTargetDatasetInfo && tDataContextName === tTargetDatasetInfo.name &&
-						this.targetDatasetInfoArray.findIndex(iInfo => iInfo.name === tTargetDatasetName) >= 0 &&
-						!this.isSelectingTargetPhrases) {
-					this.isSelectingFeatures = true;
-					await this.getTextFeedbackManager().handleTargetSelection(this);
-					this.isSelectingFeatures = false;
-				}
-			} else if (tOperation === 'createAttributes' || tOperation === 'updateAttributes') {
-				this.targetAttributeNames = await this.getTargetAttributeNames();
-				this.forceUpdate();
-			} else if (tOperation === 'titleChange') {
-				const kFrom = iNotification.values.from,
-					kTo = iNotification.values.to;
-				let tFoundEntry = this.targetDatasetInfoArray.find(entry=>entry.title === kFrom);
-				if( tFoundEntry)
-					tFoundEntry.title = kTo;
-				if(this.targetDatasetInfo.title === kFrom)
-					this.targetDatasetInfo.title = kTo;
-				this.forceUpdate();
-			}
-		}
-	}
-
-	private getTextFeedbackManager(): TextFeedbackManager {
-		if (!this.textFeedbackManager) {
-			this.textFeedbackManager = new TextFeedbackManager(this.targetCategories, this.targetAttributeName);
-		}
-		return this.textFeedbackManager;
-	}
-
-	private async setupFeedbackDataset() {
-		const tContextList: any = await codapInterface.sendRequest({
-			action: 'get',
-			resource: 'dataContextList'
-		});
-		let tAlreadyPresent = tContextList.values.findIndex((iValue: any) => {
-			return iValue.name === this.feedbackNames.dataContextName;
-		}) >= 0;
-		if (!tAlreadyPresent) {
-			await codapInterface.sendRequest({
-				action: 'create',
-				resource: 'dataContext',
-				values: {
-					name: this.feedbackNames.dataContextName,
-					collections: [{
-						name: this.feedbackNames.collectionName,
-						attrs: [
-							{
-								name: this.feedbackNames.iterationName,
-								description: 'For each iteration a new set of weights is computed with the intent of improving the fit as measured by the cost.'
-							},
-							{
-								name: this.feedbackNames.costName,
-								description: 'The cost is a measure of how how poorly the model fits the data. Lower cost means better fit.'
-							}
-						]
-					}],
-				}
-			});
-		}
-	}
-
-	private async makeFeedbackGraphs(): Promise<string> {
-		await codapInterface.sendRequest([
-			{
-				action: 'create',
-				resource: 'component',
-				values: {
-					type: 'graph',
-					name: 'Fitting Progress',
-					dimensions: {
-						width: 200,
-						height: 200
-					},
-					dataContext: this.feedbackNames.dataContextName,
-					xAttributeName: this.feedbackNames.iterationName,
-					yAttributeName: this.feedbackNames.costName,
-				}
-			},
-			{
-				action: 'create',
-				resource: 'component',
-				values: {
-					type: 'graph',
-					name: 'Trial Weights by iteration',
-					dimensions: {
-						width: 200,
-						height: 250
-					},
-					dataContext: this.modelsDatasetName,
-					xAttributeName: 'iteration',
-					yAttributeName: 'trialWeight',
-				}
-			}
-		]);
-		return 'made graph';
-	}
-
-	private progressBar(iIteration: number) {
-		let tPercentDone = Math.round(100 * iIteration / this.state.iterations);
-		if (this.updatePercentageFunc)
-			this.updatePercentageFunc(tPercentDone);
-		this.setState({currentIteration: iIteration});
-		if (iIteration >= this.state.iterations) {
-			this.showResults();
-		}
-	}
-
-	private async handleFittingProgress(iIteration: number, iCost: number, iWeights: number[]): Promise<string> {
-		if (this.state.showWeightsGraph) {
-			if (iIteration === 3) {
-				await this.makeFeedbackGraphs();
-			}
-			let tCaseValues: any = {};
-			tCaseValues[this.feedbackNames.iterationName] = iIteration;
-			tCaseValues[this.feedbackNames.costName] = iCost;
-			await codapInterface.sendRequest({
-				action: 'create',
-				resource: `dataContext[${this.feedbackNames.dataContextName}].collection[${this.feedbackNames.collectionName}].case`,
-				values: [{
-					values: tCaseValues
-				}]
-			});
-
-			// Add the given weights to the child collection of the Features dataset
-			// iWeights and this.featureTokenArray must be parallel so we can stash the current values of weights in the
-			//		child collection of the Features collection
-			let tCasesToAdd: any[] = [];
-			for (let i = 0; i < iWeights.length && i < this.featureTokenArray.length; i++) {
-				tCasesToAdd.push({
-					parent: this.featureTokenArray[i].featureCaseID,
-					values: {iteration: iIteration, trialWeight: iWeights[i]}
-				})
-			}
-			await codapInterface.sendRequest({
-				action: 'create',
-				resource: `dataContext[${this.modelsDatasetName}].collection[iterations].case`,
-				values: tCasesToAdd
-			});
-		}
-		return `iteration: ${iIteration}`;
-	}
-
-	/**
-	 * Add attributes for predicted label and for probability. Compute and stash values.
-	 * @param iTools
-	 * @private
-	 */
-	private async showPredictedLabels(iTools: {
-		logisticModel: any,	// Will compute probabilities
-		oneHotData: number[][],
-		documents: any,
-		tokenArray: any,
-		positiveClassName: string,
-		negativeClassName: string,
-		lockProbThreshold: boolean
-	}) {
-		let tOneHotLength = iTools.oneHotData[0].length,
-			tPosProbs: number[] = [],
-			tNegProbs: number[] = [],
-			tMapFromCaseIDToProbability: any = {};
-
-		function findThreshold(): number {
-			// Determine the probability threshold that yields the fewest discrepant classifications
-			// First compute the probabilities separating them into two arrays
-			iTools.documents.forEach((aDoc: any, iIndex: number) => {
-				let tProbability: number = iTools.logisticModel.transform(iTools.oneHotData[iIndex]),
-					tActual = iTools.oneHotData[iIndex][tOneHotLength - 1];
-				if (tActual) {
-					tPosProbs.push(tProbability);
-				} else {
-					tNegProbs.push(tProbability);
-				}
-				// We will have to be able to lookup the probability later
-				tMapFromCaseIDToProbability[aDoc.caseID] = tProbability;
-			});
-			tPosProbs.sort();
-			tNegProbs.sort();
-			let tCurrValue = tPosProbs[0],
-				tNegLength = tNegProbs.length,
-				tPosLength = tPosProbs.length,
-				tCurrMinDiscrepancies: number,
-				tStartingThreshold: number;
-
-			// Return the index in tNegPros starting as given for the >= target probability
-			function findNegIndex(iStarting: number, iTargetProb: number): number {
-				while (tNegProbs[iStarting] < iTargetProb && iStarting < tNegLength) {
-					iStarting++;
-				}
-				return iStarting;
-			}
-
-			let tRecord: {
-				posIndex: number,	// Position at which we start testing for discrepancies
-				negIndex: number,
-				currMinDescrepancies: number,
-				threshold: number
-			};
-			if (iTools.lockProbThreshold) {
-				let tPosIndex = tPosProbs.findIndex((iProb) => {
-						return iProb > 0.5;
-					}),
-					tNegIndex = tNegProbs.findIndex((iProb) => {
-						return iProb > 0.5;
-					});
-				if( tNegIndex === -1)
-					tNegIndex = tNegLength;
-				tRecord = {
-					posIndex: tPosIndex,
-					negIndex: tNegIndex,
-					currMinDescrepancies: tPosIndex + (tNegLength - tNegIndex),
-					threshold: 0.5
-				}
-			} else {
-				let tNegIndex = tNegProbs.findIndex((v: number) => {
-					return v > tCurrValue;
-				});
-				if (tNegIndex === -1) {
-					// Negative and Positive probabilities don't overlap
-					tCurrMinDiscrepancies = 0;
-					tNegIndex = tNegLength;
-					tStartingThreshold = (tNegProbs[tNegLength - 1] + tPosProbs[0]) / 2; // halfway
-				} else {
-					tCurrMinDiscrepancies = Number.MAX_VALUE;
-					tStartingThreshold = tPosProbs[0];
-				}
-
-				tNegIndex = (tNegIndex === -1) ? tNegLength : tNegIndex;
-				tRecord = {
-					posIndex: 0,	// Position at which we start testing for discrepancies
-					negIndex: tNegIndex,
-					currMinDescrepancies: tCurrMinDiscrepancies,
-					threshold: tStartingThreshold
-				};
-				while (tRecord.negIndex < tNegLength && tRecord.posIndex < tPosLength) {
-					let tCurrDiscrepancies = tRecord.posIndex + (tNegLength - tRecord.negIndex);
-					if (tCurrDiscrepancies < tRecord.currMinDescrepancies) {
-						tRecord.currMinDescrepancies = tCurrDiscrepancies;
-						tRecord.threshold = tPosProbs[tRecord.posIndex];
-					}
-					tRecord.posIndex++;
-					tRecord.negIndex = findNegIndex(tRecord.negIndex, tPosProbs[tRecord.posIndex]);
-				}
-			}
-			return  tRecord.threshold;
-		}
-
-		// Create values of predicted label and probability for each document
-		let tThresholdResult = findThreshold(),
-			tLabelValues: { id: number, values: any }[] = [],
-			tActualPos = 0,
-			tPredictedPos = 0,
-			tBothPos = 0,
-			tBothNeg = 0;
-		iTools.logisticModel.threshold = tThresholdResult;
-		iTools.documents.forEach((aDoc: any) => {
-			let tProbability: number,
-				tPredictedLabel,
-				tActualLabel,
-				tValues: any = {},
-				tProbName = `${this.kProbPredAttrNamePrefix}${iTools.positiveClassName}`;
-			tProbability = tMapFromCaseIDToProbability[aDoc.caseID];
-			tPredictedLabel = tProbability > tThresholdResult ? iTools.positiveClassName : iTools.negativeClassName;
-			tValues[this.targetPredictedLabelAttributeName] = tPredictedLabel;
-			tValues[tProbName] = tProbability;
-			tActualLabel = aDoc.class;
-			tActualPos += tActualLabel === iTools.positiveClassName ? 1 : 0;
-			tPredictedPos += tPredictedLabel === iTools.positiveClassName ? 1 : 0;
-			tBothPos += (tActualLabel === iTools.positiveClassName && tPredictedLabel === iTools.positiveClassName) ? 1 : 0;
-			tBothNeg += (tActualLabel === iTools.negativeClassName && tPredictedLabel === iTools.negativeClassName) ? 1 : 0;
-
-			// For each document, stash the case ids of its features so we can link selection
-			let tFeatureIDsForThisDoc: number[] = [];
-			iTools.tokenArray.forEach((aToken: any) => {
-				if (aDoc.tokens.findIndex((iFeature: any) => {
-					return iFeature === aToken.token;
-				}) >= 0) {
-					tFeatureIDsForThisDoc.push(aToken.featureCaseID);
-				}
-			});
-			tValues.featureIDs = JSON.stringify(tFeatureIDsForThisDoc);
-
-			tLabelValues.push({
-				id: aDoc.caseID,
-				values: tValues
-			})
-		});
-
-		let computedKappa = computeKappa(iTools.documents.length, tBothPos, tBothNeg, tActualPos, tPredictedPos);
-		iTools.logisticModel.accuracy = computedKappa.observed;
-		iTools.logisticModel.kappa = computedKappa.kappa;
-
-		// Send the values to CODAP
-		await codapInterface.sendRequest({
-			action: 'update',
-			resource: `dataContext[${this.targetDatasetInfo.name}].collection[${this.targetCollectionName}].case`,
-			values: tLabelValues
-		});
-	}
-
-	/**
-	 * We update as many name lists as necessary to be able to display them as choices in the UI.
-	 * @private
-	 */
-	private async updateTargetNames() {
-		this.targetDatasetInfoArray = await getDatasetInfoWithFilter(isNotAModel);
-		if (this.targetDatasetInfo.name === '') {
-			if (this.targetDatasetInfoArray.length > 0)
-				this.targetDatasetInfo = this.targetDatasetInfoArray[0];
-		}
-		if (this.targetDatasetInfo.name !== '') {
-			this.targetCollectionNames = await this.getTargetCollectionNames();
-			if (this.targetCollectionName === '' && this.targetCollectionNames.length > 0)
-				this.targetCollectionName = this.targetCollectionNames[this.targetCollectionNames.length - 1];
-			this.targetAttributeNames = await this.getTargetAttributeNames();
-			if (this.targetAttributeName === '' && this.targetAttributeNames.length > 0)
-				this.targetAttributeName = this.targetAttributeNames[0];
-			if (this.targetClassAttributeName === '' && this.targetAttributeNames.length > 1)
-				this.targetClassAttributeName = this.targetAttributeNames[1];
-			if (this.targetClassAttributeName !== '') {
-				this.targetCategories = await this.getTargetCategories();
-				if (this.targetCategories.indexOf(this.targetPositiveCategory) < 0)
-					this.targetPositiveCategory = this.targetCategories[0];
-			}
-		}
-	}
-
-	private getPossibleColumnFeatureNames(): string[] {
-		let tResult: string[] = [],
-			tConstructedFeatures = this.fcBridge.getConstructedFeaturesList(),
-			tConstructedFeatureNames = tConstructedFeatures.map(iFeature => {
-				return iFeature.name;
-			});
-		this.targetAttributeNames.forEach((iName) => {
-			if ([this.targetAttributeName,
-					this.targetClassAttributeName,
-					this.targetPredictedLabelAttributeName].indexOf(iName) < 0 &&
-				tConstructedFeatureNames.indexOf(iName) < 0 &&
-				!iName.startsWith(this.kProbPredAttrNamePrefix)) {
-				tResult.push(iName)
-			}
-		});
-		return tResult;
-	}
-
-	private async getTargetCollectionNames(): Promise<string[]> {
-		return await getCollectionNames(this.targetDatasetInfo.name);
-	}
-
-	public getConstructedFeatureNames(): string[] {
-		return this.fcBridge.getConstructedFeaturesList().map(iFeature => iFeature.name);
-	}
-
-	private async getTargetAttributeNames(): Promise<string[]> {
-		if (this.targetCollectionName === '') {
-			const tCollNames = await this.getTargetCollectionNames();
-			if (tCollNames.length === 0)
-				return [];
-			this.targetCollectionName = tCollNames[tCollNames.length - 1];
-		}
-		const tListResult: any = await codapInterface.sendRequest(
-			{
-				action: 'get',
-				resource: `dataContext[${this.targetDatasetInfo.name}].collection[${this.targetCollectionName}].attributeList`
-			}
-		)
-			.catch((reason) => {
-				console.log('Error getting attribute names because', reason);
-			});
-		return tListResult.values.map((iValue: any) => {
-			return iValue.name;
-		});
-	}
-
-	private async getTargetCategories(): Promise<string[]> {
-		if (this.targetCollectionName === '') {
-			if (this.targetClassAttributeName === '')
-				return [];
-		}
-		let tCaseIndex = 0,
-			tTargetDatasetName = this.targetDatasetInfo.name,
-			tTargetCollectionName = this.targetCollectionName,
-			tNumCases = await getCaseCount(tTargetDatasetName, tTargetCollectionName),
-			tCategories: string[] = [];
-		while (tCategories.length < 2 && tCaseIndex < tNumCases) {
-			let tCaseResult: any = await codapInterface.sendRequest({
-				action: 'get',
-				resource: `dataContext[${tTargetDatasetName}].collection[${tTargetCollectionName}].caseByIndex[${tCaseIndex}]`
-			})
-				.catch(() => {
-					console.log('Error getting case for category name')
-				});
-			if (tCaseResult.success) {
-				let tCategory = (tCaseResult.values.case.values[this.targetClassAttributeName]).toString();
-				if (tCategory !== '' && tCategories.indexOf(tCategory) === -1)
-					tCategories.push(tCategory);
-			}
-			tCaseIndex++;
-		}
-		return tCategories;
-	}
-
-	/**
-	 * There may already be a models dataset. If so, we want to create a new one with toplevel info in the "models"
-	 * collection with features children of that case
-	 * @param iTokenArray
-	 * @private
-	 */
-	private async createModelsDataset(iTokenArray: any[]) {
-		let this_ = this;
-
-		async function createNewDataset() {
-			let tModelAttributes = [
-					{name: 'Model', description: 'Name of model. Can be edited.'},
-					{name: 'Training Set', editable: false, description: 'Name of dataset used for training'},
-					{name: 'Iterations', editable: false, description: 'Number of iterations used in training'},
-					{name: 'Classes', editable: false, description: 'The two classification labels'},
-					{name: 'Predicted Column Name', editable: false, description: 'The name of the column with predictions'},
-					{name: 'Target Class', editable: false, description: 'The classification label regarded as the target. Chosen when prob of positive is greater than threshold.'},
-					{name: 'Column Features', editable: false, description: 'Names of columns treated as model features'},
-					{name: 'Constructed Features', editable: false, description: 'Names of features created for this model'},
-					{
-						name: 'Frequency Threshold',
-						editable: false,
-						description: 'Number of times something has to appear to be counted as a feature'
-					},
-					{
-						name: 'Ignore Stop Words',
-						editable: false,
-						description: 'Will very common words be excluded from the model'
-					},
-					{
-						name: 'Constant Weight',
-						editable: false,
-						description: 'The computed weight of the constant term in the model'
-					},
-					{
-						name: 'Accuracy', editable: false, precision: 3,
-						description: 'Proportion of correct labels predicted during training'
-					},
-					{
-						name: 'Kappa', editable: false, precision: 3,
-						description: 'Proportion of correctly predicted labels accounting for chance'
-					},
-					{
-						name: 'Threshold', editable: false, precision: 4,
-						description: 'Probability at which a case is labeled positively'
-					}
-				],
-				tFeatureCollectionName = this_.featureCollectionName,
-				tFeatureAttributes = [
-					{
-						name: "feature",
-						description: `A feature is something that comes from the ${this_.targetAttributeName} that can help in the classification process`
-					},
-					{name: "type", description: `The kind of feature (unigram, bigram, count, …)`},
-					{name: "frequency", description: `The number of times the feature appears`},
-					{name: "usages", hidden: true},
-					{
-						name: "weight",
-						precision: 5,
-						description: `A computed value that is proportional to the importance of the feature in the logistic regression classification model`
-					}
-				],
-				tCollections = [{
-					name: tModelsCollectionName,
-					title: tModelsCollectionName,
-					parent: '',
-					attrs: tModelAttributes
-				},
-					{
-						name: tFeatureCollectionName,
-						title: tFeatureCollectionName,
-						parent: tModelsCollectionName,
-						attrs: tFeatureAttributes
-					}];
-			if (this_.state.showWeightsGraph)
-				tCollections.push({
-					name: 'iterations',
-					title: 'iterations',
-					parent: tFeatureCollectionName,
-					attrs: [{
-						name: 'iteration',
-						description: 'In each iteration of improving the model\'s fit to the data new weights for the features are computed.'
-					},
-						{
-							name: 'trialWeight',
-							description: 'In each iteration each feature is assigned a new trialWeight to improve the model\'s fit.',
-							precision: 5
-						}]
-				});
-			const tResult: any = await codapInterface.sendRequest(
-				{
-					action: "create",
-					resource: "dataContext",
-					values: {
-						name: tModelsDataSetName,
-						title: tModelsDataSetName,
-						collections: tCollections
-					}
-				})
-				.catch(() => {
-					console.log(`Error creating feature dataset`);
-				});
-			this_.modelsDatasetID = tResult.values.id;
-
-			await codapInterface.sendRequest({
-				action: 'create',
-				resource: 'component',
-				values: {
-					type: 'caseTable',
-					name: tModelsDataSetName,
-					dataContext: tModelsDataSetName,
-					horizontalScrollOffset: 1000
-				}
-			});
-		}
-
-		let tModelsDatasetInfoArray = await getDatasetInfoWithFilter(isAModel),
-			tModelsDataSetName = this.modelsDatasetName,
-			tModelsCollectionName = this.modelCollectionName,
-			tModelDatasetAlreadyExists = tModelsDatasetInfoArray.findIndex(iInfo=>iInfo.name === tModelsDataSetName) >= 0,
-			tNumPreexistingModels = 0;
-
-		if (tModelDatasetAlreadyExists) {
-			tNumPreexistingModels = await getCaseCount(tModelsDataSetName, tModelsCollectionName);
-		} else {
-			await createNewDataset();
-		}
-
-		const tParentCaseResult: any = await codapInterface.sendRequest(
-			{
-				action: "create",
-				resource: `dataContext[${tModelsDataSetName}].collection[${tModelsCollectionName}].case`,
-				values: [{
-					values: {
-						Model: `Model ${tNumPreexistingModels + 1}`
-					}
-				}]
-			}
-		)
-			.catch((() => {
-				console.log('Error creating parent model case')
-			}));
-		this_.modelCurrentParentCaseID = tParentCaseResult.values[0].id;
-
-		// Put together the values that will go into the features dataset
-		let tFeaturesValues: any = [];
-		iTokenArray.forEach((aToken) => {
-			let tValues: any = {
-				feature: aToken.token, type: 'unigram',
-				frequency: aToken.count,
-				usages: JSON.stringify(aToken.caseIDs),
-			};
-
-			tFeaturesValues.push({
-				parent: this.modelCurrentParentCaseID,
-				values: tValues
-			});
-		});
-		this.featureCaseCount = iTokenArray.length;	// For feedback to user
-		// Send the data to the feature dataset
-		let tFeatureCaseIDs: any = await codapInterface.sendRequest({
-			action: 'create',
-			resource: `dataContext[${this.modelsDatasetName}].collection[${this.featureCollectionName}].case`,
-			values: tFeaturesValues
-		});
-		tFeatureCaseIDs = tFeatureCaseIDs.values.map((aResult: any) => {
-			return aResult.id;
-		});
-		// Add these feature case IDs to their corresponding tokens in the tokenArray
-		for (let i = 0; i < tFeatureCaseIDs.length; i++) {
-			iTokenArray[i].featureCaseID = tFeatureCaseIDs[i];
-		}
-	}
-
-	private async updateWeights(iTokens: any, iWeights: number[]) {
-		let tFeaturesValues: any[] = [];
-		iTokens.forEach((aToken: any, iIndex: number) => {
-			let tOneFeatureUpdate: any = {
-				id: aToken.featureCaseID,
-				values: {
-					type: aToken.type,
-					weight: iWeights[iIndex]
-				}
-			};
-			tFeaturesValues.push(tOneFeatureUpdate);
-		});
-		await codapInterface.sendRequest({
-			action: 'update',
-			resource: `dataContext[${this.modelsDatasetName}].collection[${this.featureCollectionName}].case`,
-			values: tFeaturesValues
-		});
-	}
-
-	/**
-	 * Once we've completed training we can stash model information at the top level of the Models dataset
-	 * @private
-	 */
-	private async updateModelTopLevelInfo() {
-		const tModelsDataSetName = this.modelsDatasetName,
-			tModelsCollectionName = this.modelCollectionName,
-			tConstructedFeatureNames = this.fcBridge.getConstructedFeaturesList().map(iFeature => {
-				return iFeature.name;
-			});
-		await codapInterface.sendRequest({
-			action: "update",
-			resource: `dataContext[${tModelsDataSetName}].collection[${tModelsCollectionName}].case`,
-			values: [{
-				id: this.modelCurrentParentCaseID,
-				values: {
-					"Training Set": this.targetDatasetInfo.title,
-					"Iterations": this.state.iterations,
-					"Frequency Threshold": this.state.unigrams ? this.state.frequencyThreshold : '',
-					"Ignore Stop Words": this.state.unigrams ? this.state.ignoreStopWords : '',
-					"Classes": JSON.stringify(this.targetCategories),
-					"Predicted Column Name": this.targetPredictedLabelAttributeName,
-					"Target Class": this.targetPositiveCategory,
-					"Column Features": this.state.useColumnFeatures ? this.targetColumnFeatureNames.join(', ') : '',
-					"Constructed Features": tConstructedFeatureNames.length > 0 ? tConstructedFeatureNames.join(', ') : '',
-					"Constant Weight": this.logisticModel.theta[0],
-					"Accuracy": this.logisticModel.accuracy,
-					"Kappa": this.logisticModel.kappa,
-					"Threshold": this.logisticModel.threshold
-				}
-			}]
-		})
-			.catch(() => {
-				console.log('Error updating current model parent case')
-			});
-	}
-
-	private async buildModel() {
-		this.logisticModel.iterations = this.state.iterations;
-		this.logisticModel.lockIntercept = this.state.lockIntercept;
-		this.targetCaseCount = await getCaseCount(this.targetDatasetInfo.name, this.targetCollectionName);
-		let tDocuments: {
-				example: string, class: string, caseID: number,
-				columnFeatures: { [key: string]: number | boolean }
-			}[] = [],
-			tPositiveClassName: string;
-		// Grab the strings in the target collection that are the values of the target attribute.
-		// Stash these in an array that can be used to produce a oneHot representation
-		for (let i = 0; i < this.targetCaseCount; i++) {
-			const tGetResult: any = await codapInterface.sendRequest({
-				"action": "get",
-				"resource": `dataContext[${this.targetDatasetInfo.name}].collection[${this.targetCollectionName}].caseByIndex[${i}]`
-			})
-				.catch(() => {
-					console.log('unable to get case');
-				});
-
-			let tCaseID = tGetResult.values.case.id,
-				tText: string = tGetResult.values.case.values[this.targetAttributeName],
-				tClass: string = tGetResult.values.case.values[this.targetClassAttributeName],
-				tColumnNames = this.targetColumnFeatureNames.concat(
-					this.fcBridge.getConstructedFeaturesList().map(iFeature => {
-						return iFeature.name;
-					})),
-				tColumnFeatures: { [key: string]: number | boolean } = {};
-			// We're going to put column features into each document as well so one-hot can include them in the vector
-			tColumnNames.forEach((aName) => {
-				let tValue = tGetResult.values.case.values[aName];
-				if(['1', 'true'].indexOf(String(tValue).toLowerCase()) >= 0)
-					tValue = 1;
-				else
-					tValue = 0;
-				if (tValue)
-					tColumnFeatures[aName] = tValue;
-			});
-			tDocuments.push({example: tText, class: tClass, caseID: tCaseID, columnFeatures: tColumnFeatures});
-		}
-		tPositiveClassName = this.targetPositiveCategory;
-
-		// Now that we know the class name we're predicting, we can add attributes to the target dataset
-		this.targetPredictedLabelAttributeName = 'predicted ' + this.targetClassAttributeName;
-		await addAttributesToTarget(tPositiveClassName, this.targetDatasetInfo.name,
-			this.targetCollectionName, this.targetPredictedLabelAttributeName);
-
-		// Logistic can't happen until we've isolated the features and produced a oneHot representation
-		let tOneHot = oneHot({
-				frequencyThreshold: this.state.frequencyThreshold - 1,
-				ignoreStopWords: this.state.ignoreStopWords,
-				includeUnigrams: this.state.unigrams
-			},
-			tDocuments),
-			tData: number[][] = [];
-
-		// Column feature results get pushed on after unigrams
-
-		// The logisticModel.fit function requires that the class value (0 or 1) be the
-		// last element of each oneHot.
-		tOneHot.oneHotResult.forEach(iResult => {
-			iResult.oneHotExample.push(iResult.class === tPositiveClassName ? 1 : 0);
-			tData.push(iResult.oneHotExample);
-		});
-
-		// By creating the features data set now we give the user an indication that something is happening
-		await this.createModelsDataset(tOneHot.tokenArray);
-		// We have to stash the tokenArray for use in handleFittingProgress which is a callback
-		this.featureTokenArray = tOneHot.tokenArray;
-
-		// Fit a logistic model to the data
-		if (this.state.showWeightsGraph) {
-			await this.setupFeedbackDataset(); // So we can display fitting progress as a graph
-		}
-
-		// The fitting process is asynchronous so we fire it off here
-		this.logisticModel.fit(tData);
-		this.logisticModel._data = tData;
-		this.logisticModel._oneHot = tOneHot;
-		this.logisticModel._documents = tDocuments;
-	}
-
-	/**
-	 * We get here from progressBar when we detect that the iterations are completed
-	 * @private
-	 */
-	private async showResults() {
-		let tTrainedModel = this.logisticModel.fitResult,
-			tData = this.logisticModel._data,
-			tOneHot = this.logisticModel._oneHot,
-			tDocuments = this.logisticModel._documents;
-		await this.updateWeights(tOneHot.tokenArray, tTrainedModel.theta);
-
-		// In the target dataset we're going to add two attributes: "predicted label" and "probability of clickbait"
-		// We pass along some tools that will be needed
-		let tNegativeClassName = this.targetCategories.find((aCat) => {
-			return aCat !== this.targetPositiveCategory;
-		}) || '';
-		let tPredictionTools = {
-			logisticModel: this.logisticModel,
-			oneHotData: tData,
-			documents: tDocuments,
-			tokenArray: tOneHot.tokenArray,
-			positiveClassName: this.targetPositiveCategory,
-			negativeClassName: tNegativeClassName,
-			lockProbThreshold: this.state.lockProbThreshold
-		}
-		await this.showPredictedLabels(tPredictionTools);
-
-		await this.updateModelTopLevelInfo();
-
-		// Clean up a bit
-		delete this.logisticModel._data;
-		delete this.logisticModel._oneHot;
-		delete this.logisticModel._documents;
-		this.featureTokenArray = [];
-		await this.getTextFeedbackManager().addTextComponent();
-		this.setState({status: 'finished'});
-	}
-
-	private async extract(iTargetDatasetInfo: entityInfo) {
-		this.setState({status: 'inProgress'});
-		this.logisticModel.trace = this.state.showWeightsGraph;
-		this.targetDatasetInfo = iTargetDatasetInfo;
-		await deselectAllCasesIn(this.targetDatasetInfo.name);
-		await this.buildModel();
-	}
-
-	private setUpdatePercentageFunc(iFunc: (p: number) => void) {
-		this.updatePercentageFunc = iFunc;
-	}
-
-	private async newFeatureAdded(iNewFeature: ConstructedFeature) {
-		const this_ = this,
-			tTargetAttr = `${this_.targetAttributeName}`;
-
-		function freeFormFormula() {
-			const option = (iNewFeature.info.details as ContainsDetails).containsOption;
-			const tBegins = option === containsOptions[0] ? '^' : '';
-			const tEnds = option === containsOptions[3] ? '$' : '';
-			const tParamString = `${this_.targetAttributeName},"${tBegins}\\\\\\\\b${(iNewFeature.info.details as ContainsDetails).freeFormText}\\\\\\\\b${tEnds}"`;
-			let tResult = '';
-			switch (option) {//['starts with', 'contains', 'does not contain', 'ends with']
-				case containsOptions[0]:	// starts with
-					tResult = `patternMatches(${tParamString})>0`
-					break;
-				case containsOptions[1]:	// contains
-					tResult = `patternMatches(${tParamString})>0`
-					break;
-				case containsOptions[2]:	// does not contain
-					tResult = `patternMatches(${tParamString})=0`
-					break;
-				case containsOptions[3]:	// ends with
-					tResult = `patternMatches(${tParamString})>0`
-					break;
-			}
-			return tResult;
-		}
-
-		function anyNumberFormula() {
-			const kNumberPattern = `[0-9]+`;
-			let tExpression = '';
-			switch ((iNewFeature.info.details as ContainsDetails).containsOption) {//['starts with', 'contains', 'does not contain', 'ends with']
-				case containsOptions[0]:	// starts with
-					tExpression = `patternMatches(${tTargetAttr}, "^${kNumberPattern}")>0`
-					break;
-				case containsOptions[1]:	// contains
-					tExpression = `patternMatches(${tTargetAttr}, "${kNumberPattern}")>0`
-					break;
-				case containsOptions[2]:	// does not contain
-					tExpression = `patternMatches(${tTargetAttr}, "${kNumberPattern}")=0`
-					break;
-				case containsOptions[3]:	// ends with
-					tExpression = `patternMatches(${tTargetAttr}, "${kNumberPattern}$")>0`
-					break;
-			}
-			return tExpression;
-		}
-
-		/*function anyDateFormula() {
-			const kDigit = `\\\\\\\\d`,
-				kSlash = `\\\\\\\\/`,
-				kDatePattern = `^((0?[13578]|10|12)(-|${kSlash})(([1-9])|(0[1-9])|([12])([0-9]?)|(3[01]?))(-|${kSlash})((19)([2-9])(${kDigit}{1})|(20)([01])(${kDigit}{1})|([8901])(${kDigit}{1}))|(0?[2469]|11)(-|${kSlash})(([1-9])|(0[1-9])|([12])([0-9]?)|(3[0]?))(-|${kSlash})((19)([2-9])(${kDigit}{1})|(20)([01])(${kDigit}{1})|([8901])(${kDigit}{1})))$`;
-			let tExpression = '';
-			switch ((iNewFeature.info.details as ContainsDetails).containsOption) {//['starts with', 'contains', 'does not contain', 'ends with']
-				case containsOptions[0]:	// starts with
-					tExpression = `patternMatches(${tTargetAttr}, "^${kDatePattern}")>0`
-					break;
-				case containsOptions[1]:	// contains
-					tExpression = `patternMatches(${tTargetAttr}, "${kDatePattern}")>0`
-					break;
-				case containsOptions[2]:	// does not contain
-					tExpression = `patternMatches(${tTargetAttr}, "${kDatePattern}")=0`
-					break;
-				case containsOptions[3]:	// ends with
-					tExpression = `patternMatches(${tTargetAttr}, "${kDatePattern}$")>0`
-					break;
-			}
-			return tExpression;
-		}*/
-
-		function anyListFormula() {
-			let tExpression;
-			const kListName = (iNewFeature.info.details as ContainsDetails).wordList.datasetName,
-				kListAttributeName = (iNewFeature.info.details as ContainsDetails).wordList.firstAttributeName,
-				kWords = SQ.lists[kListName];
-			if (kWords) {
-				tExpression = kWords.reduce((iSoFar, iWord) => {
-					return iSoFar === '' ? `\\\\\\\\b${iWord}\\\\\\\\b` : iSoFar + '|' + `\\\\\\\\b${iWord}\\\\\\\\b`;
-				}, '');
-				switch ((iNewFeature.info.details as ContainsDetails).containsOption) {//['starts with', 'contains', 'does not contain', 'ends with']
-					case containsOptions[0]:	// starts with
-						tExpression = `patternMatches(${tTargetAttr}, "^${tExpression}")>0`;
-						break;
-					case containsOptions[1]:	// contains
-						tExpression = `patternMatches(${tTargetAttr}, "${tExpression}")>0`;
-						break;
-					case containsOptions[2]:	// does not contain
-						tExpression = `patternMatches(${tTargetAttr}, "${tExpression}")=0`;
-						break;
-					case containsOptions[3]:	// ends with
-						tExpression = `patternMatches(${tTargetAttr}, "${tExpression}$")>0`;
-						break;
-				}
-			} else {
-				tExpression = `wordListMatches(${tTargetAttr},"${kListName}","${kListAttributeName}")>0`
-			}
-			return tExpression;
-		}
-
-		if (!this.targetDatasetInfo)
-			return;
-		let tFormula = '';
-		switch (iNewFeature.info.kind) {
-			case featureKinds[0]:	// contains feature
-				switch ((iNewFeature.info.details as ContainsDetails).kindOption) {
-					case kindOfThingContainedOptions[0]: // 'any number'
-						tFormula = anyNumberFormula();
-						break;
-					case kindOfThingContainedOptions[1]: // 'any from list'
-						tFormula = anyListFormula();
-						break;
-					case kindOfThingContainedOptions[2]: // 'any free form text'
-						tFormula = freeFormFormula();
-						break;
-					/*
-										case kindOfThingContainedOptions[3]: // 'any date'
-											tFormula = anyDateFormula();
-											break;
-					*/
-				}
-				break;
-			case featureKinds[1]:	// count feature
-
-				break;
-		}
-		if (tFormula !== '')
-			await codapInterface.sendRequest({
-				action: 'create',
-				resource: `dataContext[${this.targetDatasetInfo.name}].collection[${this.targetCollectionName}].attribute`,
-				values: {
-					name: iNewFeature.name,
-					formula: tFormula
-				}
-			});
-		await scrollCaseTableToRight(this.targetDatasetInfo.name);
-		this.forceUpdate();
-	}
-
-	private renderForActiveState() {
-		let this_ = this,
-			tInProgress = this.state.status === 'inProgress',
-			progressIndicator = (tInProgress ?
-				<div>
-					<ProgressBar
-						percentComplete={Math.round(100 * this.state.currentIteration / this.state.iterations)}
-						setUpdatePercentage={this.setUpdatePercentageFunc}
-					/>
-				</div>
-				: ''),
-			dataSetControl: any = tInProgress ?
-				(<p>Training with <strong>{this.targetDatasetInfo.title}</strong></p>)
-				:
-				entityPropertyControl(this.targetDatasetInfoArray,
-					'targetDatasetInfo', 'Training set: ',
-					'No training set found');
-
-		function entityPropertyControl(entityInfoArray: entityInfo[], propName: string, prompt: string, noneFoundPrompt: string) {
-			if (entityInfoArray.length === 1)
-				this_[propName] = entityInfoArray[0];
-			if (entityInfoArray.length === 0) {
-				return (
-					<p>{prompt}<em>{noneFoundPrompt}</em></p>
-				)
-			} else {
-				return (
-					<label>
-						<span>{prompt}</span>
-						<SelectBox
-							dataSource={entityInfoArray.map(iInfo=>iInfo.title)}
-							placeholder={'Choose one'}
-							value={this_[propName].title}
-							style={{display: 'inline-block'}}
-							onValueChange={async (e) => {
-								this_[propName] = entityInfoArray.find(iInfo => iInfo.title === e);
-								await this_.updateTargetNames();
-								this_.setState({count: this_.count + 1});
-							}
-							}
-						>
-						</SelectBox>
-					</label>
-				);
-			}
-		}
-
-		function stringPropertyControl(listOfNames: string[], propName: string, prompt: string, noneFoundPrompt: string) {
-			if (listOfNames.length === 1)
-				this_[propName] = listOfNames[0];
-			if (listOfNames.length === 0) {
-				return (
-					<p>{prompt}<em>{noneFoundPrompt}</em></p>
-				)
-			} else {
-				return (
-					<label>
-						<span>{prompt}</span>
-						<SelectBox
-							dataSource={listOfNames}
-							placeholder={'Choose one'}
-							value={this_[propName]}
-							style={{display: 'inline-block'}}
-							onValueChange={async (e) => {
-								this_[propName] = e;
-								await this_.updateTargetNames();
-								this_.setState({count: this_.count + 1});
-							}
-							}
-						>
-						</SelectBox>
-					</label>
-				);
-			}
-		}
-		function getColumnControl() {
-			if (tInProgress || this_.targetDatasetInfo.name === '')
-				return '';
-			return (stringPropertyControl(this_.targetAttributeNames,
-				'targetAttributeName', 'Column to train on: ', 'No columns found'));
-		}
-
-		function getLabelAttributeControl() {
-			if (tInProgress || this_.targetDatasetInfo.name === '')
-				return '';
-			return (stringPropertyControl(this_.targetAttributeNames,
-				'targetClassAttributeName', 'Column with labels: ', 'No columns found'));
-		}
-
-		function getLabelsControl() {
-			if (tInProgress || this_.targetDatasetInfo.name === '')
-				return '';
-			return (stringPropertyControl(this_.targetCategories,
-				'targetPositiveCategory', 'Target label: ', 'No labels found'));
-		}
-
-		function doItButton() {
-			if (tInProgress)
-				return '';
-			else if (this_.targetDatasetInfo.name === '') {
-				return (
-					<div>
-						<p>Cannot train a model without a training set.</p>
-					</div>
-				);
-			} else if(!this_.state.unigrams &&
-				!(this_.state.useColumnFeatures && this_.targetColumnFeatureNames.length > 0) &&
-				this_.fcBridge.getConstructedFeaturesList().filter(iItem=>iItem.chosen).length === 0) {
-				return (
-					<div>
-						<p>Cannot train a model without specifying at least one feature.</p>
-					</div>
-				);
-			} else {
-				return (
-					<div>
-						<br/>
-						<Button onClick={() => {
-							this_.extract(this_.targetDatasetInfo);
-						}}>Train using {this_.targetDatasetInfo.title}</Button>
-					</div>
-				);
-			}
-
-		}
-
-		function checkBox(label: string, checked: boolean, disabled: boolean, setProp: any, key?: number, hint?:string) {
-			return (
-				<div key={key}>
-					<CheckBox
-						text={label}
-						value={checked && !disabled}
-						disabled={disabled}
-						hint={hint}
-						onValueChange={
-							e => setProp(e)
-						}
-					/>
-				</div>
-			)
-		}
-
-		function numericInput(label: string, min: number, max: number, get: any, set: any) {
-			return (
-				<NumericInput
-					label={label}
-					min={min}
-					max={max}
-					getter={get}
-					setter={set}
-				/>
-			);
-		}
-
-		function columnFeatureCheckboxes() {
-			if (!this_.state.useColumnFeatures)
-				return '';
-			let tCheckboxes: any[] = [];
-			this_.getPossibleColumnFeatureNames().forEach((iName, iIndex) => {
-					tCheckboxes.push(checkBox(
-						iName,
-						this_.targetColumnFeatureNames.indexOf(iName) >= 0,
-						false,
-						(newValue: boolean) => {
-							if (newValue) {
-								this_.targetColumnFeatureNames.push(iName);
-							} else {
-								let tIndex = this_.targetColumnFeatureNames.indexOf(iName);
-								if (tIndex >= 0)
-									this_.targetColumnFeatureNames.splice(tIndex, 1);
-							}
-							this_.setState({count: this_.state.count + 1})
-						},
-						iIndex
-						)
-					)
-				}
-			);
-			if (tCheckboxes.length > 0)
-				return (
-					<div className='sq-checkboxes'>
-						{tCheckboxes}
-					</div>);
-			else return '';
-		}
-
-		function constructedFeatureCheckboxes() {
-			let tCheckboxes: any[] = [],
-				tConstructedFeatureList = this_.fcBridge.getConstructedFeaturesList();
-			tConstructedFeatureList.forEach((iFeature, iIndex) => {
-					tCheckboxes.push(checkBox(
-						`${iFeature.name}—${iFeature.description || ''}`,
-						iFeature.chosen,
-						false,
-						(newValue: boolean) => {
-							iFeature.chosen = newValue;
-							this_.forceUpdate();
-						},
-						iIndex
-						)
-					)
-				}
-			);
-			if (tCheckboxes.length > 0)
-				return (
-					<div className='sq-checkboxes'>
-						{tCheckboxes}
-					</div>);
-			else return '';
-		}
-
-		function handleSelectionChanged(obj: any, key: string, names: string[]) {
-			const addedItems = obj.addedItems,
-				addedItem = addedItems.length > 0 ? addedItems[0] : null,
-				addedItemTitle = addedItem ? addedItem.title : '',
-				addedItemIndex = names.indexOf(addedItemTitle);
-			let newAccordionState = Object.assign({}, this_.state.accordianSelection);
-			newAccordionState[key] = addedItemIndex;
-			this_.setState({accordianSelection: newAccordionState});
-		}
-
-		function outerSelectionChanged(obj: any) {
-			handleSelectionChanged(obj, 'outer', outerNames);
-		}
-
-		function innerSelectionChanged(obj: any) {
-			handleSelectionChanged(obj, 'inner', innerNames);
-		}
-
-		return (
-			<div className='sq-options'>
-				<Accordion
-					collapsible={true} multiple={false}
-					onSelectionChanged={outerSelectionChanged}
-					selectedIndex={this.state.accordianSelection.outer}
-				>
-					<Item
-						title='Extraction'>
-						<Accordion
-							collapsible={true} multiple={false}
-							onSelectionChanged={innerSelectionChanged}
-							selectedIndex={this.state.accordianSelection.inner}>
-							<Item
-								title='Setup'>
-								<div>
-									{dataSetControl}
-									{getColumnControl()}
-									{getLabelAttributeControl()}
-									{getLabelsControl()}
-								</div>
-							</Item>
-							<Item
-								title='Features'>
-								<div>
-									{checkBox(' Unigrams',
-										this.state.unigrams,
-										false,
-										(newValue: boolean) => {
-											this.setState({unigrams: newValue})
-										})}
-									{checkBox(' Column features',
-										this.state.useColumnFeatures,
-										this.getPossibleColumnFeatureNames().length === 0,
-										(newValue: boolean) => {
-											this.setState({useColumnFeatures: newValue})
-										})}
-									{columnFeatureCheckboxes()}
-									<FeatureConstructor
-										fcBridge={this.fcBridge}
-										setStorageCallbacks={this.setFeatureConstructorStorageCallbacks}
-									/>
-									{constructedFeatureCheckboxes()}
-								</div>
-							</Item>
-							<Item
-								title='Settings'>
-								<div>
-									{numericInput('Frequency threshold',
-										1, 20,
-										() => this.state.frequencyThreshold,
-										(newValue: number) => {
-											this.setState({frequencyThreshold: newValue})
-										})}
-									{checkBox(' Ignore stop words',
-										this.state.ignoreStopWords,
-										false,
-										(newValue: boolean) => {
-											this.setState({ignoreStopWords: newValue})
-										},
-									1,
-									Object.keys(stopWords).join(', '))}
-								</div>
-							</Item>
-						</Accordion>
-					</Item>
-					<Item
-						title='Model Setup'>
-						<div>
-							{numericInput('Iterations: ',
-								20, 2000,
-								() => this.state.iterations,
-								(newValue: number) => {
-									this.setState({iterations: newValue})
-								})}
-							{checkBox(' Lock intercept at zero',
-								this.state.lockIntercept,
-								false,
-								(newValue: boolean) => {
-									this.setState({lockIntercept: newValue})
-								})}
-							{checkBox(' Use 0.5 as probability threshold',
-								this.state.lockProbThreshold,
-								false,
-								(newValue: boolean) => {
-									this.setState({lockProbThreshold: newValue})
-								})}
-							{checkBox(' Show progress graphs',
-								this.state.showWeightsGraph,
-								false,
-								(newValue: boolean) => {
-									this.setState({showWeightsGraph: newValue})
-								})}
-						</div>
-					</Item>
-				</Accordion>
-
-				{doItButton()}
-				{progressIndicator}
-
-			</div>)
-	}
-
-	private renderForFinishedState() {
-		return <div className={'sq-output'}>
-			<p>Your analysis is finished!</p>
-			<p>In <b>{this.targetDatasetInfo.title}</b> identified {this.featureCaseCount} <b>features </b>
-				in <b>{this.targetCaseCount} {pluralize(this.targetAttributeName)}</b>.</p>
-			<p>Target label is {this.targetPositiveCategory}.</p>
-			<p>Feature weights were computed by a logistic regression model.</p>
-			<p>Iterations = {this.state.iterations}</p>
-			<p>Frequency threshold = {this.state.frequencyThreshold}</p>
-			<p>Accuracy = {this.logisticModel.accuracy !== undefined ? Number(this.logisticModel.accuracy.toFixed(3)) : ''}</p>
-			<p>Kappa = {this.logisticModel.kappa !== undefined ? Number(this.logisticModel.kappa.toFixed(3)) : ''}</p>
-			<p>Threshold = {this.logisticModel.threshold !== undefined ? Number(this.logisticModel.threshold.toFixed(4)) : ''}</p>
-			<br/>
-			<Button onClick={() => {
-				this.setState({status: 'active'});
-			}}>Train Again</Button>
-		</div>
-	}
-
-	private static renderForErrorState() {
-		return <div>
-			<p>Sorry but something isn't set up correctly.</p>
-			<p>Currently we can only handle text analysis with a flat dataset with the text in the first
-				column.</p>
-		</div>
-	}
-
-	public render() {
-		switch (this.state.status) {
-			case 'error':
-				return FeatureManager.renderForErrorState();
-			case 'active':
-			case 'inProgress':
-				return this.renderForActiveState();
-			case 'finished':
-			default:
-				return this.renderForFinishedState();
-		}
-	}
-}
diff --git a/src/index.tsx b/src/index.tsx
index 11ec69f..96b23ec 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import Storyq from './storyq';
+import Storyq from './components/storyq';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<Storyq />, document.getElementById('root'));
diff --git a/src/lib/CodapInterface.ts b/src/lib/CodapInterface.ts
index 2d64328..229a136 100644
--- a/src/lib/CodapInterface.ts
+++ b/src/lib/CodapInterface.ts
@@ -48,36 +48,38 @@ let connection: { call: (arg0: any, arg1: (response: any) => void) => void; } |
 let connectionState = 'preinit';
 
 let stats = {
-  countDiReq: 0,
-  countDiRplSuccess: 0,
-  countDiRplFail: 0,
-  countDiRplTimeout: 0,
-  countCodapReq: 0,
-  countCodapUnhandledReq: 0,
-  countCodapRplSuccess: 0,
-  countCodapRplFail: 0,
-  timeDiFirstReq: (null as Date | null),
-  timeDiLastReq: (null as Date | null),
-  timeCodapFirstReq: (null as Date | null),
-  timeCodapLastReq: (null as Date | null)
+	countDiReq: 0,
+	countDiRplSuccess: 0,
+	countDiRplFail: 0,
+	countDiRplTimeout: 0,
+	countCodapReq: 0,
+	countCodapUnhandledReq: 0,
+	countCodapRplSuccess: 0,
+	countCodapRplFail: 0,
+	timeDiFirstReq: (null as Date | null),
+	timeDiLastReq: (null as Date | null),
+	timeCodapFirstReq: (null as Date | null),
+	timeCodapLastReq: (null as Date | null)
 };
 
 interface IConfig {
-  stateHandler?: (arg0: any) => void;
-  customInteractiveStateHandler?: boolean;
-  name?: any;
-  title?: any;
-  version?: any;
-  dimensions?: any;
-  preventBringToFront?: any;
-  preventDataContextReorg?: any;
-  cannotClose?: boolean
+	stateHandler?: (arg0: any) => void;
+	customInteractiveStateHandler?: boolean;
+	name?: any;
+	title?: any;
+	version?: any;
+	dimensions?: any;
+	preventBringToFront?: any;
+	preventDataContextReorg?: any;
+	cannotClose?: boolean
 }
 
 let config: IConfig | null = null;
 
 export interface CODAP_Notification {
-  action:string, resource:any, values:any
+	action: string,
+	resource: any,
+	values: any
 }
 
 /**
@@ -106,325 +108,341 @@ interface Subscriber {
 let notificationSubscribers: Subscriber[] = [];
 
 function matchResource(resourceName: any, resourceSpec: string) {
-  return resourceSpec === '*' || resourceName === resourceSpec;
+	return resourceSpec === '*' || resourceName === resourceSpec;
 }
 
-function notificationHandler (request: CODAP_Notification, callback: (arg0: { success: boolean; }) => void) {
-  let action = request.action;
-  let resource = request.resource;
-  let requestValues = request.values;
-  let returnMessage = {success: true};
-
-  connectionState = 'active';
-  stats.countCodapReq += 1;
-  stats.timeCodapLastReq = new Date();
-  if (!stats.timeCodapFirstReq) {
-    stats.timeCodapFirstReq = stats.timeCodapLastReq;
-  }
-
-  if (action === 'notify' && !Array.isArray(requestValues)) {
-    requestValues = [requestValues];
-  }
-
-  let handled = false;
-  let success = true;
-
-  if ((action === 'get') || (action === 'update')) {
-    // get assumes only one subscriber because it expects only one response.
-    notificationSubscribers.some(function (subscription) {
-      let result = false;
-      try {
-        if ((subscription.actionSpec === action) &&
-            matchResource(resource, subscription.resourceSpec)) {
-          let rtn = subscription.handler(request);
-          if (rtn && rtn.success) { stats.countCodapRplSuccess++; } else{ stats.countCodapRplFail++; }
-          returnMessage = rtn;
-          result = true;
-        }
-      } catch (ex) {
-        // console.log('DI Plugin notification handler exception: ' + ex);
-        result = true;
-      }
-      return result;
-    });
-    if (!handled) {
-      stats.countCodapUnhandledReq++;
-    }
-  } else if (action === 'notify') {
-    requestValues.forEach(function (value: { operation: any; }) {
-      notificationSubscribers.forEach(function (subscription) {
-        // pass this notification to matching subscriptions
-        handled = false;
-        if ((subscription.actionSpec === action) && matchResource(resource,
-                subscription.resourceSpec) && (!subscription.operation ||
-            (subscription.operation === value.operation) && subscription.handler)) {
-          let rtn = subscription.handler(
-              {action: action, resource: resource, values: value});
-          if (rtn && rtn.success) { stats.countCodapRplSuccess++; } else{ stats.countCodapRplFail++; }
-          success = (success && (rtn ? rtn.success : false));
-          handled = true;
-        }
-      });
-      if (!handled) {
-        stats.countCodapUnhandledReq++;
-      }
-    });
-  } else {
-    // console.log("DI Plugin received unknown message: " + JSON.stringify(request));
-  }
-  return callback(returnMessage);
+function notificationHandler(request: CODAP_Notification, callback: (arg0: { success: boolean; }) => void) {
+	let action = request.action;
+	let resource = request.resource;
+	let requestValues = request.values;
+	let returnMessage = {success: true};
+
+	connectionState = 'active';
+	stats.countCodapReq += 1;
+	stats.timeCodapLastReq = new Date();
+	if (!stats.timeCodapFirstReq) {
+		stats.timeCodapFirstReq = stats.timeCodapLastReq;
+	}
+
+	if (action === 'notify' && !Array.isArray(requestValues)) {
+		requestValues = [requestValues];
+	}
+
+	let handled = false;
+	let success = true;
+
+	if ((action === 'get') || (action === 'update')) {
+		// get assumes only one subscriber because it expects only one response.
+		notificationSubscribers.some(function (subscription) {
+			let result = false;
+			try {
+				if ((subscription.actionSpec === action) &&
+					matchResource(resource, subscription.resourceSpec)) {
+					let rtn = subscription.handler(request);
+					if (rtn && rtn.success) {
+						stats.countCodapRplSuccess++;
+					} else {
+						stats.countCodapRplFail++;
+					}
+					returnMessage = rtn;
+					result = true;
+				}
+			} catch (ex) {
+				// console.log('DI Plugin notification handler exception: ' + ex);
+				result = true;
+			}
+			return result;
+		});
+		if (!handled) {
+			stats.countCodapUnhandledReq++;
+		}
+	} else if (action === 'notify') {
+		requestValues.forEach(function (value: { operation: any; }) {
+			notificationSubscribers.forEach(function (subscription) {
+				// pass this notification to matching subscriptions
+				handled = false;if ((subscription.actionSpec === action) &&
+					matchResource(resource, subscription.resourceSpec) &&
+					(!subscription.operation || subscription.operation === value.operation || (
+						Array.isArray(subscription.operation) && subscription.operation.includes(value.operation)
+					)) && subscription.handler) {
+					// console.log(`resource = ${resource}, operation = ${subscription.operation}, value = ${JSON.stringify(value)}`)
+					let rtn = subscription.handler({action: action, resource: resource, values: value});
+					if (rtn && rtn.success) {
+						stats.countCodapRplSuccess++;
+					} else {
+						stats.countCodapRplFail++;
+					}
+					success = (success && (rtn ? rtn.success : false));
+					handled = true;
+				}
+			});
+			if (!handled) {
+				stats.countCodapUnhandledReq++;
+			}
+		});
+	} else {
+		// console.log("DI Plugin received unknown message: " + JSON.stringify(request));
+	}
+	return callback(returnMessage);
 }
 
 const codapInterface = {
-  /**
-   * Connection statistics
-   */
-  stats: stats,
-
-  /**
-   * Initialize connection. nothing change
-   *
-   * Start connection. Request interactiveFrame to get prior state, if any.
-   * Update interactive frame to set name and dimensions and other configuration
-   * information.
-   *
-   * @param iConfig {object} Configuration. Optional properties: title {string},
-   *                        version {string}, dimensions {object}
-   *
-   * @param iCallback {function(interactiveState)}
-   * @return {Promise} Promise of interactiveState;
-   */
-  init: function (iConfig: IConfig, iCallback?: (arg0: any) => void) {
-    let this_ = this;
-    return new Promise(function (resolve: (arg0: any) => void, reject: { (arg0: string): void; (arg0: any): void; }) {
-      function getFrameRespHandler(resp: { values: { error: any; savedState: any }; success: boolean }[]) {
-        let success = resp && resp[1] && resp[1].success;
-        let receivedFrame = success && resp[1].values;
-        let savedState = receivedFrame && receivedFrame.savedState;
-        this_.updateInteractiveState(savedState);
-        if (success) {
-          // deprecated way of conveying state
-          if (iConfig.stateHandler) {
-            iConfig.stateHandler(savedState);
-          }
-          resolve(savedState);
-        } else {
-          if (!resp) {
-            reject('Connection request to CODAP timed out.');
-          } else {
-            reject(
-                (resp[1] && resp[1].values && resp[1].values.error) ||
-                'unknown failure');
-          }
-        }
-        if (iCallback) {
-          iCallback(savedState);
-        }
-      }
-
-      let getFrameReq = {action: 'get', resource: 'interactiveFrame'};
-      let newFrame = {
-        name: iConfig.name,
-        title: iConfig.title,
-        version: iConfig.version,
-        dimensions: iConfig.dimensions,
-        preventBringToFront: iConfig.preventBringToFront,
-        preventDataContextReorg: iConfig.preventDataContextReorg,
-        cannotClose: iConfig.cannotClose
-      };
-      let updateFrameReq = {
-        action: 'update',
-        resource: 'interactiveFrame',
-        values: newFrame
-      };
-
-      config = iConfig;
-
-      // initialize connection
-      connection = new IframePhoneRpcEndpoint(
-          notificationHandler, "data-interactive", window.parent);
-
-      if (!config.customInteractiveStateHandler) {
-        this_.on('get', 'interactiveState', function () {
-          return ({success: true, values: this_.getInteractiveState()});
-        }.bind(this_));
-      }
-
-      // console.log('sending interactiveState: ' + JSON.stringify(this_.getInteractiveState));
-      // update, then get the interactiveFrame.
-      return this_.sendRequest([updateFrameReq, getFrameReq])
-        .then(getFrameRespHandler as any, reject);
-    }.bind(this));
-  },
-
-  /**
-   * Current known state of the connection
-   * @return {'preinit' || 'init' || 'active' || 'inactive' || 'closed'}
-   */
-  getConnectionState: function ():string {return connectionState;},
-
-  getStats: function () {
-    return stats;
-  },
-
-  getConfig: function () {
-    return config;
-  },
-
-  /**
-   * Returns the interactive state.
-   *
-   * @returns {object}
-   */
-  getInteractiveState: function () {
-    return interactiveState;
-  },
-
-  /**
-   * Updates the interactive state.
-   * @param iInteractiveState {Object}
-   */
-  updateInteractiveState: function (iInteractiveState: any) {
-    if (!iInteractiveState) {
-      return;
-    }
-    interactiveState = Object.assign(interactiveState, iInteractiveState);
-  },
-
-  destroy: function () {
-    // todo : more to do?
-    connection = null;
-  },
-
-  /**
-   * Sends a request to CODAP. The format of the message is as defined in
-   * {@link https://github.com/concord-consortium/codap/wiki/CODAP-Data-Interactive-API}.
-   *
-   * @param message {String}
-   * @param callback {function(response, request)} Optional callback to handle
-   *    the CODAP response. Note both the response and the initial request will
-   *    sent.
-   *
-   * @return {Promise} The promise of the response from CODAP.
-   */
-  sendRequest: function (message: any, callback?: any) {
-    return new Promise(function (resolve, reject){
-      function handleResponse (request: any, response: {success: boolean} | undefined, callback: (arg0: any, arg1: any) => void) {
-        if (response === undefined) {
-          // console.warn('handleResponse: CODAP request timed out');
-          reject('handleResponse: CODAP request timed out: ' + JSON.stringify(request));
-          stats.countDiRplTimeout++;
-        } else {
-          connectionState = 'active';
-          if (response.success) { stats.countDiRplSuccess++; } else { stats.countDiRplFail++; }
-          resolve(response);
-        }
-        if (callback) {
-          callback(response, request);
-        }
-      }
-      switch (connectionState) {
-        case 'closed': // log the message and ignore
-          // console.warn('sendRequest on closed CODAP connection: ' + JSON.stringify(message));
-          reject('sendRequest on closed CODAP connection: ' + JSON.stringify(message));
-          break;
-        case 'preinit': // warn, but issue request.
-          // console.log('sendRequest on not yet initialized CODAP connection: ' +
-              // JSON.stringify(message));
-          /* falls through */
-        default:
-          if (connection) {
-            stats.countDiReq++;
-            stats.timeDiLastReq = new Date();
-            if (!stats.timeDiFirstReq) {
-              stats.timeCodapFirstReq = stats.timeDiLastReq;
-            }
-
-            connection.call(message, function (response: any) {
-              handleResponse(message, response, callback);
-            });
-          } else {
-            // console.error('sendRequest on non-existent CODAP connection');
-          }
-      }
-    });
-  },
-
-  /**
-   * Registers a handler to respond to CODAP-initiated requests and
-   * notifications. See {@link https://github.com/concord-consortium/codap/wiki/CODAP-Data-Interactive-API#codap-initiated-actions}
-   *
-   * @param actionSpec {'get' || 'notify'} (optional) Action to handle. Defaults to 'notify'.
-   * @param resourceSpec {String} A resource string.
-   * @param operation {String} (optional) name of operation, e.g. 'create', 'delete',
-   *   'move', 'resize', .... If not specified, all operations will be reported.
-   * @param handler {Function} A handler to receive the notifications.
-   */
+	/**
+	 * Connection statistics
+	 */
+	stats: stats,
+
+	/**
+	 * Initialize connection. nothing change
+	 *
+	 * Start connection. Request interactiveFrame to get prior state, if any.
+	 * Update interactive frame to set name and dimensions and other configuration
+	 * information.
+	 *
+	 * @param iConfig {object} Configuration. Optional properties: title {string},
+	 *                        version {string}, dimensions {object}
+	 *
+	 * @param iCallback {function(interactiveState)}
+	 * @return {Promise} Promise of interactiveState;
+	 */
+	init: function (iConfig: IConfig, iCallback?: (arg0: any) => void) {
+		let this_ = this;
+		return new Promise(function (resolve: (arg0: any) => void, reject: { (arg0: string): void; (arg0: any): void; }) {
+			function getFrameRespHandler(resp: { values: { error: any; savedState: any }; success: boolean }[]) {
+				let success = resp && resp[1] && resp[1].success;
+				let receivedFrame = success && resp[1].values;
+				let savedState = receivedFrame && receivedFrame.savedState;
+				this_.updateInteractiveState(savedState);
+				if (success) {
+					// deprecated way of conveying state
+					if (iConfig.stateHandler) {
+						iConfig.stateHandler(savedState);
+					}
+					resolve(savedState);
+				} else {
+					if (!resp) {
+						reject('Connection request to CODAP timed out.');
+					} else {
+						reject(
+							(resp[1] && resp[1].values && resp[1].values.error) ||
+							'unknown failure');
+					}
+				}
+				if (iCallback) {
+					iCallback(savedState);
+				}
+			}
+
+			let getFrameReq = {action: 'get', resource: 'interactiveFrame'};
+			let newFrame = {
+				name: iConfig.name,
+				title: iConfig.title,
+				version: iConfig.version,
+				dimensions: iConfig.dimensions,
+				preventBringToFront: iConfig.preventBringToFront,
+				preventDataContextReorg: iConfig.preventDataContextReorg,
+				cannotClose: iConfig.cannotClose
+			};
+			let updateFrameReq = {
+				action: 'update',
+				resource: 'interactiveFrame',
+				values: newFrame
+			};
+
+			config = iConfig;
+
+			// initialize connection
+			connection = new IframePhoneRpcEndpoint(
+				notificationHandler, "data-interactive", window.parent);
+
+			if (!config.customInteractiveStateHandler) {
+				this_.on('get', 'interactiveState', function () {
+					return ({success: true, values: this_.getInteractiveState()});
+				});
+			}
+
+			// console.log('sending interactiveState: ' + JSON.stringify(this_.getInteractiveState));
+			// update, then get the interactiveFrame.
+			return this_.sendRequest([updateFrameReq, getFrameReq])
+				.then(getFrameRespHandler as any, reject);
+		});
+	},
+
+	/**
+	 * Current known state of the connection
+	 * @return {'preinit' || 'init' || 'active' || 'inactive' || 'closed'}
+	 */
+	getConnectionState: function (): string {
+		return connectionState;
+	},
+
+	getStats: function () {
+		return stats;
+	},
+
+	getConfig: function () {
+		return config;
+	},
+
+	/**
+	 * Returns the interactive state.
+	 *
+	 * @returns {object}
+	 */
+	getInteractiveState: function () {
+		return interactiveState;
+	},
+
+	/**
+	 * Updates the interactive state.
+	 * @param iInteractiveState {Object}
+	 */
+	updateInteractiveState: function (iInteractiveState: any) {
+		if (!iInteractiveState) {
+			return;
+		}
+		interactiveState = Object.assign(interactiveState, iInteractiveState);
+	},
+
+	destroy: function () {
+		connection = null;
+	},
+
+	/**
+	 * Sends a request to CODAP. The format of the message is as defined in
+	 * {@link https://github.com/concord-consortium/codap/wiki/CODAP-Data-Interactive-API}.
+	 *
+	 * @param message {String}
+	 * @param callback {function(response, request)} Optional callback to handle
+	 *    the CODAP response. Note both the response and the initial request will
+	 *    sent.
+	 *
+	 * @return {Promise} The promise of the response from CODAP.
+	 */
+	sendRequest: function (message: any, callback?: any) {
+		// console.log(`sending operation ${JSON.stringify(message)}`)
+		return new Promise(function (resolve, reject) {
+			function handleResponse(request: any, response: { success: boolean } | undefined, callback: (arg0: any, arg1: any) => void) {
+				if (response === undefined) {
+					// console.warn('handleResponse: CODAP request timed out');
+					reject('handleResponse: CODAP request timed out: ' + JSON.stringify(request));
+					stats.countDiRplTimeout++;
+				} else {
+					connectionState = 'active';
+					if (response.success) {
+						stats.countDiRplSuccess++;
+					} else {
+						stats.countDiRplFail++;
+					}
+					resolve(response);
+				}
+				if (callback) {
+					callback(response, request);
+				}
+			}
+
+			switch (connectionState) {
+				case 'closed': // log the message and ignore
+					// console.warn('sendRequest on closed CODAP connection: ' + JSON.stringify(message));
+					reject('sendRequest on closed CODAP connection: ' + JSON.stringify(message));
+					break;
+				case 'preinit': // warn, but issue request.
+				// console.log('sendRequest on not yet initialized CODAP connection: ' +
+				// JSON.stringify(message));
+				/* falls through */
+				default:
+					if (connection) {
+						stats.countDiReq++;
+						stats.timeDiLastReq = new Date();
+						if (!stats.timeDiFirstReq) {
+							stats.timeCodapFirstReq = stats.timeDiLastReq;
+						}
+
+						connection.call(message, function (response: any) {
+							handleResponse(message, response, callback);
+						});
+					} else {
+						// console.error('sendRequest on non-existent CODAP connection');
+					}
+			}
+		});
+	},
+
+	/**
+	 * Registers a handler to respond to CODAP-initiated requests and
+	 * notifications. See {@link https://github.com/concord-consortium/codap/wiki/CODAP-Data-Interactive-API#codap-initiated-actions}
+	 *
+	 * @param actionSpec {'get' || 'notify'} (optional) Action to handle. Defaults to 'notify'.
+	 * @param resourceSpec {String} A resource string.
+	 * @param operation {String} (optional) name of operation, e.g. 'create', 'delete',
+	 *   'move', 'resize', .... If not specified, all operations will be reported.
+	 * @param handler {Function} A handler to receive the notifications.
+	 */
 	createSubscriber: function (actionSpec: string, resourceSpec: string,
-                              operation: string | (() => void), handler?: (...args: any) => void):Subscriber {
-    let as = 'notify',
-        rs,
-        os,
-        hn;
-    let args = Array.prototype.slice.call(arguments);
-    if (['get', 'update', 'notify'].indexOf(args[0]) >= 0) {
-      as = args.shift();
-    }
-    rs = args.shift();
-    if (typeof args[0] !== 'function') {
-      os = args.shift();
-    }
-    hn = args.shift();
-
-    return {
-      actionSpec: as,
-      resourceSpec: rs,
-      operation: os,
-      handler: hn
-    };
-
-  },
+															operation: string | (() => void), handler?: (...args: any) => void): Subscriber {
+		let as = 'notify',
+			rs,
+			os,
+			hn;
+		let args = Array.prototype.slice.call(arguments);
+		if (['get', 'update', 'notify'].indexOf(args[0]) >= 0) {
+			as = args.shift();
+		}
+		rs = args.shift();
+		if (typeof args[0] !== 'function') {
+			os = args.shift();
+		}
+		hn = args.shift();
+
+		return {
+			actionSpec: as,
+			resourceSpec: rs,
+			operation: os,
+			handler: hn
+		};
+
+	},
 
 	on: function (actionSpec: string, resourceSpec: string,
-								operation: string | (() => void), handler?: (...args: any) => void):number {
+								operation: string | (() => void), handler?: (...args: any) => void): number {
 		notificationSubscribers.push(this.createSubscriber(
 			actionSpec, resourceSpec, operation, handler
 		));
 		return notificationSubscribers.length - 1;
 	},
 
-	off: function (iSubscriberIndex:number) {
-		notificationSubscribers.splice( iSubscriberIndex);
+	off: function (iSubscriberIndex: number) {
+		notificationSubscribers.splice(iSubscriberIndex);
 	},
 
-  /**
-   * Parses a resource selector returning a hash of named resource names to
-   * resource values. The last clause is identified as the resource type.
-   * E.g. converts 'dataContext[abc].collection[def].case'
-   * to {dataContext: 'abc', collection: 'def', type: 'case'}
-   *
-   * @param {String} iResource
-   * @return {Object}
-   */
-  parseResourceSelector: function (iResource: string) {
-    const selectorRE = /([A-Za-z0-9_-]+)\[([^\]]+)]/;
-    let result: any = {};
-    let selectors = iResource.split('.');
-    selectors.forEach(function (selector: string) {
-      let resourceType, resourceName;
-      let match = selectorRE.exec(selector);
-      if (selectorRE.test(selector) && match) {
-        resourceType = match[1];
-        resourceName = match[2];
-        result[resourceType] = resourceName;
-        result.type = resourceType;
-      } else {
-        result.type = selector;
-      }
-    });
-
-    return result;
-  }
+	/**
+	 * Parses a resource selector returning a hash of named resource names to
+	 * resource values. The last clause is identified as the resource type.
+	 * E.g. converts 'dataContext[abc].collection[def].case'
+	 * to {dataContext: 'abc', collection: 'def', type: 'case'}
+	 *
+	 * @param {String} iResource
+	 * @return {Object}
+	 */
+	parseResourceSelector: function (iResource: string) {
+		const selectorRE = /([A-Za-z0-9_-]+)\[([^\]]+)]/;
+		let result: any = {};
+		let selectors = iResource.split('.');
+		selectors.forEach(function (selector: string) {
+			let resourceType, resourceName;
+			let match = selectorRE.exec(selector);
+			if (selectorRE.test(selector) && match) {
+				resourceType = match[1];
+				resourceName = match[2];
+				result[resourceType] = resourceName;
+				result.type = resourceType;
+			} else {
+				result.type = selector;
+			}
+		});
+
+		return result;
+	}
 };
 
 export default codapInterface;
\ No newline at end of file
diff --git a/src/lib/codap-helper.ts b/src/lib/codap-helper.ts
index 3df33cc..ab998f7 100644
--- a/src/lib/codap-helper.ts
+++ b/src/lib/codap-helper.ts
@@ -3,7 +3,20 @@ import codapInterface from "./CodapInterface";
 export interface entityInfo {
 	name: string,
 	title: string,
-	id: number
+	id: number,
+	numAttributes?: number
+}
+
+/**
+ * Cases retrieved from dataset have this form
+ */
+export interface Case {
+	id: number,
+	parent?: number,
+	children?: number[],
+	values: {
+		[index: string]: string
+	}
 }
 
 export function initializePlugin(pluginName: string, version: string, dimensions: { width: number, height: number },
@@ -13,6 +26,7 @@ export function initializePlugin(pluginName: string, version: string, dimensions
 		version: version,
 		dimensions: dimensions,
 		preventDataContextReorg: false,
+		preventBringToFront: true,
 		cannotClose: true
 	};
 	return codapInterface.init(interfaceConfig, iRestoreStateHandler);
@@ -24,8 +38,8 @@ export function registerObservers() {
 
 // const dataSetString = (contextName: string) => `dataContext[${contextName}]`;
 
-export function openTable(dataContextName: string) {
-	codapInterface.sendRequest({
+export async function openTable(dataContextName: string) {
+	await codapInterface.sendRequest({
 		action: 'create',
 		resource: 'component',
 		values: {
@@ -37,6 +51,29 @@ export function openTable(dataContextName: string) {
 	});
 }
 
+/**
+ * Find the case table or case card corresponding to the given dataset
+ * @param iDatasetInfo
+ */
+export async function guaranteeTableOrCardIsVisibleFor(iDatasetInfo: entityInfo) {
+	if (iDatasetInfo.name !== '' && iDatasetInfo.title !== '') {
+		const tTableID = await getComponentByTypeAndTitleOrName('caseTable', iDatasetInfo.title, iDatasetInfo.name),
+			tFoundTable = tTableID >= 0,
+			tType = tFoundTable ? 'caseTable' : 'caseCard'
+
+		await codapInterface.sendRequest({
+			action: 'create',
+			resource: `component`,
+			values: {
+				type: tType,
+				name: iDatasetInfo.name,
+				title: iDatasetInfo.name,
+				dataContext: iDatasetInfo.name
+			}
+		})
+	}
+}
+
 export async function openStory(iTextComponentName: string): Promise<number> {
 	let theMessage = {
 		action: 'create',
@@ -57,7 +94,7 @@ export async function openStory(iTextComponentName: string): Promise<number> {
 			console.log(`Could not open text component`);
 			return 0;
 		});
-	console.log(`openStoryResult is ${JSON.stringify(theResult)}`);
+	// console.log(`openStoryResult is ${JSON.stringify(theResult)}`);
 	return theResult.values.id;
 }
 
@@ -74,31 +111,126 @@ export function isAModel(iValue: any): boolean {
 	return iValue.title.toLowerCase().indexOf('model') >= 0;
 }
 
-/**
- * Return the names of datasets that pass the given filter
- * @param iFilter
- */
-export async function getDatasetInfoWithFilter(iFilter: (value: any) => boolean): Promise<entityInfo[]> {
-	let tDatasetInfoArray: entityInfo[] = [];
-	let tContextListResult: any = await codapInterface.sendRequest({
+export async function datasetExists(iDatasetName: string): Promise<boolean> {
+	const tContextListResult: any = await codapInterface.sendRequest({
 		"action": "get",
 		"resource": "dataContextList"
 	}).catch((reason) => {
 		console.log('unable to get datacontext list because ' + reason);
 	});
-	tContextListResult.values.forEach((aValue: any) => {
-		if (iFilter(aValue))
-			tDatasetInfoArray.push(
-				{
-					title: aValue.title,
-					name: aValue.name,
-					id: aValue.id
-				});
-	});
-	return tDatasetInfoArray;
+	return tContextListResult.values.some((aContext: any) => aContext.name === iDatasetName)
 }
 
-export async function getSelectedCasesFrom(iDatasetName: string | null): Promise<any[]> {
+/**
+ * Return the number of attributes in the rightmost collection
+ * @param iDataContextID
+ */
+export async function getNumChildAttributesInContext(iDataContextID: number) {
+	const tListResult: any = await codapInterface.sendRequest(
+		{
+			action: 'get',
+			resource: `dataContext[${iDataContextID}].collectionList`
+		}
+	)
+		.catch(() => {
+			console.log('Error getting collection list')
+		});
+	const tCollectionID = tListResult && tListResult.values && Array.isArray(tListResult.values) &&
+		tListResult.values.length > 0 && tListResult.values.pop().id
+	if( tCollectionID) {
+		const tAttrsResult: any = await codapInterface.sendRequest({
+			action: 'get',
+			resource: `dataContext[${iDataContextID}].collection[${tCollectionID}].attributeList`
+		})
+		return tAttrsResult.values.length
+	}
+	else
+		return 0
+}
+
+/**
+ * Return the names of datasets that pass the given filter
+ * @param iFilter
+ */
+export async function getDatasetInfoWithFilter(iFilter: (value: any) => boolean): Promise<entityInfo[]> {
+	const tDatasetInfoArray: entityInfo[] = [],
+		tContextListResult: any = await codapInterface.sendRequest({
+			"action": "get",
+			"resource": "dataContextList"
+		}).catch((reason) => {
+			console.log('unable to get datacontext list because ' + reason);
+		});
+	if (!(tContextListResult && tContextListResult.success))
+		return []
+	else {
+		for (let tIndex = 0; tIndex < tContextListResult.values.length; tIndex++) {
+			let aValue = tContextListResult.values[tIndex]
+			aValue.numAttributes = await getNumChildAttributesInContext(aValue.id)
+			if (iFilter(aValue))
+				tDatasetInfoArray.push(
+					{
+						title: aValue.title,
+						name: aValue.name,
+						id: aValue.id,
+						numAttributes: aValue.numAttributes
+					});
+		}
+	}
+	return tDatasetInfoArray
+}
+
+export async function guaranteeAttribute(iAttributeInfo: { name: string, hidden: boolean },
+																				 iDatasetName: string, iCollectionName: string): Promise<void> {
+	const tNamesResult: any = await codapInterface.sendRequest({
+		action: 'get',
+		resource: `dataContext[${iDatasetName}].collection[${iCollectionName}].attributeList`
+	}).catch(reason => console.log(`Unable to get attribute names because ${reason}`))
+	if (tNamesResult.success) {
+		if (!tNamesResult.values.map((iValue: any) => iValue.name).includes(iAttributeInfo.name)) {
+			// The attribute doesn't exist, so create it
+			await codapInterface.sendRequest({
+				action: 'create',
+				resource: `dataContext[${iDatasetName}].collection[${iCollectionName}].attribute`,
+				values: [iAttributeInfo]
+			}).catch(reason => {
+				console.log(`could not create attribute because ${reason}`)
+			})
+		}
+	}
+}
+
+export async function getAttributeNames(iDatasetName: string, iCollectionName: string): Promise<string[]> {
+	// console.log(`Begin getAttributeNames with ${iDatasetName}(${iCollectionName})`)
+	const tNamesResult: any = await codapInterface.sendRequest({
+		action: 'get',
+		resource: `dataContext[${iDatasetName}].collection[${iCollectionName}].attributeList`
+	}).catch(reason => console.log(`Unable to get attribute names because ${reason}`))
+	// console.log('About to return from getAttributeNames')
+	return tNamesResult.success ? tNamesResult.values.map((iValue: any) => iValue.name) : []
+}
+
+/**
+ * Return all the cases in the given dataset/collection.
+ * @param iDatasetName
+ * @param iCollectionName
+ */
+export async function getCaseValues(iDatasetName: string,
+																		iCollectionName: string): Promise<Case[]> {
+	const tResult: any = await codapInterface.sendRequest({
+		action: 'get',
+		resource: `dataContext[${iDatasetName}].collection[${iCollectionName}].caseFormulaSearch[true]`
+	}).catch(reason => console.log(`Unable to get cases in ${iDatasetName} because ${reason}`))
+	if (tResult.success) {
+		return tResult.values.map((iValue: any) => {
+			delete iValue.parent
+			delete iValue.collections
+			return iValue
+		})
+	} else
+		return []
+}
+
+export async function getSelectedCasesFrom(iDatasetName: string | null, iCollectionName: string): Promise<any[]> {
 	let tCasesRequest = [],
 		tSelectedCases = [],
 		tResult: any = await codapInterface.sendRequest({
@@ -106,10 +238,12 @@ export async function getSelectedCasesFrom(iDatasetName: string | null): Promise
 			resource: `dataContext[${iDatasetName}].selectionList`
 		});
 	if (tResult.success && Array.isArray(tResult.values)) {
-		tCasesRequest = tResult.values.map(function (iValue: any) {
+		const tIDsOfSelectedCasesFromCollection =
+			tResult.values.filter((iValue: any) => iValue.collectionName === iCollectionName).map((iObject: any) => iObject.caseID)
+		tCasesRequest = tIDsOfSelectedCasesFromCollection.map(function (iID: any) {
 			return {
 				action: 'get',
-				resource: `dataContext[${iDatasetName}].caseByID[${iValue.caseID}]`
+				resource: `dataContext[${iDatasetName}].caseByID[${iID}]`
 			}
 		});
 		tResult = await codapInterface.sendRequest(tCasesRequest);
@@ -165,36 +299,6 @@ export async function getCollectionNames(iDatasetName: string | null): Promise<s
 	});
 }
 
-export async function addAttributesToTarget(iPredictionClass: string, iDatasetName: string,
-																						iCollectionName: string, iAttributeName: string) {
-	// Add the predicted label and probability attributes to the target collection
-	await codapInterface.sendRequest(
-		{
-			action: 'create',
-			resource: `dataContext[${iDatasetName}].collection[${iCollectionName}].attribute`,
-			values: [
-				{
-					name: iAttributeName,
-					description: 'The label predicted by the model'
-				},
-				{
-					name: 'probability of ' + iPredictionClass,
-					precision: 5,
-					description: 'A computed probability based on the logistic regression model'
-				},
-				{
-					name: 'featureIDs',
-					hidden: true
-				}
-			]
-		}
-	)
-		.catch(() => {
-			console.log('Error showing adding target attributes')
-		});
-
-}
-
 export async function getAttributeNameByIndex(iDatasetName: string, iCollectionName: string, iIndex: number): Promise<string> {
 	const tListResult: any = await codapInterface.sendRequest(
 		{
@@ -210,7 +314,12 @@ export async function getAttributeNameByIndex(iDatasetName: string, iCollectionN
 	else return '';
 }
 
-export async function getComponentByTypeAndTitle(iType: string, iTitle: string): Promise<number> {
+export async function attributeExists(iDatasetName: string, iCollectionName: string, iAttributeName: string): Promise<boolean> {
+	const tNames = await getAttributeNames(iDatasetName, iCollectionName)
+	return tNames.includes(iAttributeName)
+}
+
+export async function getComponentByTypeAndTitleOrName(iType: string, iTitle: string, iName:string): Promise<number> {
 	const tListResult: any = await codapInterface.sendRequest(
 		{
 			action: 'get',
@@ -220,11 +329,11 @@ export async function getComponentByTypeAndTitle(iType: string, iTitle: string):
 		.catch(() => {
 			console.log('Error getting component list')
 		});
-
+	// console.log(`tListResult = ${JSON.stringify(tListResult)}`)
 	let tID = -1;
 	if (tListResult.success) {
 		let tFoundValue = tListResult.values.find((iValue: any) => {
-			return iValue.type === 'text' && iValue.title === iTitle;
+			return iValue.type === iType && (iValue.title === iTitle || iValue.name === iName);
 		});
 		if (tFoundValue)
 			tID = tFoundValue.id;
@@ -246,7 +355,7 @@ export async function getIdOfCaseTableForDataContext(iDataContextName: string):
 	let tCaseTableID;
 	if (tListResult.success) {
 		let tFoundValue = tListResult.values.find((iValue: any) => {
-			return iValue.type === 'caseTable' && iValue.title === iDataContextName;
+			return iValue.type === 'caseTable' && [iValue.title, iValue.name].includes(iDataContextName)
 		});
 		if (tFoundValue)
 			tCaseTableID = tFoundValue.id;
diff --git a/src/lib/jsregression.js b/src/lib/jsregression.js
index c9838e9..6395256 100644
--- a/src/lib/jsregression.js
+++ b/src/lib/jsregression.js
@@ -39,7 +39,7 @@ export class LinearRegression {
     }
     for (var k = 0; k < this.iterations; ++k) {
       var Vx = this.grad(X, Y, this.theta);
-      for (var d = 0; d < this.dim; ++d) {
+      for (d = 0; d < this.dim; ++d) {
         this.theta[d] = this.theta[d] - this.alpha * Vx[d];
       }
       if (this.trace) {
@@ -117,28 +117,52 @@ export class LinearRegression {
 }
 
 
-export var LogisticRegression = function(config) {
-    var config = config || {};
-    if(!config.alpha){
+export class LogisticRegression {
+
+  constructor(config) {
+    this.reset()
+    this.setup(config)
+  }
+
+  setup(config) {
+    config = config || {};
+    if (!config.alpha) {
       config.alpha = 0.001;
     }
-    if(!config.iterations) {
+    if (!config.iterations) {
       config.iterations = 100;
     }
-    if(!config.lambda) {
+    if (!config.lambda) {
       config.lambda = 0;
     }
-    if (!config.trace) { config.trace = false;}
+    if (!config.trace) {
+      config.trace = false;
+    }
     this.lockIntercept = config.lockIntercept;
     this.alpha = config.alpha;
     this.lambda = config.lambda;
     this.iterations = config.iterations;
     this.trace = config.trace;
     this.progressCallback = config.progressCallback;
-    this.feedbackCallback = config.feedbackCallback;
+    this.stepModeCallback = config.stepModeCallback;
+  }
+
+  reset() {
+    this.iterations = 20;
+    this.fitResult = null;
+    this._data = null;
+    this._oneHot = null;
+    this._documents = null;
+    this.accuracy = 0;
+    this.kappa = 0;
+    this.threshold = 0;
+    this.theta = [];
+    this.trace = false;
+    this.progressCallback = null;
+    this.stepModeCallback = null;
   }
 
-  LogisticRegression.prototype.fit = async function(data) {
+  fit(data) {
     var this_ = this;
     this.dim = data[0].length;
     var N = data.length;
@@ -146,12 +170,12 @@ export var LogisticRegression = function(config) {
     var X = [];
     var Y = [];
     var constant = this.lockIntercept ? 0 : 1;
-    for(var i=0; i < N; ++i){
+    for (var i = 0; i < N; ++i) {
       var row = data[i];
       var x_i = [];
-      var y_i = row[row.length-1];
+      var y_i = row[row.length - 1];
       x_i.push(constant);
-      for(var j=0; j < row.length-1; ++j){
+      for (var j = 0; j < row.length - 1; ++j) {
         x_i.push(row[j]);
       }
       X.push(x_i);
@@ -159,75 +183,76 @@ export var LogisticRegression = function(config) {
     }
 
     this.theta = [];
-    for(var d = 0; d < this.dim; ++d){
+    for (var d = 0; d < this.dim; ++d) {
       this.theta.push(0.0);
     }
 
     async function oneIteration(iIteration) {
-      if( iIteration < this_.iterations) {
+      if (iIteration < this_.iterations) {
         var theta_delta = this_.grad(X, Y, this_.theta);
-        for(var d = 0; d < this_.dim; ++d){
+        for (var d = 0; d < this_.dim; ++d) {
           this_.theta[d] = this_.theta[d] - this_.alpha * theta_delta[d];
         }
-        if( this_.progressCallback)
-          await this_.progressCallback(iIteration);
-        if(this_.trace) {
+        this_.progressCallback && await this_.progressCallback(iIteration);
+        if (this_.trace) {
           var tCost = this_.cost(X, Y, this_.theta);
-          if( this_.feedbackCallback)
-            await this_.feedbackCallback(iIteration, tCost, this_.theta.slice(1));
+          if (this_.stepModeCallback)
+            this_.stepModeCallback(iIteration, tCost, this_.theta.slice(1), oneIteration.bind(this_));
+        } else {
+          setTimeout(function () {
+            oneIteration(iIteration + 1);
+          }, 10);
         }
-        setTimeout(function() {
-          oneIteration(iIteration + 1);
-        },10);
-      }
-      else {
+      } else {
         // Note that the zeroth element of theta is the weight of the constant term. We slice that off
         this_.fitResult = {
           theta: this_.theta.slice(1),
           cost: this_.cost(X, Y, this_.theta),
+          constantWeightTerm: this_.theta[0],
           config: {
             alpha: this_.alpha,
             lambda: this_.lambda,
             iterations: this_.iterations
           }
         }
-        if( this_.progressCallback(iIteration));
+        this_.progressCallback && await this_.progressCallback(iIteration);
       }
     }
 
     oneIteration(0);
 
-  };
+  }
 
-  LogisticRegression.prototype.grad = function(X, Y, theta) {
+  grad(X, Y, theta) {
     var N = X.length;
     var Vx = [];
-    for(var d = 0; d < this.dim; ++d) {
+    for (var d = 0; d < this.dim; ++d) {
       var sum = 0.0;
-      for(var i = 0; i < N; ++i){
+      for (var i = 0; i < N; ++i) {
         var x_i = X[i];
         var predicted = this.h(x_i, theta);
         sum += ((predicted - Y[i]) * x_i[d] + this.lambda * theta[d]) / N;
       }
       Vx.push(sum);
     }
-
     return Vx;
 
   }
 
-  LogisticRegression.prototype.h = function(x_i, theta) {
+  h(x_i, theta) {
+    // console.time('h');
     var gx = 0.0;
-    for(var d = 0; d < this.dim; ++d){
+    for (var d = 0; d < this.dim; ++d) {
       gx += theta[d] * x_i[d];
     }
+    // console.timeEnd('h');
     return 1.0 / (1.0 + Math.exp(-gx));
   }
 
-  LogisticRegression.prototype.transform = function(x) {
-    if(x[0].length){ // x is a matrix
+  transform(x) {
+    if (x[0].length) { // x is a matrix
       var predicted_array = [];
-      for(var i=0; i < x.length; ++i){
+      for (var i = 0; i < x.length; ++i) {
         var predicted = this.transform(x[i]);
         predicted_array.push(predicted);
       }
@@ -236,114 +261,116 @@ export var LogisticRegression = function(config) {
 
     var x_i = [];
     x_i.push(1.0);
-    for(var j=0; j < x.length; ++j){
+    for (var j = 0; j < x.length; ++j) {
       x_i.push(x[j]);
     }
     return this.h(x_i, this.theta);
   }
 
-  LogisticRegression.prototype.cost = function(X, Y, theta) {
+  cost(X, Y, theta) {
     var N = X.length;
     var sum = 0;
-    for(var i = 0; i < N; ++i){
+    for (var i = 0; i < N; ++i) {
       var y_i = Y[i];
       var x_i = X[i];
       var likelihood = this.h(x_i, theta);
-      sum += - (y_i * Math.log(likelihood) + (1-y_i) * Math.log(1 - likelihood)) / N;
+      sum += -(y_i * Math.log(likelihood) + (1 - y_i) * Math.log(1 - likelihood)) / N;
     }
-    if( this.lambda !== 0) {
+    if (this.lambda !== 0) {
       for (var d = 0; d < this.dim; ++d) {
         sum += (this.lambda * theta[d] * theta[d]) / (2.0 * N);
       }
     }
     return sum;
   };
+}
 
 
-  export var MultiClassLogistic = function(config){
-    var config = config || {};
-    if(!config.alpha){
-      config.alpha = 0.001;
-    }
-    if(!config.iterations) {
-      config.iterations = 100;
-    }
-    if(!config.lambda) {
-      config.lambda = 0;
-    }
-    this.alpha = config.alpha;
-    this.lambda = config.lambda;
-    this.iterations = config.iterations;
-  };
+export var MultiClassLogistic = function (config) {
+  config = config || {};
+  if (!config.alpha) {
+    config.alpha = 0.001;
+  }
+  if (!config.iterations) {
+    config.iterations = 100;
+  }
+  if (!config.lambda) {
+    config.lambda = 0;
+  }
+  this.alpha = config.alpha;
+  this.lambda = config.lambda;
+  this.iterations = config.iterations;
+};
 
-  MultiClassLogistic.prototype.fit = function(data, classes) {
-    this.dim = data[0].length;
-    var N = data.length;
+MultiClassLogistic.prototype.fit = function (data, classes) {
+  this.dim = data[0].length;
+  var N = data.length;
 
-    if(!classes){
-      classes = [];
-      for(var i=0; i < N; ++i){
-        var found = false;
-        var label = data[i][this.dim-1];
-        for(var j=0; j < classes.length; ++j){
-          if(label == classes[j]){
-            found = true;
-            break;
-          }
-        }
-        if(!found){
-          classes.push(label);
+  if (!classes) {
+    classes = [];
+    for (var i = 0; i < N; ++i) {
+      var found = false;
+      var label = data[i][this.dim - 1];
+      for (var j = 0; j < classes.length; ++j) {
+        // eslint-disable-next-line
+        if (label == classes[j]) {
+          found = true;
+          break;
         }
       }
-    }
-
-    this.classes = classes;
-
-    this.logistics = {};
-    var result = {};
-    for(var k = 0; k < this.classes.length; ++k){
-      var c = this.classes[k];
-      this.logistics[c] = new LogisticRegression({
-        alpha: this.alpha,
-        lambda: this.lambda,
-        iterations: this.iterations
-      });
-      var data_c = [];
-      for(var i=0; i < N; ++i){
-        var row = [];
-        for(var j=0; j < this.dim-1; ++j){
-          row.push(data[i][j]);
-        }
-        row.push(data[i][this.dim-1] == c ? 1 : 0);
-        data_c.push(row);
+      if (!found) {
+        classes.push(label);
       }
-      result[c] = this.logistics[c].fit(data_c);
     }
-    return result;
-  };
+  }
 
-  MultiClassLogistic.prototype.transform = function(x) {
-    if(x[0].length){ // x is a matrix
-      var predicted_array = [];
-      for(var i=0; i < x.length; ++i){
-        var predicted = this.transform(x[i]);
-        predicted_array.push(predicted);
+  this.classes = classes;
+
+  this.logistics = {};
+  var result = {};
+  for (var k = 0; k < this.classes.length; ++k) {
+    var c = this.classes[k];
+    this.logistics[c] = new LogisticRegression({
+      alpha: this.alpha,
+      lambda: this.lambda,
+      iterations: this.iterations
+    });
+    var data_c = [];
+    for (i = 0; i < N; ++i) {
+      var row = [];
+      for (j = 0; j < this.dim - 1; ++j) {
+        row.push(data[i][j]);
       }
-      return predicted_array;
+      // eslint-disable-next-line
+      row.push(data[i][this.dim - 1] == c ? 1 : 0);
+      data_c.push(row);
     }
+    result[c] = this.logistics[c].fit(data_c);
+  }
+  return result;
+};
 
+MultiClassLogistic.prototype.transform = function (x) {
+  if (x[0].length) { // x is a matrix
+    var predicted_array = [];
+    for (var i = 0; i < x.length; ++i) {
+      var predicted = this.transform(x[i]);
+      predicted_array.push(predicted);
+    }
+    return predicted_array;
+  }
 
 
-    var max_prob = 0.0;
-    var best_c = '';
-    for(var k = 0; k < this.classes.length; ++k) {
-      var c = this.classes[k];
-      var prob_c = this.logistics[c].transform(x);
-      if(max_prob < prob_c){
-        max_prob = prob_c;
-        best_c = c;
-      }
+  var max_prob = 0.0;
+  var best_c = '';
+  for (var k = 0; k < this.classes.length; ++k) {
+    var c = this.classes[k];
+    var prob_c = this.logistics[c].transform(x);
+    if (max_prob < prob_c) {
+      max_prob = prob_c;
+      best_c = c;
     }
-
-    return best_c;
   }
+
+  return best_c;
+}
diff --git a/src/lib/one_hot.ts b/src/lib/one_hot.ts
index 6e61442..1c80281 100644
--- a/src/lib/one_hot.ts
+++ b/src/lib/one_hot.ts
@@ -17,27 +17,40 @@
 //  limitations under the License.
 // ==========================================================================
 
-//import {on} from "cluster";
 
 import {stopWords} from "./stop_words";
+import {Feature, TokenMap} from "../stores/store_types_and_constants";
 
 export const kMaxTokens = 1000;
 
 /**
  * Convert the given string into an array of lowercase words.
  */
-export const wordTokenizer = ( text:string, ignoreStopWords:boolean):string[] => {
-	let tokens:string[] = [];
-	if(text) {
-		let tWords: RegExpMatchArray | [] = text.toLowerCase().match(/(\w+['’]{0,1}\w+)|[\u25A0-\u2BFF]/g) || [];
+export const wordTokenizer = (text: string, ignoreStopWords: boolean, ignorePunctuation: boolean): string[] => {
+	let tokens: string[] = [];
+	if (text) {
+		let tExpression = ignorePunctuation ? /(\w+['’]{0,1}\w+)|[\u25A0-\u2BFF]/g :
+			/(\w+['’]{0,1}\w+)|[\u25A0-\u2BFF]|[,!:@#$%^&*()\-_[\]{};'".<>/?`~]|\d+/g
+		let tWords: RegExpMatchArray | [] = text.toLowerCase().match(tExpression) || [];
 		tWords.forEach((aWord) => {
-			if( !ignoreStopWords || !stopWords[aWord])
+			if (!ignoreStopWords || !stopWords[aWord])
 				tokens.push(aWord);
 		});
 	}
 	return tokens;
 }
 
+export interface OneHotConfig {
+	includeUnigrams: boolean,
+	frequencyThreshold: number,
+	ignoreStopWords: boolean,
+	ignorePunctuation: boolean,
+	positiveClass: string,
+	negativeClass: string,
+	features: Feature[],
+	tokenMap?: TokenMap
+}
+
 /**
  * This function takes an array of "documents,"" each with a class, and returns a one-hot
  * encoding of those documents consisting of an array representing the presence or absence
@@ -52,46 +65,92 @@ export const wordTokenizer = ( text:string, ignoreStopWords:boolean):string[] =>
  *	 		caseIDs:number[], weight:number|null, featureCaseID:number}[]
  * }
  */
-export const oneHot = (config:{includeUnigrams:boolean, frequencyThreshold:number, ignoreStopWords:boolean},
-											 documents: { example:string, class:string, caseID:number,
-												 						columnFeatures:{[key:string]:number | boolean}, tokens?:string[] }[]
-											 ) => {
-	// Make a hash of all the tokens with their counts
-	let tokenMap: { [key:string]: { token:string, type:string, count:number, index:number,
-			caseIDs:number[], weight:number|null, featureCaseID:number|null } } = {};	// Keeps track of counts of words
-	// Tokens are unigrams found in document examples. Column features are tokens, too!
-	documents.forEach(aDoc=>{
-		let tText = config.includeUnigrams ? aDoc.example : '',
-				tokens = new Set(wordTokenizer(tText, config.ignoreStopWords));
-		// Add the column features as tokens as well
-		Object.keys( aDoc.columnFeatures).forEach( aFeature => tokens.add(aFeature));
+export const oneHot = (config: OneHotConfig,
+											 documents: {
+												 example: string, class: string, caseID: number,
+												 columnFeatures: { [key: string]: number | boolean }, tokens?: string[]
+											 }[]
+) => {
+	const tTokenMapIsPredefined = config.tokenMap && Object.keys(config).length > 0,
+		tokenMap = tTokenMapIsPredefined ? config.tokenMap : {};	// Keeps track of counts of words
+	if( !tokenMap)
+		return
+	if (tTokenMapIsPredefined) {	// Unigrams are already taken care of when the feature was added. Only constructed features remain
+		documents.forEach(aDoc => {
+			const tokens: Set<string> = new Set()
+			Object.keys(aDoc.columnFeatures).forEach(aFeature => tokens.add(aFeature));
+			tokens.forEach(aToken => {
+				if (!tokenMap[aToken]) {
+					const tFeatureCaseIDObject = config.features.find(aFeature => aFeature.name === aToken),
+						tFeatureCaseID = tFeatureCaseIDObject ? Number(tFeatureCaseIDObject.caseID) : null
+					tokenMap[aToken] = {
+						token: aToken,
+						type: 'constructed feature',
+						count: 1,
+						index: -1,
+						numPositive: 0,
+						numNegative: 0,
+						caseIDs: [],
+						weight: null,
+						featureCaseID: tFeatureCaseID
+					}
+				}
+				else
+					tokenMap[aToken].count++
+			})
+			aDoc.tokens = aDoc.tokens ? aDoc.tokens.concat(Array.from(tokens)) : Array.from(tokens)
+		})
+	} else {
+		// console.log(`config.features = ${JSON.stringify(toJS(config.features))}`)
+		documents.forEach(aDoc => {
+			const tText = config.includeUnigrams ? aDoc.example : '',
+				tokens = new Set(wordTokenizer(tText, config.ignoreStopWords, config.ignorePunctuation));
+			// Add the column features as tokens as well
+			Object.keys(aDoc.columnFeatures).forEach(aFeature => tokens.add(aFeature));
 
-		tokens.forEach(aToken=>{
-			if(!tokenMap[aToken]) {
-				let tType = aDoc.columnFeatures[aToken] ? 'column feature' : 'unigram';
-				tokenMap[aToken] = {token: aToken, type: tType, count: 1, index: -1,
-					caseIDs: [], weight: null, featureCaseID: null};
-			}
-			else
-				tokenMap[aToken].count++;
-			tokenMap[aToken].caseIDs.push( aDoc.caseID);
+			tokens.forEach(aToken => {
+				if (!tokenMap[aToken]) {
+					const tType = aDoc.columnFeatures[aToken] ? 'constructed feature' : 'unigram',
+						tFeatureCaseIDObject = config.features.find(aFeature => aFeature.name === aToken),
+						tFeatureCaseID = tFeatureCaseIDObject ? Number(tFeatureCaseIDObject.caseID) : null
+					tokenMap[aToken] = {
+						token: aToken,
+						type: tType,
+						count: 1,
+						index: -1,
+						numPositive: 0,
+						numNegative: 0,
+						caseIDs: [],
+						weight: null,
+						featureCaseID: tFeatureCaseID
+					};
+				} else
+					tokenMap[aToken].count++;
+				tokenMap[aToken].caseIDs.push(aDoc.caseID);
+				if (aDoc.class === config.positiveClass)
+					tokenMap[aToken].numPositive++
+				else
+					tokenMap[aToken].numNegative++
+			});
+			aDoc.tokens = Array.from(tokens);
 		});
-		aDoc.tokens = Array.from(tokens);
-	});
+	}
 	// Convert tokenMap to an array and sort descending
-	let tokenArray = Object.values( tokenMap).sort((aToken1, aToken2)=>{
+	let tokenArray = Object.values(tokenMap).sort((aToken1, aToken2) => {
 		return aToken2.count - aToken1.count;
 	});
 	// Only include tokens with a count above specified threshold
 	let tIndexFirstBelowThreshold = -1,
-			tThreshold = config.frequencyThreshold;
-	while( tIndexFirstBelowThreshold < 0 && tThreshold > 0) {
+		tThreshold = config.frequencyThreshold;
+	/*eslint-disable */
+	while (tIndexFirstBelowThreshold < 0 && tThreshold > 0) {
 		tIndexFirstBelowThreshold = tokenArray.findIndex((aToken) => {
 			return aToken.count <= tThreshold;
 		});
 		tThreshold--;
 	}
-	if( tIndexFirstBelowThreshold < 0)	// There were no very frequent tokens
+	/*eslint-enable */
+	if (tIndexFirstBelowThreshold < 0)	// There were no very frequent tokens
 		tIndexFirstBelowThreshold = tokenArray.length;
 	tokenArray.length = Math.min(tIndexFirstBelowThreshold, tokenArray.length, kMaxTokens);
 	const kVectorLength = tokenArray.length;
@@ -100,26 +159,26 @@ export const oneHot = (config:{includeUnigrams:boolean, frequencyThreshold:numbe
 		aToken.index = iIndex;
 	});
 	// Delete the unneeded tokens from tokenMap
-	Object.keys(tokenMap).forEach((aKey)=>{
-		if( tokenMap[aKey].index === -1)
-			delete  tokenMap[aKey];
+	Object.keys(tokenMap).forEach((aKey) => {
+		if (tokenMap[aKey].index === -1)
+			delete tokenMap[aKey];
 	});
 	// Create an array of one-hot vectors corresponding to the original document examples
 	// We have to do both the tokens in the example and the column features
-	let oneHotArray: { oneHotExample:number[], class:string }[] = documents.map(aDoc=>{
+	let oneHotArray: { oneHotExample: number[], class: string }[] = documents.map(aDoc => {
 		let tText = config.includeUnigrams ? aDoc.example : '',
-				tokens:string[] = wordTokenizer(tText, config.ignoreStopWords),
-				tVector:number[] = Array(kVectorLength).fill(0);
-		Object.keys( aDoc.columnFeatures).forEach( aFeature => tokens.push(aFeature));
-		tokens.forEach(aWord=>{
-			if(tokenMap[aWord]) {
+			tokens: string[] = wordTokenizer(tText, config.ignoreStopWords, config.ignorePunctuation),
+			tVector: number[] = Array(kVectorLength).fill(0);
+		Object.keys(aDoc.columnFeatures).forEach(aFeature => tokens.push(aFeature));
+		tokens.forEach(aWord => {
+			if (tokenMap[aWord]) {
 				let tWordIndex = tokenMap[aWord].index;
 				if (tWordIndex >= 0 && tWordIndex < kVectorLength)
 					tVector[tWordIndex] = 1;
 			}
 		});
 
-		return { oneHotExample: tVector, class: aDoc.class };
+		return {oneHotExample: tVector, class: aDoc.class};
 	});
 	return {
 		oneHotResult: oneHotArray,
diff --git a/src/lists/lists.ts b/src/lists/lists.ts
new file mode 100644
index 0000000..8c7dab0
--- /dev/null
+++ b/src/lists/lists.ts
@@ -0,0 +1,79 @@
+export const SQ: { lists: { [key: string]: string[] }, hints: { [key:string]:string} } = {
+	lists: {
+		personalPronouns: ["I", "you", "he", "she", "it", "we", "they", "them", "us", "him", "her", "his",
+			"hers", "its", "theirs", "our", "your"],
+		prepositions: ["aboard","after","around","behind","between","despite","failing","in","minus","off",
+			"out","plus","through","toward","unlike","via","about","against",
+			"as","below","beyond","down","following","inside","near","on","outside","regarding","throughout",
+			"towards","until","with","above","along","at","beneath","but","during","for","into","next","onto","over",
+			"since","till","under","up","within","across","among","before","beside","by","except","from","like","of",
+			"opposite","past","than","to","underneath","upon","without"],
+	},
+	hints: {
+		positiveClassInstructions: 'The TARGET LABEL is the label that your model will be trained to identify. ' +
+			'The model will compute the probability that a text should have this label. Any other labels will be ' +
+			'considered “not the [target label]”.',
+		onwardInstructions: '',
+		featuresDef: 'A feature is anything about the text that helps you distinguish between the labels. It can be a word, ' +
+			'a phrase, punctuation, etc. A feature is perceived by humans, and also detectable by computing tools.',
+		testResultsName: 'This is the name of the model used for this test.',
+		testResultsDataset: 'This is the data set whose texts were classified for this test.',
+		testResultsAccuracy: 'If the testing data set has labels, this is the percentage of predictions this ' +
+			'model made correctly.',
+		trainingSetupIteration: 'Iterations is the number of times the machine learning algorithm adjusts the weights ' +
+			'of the features to improve the model. More iterations generally make the model more accurate, ' +
+			'but the training process will take longer.',
+		trainingResultsActive: 'If checked, the model’s results and feature weights are shown in your tables and graphs.',
+		trainingResultsSettings: 'The settings used to train the model(s).',
+		trainingResultsAccuracy: 'ACCURACY is percentage of correctly predicted texts.',
+		trainingResultsFeatures: 'The feature(s) used to train this model.',
+		targetDatasetChoices: 'Here are all the data tables available in this document. ' +
+			'To train your model, choose a data table that has at least two columns, one with text and the other with labels.',
+		targetDatasetChosen: 'This is your training data. ' +
+			'If you choose a different data set, your setup will be cleared and you will need to create ' +
+			'a new setup for the new data set.',
+		targetAttributeChoices: 'Which column in your data set contains the texts you want to analyze?',
+		targetAttributeChosen: 'This is the column that contains the text you want to train your model with. ' +
+			'If you choose a different column, your setup will be updated with the new text.',
+		targetClassAttributeChoices: 'Here are all the column headers in the training data. ' +
+			'Which column contains the labels that you want to train your model with? ' +
+			'These labels will be used to classify your text into categories.',
+		targetClassAttributeChosen: 'This is the column that contains the labels you want to train your model with. ' +
+			'If you choose a different column, your setup will be updated with the new labels.',
+		targetTwoGroups: 'This is one of the labels.',
+		targetLabelChoices: 'This will be the label your model tries to predict.',
+		testingModelChoices: 'Which model do you want to try out on a new data set? This model will be tested to see ' +
+			'how well it performs on a new data set.',
+		testingDatasetChoices: 'What data set do you want to use to test the model? The data set should have at least one ' +
+			'column containing texts to classify. The data set is not required to have a column for the labels, ' +
+			'but that can help.',
+		testingColumnChoices: 'Which column in the data set contains the texts you want the model to classify?',
+		testingLabelsChoices: 'Here are all the column headers in the testing data. Which column contains the labels ' +
+			'that you want to test your model with? These labels will be used to classify your text into categories.',
+		featureTableCheckboxRemove: 'Uncheck this box to exclude this feature from the next model you train.',
+		featureTableCheckboxAdd: 'Check this box to add this feature to the next model you train.',
+		featureTableRemove: 'Remove this feature completely',
+		featureCancel: 'Click to cancel feature creation.',
+		featureAdd: 'Click to create a feature.',
+		featureDone: 'Click when you have completed creating the feature.',
+		testingChooseDataset: 'Please choose a dataset with texts to classify.',
+		testingChooseModel: 'Please choose a model you have trained.',
+		testingChooseAttribute: 'Please choose the attribute that contains the texts you wish to classify',
+		testingTest: 'Click to test the model on the chosen testing data.',
+		trainingStep: 'Click to complete the training without stepping',
+		trainingTrain: 'Click to train your model.',
+		trainingOneStep: 'Click to train your model one iteration at a time.',
+		trainingSettings: 'Click to change the training settings.',
+		trainingCancel: 'Click to cancel the training of this model.',
+		trainingNewModel: 'Click to begin training a new model with features you created.',
+		trainingMakeModelInactive: 'Uncheck this box to hide this model’s results and feature weights.',
+		trainingMakeModelActive: 'Check this box to show this model’s results and feature weights.',
+		trainingLockIntercept: 'The intercept is a term in the logistic regression formula. ' +
+			'When the intercept is locked at 0, it is easy to interpret the coefficients, which are the feature weights. ' +
+			'However, locking intercept may introduce bias.',
+		trainingPointFiveAsThreshold: 'The machine learning algorithm will compute the probability of each case to have ' +
+			'the target label. 100% is the most probable and 0% is the least probable. A probability threshold is a cutoff ' +
+			'value for assigning the target label. A probability greater than the threshold is assigned the target label. ' +
+			'A probability equal to or less than it will not.',
+	}
+};
\ No newline at end of file
diff --git a/src/lists/personal-pronouns.ts b/src/lists/personal-pronouns.ts
deleted file mode 100644
index 3da1686..0000000
--- a/src/lists/personal-pronouns.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const SQ:{ lists:{[key: string]: string[]}} = { lists: {
-		personalPronouns: ["I", "you", "he", "she", "it", "we", "they", "them", "us", "him", "her", "his", "hers", "its", "theirs", "our", "your"]
-	}};
diff --git a/src/headings_manager.ts b/src/managers/headings_manager.ts
similarity index 66%
rename from src/headings_manager.ts
rename to src/managers/headings_manager.ts
index fffa3f1..4c43393 100644
--- a/src/headings_manager.ts
+++ b/src/managers/headings_manager.ts
@@ -2,23 +2,23 @@
  * Utility for use in constructing headings to show in text component for each kind of statement.
  */
 
-export interface PhraseTriple {
-	actual:string, predicted:string, phrase:string
+export interface PhraseQuadruple {
+	actual:string, predicted:string, phrase:string, nonNtigramFeatures:(string | number)[]
 }
 export interface ClassLabel { negLabel: string, posLabel: string, blankLabel:string}
-export interface HeadingSpec {negNeg:any, negPos:any, blankNeg:any, posNeg:any, posPos:any, blankPos:any}
+export interface HeadingSpec {negNeg:any, negPos:any, negBlank:any, blankNeg:any, posNeg:any, posPos:any, posBlank:any, blankPos:any, blankBlank:any}
 
 export class HeadingsManager {
 
 
 	public classLabels: ClassLabel = { negLabel: '', posLabel: '', blankLabel: ''};
-	public headings:HeadingSpec = {negNeg:null, negPos: null, blankNeg: null,
-		posNeg: null, posPos: null, blankPos: null};
-	public colors = {green: '#04ab04', red: '#ca0303', blue: '#0000ff', orange: '#ff7700'}
+	public headings:HeadingSpec = {negNeg:null, negPos: null, negBlank: null, blankNeg: null,
+		posNeg: null, posPos: null, posBlank: null, blankPos: null, blankBlank:null};
+	public colors = {green: '#1aff1a', red: '#4b0092', blue: '#0000ff', orange: '#ff7700'}
 
 	public setupHeadings(iNegLabel:string, iPosLabel:string, iBlankLabel:string,
 											 iActual:string | null, iPredicted:string | null) {
-		function fillInHeading( iFirst:string | null, iSecond:string, iColor:string) {
+		function fillInHeading( iFirst:string | null, iSecond:string | null, iColor:string) {
 			let tFirstPhrase = !iFirst ? '{},{},' : `
 				{
 					"text": "${iActual} = ",
@@ -34,8 +34,8 @@ export class HeadingsManager {
 				{
 					"text": ", "
 				}, 
-			`,
-				tSecondPhrase = `
+			`;
+			let	tSecondPhrase = !Boolean(iSecond) ? '{},{}' : `
 					{
 						"text": "${iPredicted} = ",
 						"color": "${iColor}",
@@ -47,8 +47,8 @@ export class HeadingsManager {
 						"italic": true,
 						"bold": true
 					}
-				`,
-				tHeading = `{
+				`;
+			let	tHeading = `{
         "type": "paragraph",
         "children": [${tFirstPhrase}${tSecondPhrase}]
       }`;
@@ -63,10 +63,13 @@ export class HeadingsManager {
 		this.headings = {
 			negNeg: fillInHeading(iNegLabel, iNegLabel, this.colors.green),
 			negPos: fillInHeading(iNegLabel, iPosLabel, this.colors.red),
+			negBlank: fillInHeading(iNegLabel, null, this.colors.red),
 			posNeg: fillInHeading(iPosLabel, iNegLabel, this.colors.red),
 			posPos: fillInHeading(iPosLabel, iPosLabel, this.colors.green),
+			posBlank: fillInHeading(iPosLabel, null, this.colors.green),
 			blankNeg: fillInHeading(null, iNegLabel, this.colors.orange),
 			blankPos: fillInHeading(null, iPosLabel, this.colors.blue),
+			blankBlank: {}
 		}
 	}
 
diff --git a/src/managers/model_manager.ts b/src/managers/model_manager.ts
new file mode 100644
index 0000000..14acac2
--- /dev/null
+++ b/src/managers/model_manager.ts
@@ -0,0 +1,737 @@
+/**
+ * The ModelManager uses information in the domain store to build a model
+ */
+import {DomainStore} from "../stores/domain_store";
+import {deselectAllCasesIn} from "../lib/codap-helper";
+import codapInterface from "../lib/CodapInterface";
+import {oneHot} from "../lib/one_hot";
+import {action, runInAction} from "mobx";
+import {computeKappa} from "../utilities/utilities";
+import {Feature, NgramDetails, StoredModel, Token} from "../stores/store_types_and_constants";
+import {LogisticRegression} from "../lib/jsregression";
+
+export class ModelManager {
+
+	domainStore: DomainStore
+	stepModeContinueCallback: ((iIteration: number) => void) | null = null
+	stepModeIteration: number = 0
+
+	constructor(iDomainStore: DomainStore) {
+		this.domainStore = iDomainStore
+		this.progressBar = this.progressBar.bind(this)
+		this.stepModeCallback = this.stepModeCallback.bind(this)
+	}
+
+	guaranteeUniqueModelName(iCandidate: string) {
+		const this_ = this
+
+		function isNotUnique(iName: string) {
+			return Boolean(this_.domainStore.trainingStore.trainingResults.find(iResult => iResult.name === iName))
+		}
+
+		let counter = 1,
+			tTest = iCandidate
+		while (isNotUnique(tTest)) {
+			tTest = `${iCandidate}_${counter}`
+			counter++
+		}
+		return tTest
+	}
+
+	/**
+	 * - We make sure both collections have their attributes showing
+	 * - If new cases for those collections need to be created, we create them
+	 * - We fill in the model name for cases in each collection
+	 * - We gather up the caseIDs for both weight and result cases
+	 */
+	async prepWeightsCollection(iTokens: Token[]) {
+
+		/**
+		 * We test to see if the weight case for each token has an empty model name
+		 */
+		async function allFirstWeightCasesAreEmpty() {
+			const tAttrName = 'name'
+			let tIsEmpty = true,
+				tFoundOne = false;
+			for (let tIndex = 0; tIndex < iTokens.length && tIsEmpty; tIndex++) {
+				const tFormula = `${tAttrName}==${iTokens[tIndex].token}`,
+					tFirstChildResult: any = await codapInterface.sendRequest({
+						action: 'get',
+						resource: `dataContext[${tFeatureDatasetName}].itemSearch[${tFormula}]`
+					})
+				if (tFirstChildResult.success && tFirstChildResult.values.length > 0) {
+					tFoundOne = true
+					const tName = tFirstChildResult.values[0].values['model name']
+					tIsEmpty = tIsEmpty && (!tName || tName === '')
+				}
+			}
+			return tFoundOne && tIsEmpty
+		}
+
+		const tFeatureDatasetName = this.domainStore.featureStore.featureDatasetInfo.datasetName,
+			tFeaturesCollectionName = this.domainStore.featureStore.featureDatasetInfo.collectionName,
+			tWeightsCollectionName = this.domainStore.featureStore.featureDatasetInfo.weightsCollectionName,
+			tUpdatingExistingWeights = await allFirstWeightCasesAreEmpty(),
+			tCreationRequests: { parent: number, values: any }[] = [],
+			tUpdateRequests: { id: number, values: any }[] = [],
+			tFeatureWeightCaseIDs: { [index: string]: number } = {},
+			tTokenArray: string[] = [],
+			tModelName = this.domainStore.trainingStore.model.name
+
+		async function showWeightAttributes() {
+			const tShowRequests = [{
+				action: 'update',
+				resource: `dataContext[${tFeatureDatasetName}].collection[${tWeightsCollectionName}].attribute[weight]`,
+				values: {hidden: false}
+			},
+				{
+					action: 'update',
+					resource: `dataContext[${tFeatureDatasetName}].collection[${tWeightsCollectionName}].attribute[model name]`,
+					values: {hidden: false}
+				}]
+			await codapInterface.sendRequest(tShowRequests)
+		}
+
+		async function getFeatureWeightCaseIDs() {
+			const tFeatureCountResult: any = await codapInterface.sendRequest({
+					action: 'get',
+					resource: `dataContext[${tFeatureDatasetName}].collection[${tFeaturesCollectionName}].caseCount`
+				}),
+				tFeatureCount = tFeatureCountResult.success ? tFeatureCountResult.values : 0,
+				tRequests: {}[] = []
+			for (let n = 0; n < tFeatureCount; n++) {
+				tRequests.push({
+						action: 'get',
+						resource: `dataContext[${tFeatureDatasetName}].collection[${tFeaturesCollectionName}].caseByIndex[${n}]`
+					}
+				)
+			}
+			const tResults: any = await codapInterface.sendRequest(tRequests)
+			tResults.forEach((iResult: any) => {
+				if (iResult.success) {
+					tFeatureWeightCaseIDs[iResult.values.case.values.name] = iResult.values.case.id
+				}
+			})
+		}
+
+		function generateFeatureRequests() {
+			iTokens.forEach((aToken: any) => {
+					if (tUpdatingExistingWeights) {
+						tUpdateRequests.push({
+							id: tFeatureWeightCaseIDs[aToken.token],
+							values: {
+								'model name': tModelName,
+							}
+						})
+					} else {
+						tFeatureWeightCaseIDs[aToken.token] = -1
+						tTokenArray.push(aToken.token)
+						tCreationRequests.push({
+							parent: aToken.featureCaseID,
+							values: {
+								'model name': tModelName,
+							}
+						})
+					}
+				}
+			)
+		}
+
+		// Start with features/weights collection
+		await showWeightAttributes()
+		if (tUpdatingExistingWeights) {
+			await getFeatureWeightCaseIDs()
+			this.domainStore.featureStore.featureWeightCaseIDs = tFeatureWeightCaseIDs
+		}
+		generateFeatureRequests()
+		if (tUpdatingExistingWeights) {
+			await codapInterface.sendRequest({
+				action: 'update',
+				resource: `dataContext[${tFeatureDatasetName}].collection[${tWeightsCollectionName}].case`,
+				values: tUpdateRequests
+			})
+		} else {
+			const tCreateResults: any = await codapInterface.sendRequest({
+				action: 'create',
+				resource: `dataContext[${tFeatureDatasetName}].collection[${tWeightsCollectionName}].case`,
+				values: tCreationRequests
+			})
+			tCreateResults.values.forEach((iValue: { id: number }, iIndex: number) => {
+				tFeatureWeightCaseIDs[tTokenArray[iIndex]] = iValue.id
+			})
+			this.domainStore.featureStore.featureWeightCaseIDs = tFeatureWeightCaseIDs
+		}
+	}
+
+	async prepResultsCollection() {
+		/**
+		 * The results collection is a child of the target collection and is where we show the predicted labels and
+		 * probabilities for each target text for each model
+		 */
+		async function guaranteeResultsCollection() {
+			const tTargetClassAttributeName = tTargetStore.targetClassAttributeName,
+				tPositiveClassName = tTargetStore.getClassName('positive'),
+				tResultsCollectionName = tTargetStore.targetResultsCollectionName
+			if (tTargetClassAttributeName !== '' && tPositiveClassName !== '') {
+				const tCollectionListResult: any = await codapInterface.sendRequest({
+					action: 'get',
+					resource: `dataContext[${tTargetDatasetName}].collectionList`
+				})
+				if (tCollectionListResult.values.length === 1) {
+					// There is not yet any results collection, so create it
+					const tAttributeValues = [
+						{
+							name: 'model name',
+							description: 'The model used for predicting these results'
+						},
+						{
+							name: tPredictedLabelAttributeName,
+							description: 'The label predicted by the model'
+						},
+						{
+							name: 'probability of ' + tPositiveClassName,
+							unit: '%',
+							precision: 3,
+							description: 'A computed probability based on the logistic regression model'
+						}
+					]
+					await codapInterface.sendRequest({
+						action: 'create',
+						resource: `dataContext[${tTargetDatasetName}].collection`,
+						values: [{
+							name: tResultsCollectionName,
+							title: tResultsCollectionName,
+							attrs: tAttributeValues
+						}]
+					}).catch(reason => {
+						console.log(`Exception in creating results collection because ${reason}`)
+					})
+
+					// This unfortunately installs an empty child case for each parent case. We store their IDs so we can
+					// use them later as the place to store model results
+					const tCaseIDResult: any = await codapInterface.sendRequest({
+						action: 'get',
+						resource: `dataContext[${tTargetDatasetName}].collection[${tResultsCollectionName}].caseFormulaSearch[true]`
+					})
+					tResultCaseIDsToFill = tCaseIDResult.values.map((iValue: any) => Number(iValue.id))
+				} else {	// We add a new case to each parent case for the next set of results
+					const tParentCollectionName = tTargetStore.targetCollectionName,
+						tCreateRequests: { parent: number, values: {} }[] = []
+					// First we get the parent case IDs
+					const tParentCaseIDResults: any = await codapInterface.sendRequest({
+						action: 'get',
+						resource: `dataContext[${tTargetDatasetName}].collection[${tParentCollectionName}].caseFormulaSearch[true]`
+					})
+					// Formulate the requests for the child cases
+					tParentCaseIDResults.values.forEach((iResult: { id: number }) => {
+						tCreateRequests.push({
+							parent: Number(iResult.id),
+							values: {}
+						})
+					})
+					// Send off the requests
+					const tChildrenRequestResult: any = await codapInterface.sendRequest({
+						action: 'create',
+						resource: `dataContext[${tTargetDatasetName}].collection[${tResultsCollectionName}].case`,
+						values: tCreateRequests
+					})
+					// Store the IDs for the children for later use
+					tResultCaseIDsToFill = tChildrenRequestResult.values.map((iValue: any) => Number(iValue.id))
+				}
+			}
+		}
+
+		const
+			this_ = this,
+			tTargetStore = this_.domainStore.targetStore,
+			tPredictedLabelAttributeName = tTargetStore.targetPredictedLabelAttributeName,
+			tTargetDatasetName = tTargetStore.targetDatasetInfo.name
+		let tResultCaseIDsToFill: number[] = []
+
+		await guaranteeResultsCollection()
+
+		this.domainStore.trainingStore.resultCaseIDs = tResultCaseIDsToFill
+	}
+
+	async cancel() {
+
+		async function wipeWeights() {
+			const tFeatureDatasetName = this_.domainStore.featureStore.featureDatasetInfo.datasetName,
+				tWeightsCollectionName = this_.domainStore.featureStore.featureDatasetInfo.weightsCollectionName,
+				tFeatureWeightCaseIDs = this_.domainStore.featureStore.featureWeightCaseIDs,
+				tUpdateRequests: { id: number, values: any }[] = []
+			for (let featureWeightCaseIDsKey in tFeatureWeightCaseIDs) {
+				tUpdateRequests.push({
+					id: tFeatureWeightCaseIDs[featureWeightCaseIDsKey],
+					values: {
+						'model name': '',
+						weight: ''
+					}
+				})
+			}
+			await codapInterface.sendRequest({
+				action: 'update',
+				resource: `dataContext[${tFeatureDatasetName}].collection[${tWeightsCollectionName}].case`,
+				values: tUpdateRequests
+			})
+		}
+
+		async function wipeResultsInTarget() {
+			const tTargetStore = this_.domainStore.targetStore,
+				tTargetDatasetName = tTargetStore.targetDatasetInfo.name,
+				tResultsCollectionName = tTargetStore.targetResultsCollectionName,
+				tResultCaseIDs = this_.domainStore.trainingStore.resultCaseIDs,
+				tPredictedLabelAttributeName = tTargetStore.targetPredictedLabelAttributeName,
+				tProbName = `probability of ${this_.domainStore.targetStore.getClassName('positive')}`,
+				tUpdateRequests = tResultCaseIDs.map(iID => {
+					const tRequest: any = {
+						id: iID,
+						values: {
+							'model name': '',
+						}
+					}
+					tRequest.values[tPredictedLabelAttributeName] = ''
+					tRequest.values[tProbName] = ''
+					return tRequest
+				})
+			await codapInterface.sendRequest({
+				action: 'update',
+				resource: `dataContext[${tTargetDatasetName}].collection[${tResultsCollectionName}].case`,
+				values: tUpdateRequests,
+			})
+		}
+
+		const this_ = this,
+			tTrainingStore = this.domainStore.trainingStore,
+			tModel = tTrainingStore.model,
+			tLogisiticModel = tModel.logisticModel
+
+		tModel.reset()
+		tLogisiticModel.reset()
+		await wipeWeights()
+		await wipeResultsInTarget()
+	}
+
+	async buildModel() {
+		const this_ = this
+
+		async function setup() {
+			await deselectAllCasesIn(tTargetDatasetName)
+			tLogisticModel.reset()
+			tLogisticModel.iterations = tTrainingStore.model.iterations
+			tLogisticModel.progressCallback = this_.progressBar
+			tLogisticModel.trace = tTrainingStore.model.trainingInStepMode
+			tLogisticModel.stepModeCallback = tTrainingStore.model.trainingInStepMode ?
+				this_.stepModeCallback : null
+			tLogisticModel.lockIntercept = tTrainingStore.model.lockInterceptAtZero
+			const tCases = tTargetStore.targetCases,
+				tColumnNames = tTargetColumnFeatureNames.concat(
+					this_.domainStore.featureStore.getChosenFeatures().map(iFeature => {
+						return iFeature.name;
+					}))
+			// Grab the strings in the target collection that are the values of the target attribute.
+			// Stash these in an array that can be used to produce a oneHot representation
+			tCases.forEach(iCase => {
+				const tCaseID = iCase.id,
+					tText = iCase.values[tTargetAttributeName],
+					tClass = iCase.values[tTargetClassAttributeName],
+					tColumnFeatures: { [key: string]: number | boolean } = {};
+				// We're going to put column features into each document as well so one-hot can include them in the vector
+				tColumnNames.forEach((aName) => {
+					let tValue: string | number = iCase.values[aName];
+					if (['1', 'true'].indexOf(String(tValue).toLowerCase()) >= 0)
+						tValue = 1;
+					else
+						tValue = 0;
+					if (tValue)
+						tColumnFeatures[aName] = tValue;
+				});
+				tDocuments.push({example: tText, class: tClass, caseID: tCaseID, columnFeatures: tColumnFeatures});
+			})
+		}
+
+		const tTargetStore = this.domainStore.targetStore,
+			tTargetDatasetName = tTargetStore.targetDatasetInfo.name,
+			tTargetAttributeName = tTargetStore.targetAttributeName,
+			tTargetClassAttributeName = tTargetStore.targetClassAttributeName,
+			tTargetColumnFeatureNames = this.domainStore.featureStore.targetColumnFeatureNames,
+			tNonNgramFeatures = this.domainStore.featureStore.getChosenFeatures().filter(iFeature => iFeature.info.kind !== 'ngram'),
+			tNgramFeatures = this.domainStore.featureStore.getChosenFeatures().filter(iFeature => iFeature.info.kind === 'ngram'),
+			tUnigramFeature = tNgramFeatures.find(iFeature => (iFeature.info.details as NgramDetails).n === 'uni'),
+			tPositiveClassName = tTargetStore.getClassName('positive'),
+			tDocuments: {
+				example: string, class: string, caseID: number,
+				columnFeatures: { [key: string]: number | boolean }
+			}[] = [],
+			tTrainingStore = this.domainStore.trainingStore,
+			tLogisticModel = tTrainingStore.model.logisticModel
+
+		await setup()
+
+		const tData: number[][] = [];
+
+		// Logistic can't happen until we've isolated the features and produced a oneHot representation
+		const tIgnore = tUnigramFeature && (tUnigramFeature.info.ignoreStopWords === true ||
+			tUnigramFeature.info.ignoreStopWords === false) ? tUnigramFeature.info.ignoreStopWords : true
+		tTrainingStore.model.ignoreStopWords = tIgnore
+		let tOneHot = oneHot({
+				frequencyThreshold: (tUnigramFeature && (Number(tUnigramFeature.info.frequencyThreshold) - 1)) || 0,
+				ignoreStopWords: tIgnore,
+				ignorePunctuation: true,
+				includeUnigrams: Boolean(tUnigramFeature),
+				positiveClass: tPositiveClassName,
+				negativeClass: tTargetStore.getClassName('negative'),
+				features: tNonNgramFeatures,
+				tokenMap: this.domainStore.featureStore.tokenMap
+			},
+			tDocuments)
+		if (!tOneHot)
+			return
+
+		// Column feature results get pushed on after unigrams
+
+		// The logisticModel.fit function requires that the class value (0 or 1) be the
+		// last element of each oneHot.
+		tOneHot.oneHotResult.forEach(iResult => {
+			iResult.oneHotExample.push(iResult.class === tPositiveClassName ? 1 : 0);
+			tData.push(iResult.oneHotExample);
+		});
+
+		// In step mode we'll be repeatedly updating weights and results. Prep for that before we start fitting
+		await this.prepWeightsCollection(tOneHot.tokenArray)
+		await this.prepResultsCollection()
+
+		// The fitting process is asynchronous so we fire it off here
+		// @ts-ignore
+		tLogisticModel.fit(tData);
+		tLogisticModel._data = tData;
+		tLogisticModel._oneHot = tOneHot;
+		tLogisticModel._documents = tDocuments;
+	}
+
+	async progressBar(iIteration: number) {
+		const tTrainingStore = this.domainStore.trainingStore,
+			tModel = tTrainingStore.model,
+			tIterations = tModel.iterations,
+			this_ = this
+		runInAction(async () => {
+			tModel.iteration = iIteration
+			if (iIteration >= tIterations) {
+				const tLogisticModel = tModel.logisticModel,
+					tTrainingResults = this_.domainStore.trainingStore.trainingResults
+
+				await this_.computeResults(tModel.logisticModel.fitResult.theta)
+
+				action(() => {
+					tTrainingStore.inactivateAll()
+
+					tTrainingResults.push({
+						name: tModel.name,
+						targetDatasetName: this_.domainStore.targetStore.targetDatasetInfo.name,
+						isActive: true,
+						threshold: Number(tLogisticModel.threshold),
+						constantWeightTerm: tLogisticModel.fitResult.constantWeightTerm,
+						ignoreStopWords: tModel.ignoreStopWords,
+						settings: {
+							iterations: tLogisticModel.iterations,
+							locked: tLogisticModel.lockIntercept,
+							thresholdAtPoint5: tModel.usePoint5AsProbThreshold
+						},
+						accuracy: tLogisticModel.accuracy || 0,
+						kappa: (tLogisticModel.accuracy === 0) ? 0 : (tLogisticModel.kappa || 0),
+						featureNames: this.domainStore.featureStore.getChosenFeatureNames(),
+						hasNgram: this.domainStore.featureStore.hasNgram(),
+						storedModel: this.fillOutCurrentStoredModel(tLogisticModel)
+					})
+				})()
+
+				await this.domainStore.syncWeightsAndResultsWithActiveModels()
+				await this.domainStore.recreateUsagesAndFeatureIDs(tModel.ignoreStopWords)
+
+				tModel.reset()
+			}
+		})
+	}
+
+	async stepModeCallback(iIteration: number, iCost: number, iWeights: number[], continueCallback: (iter: number) => void) {
+		await this.computeResults(iWeights)
+		this.stepModeContinueCallback = continueCallback
+		this.stepModeIteration = iIteration
+	}
+
+	nextStep() {
+		const tLogisticModel = this.domainStore.trainingStore.model.logisticModel
+		tLogisticModel.trace = this.domainStore.trainingStore.model.trainingInStepMode
+		tLogisticModel.stepModeCallback = this.domainStore.trainingStore.model.trainingInStepMode ?
+			this.stepModeCallback : null
+
+		this.stepModeContinueCallback && this.stepModeContinueCallback(this.stepModeIteration + 1)
+	}
+
+	fillOutCurrentStoredModel(iLogisticModel: LogisticRegression): StoredModel {
+		const this_ = this,
+			tTokenArray = iLogisticModel._oneHot.tokenArray,
+			tWeights = iLogisticModel.fitResult.theta	// toss the constant term
+
+		return {
+			storedTokens: tTokenArray.map((iToken: any, iIndex: number) => {
+				return {
+					featureCaseID: iToken.featureCaseID,
+					name: iToken.token,
+					formula: iToken.type !== 'unigram' ? this_.domainStore.featureStore.getFormulaFor(iToken.token) : '',
+					weight: tWeights[iIndex]
+				}
+			}),
+			positiveClassName: this.domainStore.targetStore.getClassName('positive'),
+			negativeClassName: this.domainStore.targetStore.getClassName('negative')
+		}
+	}
+
+	async computeResults(iWeights: number[]) {
+		const tModel = this.domainStore.trainingStore.model,
+			tLogisticModel = tModel.logisticModel,
+			tData = tLogisticModel._data,
+			tOneHot = tLogisticModel._oneHot,
+			tPositiveClassName = this.domainStore.targetStore.getClassName('positive'),
+			tNegativeClassName = this.domainStore.targetStore.getClassName('negative'),
+			tDocuments = tLogisticModel._documents;
+		await this.updateWeights(tModel.name, tOneHot.tokenArray, iWeights);
+
+		let tPredictionTools = {
+			logisticModel: tLogisticModel,
+			oneHotData: tData,
+			documents: tDocuments,
+			tokenArray: tOneHot.tokenArray,
+			positiveClassName: tPositiveClassName,
+			negativeClassName: tNegativeClassName,
+			lockProbThreshold: this.domainStore.trainingStore.model.usePoint5AsProbThreshold
+		}
+		await this.showPredictedLabels(tModel.name, tPredictionTools)
+	}
+
+	async updateWeights(iModelName: string, iTokens: any, iWeights: number[]) {
+
+		function generateRequests() {
+			iTokens.forEach((aToken: any, iIndex: number) => {
+					let tWeight: number | '',
+						tFeature: Feature | undefined,
+						tFeatureIsChosen: boolean | undefined = false
+					if (aToken.type === 'unigram') {
+						tWeight = iWeights[iIndex]
+					} else {
+						tFeature = tFeatures.find(iFeature => aToken.token === iFeature.name)
+						tFeatureIsChosen = tFeature && tFeature.chosen
+						tWeight = tFeatureIsChosen ? iWeights[iIndex] : ''
+					}
+					tUpdateRequests.push({
+						id: tFeatureWeightCaseIDs[aToken.token],
+						values: {
+							'model name': iModelName,
+							weight: tWeight
+						}
+					})
+					// Also update in stored features
+					if (tFeature && tFeatureIsChosen)
+						tFeature.weight = tWeight
+				}
+			)
+		}
+
+		const tFeatureStore = this.domainStore.featureStore,
+			tFeatureDatasetName = tFeatureStore.featureDatasetInfo.datasetName,
+			tWeightsCollectionName = tFeatureStore.featureDatasetInfo.weightsCollectionName,
+			tFeatures = tFeatureStore.getChosenFeatures(),
+			tUpdateRequests: { id: number, values: any }[] = [],
+			tFeatureWeightCaseIDs = tFeatureStore.featureWeightCaseIDs
+
+		generateRequests()
+
+		await codapInterface.sendRequest({
+			action: 'update',
+			resource: `dataContext[${tFeatureDatasetName}].collection[${tWeightsCollectionName}].case`,
+			values: tUpdateRequests
+		})
+	}
+
+	/**
+	 * Add attributes for predicted label and for probability. Compute and stash values.
+	 * @param iModelName
+	 * @param iTools
+	 * @private
+	 */
+	private async showPredictedLabels(iModelName: string, iTools:
+		{
+			logisticModel: any,	// Will compute probabilities
+			oneHotData: number[][],
+			documents: any,
+			tokenArray: any,
+			positiveClassName: string,
+			negativeClassName: string,
+			lockProbThreshold: boolean
+		}
+	) {
+
+		function findThreshold(): number {
+			// Determine the probability threshold that yields the fewest discrepant classifications
+			// First compute the probabilities separating them into two arrays
+			iTools.documents.forEach((aDoc: any, iIndex: number) => {
+				let tProbability: number = iTools.logisticModel.transform(iTools.oneHotData[iIndex]),
+					tActual = iTools.oneHotData[iIndex][tOneHotLength - 1];
+				if (tActual) {
+					tPosProbs.push(tProbability);
+				} else {
+					tNegProbs.push(tProbability);
+				}
+				// We will have to be able to lookup the probability later
+				tMapFromCaseIDToProbability[aDoc.caseID] = tProbability;
+			});
+			tPosProbs.sort();
+			tNegProbs.sort();
+			let tCurrValue = tPosProbs[0],
+				tNegLength = tNegProbs.length,
+				tPosLength = tPosProbs.length,
+				tCurrMinDiscrepancies: number,
+				tStartingThreshold: number;
+
+			// Return the index in tNegPros starting as given for the >= target probability
+			function findNegIndex(iStarting: number, iTargetProb: number): number {
+				while (tNegProbs[iStarting] < iTargetProb && iStarting < tNegLength) {
+					iStarting++;
+				}
+				return iStarting;
+			}
+
+			let tRecord: {
+				posIndex: number,	// Position at which we start testing for discrepancies
+				negIndex: number,
+				currMinDescrepancies: number,
+				threshold: number
+			};
+			if (iTools.lockProbThreshold) {
+				let tPosIndex = tPosProbs.findIndex((iProb) => {
+						return iProb > 0.5;
+					}),
+					tNegIndex = tNegProbs.findIndex((iProb) => {
+						return iProb > 0.5;
+					});
+				if (tNegIndex === -1)
+					tNegIndex = tNegLength;
+				tRecord = {
+					posIndex: tPosIndex,
+					negIndex: tNegIndex,
+					currMinDescrepancies: tPosIndex + (tNegLength - tNegIndex),
+					threshold: 0.5
+				}
+			} else {
+				let tNegIndex = tNegProbs.findIndex((v: number) => {
+					return v > tCurrValue;
+				});
+				if (tNegIndex === -1) {
+					// Negative and Positive probabilities don't overlap
+					tCurrMinDiscrepancies = 0;
+					tNegIndex = tNegLength;
+					tStartingThreshold = (tNegProbs[tNegLength - 1] + tPosProbs[0]) / 2; // halfway
+				} else {
+					tCurrMinDiscrepancies = Number.MAX_VALUE;
+					tStartingThreshold = tPosProbs[0];
+				}
+
+				tNegIndex = (tNegIndex === -1) ? tNegLength : tNegIndex;
+				tRecord = {
+					posIndex: 0,	// Position at which we start testing for discrepancies
+					negIndex: tNegIndex,
+					currMinDescrepancies: tCurrMinDiscrepancies,
+					threshold: tStartingThreshold
+				};
+				while (tRecord.negIndex < tNegLength && tRecord.posIndex < tPosLength) {
+					let tCurrDiscrepancies = tRecord.posIndex + (tNegLength - tRecord.negIndex);
+					if (tCurrDiscrepancies < tRecord.currMinDescrepancies) {
+						tRecord.currMinDescrepancies = tCurrDiscrepancies;
+						tRecord.threshold = tPosProbs[tRecord.posIndex];
+					}
+					tRecord.posIndex++;
+					tRecord.negIndex = findNegIndex(tRecord.negIndex, tPosProbs[tRecord.posIndex]);
+				}
+			}
+			return tRecord.threshold;
+		}
+
+		const
+			this_ = this,
+			tTargetStore = this_.domainStore.targetStore,
+			tOneHotLength = iTools.oneHotData[0].length,
+			tPosProbs: number[] = [],
+			tNegProbs: number[] = [],
+			tMapFromCaseIDToProbability: any = {},
+			kProbPredAttrNamePrefix = 'probability of ',
+			tProbName = `${kProbPredAttrNamePrefix}${iTools.positiveClassName}`,
+			tPredictedLabelAttributeName = tTargetStore.targetPredictedLabelAttributeName,
+			tTargetDatasetName = tTargetStore.targetDatasetInfo.name,
+			tResultsCollectionName = tTargetStore.targetResultsCollectionName,
+			tResultCaseIDs = this.domainStore.trainingStore.resultCaseIDs
+
+		// Create values of predicted label and probability for each document
+		let tThresholdResult = findThreshold(),
+			// tWeAreUpdating = tResultCaseIDs.length > 0,
+			// tLabelValuesForCreation: { parent: number, values: any }[] = [],
+			tLabelValuesForUpdating: { id: number, values: any }[] = [],
+			tActualPos = 0,
+			tPredictedPos = 0,
+			tBothPos = 0,
+			tBothNeg = 0;
+		iTools.logisticModel.threshold = tThresholdResult;
+		iTools.documents.forEach((aDoc: any, iIndex: number) => {
+			let tProbability: number,
+				tPredictedLabel,
+				tActualLabel,
+				tValues: any = {'model name': iModelName};
+			tProbability = tMapFromCaseIDToProbability[aDoc.caseID];
+			tPredictedLabel = tProbability > tThresholdResult ? iTools.positiveClassName : iTools.negativeClassName;
+			tValues[tPredictedLabelAttributeName] = tPredictedLabel;
+			tValues[tProbName] = tProbability * 100;	// Convert o %
+			tActualLabel = aDoc.class;
+			tActualPos += tActualLabel === iTools.positiveClassName ? 1 : 0;
+			tPredictedPos += tPredictedLabel === iTools.positiveClassName ? 1 : 0;
+			tBothPos += (tActualLabel === iTools.positiveClassName && tPredictedLabel === iTools.positiveClassName) ? 1 : 0;
+			tBothNeg += (tActualLabel === iTools.negativeClassName && tPredictedLabel === iTools.negativeClassName) ? 1 : 0;
+
+			// if (tWeAreUpdating) {
+			tLabelValuesForUpdating.push({
+				id: tResultCaseIDs[iIndex],
+				values: tValues
+			})
+			/*
+						} else {
+							tLabelValuesForCreation.push({
+								parent: aDoc.caseID,
+								values: tValues
+							})
+						}
+			*/
+		});
+
+		let computedKappa = computeKappa(iTools.documents.length, tBothPos, tBothNeg, tActualPos, tPredictedPos);
+		iTools.logisticModel.accuracy = computedKappa.observed;
+		iTools.logisticModel.kappa = (computedKappa.observed === 0) ? 0 : computedKappa.kappa;
+
+		// Send the values to CODAP
+		// if (tWeAreUpdating) {
+		// 	tResultCaseIDs.length = 0
+		await codapInterface.sendRequest({
+			action: 'update',
+			resource: `dataContext[${tTargetDatasetName}].collection[${tResultsCollectionName}].case`,
+			values: tLabelValuesForUpdating,
+		})
+		/*
+				} else {
+					await codapInterface.sendRequest({
+						action: 'create',
+						resource: `dataContext[${tTargetDatasetName}].collection[${tResultsCollectionName}].case`,
+						values: tLabelValuesForCreation
+					})
+				}
+		*/
+	}
+
+}
+
diff --git a/src/managers/notification_manager.ts b/src/managers/notification_manager.ts
new file mode 100644
index 0000000..97431c6
--- /dev/null
+++ b/src/managers/notification_manager.ts
@@ -0,0 +1,108 @@
+/**
+ * The NotificationManager is created at startup and handles notifications from CODAP that must be received and
+ * handled regardless of which components have been created and initialized.
+ * Notifications that apply only to a specific component are handled in that component.
+ */
+
+import codapInterface, {CODAP_Notification} from "../lib/CodapInterface";
+import {DomainStore} from "../stores/domain_store";
+import {action} from "mobx";
+import {starterFeature} from "../stores/store_types_and_constants";
+
+export default class NotificationManager {
+
+	domainStore: DomainStore
+
+	constructor(iDomainStore: DomainStore) {
+		this.domainStore = iDomainStore;
+		this.handleDataContextChange = this.handleDataContextChange.bind(this)
+		this.handleAttributesChange = this.handleAttributesChange.bind(this)
+		this.handleDeleteFeatureCase = this.handleDeleteFeatureCase.bind(this)
+		this.handleUpdateFeatureCase = this.handleUpdateFeatureCase.bind(this)
+		codapInterface.on('notify', '*', 'dataContextCountChanged', this.handleDataContextChange);
+		codapInterface.on('notify', '*', 'createCases', this.handleDataContextChange);
+		codapInterface.on('notify', '*', 'titleChange', this.handleDataContextChange);
+		codapInterface.on('notify', '*', 'createAttributes', this.handleAttributesChange);
+		codapInterface.on('notify', '*', 'deleteAttributes', this.handleAttributesChange);
+		codapInterface.on('notify', '*', 'updateAttributes', this.handleAttributesChange);
+		codapInterface.on('notify', '*', 'deleteCases', this.handleDeleteFeatureCase);
+		codapInterface.on('notify', '*', 'updateCases', this.handleUpdateFeatureCase);
+	}
+
+	async handleDataContextChange(/*iNotification: CODAP_Notification*/) {
+		action(async () => {
+			await this.domainStore.featureStore.updateWordListSpecs()
+			await this.domainStore.targetStore.updateFromCODAP()
+		})()
+	}
+
+	async handleAttributesChange(/*iNotification: CODAP_Notification*/) {
+		action(async () => {
+			action(() => {
+				this.domainStore.featureStore.featureUnderConstruction = Object.assign({}, starterFeature)
+			})()
+		})()
+		await this.handleDataContextChange()
+	}
+
+	handleDeleteFeatureCase(iNotification: CODAP_Notification) {
+		const tFeatureStore = this.domainStore.featureStore,
+			tFeatures = tFeatureStore.features,
+			tDataContextName = iNotification.resource && iNotification.resource.match(/\[(.+)]/)[1],
+			tCases = iNotification.values.result.cases,
+			tDeletedFeatureNames = Array.isArray(tCases) ? tCases.map((iCase: any) => {
+				return iCase.values.name
+			}) : []
+		if (tDeletedFeatureNames.length > 0 && tDataContextName === tFeatureStore.featureDatasetInfo.datasetName) {
+			action(() => {
+				tDeletedFeatureNames.forEach((iName: string) => {
+					const tIndex = tFeatures.findIndex(iFeature => iFeature.name === iName && iFeature.type !== 'unigram')
+					if (tIndex >= 0)
+						tFeatureStore.deleteFeature(tFeatures[tIndex])
+				})
+			})()
+		}
+	}
+
+	handleUpdateFeatureCase(iNotification: CODAP_Notification) {
+		const tFeatureStore = this.domainStore.featureStore,
+			tFeatures = tFeatureStore.features,
+			tDataContextName = iNotification.resource && iNotification.resource.match(/\[(.+)]/)[1]
+		if (tDataContextName === tFeatureStore.featureDatasetInfo.datasetName) {
+			const tCases = iNotification.values.result.cases,
+				tUpdatedCases = Array.isArray(tCases) ? tCases : []
+			if (tUpdatedCases.length > 0) {
+				action(() => {
+					tUpdatedCases.forEach((iCase: any) => {
+						const tChosen = iCase.values.chosen === 'true',
+							tType = iCase.values.type,
+							tName = iCase.values.name,
+							tFoundFeature = tType !== 'unigram' && tFeatures.find(iFeature => iFeature.name === tName)
+						if (tFoundFeature) {
+							tFoundFeature.chosen = tChosen
+						} else if (tType === 'unigram') {
+							const tToken = tFeatureStore.tokenMap[tName]
+							if( tToken && !tChosen) {
+								delete tFeatureStore.tokenMap[tName]
+							} else if(!tToken && tChosen) {
+								tFeatureStore.tokenMap[tName] = {
+									token: tName,
+									type: 'unigram',
+									count: iCase.values['frequency in positive'] + iCase.values['frequency in negative'],
+									index: 0,
+									numPositive: iCase.values['frequency in positive'],
+									numNegative: iCase.values['frequency in negative'],
+									caseIDs: JSON.parse(iCase.values.usages),
+									weight: null,
+									featureCaseID: iCase.id
+								}
+							}
+						}
+					})
+				})()
+			}
+		}
+	}
+
+}
+
diff --git a/src/managers/testing_manager.ts b/src/managers/testing_manager.ts
new file mode 100644
index 0000000..6925c86
--- /dev/null
+++ b/src/managers/testing_manager.ts
@@ -0,0 +1,230 @@
+/**
+ * The TestingManager uses information in the domain store to classify texts in a user-chosen dataset
+ */
+import {DomainStore} from "../stores/domain_store";
+import {
+	attributeExists,
+	deselectAllCasesIn,
+	getCaseValues
+} from "../lib/codap-helper";
+import codapInterface from "../lib/CodapInterface";
+import {action} from "mobx";
+import {LogitPrediction} from "../lib/logit_prediction";
+import {wordTokenizer} from "../lib/one_hot";
+import {TestingResult} from "../stores/store_types_and_constants";
+import {computeKappa} from "../utilities/utilities";
+
+export class TestingManager {
+
+	domainStore: DomainStore
+	kNonePresent: string
+
+	constructor(iDomainStore: DomainStore, iNonePresentPrompt: string) {
+		this.domainStore = iDomainStore
+		this.kNonePresent = iNonePresentPrompt
+	}
+
+	async classify(iStoreTest:boolean) {
+		const this_ = this,
+			tChosenModelName = this.domainStore.testingStore.chosenModelName,
+			tTrainingResult = this.domainStore.trainingStore.getTrainingResultByName(tChosenModelName),
+			tStoredModel = tTrainingResult ? tTrainingResult.storedModel : null,
+			tPositiveClassName = tStoredModel ? tStoredModel.positiveClassName : '',
+			tNegativeClassName = tStoredModel ? tStoredModel.negativeClassName : '',
+			tTokens = tStoredModel ? tStoredModel.storedTokens : [],
+			kProbPredAttrNamePrefix = 'probability of ',
+			tTestingStore = this.domainStore.testingStore,
+			tTestingDatasetName = tTestingStore.testingDatasetInfo.name,
+			tTestingDatasetTitle = tTestingStore.testingDatasetInfo.title,
+			tTestingCollectionName = tTestingStore.testingCollectionName,
+			tTestingAttributeName = tTestingStore.testingAttributeName,
+			tClassAttributeName = tTestingStore.testingClassAttributeName,
+			tTargetPredictedProbabilityName = kProbPredAttrNamePrefix + tPositiveClassName,
+			tTargetPredictedLabelAttributeName = this.domainStore.targetStore.targetPredictedLabelAttributeName,
+			tTargetFeatureIDsAttributeName = this_.domainStore.targetStore.targetFeatureIDsAttributeName,
+			tLabelValues:{id:number, values:any}[] = [],
+			tMatrix = {posPos: 0, negPos: 0, posNeg: 0, negNeg: 0},
+			tTestingResult: TestingResult = {
+				targetDatasetName: tTestingDatasetName,
+				targetDatasetTitle: tTestingDatasetTitle,
+				modelName: tChosenModelName,
+				numPositive: 0,
+				numNegative: 0,
+				accuracy: 0,
+				kappa: 0,
+				testBeingConstructed: false
+			},
+			tWeights = tTokens.map(iToken => iToken.weight),
+			tPredictor = tTrainingResult ?
+				new LogitPrediction(tTrainingResult.constantWeightTerm, tWeights, tTrainingResult.threshold) : null
+		let tPhraseCount = 0
+
+		async function installFeatureAndPredictionAttributes() {
+			const tAttributeRequests: object[] = []
+			if (tTokens) {
+				tTokens.forEach(async (iToken) => {
+					if (iToken.formula !== '') {
+						const tAttributeAlreadyExists = await attributeExists(tTestingDatasetName, tTestingCollectionName, iToken.name)
+						if (!tAttributeAlreadyExists)
+							tAttributeRequests.push({
+								name: iToken.name,
+								title: iToken.name,
+								formula: iToken.formula
+							})
+					}
+				})
+				const tLabelExists = await attributeExists(tTestingDatasetName, tTestingCollectionName,
+					tTargetPredictedLabelAttributeName)
+				if (!tLabelExists) {
+					tAttributeRequests.push(
+						{
+							name: tTargetPredictedLabelAttributeName,
+							description: 'The label predicted by the model'
+						})
+					tAttributeRequests.push(
+						{
+							name: tTargetPredictedProbabilityName,
+							description: 'The probability predicted by the model that the classification is positive',
+							unit: '%',
+							precision: 3
+						})
+				}
+				const tFeatureIDsAttributeExists = await attributeExists(tTestingDatasetName, tTestingCollectionName,
+					this_.domainStore.targetStore.targetFeatureIDsAttributeName)
+				if (!tFeatureIDsAttributeExists)
+					tAttributeRequests.push(
+						{
+							name: tTargetFeatureIDsAttributeName,
+							hidden: true
+						})
+
+				await codapInterface.sendRequest({
+					action: 'create',
+					resource: `dataContext[${tTestingDatasetName}].collection[${tTestingCollectionName}].attribute`,
+					values: tAttributeRequests
+				})
+			}
+		}
+
+		async function classifyEachPhrase() {
+			if (!tStoredModel || !tPredictor)
+				return
+			const tTestCases = await getCaseValues(tTestingDatasetName, tTestingCollectionName)
+			tPhraseCount = tTestCases.length
+			tTestCases.forEach(iCase => {
+				let tPhraseID = iCase.id,
+					tPhrase = iCase.values[tTestingAttributeName],
+					tActual = tClassAttributeName === this_.kNonePresent ? '' :
+						iCase.values[tClassAttributeName],
+					tGiven = Array(tTokens.length).fill(0),
+					tFeatureIDs: number[] = [];
+				if (tTrainingResult && tTrainingResult.hasNgram) {
+					// Find the index of each feature in the phrase
+					wordTokenizer(tPhrase, false, true).forEach((iWord) => {
+						let tIndex = tTokens.findIndex(iToken => iToken.name === iWord);
+						if (tIndex >= 0) {	// We've found a feature
+							// Mark it in the array
+							tGiven[tIndex] = 1;
+							// Add the case ID to the list of featureIDs for this phrase
+							tFeatureIDs.push(tStoredModel.storedTokens[tIndex].featureCaseID);
+							// tModel.usages[tIndex].push(tPhraseID);
+						}
+					})
+				}
+				// The column features are names of attributes we expect to find having values true or false
+				tTokens.forEach((iToken, iIndex) => {
+					if (iToken.formula !== '') {
+						if (iCase.values[iToken.name]) {
+							// Mark it in the array
+							tGiven[iIndex] = 1;
+							// Add the case ID to the list of featureIDs for this phrase
+							tFeatureIDs.push(iToken.featureCaseID);
+							// tModel.usages[tIndex].push(tPhraseID);
+						}
+					}
+				});
+				let tCaseValues: { [key: string]: string | number } = {},
+					tPrediction = tPredictor.predict(tGiven);
+				tCaseValues[tTargetPredictedLabelAttributeName] = tPrediction.class ?
+					tPositiveClassName : tNegativeClassName;
+				tCaseValues[tTargetPredictedProbabilityName] = tPrediction.probability * 100;	// Convert to %
+				tCaseValues[tTargetFeatureIDsAttributeName] = JSON.stringify(tFeatureIDs);
+				tLabelValues.push({
+					id: tPhraseID,
+					values: tCaseValues
+				});
+				// Increment results
+				let tActualBool = tActual === tPositiveClassName;
+				if (tPrediction.class) {
+					tTestingResult.numPositive++;
+					if (tActualBool)
+						tMatrix.posPos++;
+					else
+						tMatrix.negPos++;
+				} else {
+					tTestingResult.numNegative++;
+					if (tActualBool)
+						tMatrix.posNeg++;
+					else
+						tMatrix.negNeg++;
+				}
+			})
+		}
+
+		async function updateTargetAndFeatures() {
+			await codapInterface.sendRequest({
+				action: 'update',
+				resource: `dataContext[${tTestingDatasetName}].collection[${tTestingCollectionName}].case`,
+				values: tLabelValues
+			});
+			// Add the usages to each feature case
+/*
+			let tFeatureUpdates = tModel.caseIDs.map((iID, iIndex) => {
+				return {
+					id: iID,
+					values: {usages: JSON.stringify(tModel.usages[iIndex])}
+				}
+			});
+			await codapInterface.sendRequest({
+				action: 'update',
+				resource: `dataContext[${tFeatureDatasetName}].collection[${tFeatureCollectionName}].case`,
+				values: tFeatureUpdates
+			});
+*/
+			if (tClassAttributeName !== '') {
+				let computedKappa = computeKappa(tPhraseCount, tMatrix.posPos, tMatrix.negNeg,
+					tMatrix.posPos + tMatrix.posNeg, tMatrix.posPos + tMatrix.negPos);
+				tTestingResult.accuracy = Number(computedKappa.observed.toFixed(3));
+				tTestingResult.kappa = (computedKappa.observed === 0) ? 0 : Number(computedKappa.kappa.toFixed(3));
+			}
+		}
+
+		if (!tTrainingResult) {
+			console.log(`Unable to use ${tChosenModelName} to classify ${tTestingDatasetName}`)
+			return
+		}
+		await deselectAllCasesIn(tTestingDatasetName)
+		await installFeatureAndPredictionAttributes()
+		await classifyEachPhrase()
+		await updateTargetAndFeatures()
+		action(() => {
+			if( iStoreTest) {
+				tTestingStore.testingResultsArray.push(tTestingResult)
+			}
+			else {
+				tTestingStore.testingResultsArray.pop()
+				tTestingStore.testingResultsArray.push(tTestingResult)
+			}
+/*
+			tTestingStore.currentTestingResults = tTestingStore.emptyTestingResult()
+			tTestingStore.testingDatasetInfo.name = ''
+			tTestingStore.testingDatasetInfo.title = ''
+			tTestingStore.chosenModelName = ''
+			tTestingStore.testingCollectionName = ''
+			tTestingStore.testingAttributeName = ''
+			tTestingStore.testingClassAttributeName = ''
+*/
+		})()
+	}
+}
+
diff --git a/src/managers/text_feedback_manager.ts b/src/managers/text_feedback_manager.ts
new file mode 100644
index 0000000..f1f8726
--- /dev/null
+++ b/src/managers/text_feedback_manager.ts
@@ -0,0 +1,537 @@
+/**
+ * The TextFeedbackManager displays phrases in a text component based on user selection of target phrases
+ * or features of the model.
+ */
+
+import codapInterface, {CODAP_Notification} from "../lib/CodapInterface";
+import {ClassLabel, HeadingsManager, HeadingSpec, PhraseQuadruple} from "./headings_manager";
+import {datasetExists, getCaseValues, getSelectedCasesFrom} from "../lib/codap-helper";
+import {phraseToFeatures, textToObject} from "../utilities/utilities";
+import {DomainStore} from "../stores/domain_store";
+import {UiStore} from "../stores/ui_store";
+
+export default class TextFeedbackManager {
+
+	domainStore: DomainStore
+	uiStore: UiStore
+	headingsManager: HeadingsManager
+	isSelectingFeatures = false
+	isSelectingTargetPhrases = false
+
+	constructor(iDomainStore: DomainStore, iUiStore: UiStore) {
+		this.handleNotification = this.handleNotification.bind(this)
+		this.domainStore = iDomainStore;
+		this.uiStore = iUiStore;
+		this.headingsManager = new HeadingsManager();
+		codapInterface.on('notify', '*', 'selectCases', this.handleNotification);
+	}
+
+	async handleNotification(iNotification: CODAP_Notification) {
+		const tTargetDatasetName = this.domainStore.targetStore.targetDatasetInfo.name,
+			tTestingDatasetName = this.domainStore.testingStore.testingDatasetInfo.name,
+			tFeatureDatasetName = this.domainStore.featureStore.featureDatasetInfo.datasetName
+
+		if (iNotification.action === 'notify' && iNotification.values.operation === 'selectCases'/* &&
+			iNotification.values.result.cases*/) {
+			try {
+				const tDataContextName = iNotification.resource && iNotification.resource.match(/\[(.+)]/)[1];
+				if (tDataContextName === tFeatureDatasetName && !this.isSelectingFeatures) {
+					this.isSelectingTargetPhrases = true;
+					await this.handleFeatureSelection();
+					this.isSelectingTargetPhrases = false;
+				} else if ([tTestingDatasetName, tTargetDatasetName].includes(tDataContextName) && !this.isSelectingTargetPhrases) {
+					this.isSelectingFeatures = true;
+					await this.handleTargetDatasetSelection();
+					this.isSelectingFeatures = false;
+				}
+			} finally {
+				this.isSelectingFeatures = false
+				this.isSelectingTargetPhrases = false
+			}
+		}
+	}
+
+	getHeadingsManager(): HeadingsManager {
+		if (!this.headingsManager) {
+			this.headingsManager = new HeadingsManager();
+		}
+		this.headingsManager.setupHeadings(this.domainStore.targetStore.getClassName('negative'),
+			this.domainStore.targetStore.getClassName('positive'),
+			'', 'Actual', 'Predicted')
+		return this.headingsManager;
+	}
+
+	async getChildCases(iCaseIDs: number[], iDatasetName: string, iCollectionName: string) {
+		const tPromises = iCaseIDs.map(async (iID) => {
+			const tResult: any = await codapInterface.sendRequest({
+				action: 'get',
+				resource: `dataContext[${iDatasetName}].collection[${iCollectionName}].caseByID[${iID}]`
+			}).catch(reason => {
+				console.log('Unable to get child case because', reason)
+			})
+			return tResult.success ? tResult.values.case.values : {}
+		})
+		return await Promise.all(tPromises)
+	}
+
+	/**
+	 * If the Features dataset has cases selected, for each selected case
+	 * 	- Pull out the array of 'usages' - the the case IDs of the cases in the dataset being analyzed
+	 * 	- Select these cases in that dataset
+	 * 	- Pull the phrase from the target case
+	 */
+	async handleFeatureSelection() {
+
+		async function handleSelectionInFeaturesDataset() {
+			if (tIDsOfFeaturesToSelect.length > 0) {
+				// Select the features
+				await codapInterface.sendRequest({
+					action: 'create',
+					resource: `dataContext[${tFeatureDatasetName}].selectionList`,
+					values: tIDsOfFeaturesToSelect
+				});
+			}
+		}
+
+		const tUseTestingDataset = this.uiStore.getSelectedPanelTitle() === 'Testing' &&
+				this.domainStore.testingStore.testingDatasetInfo.name !== '' &&
+				this.domainStore.testingStore.testingAttributeName !== '' &&
+				!this.domainStore.testingStore.currentTestingResults.testBeingConstructed,
+			tStore = tUseTestingDataset ? this.domainStore.testingStore : this.domainStore.targetStore,
+			kMaxStatementsToDisplay = 40,
+			tDatasetName = tUseTestingDataset ? tStore.testingDatasetInfo.name : tStore.targetDatasetInfo.name,
+			tDatasetTitle = tUseTestingDataset ? tStore.testingDatasetInfo.title : tStore.targetDatasetInfo.title,
+			tCollectionName = tUseTestingDataset ? tStore.testingCollectionName : tStore.targetCollectionName,
+			tAttributeName = tUseTestingDataset ? tStore.testingAttributeName : tStore.targetAttributeName,
+			tFeatureDatasetName = this.domainStore.featureStore.featureDatasetInfo.datasetName,
+			tFeatureCollectionName = this.domainStore.featureStore.featureDatasetInfo.collectionName,
+			tClassAttributeName = tUseTestingDataset ? tStore.testingClassAttributeName : tStore.targetClassAttributeName,
+			tActiveModelName = this.domainStore.trainingStore.getFirstActiveModelName(),
+			tPredictedLabelAttributeName = this.domainStore.targetStore.targetPredictedLabelAttributeName,
+			tColumnFeatureNames = this.domainStore.featureStore.targetColumnFeatureNames,
+			tConstructedFeatureNames = this.domainStore.featureStore.features.map(iFeature => iFeature.name),
+			tFeaturesMap: {[index:number]:string} = {},
+			tSelectedFeaturesSet: Set<number> = new Set(),
+			tUsedIDsSet: Set<number> = new Set(),
+			// Get all the selected cases in the Features dataset. Some will be features and some will be weights
+			tSelectionListResult: any = await codapInterface.sendRequest({
+				action: 'get',
+				resource: `dataContext[${tFeatureDatasetName}].selectionList`
+			}),
+			tCaseRequests: { action: string, resource: string }[] = []
+
+		// If we have a testing dataset but no test has been run, we're done
+		if (tUseTestingDataset && tStore.testingResultsArray.length === 0) {
+			return
+		}
+
+		// For the features, we just need to record their caseIDs. For the weights, we record a request to get parents
+		tSelectionListResult.values.forEach((iValue: any) => {
+			if (iValue.collectionName === tFeatureCollectionName) {
+				tSelectedFeaturesSet.add(iValue.caseID)
+			} else {
+				tCaseRequests.push({
+					action: 'get',
+					resource: `dataContext[${tFeatureDatasetName}].collection[${iValue.collectionName}].caseByID[${iValue.caseID}]`
+				})
+			}
+		})
+		// Get the parents
+		if (tCaseRequests.length > 0) {
+			const tCaseResults: any = await codapInterface.sendRequest(tCaseRequests)
+			tCaseResults.forEach((iResult: any) => {
+				tSelectedFeaturesSet.add(iResult.values.case.parent)
+			})
+		}
+		const tIDsOfFeaturesToSelect = Array.from(tSelectedFeaturesSet)
+		// We need all the features as cases so we can get their used caseIDs from the target dataset
+		const tFeatureCasesResult: any = await codapInterface.sendRequest(
+			tIDsOfFeaturesToSelect.map(iID => {
+				return {
+					action: 'get',
+					resource: `dataContext[${tFeatureDatasetName}].collection[${tFeatureCollectionName}].caseByID[${iID}]`
+				}
+			})
+		)
+		// If we're using the testing dataset, we go through each of the target phrases and pull out the case IDs
+		// of the cases that use the selected features. We determine this by looking at the featureIDs attribute
+		// of each target phrase case and checking whether that array contains any of the selected feature IDs.
+		if (tUseTestingDataset) {
+			const tTestCases = await getCaseValues(tDatasetName, tCollectionName)
+			tTestCases.forEach((iCase: any) => {
+				const tFeatureIDs = iCase.values.featureIDs
+				if (typeof tFeatureIDs === 'string' && tFeatureIDs.length > 0) {
+					JSON.parse(tFeatureIDs).forEach((anID: number) => {
+						if (tIDsOfFeaturesToSelect.includes(anID)) {
+							tUsedIDsSet.add(iCase.id);
+						}
+					})
+				}
+			})
+		}
+		else {
+			// For each selected feature stash its usages and name
+			tFeatureCasesResult.forEach((iResult: any) => {
+				const tUsages = iResult.values.case.values.usages
+				if (typeof tUsages === 'string' && tUsages.length > 0) {
+					(JSON.parse(tUsages)).forEach((anID: number) => {
+						tUsedIDsSet.add(anID);
+					})
+					tFeaturesMap[iResult.values.case.id] = iResult.values.case.values.name
+				}
+			})
+		}
+
+		await handleSelectionInFeaturesDataset()
+
+		// Select the target texts that make use of the selected features
+		const tUsedCaseIDs: number[] = Array.from(tUsedIDsSet);
+		await codapInterface.sendRequest({
+			action: 'create',
+			resource: `dataContext[${tDatasetName}].selectionList`,
+			values: tUsedCaseIDs
+		});
+		const tQuadruples: PhraseQuadruple[] = [],
+			tEndPhrase = (tUsedCaseIDs.length > kMaxStatementsToDisplay) ? 'Not all statements could be displayed' : '';
+		const tTargetPhrasesToShow = Math.min(tUsedCaseIDs.length, kMaxStatementsToDisplay);
+		// Here is where we put the contents of the text component together
+		for (let i = 0; i < tTargetPhrasesToShow; i++) {
+			const tGetCaseResult: any = await codapInterface.sendRequest({
+				action: 'get',
+				resource: `dataContext[${tDatasetName}].collection[${tCollectionName}].caseByID[${tUsedCaseIDs[i]}]`
+			}),
+				tFeatureIDs:number[] = []
+			if (tGetCaseResult.success && tGetCaseResult.values) {
+				const tFeatureValue = tGetCaseResult.values.case.values.featureIDs
+				if (typeof tFeatureValue === 'string' && tFeatureValue.length > 0) {
+					JSON.parse(tFeatureValue).forEach( (iValue:string | number)=>{
+						tFeatureIDs.push(Number(iValue))
+					})
+				}
+
+				const tChildren = await this.getChildCases(tGetCaseResult.values.case.children, tDatasetName, 'results'),
+					tFoundChild = tChildren.find(iChild => iChild['model name'] === tActiveModelName),
+					tPredictedClass = tFoundChild ? tFoundChild[tPredictedLabelAttributeName] : '',
+					tActualClass = tGetCaseResult.values.case.values[tClassAttributeName],
+					tPhrase = tGetCaseResult.values.case.values[tAttributeName],
+					tQuadruple = {actual: tActualClass, predicted: tPredictedClass, phrase: tPhrase,
+						nonNtigramFeatures: tFeatureIDs.map(anID=>tFeaturesMap[anID])}
+				tQuadruples.push((tQuadruple));
+			}
+		}
+		await this.retitleTextComponent(`Selected texts in ${tDatasetTitle}`)
+		await this.composeText(tQuadruples, textToObject,
+			tColumnFeatureNames.concat(tConstructedFeatureNames), tEndPhrase);
+	}
+
+	/**
+	 * First, For each selected target phrase, select the cases in the Feature dataset that contain the target
+	 * case id.
+	 * Second, under headings for the classification, display each selected target phrase as text with
+	 * features highlighted and non-features grayed out
+	 */
+	public async handleTargetDatasetSelection() {
+		const this_ = this
+
+		async function handleSelectionInFeaturesDataset() {
+			// Select the features or, possibly, deselect all features
+			await codapInterface.sendRequest({
+				action: 'create',
+				resource: `dataContext[${tFeatureDatasetName}].selectionList`,
+				values: tIDsOfFeaturesToSelect
+			});
+
+			let tSelectedFeatureCases: any[] = []
+			if (this_.domainStore.featureStore.features.length > 0) {
+				// Get the features and stash them in a set
+				tSelectedFeatureCases = await getSelectedCasesFrom(tFeatureDatasetName, tFeatureCollectionName)
+				tSelectedFeatureCases.forEach((iCase: any) => {
+					tFeaturesMap[Number(iCase.id)] = iCase.values.name;
+				});
+			}
+		}
+
+		async function handleSelectionInTargetDataset() {
+			if (tIDsOfParentCasesToSelect.length > 0) {
+				await codapInterface.sendRequest({
+					action: 'create',
+					resource: `dataContext[${tDatasetName}].selectionList`,
+					values: tIDsOfParentCasesToSelect
+				});
+			}
+		}
+
+		const tUseTestingDataset = this.uiStore.getSelectedPanelTitle() === 'Testing' &&
+				this.domainStore.testingStore.testingDatasetInfo.name !== '' &&
+				this.domainStore.testingStore.testingAttributeName !== '',
+			tStore = tUseTestingDataset ? this.domainStore.testingStore : this.domainStore.targetStore,
+			tDatasetName = tUseTestingDataset ? tStore.testingDatasetInfo.name : tStore.targetDatasetInfo.name,
+			tCollectionName = tUseTestingDataset ? tStore.testingCollectionName : tStore.targetCollectionName,
+			tDatasetTitle = tUseTestingDataset ? tStore.testingDatasetInfo.title : tStore.targetDatasetInfo.title,
+			tActiveModelName = this.domainStore.trainingStore.getFirstActiveModelName(),
+			tAttributeName = tUseTestingDataset ? tStore.testingAttributeName : tStore.targetAttributeName,
+			tFeatureDatasetName = this.domainStore.featureStore.featureDatasetInfo.datasetName,
+			tFeatureCollectionName = this.domainStore.featureStore.featureDatasetInfo.collectionName,
+			tClassAttributeName = tUseTestingDataset ? tStore.testingClassAttributeName : tStore.targetClassAttributeName,
+			tPredictedLabelAttributeName = this.domainStore.targetStore.targetPredictedLabelAttributeName,
+			tColumnFeatureNames = this.domainStore.featureStore.targetColumnFeatureNames,
+			tConstructedFeatureNames = this.domainStore.featureStore.features.map(iFeature => iFeature.name),
+			tFeaturesMap: {[index:number]:string} = {},
+			// Get all the selected cases in the target dataset. Some will be results and some will be texts
+			tSelectionListResult: any = await codapInterface.sendRequest({
+				action: 'get',
+				resource: `dataContext[${tDatasetName}].selectionList`
+			}),
+			tSelectedTextsSet: Set<number> = new Set(),
+			tCaseRequests: { action: string, resource: string }[] = [],
+			tFeatureIDsSet: Set<number> = new Set(),
+			tQuadruples: PhraseQuadruple[] = []
+
+
+		// For the texts, we just need to record their caseIDs. For the results, we record a request to get parents
+		tSelectionListResult.values.forEach((iValue: any) => {
+			if (iValue.collectionName === tCollectionName) {
+				tSelectedTextsSet.add(iValue.caseID)
+			} else {
+				tCaseRequests.push({
+					action: 'get',
+					resource: `dataContext[${tDatasetName}].collection[${iValue.collectionName}].caseByID[${iValue.caseID}]`
+				})
+			}
+		})
+		// Get the parents
+		if (tCaseRequests.length > 0) {
+			const tCaseResults: any = await codapInterface.sendRequest(tCaseRequests)
+			tCaseResults.forEach((iResult: any) => {
+				tSelectedTextsSet.add(iResult.values.case.parent)
+			})
+		}
+		const tIDsOfTextsToSelect = Array.from(tSelectedTextsSet)
+		// We need all the texts as cases so we can get their used caseIDs from the target dataset
+		const tTextCasesResult: any = await codapInterface.sendRequest(
+			tIDsOfTextsToSelect.map(iID => {
+				return {
+					action: 'get',
+					resource: `dataContext[${tDatasetName}].collection[${tCollectionName}].caseByID[${iID}]`
+				}
+			})
+		)
+		// For each selected text stash its list of features, and stash the phrase, actual and predicted
+		// labels in tQuadruples
+		tTextCasesResult.forEach(async (iResult: any) => {
+			const tCaseValues = iResult.values.case.values,
+				tChildIDs = iResult.values.case.children,
+				tFeaturesInText = tCaseValues.featureIDs
+				let tFeatureIDsForThisText:(number | string)[] = [],
+					tPredictedResult = ''
+			if (typeof tFeaturesInText === 'string' && tFeaturesInText.length > 0) {
+				tFeatureIDsForThisText = JSON.parse(tFeaturesInText)
+				tFeatureIDsForThisText.forEach((anID: string | number) => {
+					tFeatureIDsSet.add(Number(anID));
+				})
+			}
+			// If we're using the testing dataset, the predicted value belongs is to be found
+			// in tCaseValues
+			if (tUseTestingDataset) {
+				tPredictedResult = tCaseValues[tPredictedLabelAttributeName] || ''
+			} else {
+				// The predicted value, if there is one, belongs to the child case that has the correct
+				// model name
+				if (tChildIDs && tChildIDs.length > 0) {
+					const tChildRequests = tChildIDs.map((iID: number) => {
+							return {
+								action: 'get',
+								resource: `dataContext[${tDatasetName}].collection[results].caseByID[${iID}]`
+							}
+						}),
+						tChildRequestResults: any = await codapInterface.sendRequest(tChildRequests),
+						tFoundChild = tChildRequestResults.find((iChildResult: any) => {
+							return iChildResult.values.case.values['model name'] === tActiveModelName
+						})
+					tPredictedResult = tFoundChild ? tFoundChild.values.case.values[tPredictedLabelAttributeName] : ''
+				}
+			}
+
+			tQuadruples.push({
+				phrase: tCaseValues[tAttributeName],
+				predicted: tPredictedResult,
+				actual: tCaseValues[tClassAttributeName],
+				nonNtigramFeatures: tFeatureIDsForThisText	// Numbers for now. Strings later
+			})
+		})
+
+
+		const tIDsOfFeaturesToSelect: number[] = Array.from(tFeatureIDsSet),
+			tIDsOfParentCasesToSelect: number[] = Array.from(tSelectedTextsSet);
+		await handleSelectionInTargetDataset()
+		if (await datasetExists(tFeatureDatasetName))
+			await handleSelectionInFeaturesDataset()
+
+		// We can now convert each quad's array of feature IDs to features
+		tQuadruples.forEach(iQuad=>{
+			iQuad.nonNtigramFeatures = iQuad.nonNtigramFeatures.map(iID=>{
+				return tFeaturesMap[Number(iID)]
+			})
+		})
+
+		await this.retitleTextComponent(`Selected texts in ${tDatasetTitle}`)
+		await this.composeText(tQuadruples, phraseToFeatures, tColumnFeatureNames.concat(tConstructedFeatureNames));
+	}
+
+	/**
+	 * Cause the text component to display phrases with the feature highlighting determined by
+	 * 	given function
+	 * @param iPhraseQuadruples  Specifications for the phrases to be displayed
+	 * @param iHighlightFunc {Function}	Function called to do the highlighting
+	 * @param iSpecialFeatures {string[]} Typically "column features" true of the phrase, but the strings
+	 * 					themselves do not appear in the phrase
+	 * @param iEndPhrase {string} The text to display at the bottom of the list of phrases
+	 * @public
+	 */
+	public async composeText(iPhraseQuadruples: PhraseQuadruple[], iHighlightFunc: Function,
+													 iSpecialFeatures: string[], iEndPhrase?: string) {
+		const kHeadingsManager = this.getHeadingsManager();
+		const kProps = ['negNeg', 'negPos', 'negBlank', 'posNeg', 'posPos', 'posBlank', 'blankNeg', 'blankPos', 'blankBlank'];
+		// @ts-ignore
+		const kHeadings: HeadingSpec = kHeadingsManager.headings;
+		const tClassItems: { [index: string]: any[] } = {}
+		kProps.forEach(iProp => {
+			tClassItems[iProp] = []
+		})
+		let tItems: any = [];
+
+
+		function addOnePhrase(iQuadruple: PhraseQuadruple) {
+			// @ts-ignore
+			const kLabels: ClassLabel = kHeadingsManager.classLabels;
+
+			let tGroup: string,
+				tColor: string;
+			switch (iQuadruple.actual) {
+				case kLabels.negLabel:
+					switch (iQuadruple.predicted) {
+						case kLabels.negLabel:
+							tGroup = 'negNeg';
+							// @ts-ignore
+							tColor = kHeadingsManager.colors.green;
+							break;
+						case kLabels.posLabel:
+							tGroup = 'negPos';
+							// @ts-ignore
+							tColor = kHeadingsManager.colors.red;
+							break;
+						default:
+							tGroup = 'negBlank'
+							tColor = kHeadingsManager.colors.red
+					}
+					break;
+				case kLabels.posLabel:
+					switch (iQuadruple.predicted) {
+						case kLabels.negLabel:
+							tGroup = 'posNeg';
+							// @ts-ignore
+							tColor = kHeadingsManager.colors.red;
+							break;
+						case kLabels.posLabel:
+							tGroup = 'posPos';
+							// @ts-ignore
+							tColor = kHeadingsManager.colors.green;
+							break;
+						default:
+							tGroup = 'posBlank'
+							tColor = kHeadingsManager.colors.green
+					}
+					break;
+				default:
+					switch (iQuadruple.predicted) {
+						case kLabels.negLabel:
+							tGroup = 'blankNeg';
+							tColor = kHeadingsManager.colors.orange;
+							break;
+						case kLabels.posLabel:
+							tGroup = 'blankPos';
+							tColor = kHeadingsManager.colors.blue;
+							break;
+						default:
+							tGroup = 'blankBlank'
+							tColor = '#FFFF00'
+					}
+			}
+			const tSquare = {
+				text: tGroup !== kProps[kProps.length - 1] ? '■ ' : '', // Don't add the square if we're in 'blankBlank'
+				color: tColor
+			}
+			// @ts-ignore
+			tClassItems[tGroup].push({
+				type: 'list-item',
+				children: [tSquare].concat(iHighlightFunc(iQuadruple.phrase, iQuadruple.nonNtigramFeatures, iSpecialFeatures))
+			})
+		}
+
+		iPhraseQuadruples.forEach(iTriple => {
+			addOnePhrase(iTriple);
+		});
+
+		// The phrases are all in their groups. Create the array of group objects
+		kProps.forEach(iProp => {
+			// @ts-ignore
+			let tPhrases = tClassItems[iProp];
+			if (tPhrases.length !== 0) {
+				let tHeadingItems = [
+					// @ts-ignore
+					kHeadings[iProp],
+					{
+						type: 'bulleted-list',
+						// @ts-ignore
+						children: tClassItems[iProp]
+					}];
+				tItems = tItems.concat(tHeadingItems);
+			}
+		});
+		if (iEndPhrase && iEndPhrase !== '') {
+			tItems.push({
+				"type": "paragraph",
+				"children": [
+					{
+						"text": iEndPhrase
+					}
+				]
+			})
+		}
+		if (tItems.length === 0)
+			this.domainStore.clearText();
+		else {
+			// Send it all off to the text object
+			await codapInterface.sendRequest({
+				action: 'update',
+				resource: `component[${this.domainStore.textStore.textComponentID}]`,
+				values: {
+					text: {
+						"object": "value",
+						document: {
+							children: tItems,
+							objTypes: {
+								'list-item': 'block',
+								'bulleted-list': 'block',
+								'paragraph': 'block'
+							}
+						}
+					}
+				}
+			})
+		}
+
+	}
+
+	async retitleTextComponent(iTitle: string) {
+		await codapInterface.sendRequest({
+			action: 'update',
+			resource: `component[${this.domainStore.textStore.textComponentID}]`,
+			values: {
+				title: iTitle
+			}
+		})
+	}
+
+}
+
diff --git a/src/stores/domain_store.ts b/src/stores/domain_store.ts
new file mode 100644
index 0000000..0c32cad
--- /dev/null
+++ b/src/stores/domain_store.ts
@@ -0,0 +1,679 @@
+/**
+ * These store objects are meant to keep track of all the state need by classes and components that needs to
+ * be accessed in more than one file or needs to be saved and restored.
+ */
+
+import {getCaseValues, getComponentByTypeAndTitleOrName, openTable} from "../lib/codap-helper";
+import codapInterface from "../lib/CodapInterface";
+import TextFeedbackManager from "../managers/text_feedback_manager";
+import {oneHot, wordTokenizer} from "../lib/one_hot";
+import {Feature, kPosNegConstants, kStoryQPluginName} from "./store_types_and_constants";
+import {TargetStore} from "./target_store";
+import {FeatureStore} from "./feature_store";
+import {TrainingStore} from "./training_store";
+import {TestingStore} from "./testing_store";
+import {TextStore} from "./text_store";
+import {UiStore} from "./ui_store";
+
+export class DomainStore {
+	targetStore: TargetStore
+	featureStore: FeatureStore
+	trainingStore: TrainingStore
+	testingStore: TestingStore
+	textStore: TextStore
+	uiStore: UiStore
+	textFeedbackManager: TextFeedbackManager
+
+	constructor(iUiStore: UiStore) {
+		this.targetStore = new TargetStore(() => {
+			return this.featureStore.features.map(iFeature => iFeature.name)
+		})
+		this.featureStore = new FeatureStore(() => this.targetStore.targetDatasetInfo)
+		this.trainingStore = new TrainingStore()
+		this.testingStore = new TestingStore(this.featureStore.getFeatureDatasetID)
+		this.textStore = new TextStore()
+		this.uiStore = iUiStore
+		this.textFeedbackManager = new TextFeedbackManager(this, this.uiStore)
+	}
+
+	asJSON(): object {
+		return {
+			targetStore: this.targetStore.asJSON(),
+			featureStore: this.featureStore.asJSON(),
+			trainingStore: this.trainingStore.asJSON(),
+			testingStore: this.testingStore.asJSON(),
+			textStore: this.textStore.asJSON()
+		}
+	}
+
+	async fromJSON(json: { targetStore: object, featureStore: object, trainingStore: object, testingStore: object, textStore: object }) {
+		this.targetStore.fromJSON(json.targetStore)
+		this.featureStore.fromJSON(json.featureStore)
+		this.trainingStore.fromJSON(json.trainingStore)
+		this.testingStore.fromJSON(json.testingStore)
+		this.textStore.fromJSON(json.textStore)
+
+		if (this.textStore.textComponentID !== -1) {
+			await this.addTextComponent()	//Make sure it is in the document
+		}
+		await this.guaranteeFeaturesDataset()
+		await this.testingStore.updateCodapInfoForTestingPanel()
+	}
+
+	async guaranteeFeaturesDataset(): Promise<boolean> {
+		const tFeatureStore = this.featureStore,
+			tDatasetName = tFeatureStore.featureDatasetInfo.datasetName,
+			tFeatureCollectionName = this.featureStore.featureDatasetInfo.collectionName,
+			tWeightsCollectionName = this.featureStore.featureDatasetInfo.weightsCollectionName,
+			tTargetStore = this.targetStore
+
+		async function hideWeightsAttributes() {
+			const tShowRequests = [{
+				action: 'update',
+				resource: `dataContext[${tDatasetName}].collection[${tWeightsCollectionName}].attribute[weight]`,
+				values: {hidden: true}
+			},
+				{
+					action: 'update',
+					resource: `dataContext[${tDatasetName}].collection[${tWeightsCollectionName}].attribute[model name]`,
+					values: {hidden: true}
+				}]
+			await codapInterface.sendRequest(tShowRequests)
+		}
+
+		if (tFeatureStore.features.length > 0) {
+			if (tFeatureStore.featureDatasetInfo.datasetID === -1) {
+				const tChosenClassKey = this.targetStore.targetChosenClassColumnKey,
+					tUnchosenClassKey = tChosenClassKey === 'left' ? 'right' : 'left',
+					tPositiveAttrName = kPosNegConstants.positive.attrKey + tTargetStore.targetClassNames[tChosenClassKey],
+					tNegativeAttrName = kPosNegConstants.negative.attrKey + tTargetStore.targetClassNames[tUnchosenClassKey],
+					tCreateResult: any = await codapInterface.sendRequest({
+						action: 'create',
+						resource: 'dataContext',
+						values: {
+							name: tDatasetName,
+							title: tDatasetName,
+							collections: [{
+								name: tFeatureCollectionName,
+								title: tFeatureCollectionName,
+								attrs: [
+									{name: 'name'},
+									{name: 'chosen', type: 'checkbox'},
+									{name: tPositiveAttrName},
+									{name: tNegativeAttrName},
+									{name: 'type', hidden: true},
+									/*
+																		{name: 'description'},
+																		{name: 'formula'},
+									*/
+									{name: 'usages', hidden: true}
+								]
+							},
+								{
+									name: tWeightsCollectionName,
+									title: tWeightsCollectionName,
+									parent: tFeatureCollectionName,
+									attrs: [
+										{name: 'model name', type: 'categorical', hidden: false},
+										{name: 'weight', hidden: false}
+									]
+								}]
+						}
+					})
+				if (tCreateResult.success) {
+					tFeatureStore.featureDatasetInfo.datasetID = tCreateResult.values.id
+					tFeatureStore.featureDatasetInfo.datasetName = tDatasetName
+					tFeatureStore.featureDatasetInfo.datasetTitle = tCreateResult.values.title
+					await openTable(tDatasetName)
+					// The 'model name' and 'weight' attributes were created as visible as a workaround to a bug.
+					// Now we can hide them
+					await hideWeightsAttributes()
+				}
+			}
+			return true
+		}
+		return false
+	}
+
+	async updateNonNtigramFeaturesDataset() {
+		const this_ = this,
+			tFeatureStore = this.featureStore,
+			tNonNgramFeatures = tFeatureStore.features.filter(iFeature => iFeature.info.kind !== 'ngram'),
+			tTargetStore = this.targetStore,
+			caseUpdateRequests: { values: { features: Feature[] } }[] = [],
+			tTargetDatasetName = tTargetStore.targetDatasetInfo.name,
+			tTargetCollectionName = tTargetStore.targetCollectionName
+		let resourceString: string = '',
+			tFeatureItems: { values: { type: string }, id: string }[] = [],
+			tItemsToDelete: { values: object, id: string }[] = [],
+			tFeaturesToAdd: Feature[] = [],
+			tFeaturesToUpdate: Feature[] = []
+
+		async function getExistingFeatureItems(): Promise<{ values: any, id: string }[]> {
+			const tItemsRequestResult: any = await codapInterface.sendRequest({
+				action: 'get',
+				resource: `${resourceString}.itemSearch[*]`
+			})
+			if (tItemsRequestResult.success)
+				return tItemsRequestResult.values
+			else
+				return []
+		}
+
+		function featureDoesNotMatchItem(iItem: { [key: string]: any }, iFeature: { [key: string]: any }) {
+			return ['name', 'chosen'/*, 'formula', 'description'*/].some(iKey => {
+					return String(iItem[iKey]).trim() !== String(iFeature[iKey]).trim()
+				}) || iItem[kPosNegConstants.negative.storeKey] !== iFeature[kPosNegConstants.negative.attrKey] ||
+				iItem[kPosNegConstants.positive.storeKey] !== iFeature[kPosNegConstants.positive.attrKey]
+		}
+
+		async function updateFrequenciesUsagesAndFeatureIDs() {
+			const tClassAttrName = this_.targetStore.targetClassAttributeName,
+				tChosenClassKey = this_.targetStore.targetChosenClassColumnKey,
+				tPosClassLabel = this_.targetStore.targetClassNames[tChosenClassKey],
+				tTargetCases = await this_.targetStore.updateTargetCases()
+
+			tNonNgramFeatures.forEach(iFeature => {
+				iFeature.numberInPositive = 0
+				iFeature.numberInNegative = 0
+				iFeature.usages = []
+			})
+			/**
+			 * We go through each target case
+			 * 		For each feature, if the case has the feature, we increment that feature's positive or negative count
+			 * 			as appropriate
+			 * 		If the feature is present,
+			 * 			- we push the case's ID into the feature's usages
+			 * 			- 	we add the feature's case ID to the array of feature IDs for that case
+			 */
+			tTargetCases.forEach((iCase) => {
+				tNonNgramFeatures.forEach((iFeature) => {
+					if (iCase.values[iFeature.name]) {
+						if (iCase.values[tClassAttrName] === tPosClassLabel) {
+							iFeature.numberInPositive++
+						} else {
+							iFeature.numberInNegative++
+						}
+						iFeature.usages.push(iCase.id)
+						if (!caseUpdateRequests[iCase.id]) {
+							caseUpdateRequests[iCase.id] = {values: {features: []}}
+						}
+						caseUpdateRequests[iCase.id].values.features.push(iFeature)
+					}
+				})
+			})
+		}
+
+		if (await this.guaranteeFeaturesDataset()) {
+			resourceString = `dataContext[${tFeatureStore.featureDatasetInfo.datasetID}]`
+
+			tFeatureItems = (await getExistingFeatureItems()).filter(iItem => iItem.values.type !== 'unigram')
+			await updateFrequenciesUsagesAndFeatureIDs()
+			tItemsToDelete = tFeatureItems.filter(iItem => {
+				return !tNonNgramFeatures.find(iFeature => iFeature.featureItemID === iItem.id)
+			})
+			tFeaturesToAdd = tNonNgramFeatures.filter(iFeature => {
+				return !tFeatureItems.find(iItem => {
+					return iFeature.featureItemID === iItem.id
+				})
+			})
+			tFeaturesToUpdate = tNonNgramFeatures.filter(iFeature => {
+				const tMatchingItem = tFeatureItems.find(iItem => {
+					return iFeature.featureItemID === iItem.id
+				})
+				return tMatchingItem && featureDoesNotMatchItem(iFeature, tMatchingItem.values)
+			})
+			if (tItemsToDelete.length > 0) {
+				await codapInterface.sendRequest(
+					tItemsToDelete.map(iItem => {
+						return {
+							action: 'delete',
+							resource: `${resourceString}.itemByID[${iItem.id}]`
+						}
+					})
+				)
+			}
+			if (tFeaturesToAdd.length > 0) {
+				const tValues = tFeaturesToAdd.map(iFeature => {
+					const tChosenClassKey = this.targetStore.targetChosenClassColumnKey,
+						tUnchosenClassKey = tChosenClassKey === 'left' ? 'right' : 'left',
+						tPositiveAttrName = kPosNegConstants.positive.attrKey + tTargetStore.targetClassNames[tChosenClassKey],
+						tNegativeAttrName = kPosNegConstants.negative.attrKey + tTargetStore.targetClassNames[tUnchosenClassKey]
+					let tValuesObject: { values: { [index: string]: {} } } = {
+						values: {
+							chosen: iFeature.chosen,
+							name: iFeature.name,
+							type: iFeature.type,
+							/*
+														formula: iFeature.formula,
+														description: iFeature.description,
+							*/
+							usages: JSON.stringify(iFeature.usages)
+						}
+					}
+					tValuesObject.values[tPositiveAttrName] = iFeature.numberInPositive
+					tValuesObject.values[tNegativeAttrName] = iFeature.numberInNegative
+					return tValuesObject
+				})
+				const tCreateResult: any = await codapInterface.sendRequest(
+					{
+						action: 'create',
+						resource: `${resourceString}.collection[${tFeatureStore.featureDatasetInfo.collectionName}].case`,
+						values: tValues
+					}
+				)
+				if (tCreateResult.success) {
+					tCreateResult.values.forEach(async (iValue: any, iIndex: number) => {
+						tFeaturesToAdd[iIndex].caseID = iValue.id
+						const tGetItemResult: any = await codapInterface.sendRequest({
+							action: 'get',
+							resource: `${resourceString}.itemByCaseID[${iValue.id}]`
+						})
+						tFeaturesToAdd[iIndex].featureItemID = tGetItemResult.values.id
+					})
+				}
+			}
+			if (tFeaturesToUpdate.length > 0) {
+				await codapInterface.sendRequest(
+					tFeaturesToUpdate.map(iFeature => {
+						return {
+							action: 'update',
+							resource: `${resourceString}.itemByID[${iFeature.caseID}]`,
+							values: {
+								chosen: iFeature.chosen,
+								name: iFeature.name,
+								'frequency in positive': iFeature[kPosNegConstants.positive.storeKey],
+								'frequency in negative': iFeature[kPosNegConstants.negative.storeKey]
+							}
+						}
+					})
+				)
+			}
+			// We've waited until now to update target cases with feature IDs so that we can be sure
+			//	features do have caseIDs to stash in target cases
+			if (caseUpdateRequests.length > 0) {
+				const tValues = caseUpdateRequests.map((iRequest, iIndex) => {
+					return {
+						id: iIndex,
+						values: {featureIDs: JSON.stringify(iRequest.values.features.map(iFeature => iFeature.caseID))}
+					}
+				})
+				await codapInterface.sendRequest({
+					action: 'update',
+					resource: `dataContext[${tTargetDatasetName}].collection[${tTargetCollectionName}].case`,
+					values: tValues
+				})
+			}
+		}
+	}
+
+	async updateNgramFeatures() {
+		if (this.featureStore.tokenMapAlreadyHasUnigrams())
+			return
+		const this_ = this
+		const tNgramFeatures = this.featureStore.features.filter(iFeature => iFeature.info.kind === 'ngram')
+		await this.guaranteeFeaturesDataset()
+		for (const iNtgramFeature of tNgramFeatures) {
+			const
+				tTargetStore = this.targetStore,
+				tFeatureDatasetName = this.featureStore.featureDatasetInfo.datasetName,
+				tFeatureCollectionName = this.featureStore.featureDatasetInfo.collectionName,
+				tIgnore = iNtgramFeature.info.ignoreStopWords !== undefined ? iNtgramFeature.info.ignoreStopWords : true,
+				tThreshold = (iNtgramFeature.info.frequencyThreshold || 4),
+				tTargetCases = tTargetStore.targetCases,
+				tTargetAttributeName = tTargetStore.targetAttributeName,
+				tTargetClassAttributeName = this.targetStore.targetClassAttributeName,
+				tDocuments = tTargetCases.map(iCase => {
+					return {
+						example: iCase.values[tTargetAttributeName],
+						class: iCase.values[tTargetClassAttributeName],
+						caseID: Number(iCase.id),
+						columnFeatures: {}
+					}
+				}),
+				tChosenClassKey = tTargetStore.targetChosenClassColumnKey,
+				tUnchosenClassKey = tChosenClassKey === 'left' ? 'right' : 'left',
+				tPositiveAttrName = kPosNegConstants.positive.attrKey + tTargetStore.targetClassNames[tChosenClassKey],
+				tNegativeAttrName = kPosNegConstants.negative.attrKey + tTargetStore.targetClassNames[tUnchosenClassKey]
+			// tokenize the target texts
+			const tOneHotResult = oneHot({
+				frequencyThreshold: tThreshold - 1,
+				ignoreStopWords: tIgnore,
+				ignorePunctuation: true,
+				includeUnigrams: true,
+				positiveClass: this.targetStore.getClassName('positive'),
+				negativeClass: this.targetStore.getClassName('negative'),
+				features: []
+			}, tDocuments)
+			if (!tOneHotResult)
+				return
+			const tTokenArray = tOneHotResult.tokenArray	// Array of unigram features
+
+			this_.featureStore.tokenMap = tOneHotResult.tokenMap
+			// Stash tokens in feature dataset
+			// if (await this.guaranteeFeaturesDataset()) {
+			const tUnigramCreateMsgs: any[] = []
+			tTokenArray.forEach(iFeature => {
+				const tCaseValues: { [index: string]: any } = {
+					values: {
+						chosen: true,
+						name: iFeature.token,
+						type: 'unigram',
+						/*
+												description: `unigram ${tIgnore ? '' : 'not '}ignoring stop words with frequency threshold of ${tThreshold}`,
+						*/
+						usages: JSON.stringify(iFeature.caseIDs)
+					}
+				}
+				tCaseValues.values[tPositiveAttrName] = iFeature.numPositive
+				tCaseValues.values[tNegativeAttrName] = iFeature.numNegative
+				tUnigramCreateMsgs.push(tCaseValues)
+			})
+			const tCreateResult: any = await codapInterface.sendRequest({
+				action: 'create',
+				resource: `dataContext[${tFeatureDatasetName}].collection[${tFeatureCollectionName}].case`,
+				values: tUnigramCreateMsgs
+			})
+			// Stash the resultant feature case IDs where we can get them to update target cases
+			// We make a map with featureCaseID as key and usages as value
+			if (tCreateResult.success) {
+				tCreateResult.values.forEach((iValue: { id: number }, iIndex: number) => {
+					tUnigramCreateMsgs[iIndex].featureCaseID = iValue.id
+					tTokenArray[iIndex].featureCaseID = iValue.id
+				})
+				// Put together update messages for the target cases
+				const tUpdateMsgs: { id: number, values: { featureIDs: number[] | string } }[] = []
+				tTargetCases.forEach(iCase => {
+					// console.log(`iCase = ${JSON.stringify(toJS(iCase))}`)
+					const tTheseFeatureIDs = iCase.values.featureIDs
+					const tUpdateValue = {id: iCase.id, values: {featureIDs: tTheseFeatureIDs ? JSON.parse(tTheseFeatureIDs) : []}}
+					tTokenArray.forEach(iFeature => {
+						if (iFeature.caseIDs.indexOf(iCase.id) >= 0) {
+							// @ts-ignore
+							tUpdateValue.values.featureIDs.push(iFeature.featureCaseID)
+						}
+					})
+					// @ts-ignore
+					tUpdateValue.values.featureIDs = JSON.stringify(tUpdateValue.values.featureIDs)
+					tUpdateMsgs.push(tUpdateValue)
+				})
+				await codapInterface.sendRequest({
+					action: 'update',
+					resource: `dataContext[${tTargetStore.targetDatasetInfo.name}].collection[${tTargetStore.targetCollectionName}].case`,
+					values: tUpdateMsgs
+				})
+			}
+		}
+	}
+
+	async addTextComponent() {
+		await this.textStore.addTextComponent(this.targetStore.targetDatasetInfo.title, this.targetStore.targetAttributeName)
+		await this.clearText()
+		setTimeout(async () => {
+			// Take the focus away from the newly created text component
+			const tPluginID = await getComponentByTypeAndTitleOrName('game', kStoryQPluginName, kStoryQPluginName)
+			await codapInterface.sendRequest({
+				action: 'notify',
+				resource: `component[${tPluginID}]`,
+				values: {
+					request: 'select'
+				}
+			})
+		}, 1000)
+	}
+
+	async clearText() {
+		await this.textStore.clearText(this.targetStore.targetAttributeName)
+	}
+
+	featuresPanelCanBeEnabled() {
+		return this.targetStore.targetAttributeName !== ''
+			&& this.targetStore.targetClassAttributeName !== ''
+			&& this.targetStore.targetChosenClassColumnKey !== ''
+	}
+
+	trainingPanelCanBeEnabled() {
+		return this.featuresPanelCanBeEnabled() && this.featureStore.features.length > 0
+	}
+
+	testingPanelCanBeEnabled() {
+		return this.trainingPanelCanBeEnabled() && this.trainingStore.trainingResults.length > 0
+	}
+
+	async setIsActiveForResultAtIndex(iIndex: number, iIsActive: boolean) {
+		const tTrainingResults = this.trainingStore.trainingResults
+		let tNumActive = 0
+		tTrainingResults[iIndex].isActive = iIsActive
+		tTrainingResults.forEach(iResult => {
+			tNumActive += iResult.isActive ? 1 : 0
+		})
+		if (tNumActive === 0) {
+			// Always have at least one result active
+			let currIndex = iIndex - 1
+			if (currIndex < 0)
+				currIndex = tTrainingResults.length - 1
+			tTrainingResults[currIndex].isActive = true
+		}
+		const tFirstActiveResult = tTrainingResults.find(iResult=>iResult.isActive),
+			tIgnore = tFirstActiveResult ? tFirstActiveResult.ignoreStopWords : true
+		await this.syncWeightsAndResultsWithActiveModels()
+		await this.recreateUsagesAndFeatureIDs(tIgnore)
+	}
+
+	/**
+	 * When the user changes activity status of models, we go into the Features and target datasets and set aside
+	 * weights and results for all models not currently active.
+	 */
+	async syncWeightsAndResultsWithActiveModels() {
+		if (this.trainingStore.trainingResults.length === 0)
+			return
+		const tTrainingResults = this.trainingStore.trainingResults,
+			tFeatureDatasetName = this.featureStore.featureDatasetInfo.datasetName,
+			tMessages: object[] = [],
+			tWeightsCollectionName = this.featureStore.featureDatasetInfo.weightsCollectionName
+		let tResultIDsToSetaside: number[] = [],
+			tWeightIDsToSetaside: number[] = []// Unset-aside all the weights
+		await codapInterface.sendRequest({
+				action: 'notify',
+				resource: `dataContext[${tFeatureDatasetName}]`,
+				values: {
+					request: "restoreSetasides"
+				}
+			}
+		)
+
+		// Gather all the cases from the weights collection
+		const tWeightsRequestResult: any = await codapInterface.sendRequest({
+				action: 'get',
+				resource: `dataContext[${tFeatureDatasetName}].collection[${tWeightsCollectionName}].caseFormulaSearch[true]`
+			}),
+			tWeightNameIDPairs: { modelName: string, id: number }[] = tWeightsRequestResult.success ?
+				tWeightsRequestResult.values.map((iValue: { id: number, values: { 'model name': string } }) => {
+					return {modelName: iValue.values['model name'], id: iValue.id}
+				}) : []
+
+		// Unset-aside results collection for each training result
+		const datasetNames = tTrainingResults.map(iResult=>iResult.targetDatasetName)
+			.filter(iName=>iName!==null && iName!==undefined),
+			datasetNamesSet = new Set(datasetNames),
+			uniqueNames = Array.from(datasetNamesSet)
+		await codapInterface.sendRequest(uniqueNames.map(iName => {
+			return {
+				action: 'notify',
+				resource: `dataContext[${iName}]`,
+				values: {
+					request: "restoreSetasides"
+				}
+			}
+		}))
+		// All cases are showing. Now figure out which weights and results to set aside
+		// First gather all the weight cases with no model name
+/*
+		const tNoNamePairs = tWeightNameIDPairs.filter(iPair=>iPair.modelName === '')
+		tWeightIDsToSetaside = tWeightIDsToSetaside.concat(tNoNamePairs.map(iPair=>iPair.id))
+*/
+		for (let tIndex = 0; tIndex < tTrainingResults.length; tIndex++) {
+			const iResult = tTrainingResults[tIndex]
+			// First the weights
+			if (!iResult.isActive) {
+				const tInactiveWeightPairs = tWeightNameIDPairs.filter(iPair => iPair.modelName === iResult.name),
+					tInactiveWeightIDs = tInactiveWeightPairs.map(iPair => iPair.id)
+				tWeightIDsToSetaside = tWeightIDsToSetaside.concat(tInactiveWeightIDs)
+				tMessages.push({
+					action: 'notify',
+					resource: `dataContext[${tFeatureDatasetName}]`,
+					values: {
+						request: 'setAside',
+						caseIDs: tWeightIDsToSetaside
+					}
+				})
+				// Now the results
+				const tDatasetName = iResult.targetDatasetName
+				if( tDatasetName) {
+					const tResultsRequestResult: any = await codapInterface.sendRequest({
+							action: 'get',
+							resource: `dataContext[${tDatasetName}].collection[${'results'}].caseFormulaSearch[true]`
+						}),
+						tResultNameIDPairs: { modelName: string, id: number }[] = tResultsRequestResult.success ?
+							tResultsRequestResult.values.map((iValue: { id: number, values: { 'model name': string } }) => {
+								return {modelName: iValue.values['model name'], id: iValue.id}
+							}) : []
+					const tInactiveResultPairs = tResultNameIDPairs.filter(iPair => iPair.modelName === iResult.name),
+						tInactiveResultIDs = tInactiveResultPairs.map(iPair => iPair.id)
+					tResultIDsToSetaside = tResultIDsToSetaside.concat(tInactiveResultIDs)
+					tMessages.push({
+						action: 'notify',
+						resource: `dataContext[${tDatasetName}]`,
+						values: {
+							request: 'setAside',
+							caseIDs: tResultIDsToSetaside
+						}
+					})
+				}
+			}
+		}
+
+		// Do the setting aside all at once
+		await codapInterface.sendRequest(tMessages)
+	}
+
+	setPanel(iPanelIndex: number) {
+		this.uiStore.tabPanelSelectedIndex = iPanelIndex
+		this.targetStore.updateFromCODAP()
+	}
+
+	/**
+	 * The end result will be that
+	 * 		* target cases featureIDs will be updated
+	 * 		* feature cases usages will be updated
+	 * 		* The target store's features will get updated IDs for both cases and items
+	 * 	 	* The featureStore's tokenMap's tokens get updated array of case IDs and featureIDs
+	 */
+	async recreateUsagesAndFeatureIDs(iIgnoreStopwords:boolean) {
+
+		function targetTextHasUnigram(iText:string, iUnigram:string) {
+			return wordTokenizer(iText, iIgnoreStopwords, true).indexOf(iUnigram) >= 0
+		}
+
+		const tTargetDatasetName = this.targetStore.targetDatasetInfo.name,
+			tTargetCollectionName = this.targetStore.targetCollectionName,
+			tTargetAttributeName = this.targetStore.targetAttributeName,
+			tTargetCases = await getCaseValues(tTargetDatasetName, tTargetCollectionName),
+			tFeatureDatasetName = this.featureStore.featureDatasetInfo.datasetName,
+			tFeatureCollectionName = this.featureStore.featureDatasetInfo.collectionName,
+			tTokenMap = this.featureStore.tokenMap,
+			tFeatureCases = await getCaseValues(tFeatureDatasetName, tFeatureCollectionName),
+			tUsageResults:{ [index:number]:number[]} = {}, // Contains IDs of target texts that contain a given feature
+			tTextResults: {[index:number]:number[]} = {},	// Contains IDs of features found in a given text
+			tFeatureItemRequests:{action:'get', resource:string}[] = []
+		tFeatureCases.forEach(iFeatureCase=>{
+			tFeatureItemRequests.push({action:'get', resource:`dataContext[${tFeatureDatasetName}].itemByCaseID[${iFeatureCase.id}]`})
+			const tFeatureName = iFeatureCase.values.name,
+				tFeatureType = iFeatureCase.values.type
+
+			tTargetCases.forEach(iTargetCase=>{
+				const tTargetHasFeature =
+						['constructed', 'column'].includes(tFeatureType) ? iTargetCase.values[tFeatureName] :
+							tFeatureType === 'unigram' ? targetTextHasUnigram( iTargetCase.values[tTargetAttributeName], tFeatureName) :
+								false
+				if( tTargetHasFeature) {
+					if( !tUsageResults[iFeatureCase.id])
+						tUsageResults[iFeatureCase.id] = []
+					tUsageResults[iFeatureCase.id].push( iTargetCase.id)
+					if( !tTextResults[iTargetCase.id])
+						tTextResults[iTargetCase.id] = []
+					tTextResults[iTargetCase.id].push( iFeatureCase.id)
+				}
+			})
+			// We need to store the featureCaseID in the token map while we've got it
+			if( tTokenMap[tFeatureName]) {
+				tTokenMap[tFeatureName].featureCaseID = iFeatureCase.id
+			}
+		})
+		// Now we can update the target and feature cases
+		const tMsgs:Message[] = [
+			{
+				action: 'update',
+				resource: `dataContext[${tTargetDatasetName}].collection[${tTargetCollectionName}].case`,
+				values:[]
+			},
+			{
+				action: 'update',
+				resource: `dataContext[${tFeatureDatasetName}].collection[${tFeatureCollectionName}].case`,
+				values:[]
+			}
+		]
+		for (let tTextResultsKey in tTextResults) {
+			tMsgs[0].values.push( {
+				id: tTextResultsKey,
+				values: { featureIDs: tTextResults[tTextResultsKey]}
+			})
+		}
+		for (let tUsageResultsKey in tUsageResults) {
+			tMsgs[1].values.push( {
+				id: tUsageResultsKey,
+				values: {usages: tUsageResults[tUsageResultsKey]}
+			})
+		}
+		tMsgs[0].values.forEach(iValue=>{
+				iValue.values.featureIDs = JSON.stringify(iValue.values.featureIDs)
+			})
+		tMsgs[1].values.forEach(iValue=>{
+				iValue.values.usages = JSON.stringify(iValue.values.usages)
+			})
+		await codapInterface.sendRequest(tMsgs)
+
+		// Now we update the case and item ids of the stored features
+		const tItemResults:any = await codapInterface.sendRequest(tFeatureItemRequests)
+		tFeatureCases.forEach((iFeature, iIndex)=>{
+			const tStoredFeature = this.featureStore.features.find(iStoredFeature=>{
+				return iStoredFeature.name === iFeature.values.name
+			})
+			if( tStoredFeature) {
+				tStoredFeature.featureItemID = tItemResults[iIndex].values.id
+				tStoredFeature.caseID = String(iFeature.id)
+			}
+		})
+
+		// Finally, we update featureStore.tokenMap. Each token has caseIDs corresponding to usages and a featureID
+		//	that is the ID of the feature in the features collection.
+		for (let tTokenMapKey in tTokenMap) {
+			const tToken = tTokenMap[tTokenMapKey],
+				tStoredFeature = this.featureStore.features.find(iStoredFeature=>{
+					return iStoredFeature.name === tTokenMapKey
+				})
+			if(tToken && tStoredFeature) {
+				tToken.featureCaseID = Number(tStoredFeature.caseID)
+				tToken.caseIDs = tUsageResults[Number(tStoredFeature.caseID)]
+			}
+		}
+	}
+
+}
+
+interface Message {
+	action:string,
+	resource:string
+	values:any[]
+}
+
diff --git a/src/stores/feature_store.ts b/src/stores/feature_store.ts
new file mode 100644
index 0000000..002462e
--- /dev/null
+++ b/src/stores/feature_store.ts
@@ -0,0 +1,296 @@
+/**
+ * These store objects are meant to keep track of all the state need by classes and components that needs to
+ * be accessed in more than one file or needs to be saved and restored.
+ */
+
+import {makeAutoObservable, toJS} from 'mobx'
+import {
+	Feature, kKindOfThingOptionText, namingAbbreviations,
+	NgramDetails,
+	SearchDetails, starterFeature, TokenMap, WordListSpec
+} from "./store_types_and_constants";
+import codapInterface from "../lib/CodapInterface";
+import {entityInfo} from "../lib/codap-helper";
+
+export class FeatureStore {
+	features: Feature[] = []
+	featureUnderConstruction: Feature = Object.assign({}, starterFeature)
+	featureDatasetInfo = {
+		datasetName: 'Features',
+		datasetTitle: 'Features',
+		collectionName: 'features',
+		weightsCollectionName: 'weights',
+		datasetID: -1
+	}
+	wordListSpecs: WordListSpec[] = []	// no save/restore
+	targetColumnFeatureNames: string[] = []
+	tokenMap: TokenMap = {}
+	featureWeightCaseIDs: { [index: string]: number } = {}
+	getTargetDatasetCallback:()=>entityInfo
+
+	constructor(iGetTargetDatasetCallback:()=>entityInfo) {
+		makeAutoObservable(this, {tokenMap: false, featureWeightCaseIDs: false,
+			getTargetDatasetCallback: false}, {autoBind: true})
+		this.getTargetDatasetCallback = iGetTargetDatasetCallback
+	}
+
+	asJSON() {
+		return {
+			featureDatasetID: toJS(this.featureDatasetInfo.datasetID),
+			features: toJS(this.features),
+			featureUnderConstruction: toJS(this.featureUnderConstruction),
+			tokenMap: toJS(this.tokenMap),
+			targetColumnFeatureNames: toJS(this.targetColumnFeatureNames)
+		}
+	}
+
+	fromJSON(json: any) {
+		if (json) {
+			this.featureDatasetInfo.datasetID = json.featureDatasetID || -1
+			this.features = json.features || []
+			this.featureUnderConstruction = json.featureUnderConstruction || starterFeature
+			this.tokenMap = json.tokenMap || {}
+			this.targetColumnFeatureNames = json.targetColumnFeatureNames || []
+		}
+	}
+
+	constructionIsDone() {
+		const tFeature = this.featureUnderConstruction,
+			tDetails = this.featureUnderConstruction.info.details as SearchDetails,
+			tKindOK = tFeature.info.kind !== '',
+			tDoneNgram = tKindOK && tFeature.info.kind === 'ngram',
+			tDoneSearch = tKindOK && tFeature.info.kind === 'search' &&
+				[tDetails.where, tDetails.what].every(iString => iString !== '') &&
+				(tDetails.what !== kKindOfThingOptionText || tDetails.freeFormText !== ''),
+			tDoneColumn = tKindOK && tFeature.info.kind === 'column'
+		return tDoneNgram || tDoneSearch || tDoneColumn
+	}
+
+	constructNameFor( iFeature: Feature) {
+		if (iFeature.info.kind === 'search') {
+			const tDetails = iFeature.info.details as SearchDetails,
+				tFirstPart = namingAbbreviations[tDetails.where],
+				tMatch = tDetails.freeFormText.match( /\w+/),
+				tSecondPart = tDetails.freeFormText !== '' ? `"${tMatch ? tMatch[0] : ''}"` :
+					tDetails.punctuation !== '' ? tDetails.punctuation :
+					tDetails.wordList && tDetails.wordList.datasetName !== '' ? tDetails.wordList.datasetName :
+					tDetails.what === 'any number' ? 'anyNumber' : ''
+			return `${tFirstPart}: ${tSecondPart}`
+		} else if (iFeature.info.kind === 'ngram') {
+			return `single words with frequency ≥ ${iFeature.info.frequencyThreshold}${iFeature.info.ignoreStopWords ? '; ignoring stopwords': ''}`
+		} else if( iFeature.info.kind === 'column')
+			return iFeature.name	// already has column name stashed here
+		else
+			return ''
+
+	}
+
+	getDescriptionFor(iFeature: Feature) {
+		if (iFeature.info.kind === 'search') {
+			const tDetails = iFeature.info.details as SearchDetails,
+				tFirstPart = `${tDetails.where} ${tDetails.what}`,
+				tSecondPart = tDetails.freeFormText !== '' ? `"${tDetails.freeFormText}"` : '',
+				tThirdPart = tDetails.wordList && tDetails.wordList.datasetName !== '' ?
+					` of ${tDetails.wordList.datasetName}` : '';
+			return `${tFirstPart} ${tSecondPart}${tThirdPart}`
+		} else if (iFeature.info.kind === 'ngram') {
+			return `${(iFeature.info.details as NgramDetails).n}gram with frequency threshold of ${iFeature.info.frequencyThreshold},
+			${iFeature.info.ignoreStopWords ? '' : ' not'} ignoring stop words`
+		} else
+			return ''
+	}
+
+	getChosenFeatureNames() {
+		return this.getChosenFeatures().map(iFeature => iFeature.name)
+	}
+
+	getChosenFeatures() {
+		return this.features.filter(iFeature => iFeature.chosen)
+	}
+
+	getFormulaFor(iFeatureName: string) {
+		const tFoundObject = this.features.find(iFeature => {
+			return iFeature.name === iFeatureName && iFeature.formula !== ''
+		})
+		return tFoundObject ? tFoundObject.formula : ''
+	}
+
+	getFeatureDatasetID() {
+		return this.featureDatasetInfo.datasetID
+	}
+
+	guaranteeUniqueFeatureName(iCandidate: string) {
+		const this_ = this
+
+		function isNotUnique(iName: string) {
+			return Boolean(this_.features.find(iFeature => iFeature.name === iName))
+		}
+
+		let counter = 1,
+			tTest = iCandidate
+		while (isNotUnique(tTest)) {
+			tTest = `${iCandidate}_${counter}`
+			counter++
+		}
+		return tTest
+	}
+
+	getConstructedFeatureNames() {
+		return this.features.filter(iFeature => iFeature.info.kind !== 'ngram').map(iFeature => iFeature.name)
+	}
+
+	getShouldIgnoreStopwords() {
+		const tNtigramFeature = this.features.find(iFeature => iFeature.info.kind === 'ngram')
+		return tNtigramFeature ? tNtigramFeature.info.ignoreStopWords : true
+	}
+
+	hasNgram() {
+		return Boolean(this.features.find(iFeature => iFeature.info.kind === 'ngram'))
+	}
+
+	addFeatureUnderConstruction() {
+		const tFeature = this.featureUnderConstruction
+		let tType
+		switch (tFeature.info.kind) {
+			case 'ngram':
+				tType = 'unigram'
+				break
+			case 'column':
+				tType = 'column'
+				break;
+			default:
+				tType = 'constructed'
+		}
+		tFeature.name = this.constructNameFor(tFeature)
+		tFeature.inProgress = false
+		tFeature.chosen = true
+		tFeature.type = tType
+		tFeature.description = this.getDescriptionFor(tFeature)
+		this.features.push(tFeature)
+		this.featureUnderConstruction = Object.assign({}, starterFeature)
+	}
+
+	tokenMapAlreadyHasUnigrams() {
+		return this.tokenMap && Object.values(this.tokenMap).some(iToken => iToken.type === 'unigram')
+	}
+
+	deleteUnigramTokens() {
+		if( this.tokenMap) {
+			for(const [key, token] of Object.entries(this.tokenMap)) {
+				if(token.type === 'unigram')
+					delete this.tokenMap[key]
+			}
+		}
+	}
+
+	async deleteFeature(iFeature: Feature) {
+		const tFoundIndex = this.features.indexOf(iFeature)
+		if (tFoundIndex >= 0) {
+			this.features.splice(tFoundIndex, 1)
+		}
+		if( iFeature.type !== 'unigram') {
+			const tTargetDatasetInfo = this.getTargetDatasetCallback()
+			await codapInterface.sendRequest({
+				action: 'delete',
+				resource: `dataContext[${this.featureDatasetInfo.datasetID}].itemByID[${iFeature.featureItemID}]`
+			})
+			const tCollectionListResult:any = await codapInterface.sendRequest({
+				action: 'get',
+				resource: `dataContext[${tTargetDatasetInfo.id}].collectionList`
+			})
+			if( tCollectionListResult.success) {
+				const tCollectionID = tCollectionListResult.values[0].id
+				await codapInterface.sendRequest({
+					action: 'delete',
+					resource: `dataContext[${tTargetDatasetInfo.id}].collection[${tCollectionID}].attribute[${iFeature.attrID}]`
+				})
+			}
+		}
+		if (iFeature.type === 'unigram') {
+			this.deleteUnigramTokens()
+			// Delete all the items in the Features dataset that have type equal to 'unigram'
+			await codapInterface.sendRequest({
+				action: 'delete',
+				resource: `dataContext[${this.featureDatasetInfo.datasetName}].itemSearch[type==unigram]`
+			})
+		}
+	}
+
+	async toggleChosenFor(iFeature: Feature) {
+		const this_ = this
+
+		async function syncUnigramsInFeaturesDataset(iChosen: boolean) {
+			if(!iChosen)
+				this_.deleteUnigramTokens()
+			// For every case in Features dataset set the 'chosen' attribute to given value
+			const tCasesRequestResult: any = await codapInterface.sendRequest({
+				action: 'get',
+				resource: `dataContext[${this_.featureDatasetInfo.datasetID}].collection[${this_.featureDatasetInfo.collectionName}].caseFormulaSearch[type='unigram']`
+			})
+			if (tCasesRequestResult.success) {
+				const tUpdateRequests: { id: number, values: { chosen: boolean } }[] = tCasesRequestResult.values.map(
+					(iValue: { id: number }) => {
+						return {id: Number(iValue.id), values: {chosen: iChosen}}
+					}
+				)
+				await codapInterface.sendRequest({
+					action: 'update',
+					resource: `dataContext[${this_.featureDatasetInfo.datasetID}].collection[${this_.featureDatasetInfo.collectionName}].case`,
+					values: tUpdateRequests
+				})
+			}
+		}
+
+		iFeature.chosen = !iFeature.chosen
+		if (iFeature.type === 'unigram') {
+			await syncUnigramsInFeaturesDataset(iFeature.chosen)
+
+		} else {
+			await codapInterface.sendRequest({
+				action: 'update',
+				resource: `dataContext[${this.featureDatasetInfo.datasetID}].collection[${this.featureDatasetInfo.collectionName}].caseByID[${iFeature.caseID}]`,
+				values: {
+					values: {
+						chosen: iFeature.chosen
+					}
+				}
+			})
+		}
+	}
+
+	async updateWordListSpecs() {
+		this.wordListSpecs = []
+		const tContextListResult: any = await codapInterface.sendRequest({
+			"action": "get",
+			"resource": "dataContextList"
+		}).catch((reason) => {
+			console.log('unable to get datacontext list because ' + reason);
+		})
+		if (tContextListResult.success) {
+			tContextListResult.values.forEach(async (aValue: any) => {
+				let tCollectionsResult: any = await codapInterface.sendRequest({
+					action: 'get',
+					resource: `dataContext[${aValue.id}].collectionList`
+				}).catch((reason) => {
+					console.log('unable to get collection list because ' + reason);
+				});
+				if (tCollectionsResult.values.length === 1) {
+					let tAttributesResult: any = await codapInterface.sendRequest({
+						action: 'get',
+						resource: `dataContext[${aValue.id}].collection[${tCollectionsResult.values[0].id}].attributeList`
+					}).catch((reason) => {
+						console.log('unable to get attribute list because ' + reason);
+					});
+					if (tAttributesResult.values.length === 1) {
+						this.wordListSpecs.push({
+							datasetName: aValue.title,
+							firstAttributeName: tAttributesResult.values[0].name
+						});
+					}
+				}
+			})
+		}
+	}
+
+
+}
diff --git a/src/stores/store_types_and_constants.ts b/src/stores/store_types_and_constants.ts
new file mode 100644
index 0000000..f4660d3
--- /dev/null
+++ b/src/stores/store_types_and_constants.ts
@@ -0,0 +1,252 @@
+import {LogisticRegression} from "../lib/jsregression";
+import {makeAutoObservable, toJS} from "mobx";
+
+/**
+ * These types and constants are used primarily by the various store classes
+ */
+
+export const kStoryQPluginName = "StoryQ"
+
+export const kEmptyEntityInfo = {name: '', title: '', id: 0},
+	kPosNegConstants = {
+		positive: {
+			storeKey: 'numberInPositive',
+			attrKey: 'frequency in '
+		},
+		negative: {
+			storeKey: 'numberInNegative',
+			attrKey: 'frequency in '
+		}
+	}
+
+export let featureDescriptors = {
+	featureKinds: [
+		{
+			key: "Extract one feature at a time",
+			items: [
+				{name: "contain", value: `{"kind": "search", "details": {"where": "contain"}}`},
+				{name: "not contain", value: `{"kind": "search", "details": {"where": "not contain"}}`},
+				{name: "start with", value: `{"kind": "search", "details": {"where": "start with"}}`},
+				{name: "end with", value: `{"kind": "search", "details": {"where": "end with"}}`}
+			]
+		},
+		{
+		key: "Extract features of the same kind",
+		items: [
+			{name: "single words", disabled: false, value: `{"kind": "ngram", "details": {"n":"uni"}}`}/*,
+				{name: "bigrams", value: `{"kind": "ngram", "details": {"n":"bi"}}`}*/
+		]
+	},
+		{
+			key: "Choose other columns as features",
+			items: []
+		}],
+	containsOptions: ['contain', 'not contain', 'start with', 'end with'],
+	kindOfThingContainedOptions: ['text', 'punctuation', 'any number', 'any item from a list'/*, 'part of speech'*/],
+	caseOptions: ['sensitive', 'insensitive']
+}
+
+export const kKindOfThingOptionList = featureDescriptors.kindOfThingContainedOptions[3]
+export const kKindOfThingOptionText = featureDescriptors.kindOfThingContainedOptions[0]
+export const kKindOfThingOptionPunctuation = featureDescriptors.kindOfThingContainedOptions[1]
+
+export interface SearchDetails {
+	where: 'startWith' | 'contain' | 'notContain' | 'endWith' | '',
+	what: 'any number' | 'any item from a list' | 'text' | 'punctuation' | 'part of speech' | '',
+	caseOption: 'any' | 'upper' | 'lower' | '',
+	freeFormText: string,
+	punctuation: string,
+	wordList: WordListSpec
+}
+
+export const namingAbbreviations:{[index:string]:string} = {
+	'start with': 'startWith',
+	contain: 'contain',
+	'not contain': 'notContain',
+	'end with': 'endWith'
+}
+
+export interface CountDetails {
+	what: 'letters' | 'words' | 'sentences' | ''
+}
+
+export interface NgramDetails {
+	n: 'uni' | 'bi' | ''
+}
+
+export interface ColumnDetails {
+	columnName:string
+}
+
+export interface FeatureDetails {
+	kind: 'search' | 'ngram' | 'count' | 'column' | '',
+	details: SearchDetails | CountDetails | NgramDetails | ColumnDetails | null,
+	ignoreStopWords?: boolean,
+	frequencyThreshold?: number
+}
+
+export interface Feature {
+	[key: string]: any
+
+	inProgress: boolean
+	name: string,
+	chosen: boolean,
+	infoChoice: string,
+	info: FeatureDetails,
+	description: string
+	type: string
+	formula: string
+	numberInPositive: number
+	numberInNegative: number
+	usages: number[]
+	caseID: string		// ID of the feature as a case in the feature table
+	attrID: string		// ID of the attribute in the target dataset corresponding to this feature
+	featureItemID: string	// ID of the item in the feature table corresponding to this feature
+	weight: number | ''
+}
+
+export interface WordListSpec {
+	datasetName: string,
+	firstAttributeName: string
+}
+
+export const starterFeature: Feature = {
+	inProgress: false, name: '', chosen: false,
+	infoChoice: '',
+	info: {
+		kind: '',
+		details: {
+			where: '', what: '', caseOption: '', freeFormText: '', punctuation: '',
+			wordList: {datasetName: '', firstAttributeName: ''}
+		}
+	},
+	description: '',
+	type: '',
+	formula: '',
+	numberInNegative: -1,
+	numberInPositive: -1,
+	usages: [],
+	caseID: '',
+	attrID: '',
+	featureItemID: '',
+	weight: 0
+}
+
+export interface TrainingResult {
+	name: string,
+	targetDatasetName: string
+	isActive: boolean
+	threshold: number
+	constantWeightTerm: number
+	ignoreStopWords: boolean
+	settings: {
+		iterations: number
+		locked: boolean
+		thresholdAtPoint5: boolean
+	}
+	accuracy: number
+	kappa: number
+	featureNames: string[],
+	hasNgram: boolean,
+	storedModel: StoredModel
+}
+
+export interface TestingResult {
+	modelName: string,
+	targetDatasetName: string,
+	targetDatasetTitle: string,
+	numPositive: number,
+	numNegative: number,
+	accuracy: number,
+	kappa: number,
+	testBeingConstructed: boolean
+}
+
+export interface Token {
+	token: string,
+	type: 'constructed feature' | 'unigram',
+	count: number,	// the number of target texts where this token is true (column feature) or found (unigram)
+	index: number,
+	numPositive: number,
+	numNegative: number,
+	caseIDs: number[],
+	weight: number | null,
+	featureCaseID: number | null
+}
+
+export interface TokenMap {
+	[key: string]: Token}
+
+export class Model {
+	[index: string]: any;
+
+	name = ''
+	iteration = 0
+	iterations = 20
+	lockInterceptAtZero = true
+	ignoreStopWords = true
+	usePoint5AsProbThreshold = true
+	frequencyThreshold = 4
+	beingConstructed = false
+	trainingInProgress = false
+	trainingInStepMode = false
+	trainingIsComplete = false
+	logisticModel: LogisticRegression = new LogisticRegression({
+		alpha: 1,
+		iterations: 20,
+		lambda: 0.0,
+		accuracy: 0,
+		kappa: 0,
+		lockIntercept: true,
+		threshold: 0.5,
+		trace: false,
+		progressCallback: null,
+		stepModeCallback: null
+	})
+
+
+	constructor() {
+		makeAutoObservable(this, {logisticModel: false}, {autoBind: true})
+	}
+
+	reset() {
+		this.name = ''
+		this.iteration = 0
+		this.iterations = 20
+		this.lockInterceptAtZero = true
+		this.usePoint5AsProbThreshold = true
+		this.frequencyThreshold = 4
+		this.beingConstructed = false
+		this.trainingInProgress = false
+		this.trainingInStepMode = false
+		this.trainingIsComplete = false
+		this.logisticModel && this.logisticModel.reset()
+	}
+
+	asJSON() {
+		const tCopy = Object.assign({}, toJS(this))
+		delete tCopy.logisticModel
+		return tCopy
+	}
+
+	fromJSON(json: any) {
+		if (json) {
+			for (const [key, value] of Object.entries(json)) {
+				this[key] = value
+			}
+		}
+	}
+
+}
+
+export interface StoredModel {
+	storedTokens: { featureCaseID: number, name: string, formula: string, weight: number }[],
+	positiveClassName: string,
+	negativeClassName: string
+}
+
+export interface WordListSpec {
+	datasetName: string,
+	firstAttributeName: string
+}
+
diff --git a/src/stores/target_store.ts b/src/stores/target_store.ts
new file mode 100644
index 0000000..024eeb9
--- /dev/null
+++ b/src/stores/target_store.ts
@@ -0,0 +1,348 @@
+/**
+ * These store objects are meant to keep track of all the state need by classes and components that needs to
+ * be accessed in more than one file or needs to be saved and restored.
+ */
+
+import {makeAutoObservable, runInAction, toJS} from 'mobx'
+import {
+	Case,
+	entityInfo,
+	getAttributeNames,
+	getCaseValues,
+	getCollectionNames,
+	getDatasetInfoWithFilter,
+	guaranteeAttribute,
+	scrollCaseTableToRight
+} from "../lib/codap-helper";
+import codapInterface from "../lib/CodapInterface";
+import {SQ} from "../lists/lists";
+import React from "react";
+import {
+	Feature, featureDescriptors, kEmptyEntityInfo, SearchDetails
+} from "./store_types_and_constants";
+
+export class TargetStore {
+	[index: string]: any
+
+	targetPanelMode:'welcome' | 'create' | 'chosen' = 'welcome'
+	targetDatasetInfo: entityInfo = kEmptyEntityInfo
+	datasetInfoArray: entityInfo[] = []
+	targetCollectionName: string = ''
+	targetAttributeNames: string[] = []
+	targetAttributeName: string = ''
+	targetPredictedLabelAttributeName = ''
+	targetResultsCollectionName = 'results'
+	targetFeatureIDsAttributeName = 'featureIDs'
+	targetCases: Case[] = []
+	targetClassAttributeName: string = ''
+	targetClassAttributeValues: string[] = []
+	targetClassNames: { [index: string]: string, left: string, right: string } = {left: '', right: ''}
+	targetColumnFeatureNames:string[] = []
+	targetLeftColumnKey: 'left' | 'right' = 'left'
+	targetChosenClassColumnKey: '' | 'left' | 'right' = ''
+	textRefs: { ownerCaseID: number, ref: React.RefObject<any> }[] = []
+	getFeatureNamesFunc:()=>string[]
+
+	constructor(iGetFeatureNamesFunc:()=>string[]) {
+		makeAutoObservable(this,
+			{textRefs: false, targetLeftColumnKey: false,
+					getFeatureNamesFunc: false},
+			{autoBind: true})
+		this.getFeatureNamesFunc = iGetFeatureNamesFunc
+	}
+
+	asJSON() {
+		return {
+			targetPanelMode: toJS(this.targetPanelMode),
+			targetDatasetInfo: toJS(this.targetDatasetInfo),
+			targetAttributeName: toJS(this.targetAttributeName),
+			targetClassAttributeName: toJS(this.targetClassAttributeName),
+			targetClassAttributeValues: toJS(this.targetClassAttributeValues),
+			targetClassNames: toJS(this.targetClassNames),
+			targetPredictedLabelAttributeName: toJS(this.targetPredictedLabelAttributeName),
+			targetColumnFeatureNames: toJS(this.targetColumnFeatureNames),
+			targetChosenClassColumnKey: toJS(this.targetChosenClassColumnKey)
+		}
+	}
+
+	fromJSON(json: any) {
+		this.targetPanelMode = json.targetPanelMode ||
+			(json.targetDatasetInfo && json.targetDatasetInfo.name !== '' ? 'chosen' : 'welcome')
+		if (Array.isArray(json.targetClassNames))
+			json.targetClassNames = null
+		this.targetDatasetInfo = json.targetDatasetInfo || kEmptyEntityInfo
+		this.targetAttributeName = json.targetAttributeName || ''
+		this.targetClassAttributeValues = json.targetClassAttributeValues || []
+		this.targetClassAttributeName = json.targetClassAttributeName || ''
+		if (json.targetClassNames)
+			this.targetClassNames = json.targetClassNames
+		this.targetPredictedLabelAttributeName = json.targetPredictedLabelAttributeName || ''
+		this.targetColumnFeatureNames = json.targetColumnFeatureNames || []
+		this.targetChosenClassColumnKey = json.targetChosenClassColumnKey || ''
+	}
+
+	getClassName(iClass: 'positive' | 'negative') {
+		const tChosenClassKey = iClass === 'positive' ? this.targetChosenClassColumnKey : (
+			this.targetChosenClassColumnKey === 'left' ? 'right' : 'left'
+		)
+		return this.targetClassNames[tChosenClassKey]
+	}
+
+	async updateFromCODAP(iPropName?: string | null, iValue?: any) {
+		const this_ = this
+
+		/**
+		 * We go through the target cases to find the first two unique values of the targetClassAttributeName
+		 */
+		function chooseClassNames() {
+			const tTargetClassAttributeName = iPropName === 'targetClassAttributeName' ? iValue : this_.targetClassAttributeName
+			if (tTargetClassAttributeName !== '' && tCaseValues.length > 0) {
+				tPositiveClassName = tCaseValues[0].values[tTargetClassAttributeName]
+				const tNegativeClassCase = tCaseValues.find(iCase => iCase.values[tTargetClassAttributeName] !== tPositiveClassName)
+				tNegativeClassName = tNegativeClassCase ? tNegativeClassCase.values[tTargetClassAttributeName] : ''
+				tClassNames = {left: tPositiveClassName, right: tNegativeClassName}
+
+				// Also make a set of the unique values of the class attribute
+				const tClassAttributeValuesSet:Set<string> = new Set()
+				tCaseValues.forEach(iCase=>{
+					tClassAttributeValuesSet.add(iCase.values[tTargetClassAttributeName])
+				})
+				tClassAttributeValues = Array.from(tClassAttributeValuesSet)
+			}
+		}
+
+		function gatherColumnFeatures() {
+			if( tAttrNames.length > 0 && this_.targetAttributeName !== '' &&
+					this_.targetClassAttributeName !== '') {
+				tColumnFeatureNames = tAttrNames.filter(iName=>{
+					return iName !== this_.targetAttributeName && iName !== this_.targetClassAttributeName &&
+						this_.getFeatureNamesFunc().indexOf(iName) < 0
+				})
+			}
+		}
+
+		const tDatasetNames = await getDatasetInfoWithFilter((anInfo:entityInfo) => {
+			return anInfo && anInfo.numAttributes ? anInfo.numAttributes > 1 : false
+		});
+		let tCollectionNames: string[] = []
+		let tCollectionName = ''
+		let tAttrNames: string[] = []
+		let tCaseValues: Case[] = []
+		let tPositiveClassName = ''
+		let tNegativeClassName = ''
+		let tClassNames = {left: '', right: ''}
+		let tClassAttributeValues:string[]
+		let tColumnFeatureNames:string[] = []
+		const tTargetDatasetName = this.targetDatasetInfo.name
+		if (tTargetDatasetName !== '') {
+			tCollectionNames = await getCollectionNames(tTargetDatasetName)
+			tCollectionName = tCollectionNames.length > 0 ? tCollectionNames[0] : ''
+			tAttrNames = tCollectionName !== '' ? await getAttributeNames(tTargetDatasetName, tCollectionName) : []
+			tAttrNames = tAttrNames.filter(iName=>iName!==this.targetFeatureIDsAttributeName)
+			tCaseValues = this.targetAttributeName !== '' ? await getCaseValues(tTargetDatasetName,
+				tCollectionName) : []
+			chooseClassNames()
+			for (let i = 0; i < Math.min(40, tCaseValues.length); i++) {
+				this.textRefs[i] = {ownerCaseID: tCaseValues[i].id, ref: React.createRef()}
+			}
+		}
+		gatherColumnFeatures()
+
+		runInAction(() => {
+			this.datasetInfoArray = tDatasetNames
+			this.targetCollectionName = tCollectionName
+			this.targetAttributeNames = tAttrNames
+			this.targetCases = tCaseValues
+			this.targetClassNames = tClassNames
+			if (iPropName)
+				this[iPropName] = iValue
+			this.targetClassAttributeValues = tClassAttributeValues
+			this.targetPredictedLabelAttributeName = 'predicted ' + this.targetClassAttributeName
+			this.targetColumnFeatureNames = tColumnFeatureNames
+		})
+		if (tTargetDatasetName !== '' && this.targetCollectionName !== '') {
+			await guaranteeAttribute({name: this.targetFeatureIDsAttributeName, hidden: true},
+				tTargetDatasetName, this.targetCollectionName)
+		}
+	}
+
+	resetTargetDataForNewTarget() {
+		this.targetCollectionName = ''
+		this.targetAttributeNames = []
+		this.targetAttributeName = ''
+		this.targetPredictedLabelAttributeName = ''
+		this.targetCases = []
+		this.targetClassAttributeName = ''
+		this.targetClassAttributeValues = []
+		this.targetClassNames = {left: '', right: ''}
+		this.targetColumnFeatureNames = []
+		this.targetLeftColumnKey = 'left'
+		this.targetChosenClassColumnKey = ''
+
+	}
+
+	async updateTargetCases() {
+		const tTargetDatasetName = this.targetDatasetInfo.name,
+			tCollectionName = this.targetCollectionName,
+			tCaseValues = this.targetAttributeName !== '' ? await getCaseValues(tTargetDatasetName, tCollectionName) : []
+		runInAction(() => {
+			this.targetCases = tCaseValues
+		})
+		return tCaseValues
+	}
+
+	/**
+	 * 'search' features affect the target by adding an attribute. ngrams do not.
+	 * @param iNewFeature
+	 * @param iUpdate
+	 */
+	async addOrUpdateFeatureToTarget(iNewFeature: Feature, iUpdate ?: boolean) {
+		const this_ = this,
+			tTargetAttr = `\`${this_.targetAttributeName}\``
+		if (!this_.targetDatasetInfo || iNewFeature.info.kind === 'ngram' || iNewFeature.info.kind === 'column')
+			return;
+
+		function freeFormFormula() {
+			const option = (iNewFeature.info.details as SearchDetails).where;
+			const tBegins = option === featureDescriptors.containsOptions[2] ? '^' : '';
+			const tEnds = option === featureDescriptors.containsOptions[3] ? '$' : '';
+			const tParamString = `${tTargetAttr},"${tBegins}\\\\\\\\b${(iNewFeature.info.details as SearchDetails).freeFormText}\\\\\\\\b${tEnds}"`;
+			let tResult = '';
+			switch (option) {//['contain', 'not contain', 'start with', 'end with']
+				case featureDescriptors.containsOptions[0]:	// contain
+					tResult = `patternMatches(${tParamString})>0`
+					break;
+				case featureDescriptors.containsOptions[1]:	// not contain
+					tResult = `patternMatches(${tParamString})=0`
+					break;
+				case featureDescriptors.containsOptions[2]:	// start with
+					tResult = `patternMatches(${tParamString})>0`
+					break;
+				case featureDescriptors.containsOptions[3]:	// ends with
+					tResult = `patternMatches(${tParamString})>0`
+					break;
+			}
+			return tResult;
+		}
+
+		function anyNumberFormula() {
+			const kNumberPattern = `[0-9]+`;
+			let tExpression = '';
+			switch ((iNewFeature.info.details as SearchDetails).where) {//['contain', 'not contain', 'start with', 'end with']
+				case featureDescriptors.containsOptions[0]:	// contain
+					tExpression = `patternMatches(${tTargetAttr}, "${kNumberPattern}")>0`
+					break;
+				case featureDescriptors.containsOptions[1]:	// not contain
+					tExpression = `patternMatches(${tTargetAttr}, "${kNumberPattern}")=0`
+					break;
+				case featureDescriptors.containsOptions[2]:	// start with
+					tExpression = `patternMatches(${tTargetAttr}, "^${kNumberPattern}")>0`
+					break;
+				case featureDescriptors.containsOptions[3]:	// end with
+					tExpression = `patternMatches(${tTargetAttr}, "${kNumberPattern}$")>0`
+					break;
+			}
+			return tExpression;
+		}
+
+		function punctuationFormula() {
+			const tPunc = `\\\\\\\\${(iNewFeature.info.details as SearchDetails).punctuation}`
+			let tExpression = '';
+			switch ((iNewFeature.info.details as SearchDetails).where) {//['contain', 'not contain', 'start with', 'end with']
+				case featureDescriptors.containsOptions[0]:	// contain
+					tExpression = `patternMatches(${tTargetAttr}, "${tPunc}")>0`
+					break;
+				case featureDescriptors.containsOptions[1]:	// not contain
+					tExpression = `patternMatches(${tTargetAttr}, "${tPunc}")=0`
+					break;
+				case featureDescriptors.containsOptions[2]:	// start with
+					tExpression = `patternMatches(${tTargetAttr}, "^${tPunc}")>0`
+					break;
+				case featureDescriptors.containsOptions[3]:	// end with
+					tExpression = `patternMatches(${tTargetAttr}, "${tPunc}$")>0`
+					break;
+			}
+			return tExpression;
+		}
+
+		function anyListFormula() {
+			let tExpression;
+			const kListName = (iNewFeature.info.details as SearchDetails).wordList.datasetName,
+				kListAttributeName = (iNewFeature.info.details as SearchDetails).wordList.firstAttributeName,
+				kWords = SQ.lists[kListName],
+				tWhere = (iNewFeature.info.details as SearchDetails).where,
+				tStartsWithOption = featureDescriptors.containsOptions[0],
+				tEndsWithOption = featureDescriptors.containsOptions[3],
+				tCaret = tWhere === tStartsWithOption ? '^' : '',
+				tDollar = tWhere === tEndsWithOption ? '$' : ''
+			if (kWords) {
+				tExpression = kWords.reduce((iSoFar, iWord) => {
+					return iSoFar === '' ? `${tCaret}\\\\\\\\b${iWord}\\\\\\\\b${tDollar}` : iSoFar + `|${tCaret}\\\\\\\\b${iWord}\\\\\\\\b${tDollar}`;
+				}, '');
+				switch (tWhere) {//['contain', 'not contain', 'start with', 'end with']
+					case featureDescriptors.containsOptions[0]:	// contain
+						tExpression = `patternMatches(${tTargetAttr}, "${tExpression}")>0`;
+						break;
+					case featureDescriptors.containsOptions[1]:	// not contain
+						tExpression = `patternMatches(${tTargetAttr}, "${tExpression}")=0`;
+						break;
+					case featureDescriptors.containsOptions[2]:	// start with
+						tExpression = `patternMatches(${tTargetAttr}, "^${tExpression}")>0`;
+						break;
+					case featureDescriptors.containsOptions[3]:	// end with
+						tExpression = `patternMatches(${tTargetAttr}, "${tExpression}$")>0`;
+						break;
+				}
+			} else {
+				tExpression = `wordListMatches(${tTargetAttr},"${kListName}","${kListAttributeName}")>0`
+			}
+			return tExpression;
+		}
+
+		let tFormula = '';
+		switch ((iNewFeature.info.details as SearchDetails).what) {
+			case 'any number':
+				tFormula = anyNumberFormula()
+				break;
+			case 'any item from a list':
+				tFormula = anyListFormula()
+				break;
+			case 'text':
+				tFormula = freeFormFormula()
+				break;
+			case 'punctuation':
+				tFormula = punctuationFormula()
+				break;
+			case 'part of speech':
+			// tFormula = posFormula()
+		}
+		if (tFormula !== '')
+			iNewFeature.formula = tFormula
+		if (!iUpdate) {
+			const tAttributeResponse: any = await codapInterface.sendRequest({
+				action: 'create',
+				resource: `dataContext[${this_.targetDatasetInfo.name}].collection[${this_.targetCollectionName}].attribute`,
+				values: {
+					name: iNewFeature.name,
+					formula: tFormula
+				}
+			});
+			if (tAttributeResponse.success) {
+				iNewFeature.attrID = tAttributeResponse.values.attrs[0].id
+				await scrollCaseTableToRight(this_.targetDatasetInfo.name);
+			}
+		} else {
+			const tResource = `dataContext[${this_.targetDatasetInfo.name}].collection[${this_.targetCollectionName}].attribute[${iNewFeature.attrID}]`
+			await codapInterface.sendRequest({
+				action: 'update',
+				resource: tResource,
+				values: {
+					title: iNewFeature.name,
+					name: iNewFeature.name
+				}
+			})
+		}
+		// targetCases are now out of date
+	}
+}
+
diff --git a/src/stores/testing_store.ts b/src/stores/testing_store.ts
new file mode 100644
index 0000000..b261ab9
--- /dev/null
+++ b/src/stores/testing_store.ts
@@ -0,0 +1,86 @@
+/**
+ * These store objects are meant to keep track of all the state need by classes and components that needs to
+ * be accessed in more than one file or needs to be saved and restored.
+ */
+
+import {makeAutoObservable, runInAction, toJS} from 'mobx'
+import {
+	entityInfo,
+	getAttributeNames,
+	getCollectionNames,
+	getDatasetInfoWithFilter, guaranteeTableOrCardIsVisibleFor
+} from "../lib/codap-helper";
+import {
+	kEmptyEntityInfo, TestingResult
+} from "./store_types_and_constants";
+
+export class TestingStore {
+	[index: string]: any;
+	getFeatureSetIDCallback:any
+	chosenModelName: string = ''
+	testingDatasetInfo: entityInfo = kEmptyEntityInfo
+	testingDatasetInfoArray: entityInfo[] = []
+	testingCollectionName: string = ''
+	testingAttributeNames: string[] = []
+	testingAttributeName: string = ''
+	testingClassAttributeName: string = ''
+	currentTestingResults:TestingResult
+	testingResultsArray:TestingResult[] = []
+
+	constructor(iGetFeatureSetIDCallback:any) {
+		makeAutoObservable(this, {getFeatureSetIDCallback: false}, {autoBind: true})
+		this.getFeatureSetIDCallback = iGetFeatureSetIDCallback
+		this.currentTestingResults = this.emptyTestingResult()
+	}
+
+	emptyTestingResult():TestingResult {
+		return {
+			targetDatasetName: '', targetDatasetTitle: '', modelName: '', numPositive: 0, numNegative: 0,
+			accuracy: 0, kappa: 0, testBeingConstructed: false
+		}
+	}
+
+	prepareForConstruction() {
+		this.currentTestingResults = this.emptyTestingResult()
+		this.currentTestingResults.testBeingConstructed = true
+	}
+
+	asJSON() {
+		const tJSON = toJS(this)
+		delete tJSON.getFeatureSetIDCallback	// Remove so we don't crash
+		return tJSON
+	}
+
+	fromJSON(json: any) {
+		if (json) {
+			for (const [key, value] of Object.entries(json)) {
+				this[key] = value
+			}
+		}
+	}
+
+	async updateCodapInfoForTestingPanel() {
+		const tFeatureDatasetID = this.getFeatureSetIDCallback(),
+			tTestingDatasetName = this.testingDatasetInfo.name,
+			tDatasetEntityInfoArray = await getDatasetInfoWithFilter(
+			(anInfo) => {
+				return anInfo.id !== tFeatureDatasetID
+			})
+		let tCollectionNames: string[] = [],
+			tCollectionName: string = '',
+			tAttributeNames: string[] = []
+		if (tTestingDatasetName !== '') {
+			tCollectionNames = await getCollectionNames(tTestingDatasetName)
+			tCollectionName = tCollectionNames.length > 0 ? tCollectionNames[0] : 'cases'
+			tAttributeNames = tCollectionName !== '' ? await getAttributeNames(tTestingDatasetName, tCollectionName) : []
+		}
+		runInAction(() => {
+			this.testingDatasetInfoArray = tDatasetEntityInfoArray
+			this.testingCollectionName = tCollectionName
+			this.testingAttributeNames = tAttributeNames
+		})
+		guaranteeTableOrCardIsVisibleFor({name: tTestingDatasetName,
+			title: this.testingDatasetInfo.title, id: -1})
+	}
+
+}
diff --git a/src/stores/text_store.ts b/src/stores/text_store.ts
new file mode 100644
index 0000000..ae9eb81
--- /dev/null
+++ b/src/stores/text_store.ts
@@ -0,0 +1,112 @@
+/**
+ * These store objects are meant to keep track of all the state need by classes and components that needs to
+ * be accessed in more than one file or needs to be saved and restored.
+ */
+
+import {makeAutoObservable} from 'mobx'
+import codapInterface from "../lib/CodapInterface";
+import pluralize from "pluralize";
+
+export class TextStore {
+	textComponentTitle: string = ''
+	textComponentID: number = -1
+
+	constructor() {
+		makeAutoObservable(this, {}, {autoBind: true})
+	}
+
+	asJSON() {
+		return {
+			textComponentTitle: this.textComponentTitle,
+			textComponentID: this.textComponentID
+		}
+	}
+
+	fromJSON(json: any) {
+		if (json) {
+			this.textComponentTitle = json.textComponentTitle || ''
+			this.textComponentID = json.textComponentID || -1
+		}
+	}
+
+	/**
+	 * Only add a text component if one with the designated name does not already exist.
+	 */
+	async addTextComponent(iDatasetName:string, iAttributeName: string) {
+		let tFoundIt = false
+		this.textComponentTitle = `Selected  ${pluralize(iAttributeName)} in ${iDatasetName}`;
+		const tListResult: any = await codapInterface.sendRequest(
+			{
+				action: 'get',
+				resource: `componentList`
+			}
+		)
+			.catch(() => {
+				console.log('Error getting component list')
+			});
+
+		if (tListResult.success) {
+			const tFoundValue = tListResult.values.find((iValue: any) => {
+				return iValue.type === 'text' && iValue.id === this.textComponentID;
+			});
+			if (tFoundValue) {
+				this.textComponentID = tFoundValue.id;
+				tFoundIt = true
+			}
+		}
+		if (!tFoundIt) {
+			let tResult: any = await codapInterface.sendRequest({
+				action: 'create',
+				resource: 'component',
+				values: {
+					type: 'text',
+					name: this.textComponentTitle,
+					title: this.textComponentTitle,
+					dimensions: {
+						width: 500,
+						height: 150
+					},
+					position: 'top',
+					cannotClose: true
+				}
+			});
+			this.textComponentID = tResult.values.id
+		}
+	}
+
+	async clearText(iAttributeName: string) {
+		await codapInterface.sendRequest({
+			action: 'update',
+			resource: `component[${this.textComponentID}]`,
+			values: {
+				text: {
+					"object": "value",
+					"document": {
+						"children": [
+							{
+								"type": "paragraph",
+								"children": [
+									{
+										"text": `This is where selected ${pluralize(iAttributeName)} appear.`
+									}
+								]
+							}
+						],
+						"objTypes": {
+							"paragraph": "block"
+						}
+					}
+				}
+			}
+		});
+	}
+
+	async closeTextComponent() {
+		// this.textComponentTitle = 'Selected ' + pluralize(this.targetAttributeName);
+		await codapInterface.sendRequest({
+			action: 'delete',
+			resource: `component[${this.textComponentTitle}]`
+		});
+	}
+
+}
\ No newline at end of file
diff --git a/src/stores/training_store.ts b/src/stores/training_store.ts
new file mode 100644
index 0000000..e356616
--- /dev/null
+++ b/src/stores/training_store.ts
@@ -0,0 +1,54 @@
+/**
+ * These store objects are meant to keep track of all the state need by classes and components that needs to
+ * be accessed in more than one file or needs to be saved and restored.
+ */
+
+import {makeAutoObservable, runInAction, toJS} from 'mobx'
+import {Model, TrainingResult} from "./store_types_and_constants";
+
+export class TrainingStore {
+	model: Model
+	trainingResults: TrainingResult[] = []
+	resultCaseIDs: number[] = []
+
+	constructor() {
+		makeAutoObservable(this, {resultCaseIDs: false}, {autoBind: true})
+		this.model = new Model()
+	}
+
+	asJSON() {
+		return {
+			model: this.model.asJSON(),
+			trainingResults: toJS(this.trainingResults)
+		}
+	}
+
+	fromJSON(json: any) {
+		if (json) {
+			this.model.fromJSON(json.model)
+			this.trainingResults = json.trainingResults || []
+		}
+		this.checkForActiveModel()
+	}
+
+	inactivateAll() {
+		runInAction(()=> {
+			this.trainingResults.forEach(iResult => iResult.isActive = false)
+		})
+	}
+
+	getTrainingResultByName(iModelName:string) {
+		return this.trainingResults.find(iResult=>iResult.name === iModelName)
+	}
+
+	getFirstActiveModelName() {
+		const tActiveResult = this.trainingResults.find(iResult=>iResult.isActive)
+		return tActiveResult ? tActiveResult.name : ''
+	}
+
+	checkForActiveModel() {
+		if( this.getFirstActiveModelName() === '' && this.trainingResults.length > 0)
+			this.trainingResults[0].isActive = true;
+	}
+
+}
diff --git a/src/stores/ui_store.ts b/src/stores/ui_store.ts
new file mode 100644
index 0000000..8c225a5
--- /dev/null
+++ b/src/stores/ui_store.ts
@@ -0,0 +1,35 @@
+/**
+ * These store objects are available to components for the purpose of storing and restoring the state of the ui.
+ */
+
+import {makeAutoObservable, toJS} from 'mobx'
+import {ReactElement} from "react";
+
+export class UiStore {
+	[index: string]: any;
+	tabPanelSelectedIndex: number = 0
+	trainingPanelShowsEditor: boolean = false
+	currentInstruction:ReactElement | null = null
+
+	constructor() {
+		makeAutoObservable(this)
+	}
+
+	getSelectedPanelTitle() {
+		const tTitles = ['Target', 'Features', 'Training', 'Testing']
+		return tTitles[this.tabPanelSelectedIndex]
+	}
+
+	asJSON(): object {
+		return toJS(this)
+	}
+
+	fromJSON(json: any) {
+		if (json) {
+			for (const [key, value] of Object.entries(json)) {
+				this[key] = value
+			}
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/src/storyq.css b/src/storyq.css
index eeb7c56..9584753 100755
--- a/src/storyq.css
+++ b/src/storyq.css
@@ -1,141 +1,404 @@
+body {
+    overflow: hidden;
+}
+
 h1 {
-  font-size: medium;
-  margin-bottom: 0;
+    font-size: medium;
+    margin-bottom: 0;
 }
 
 h2 {
-  font-size: small;
-  margin-bottom: 0;
+    font-size: small;
+    margin-bottom: 0;
+}
+
+table, th, td {
+    border: thin solid teal;
+    border-collapse: collapse;
+    padding: 5px;
+}
+
+table {
+    margin-left: 10px;
 }
 
 .storyq {
-  text-align: left;
+    height: 100vh;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 0;
 }
 
-.title {
-  text-align: center;
-  font-size: larger;
+.sq-welcome {
+    padding: 5px;
 }
 
-.storyText {
-  height: 75vh;
-  width: 90vw;
+.sq-welcome h1 {
+    text-align: center;
+    font-weight: bold;
+}
+
+.sq-welcome p {
+    font-size: larger;
+}
+
+#tabPanel {
+    flex: 1 1 content;
+    overflow: hidden;
+/*     display: flex; */
+/*     flex-direction: column; */
+}
+
+.dx-tabpanel-tabs {
+	flex: 0 0 content;
 }
 
-.storyq div {
-  margin: 0;
+.dx-tab-panel-container {
+	flex-grow: 1;
+	flex-shrink: 1;
 }
 
-.storyq div .back-arrow{
-  margin-left: 10px;
+.title {
+    text-align: center;
+    font-size: larger;
+}
+
+.storyText {
+    height: 75vh;
+    width: 90vw;
 }
 
 .button-list {
-  padding: 5px;
+    padding: 5px;
 }
 
 p {
-  margin-block-start: 0;
-  margin-block-end: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
 }
 
 .back-arrow {
-  position: absolute;
-  top: 0;
-  margin-left: 10px;
-  color: teal;
-  cursor: pointer;
+    position: absolute;
+    top: 0;
+    margin-left: 10px;
+    color: teal;
+    cursor: pointer;
 }
 
 .back-arrow:hover {
-  font-size: large;
+    font-size: large;
 }
 
 .question-circle {
-  position: absolute;
-  top: 0;
-  right: 10px;
-  color: teal;
-  cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    color: teal;
+    cursor: pointer;
 }
 
 .question-circle:hover {
-  font-size: large;
+    font-size: large;
+}
+
+.sq-target-panel {
+    margin: 5px;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    height: 100%;
+}
+
+.sq-connect-text {
+    padding-left: 10px;
+}
+
+.sq-feature-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+}
+
+.sq-feature-ngram-settings {
+    width: 100%;
+}
+
+.sq-feature-ngram-ignore-settings {
+    display: flex;
+    padding: 5px;
+}
+
+.sq-target-choices-panel {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    display: flex;
+}
+
+.sq-target-text-panel {
+    /*margin: 2%;*/
+    border: lightskyblue solid thin;
+    flex: 1 1 auto;
+    width: 46%;
+    display: flex;
+    flex-direction: column;
+}
+
+.sq-target-lower-panel {
+    margin: 5px;
+    width: 100%;
+    height: calc(100vh - 175px);
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    gap: 10px
+}
+
+.sq-target-choice {
+    padding: 5px 0 0 5px;
+}
+
+.sq-text-container {
+    height: 10vh;
+    overflow: auto;
+    flex: 1 1 auto;
+}
+
+.sq-target-texts {
+    flex: 1 1 auto;
+    margin: 2px;
+    overflow: auto;
+}
+
+.sq-text-card {
+    background-color: rgba(173, 216, 230, 0.64);
+    padding: 3px;
+    margin: 3px;
+}
+
+.sq-target-info-pane {
+    background-color: #EEF7F8;
+    margin-top: -7px;
+    padding: 5px;
+    border: solid #2d6da3 thin;
+}
+
+.sq-info-row {
+    display: flex;
+}
+
+.sq-info-column {
+    flex: 50%;
+}
+
+.sq-target-info-pane h1 {
+
+    text-align: center;
+    font-size: unset;
+    font-weight: bold;
+}
+
+.sq-pane {
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+}
+
+.sq-container {
+    overflow: auto;
+    flex: 1 1 auto;
+}
+
+.sq-component {
+    display: flex;
+    margin: 2px;
+    padding: 2px;
+    flex-wrap: wrap;
+    border: #5cb85c solid thin;
+    background-color: aliceblue;
+}
+
+.sq-component p {
+    margin-left: 5px;
+}
+
+.sq-indent {
+    margin-left: 20px!important;
+}
+
+.sq-indent ul {
+    margin-block-start: 0;
+    margin-block-end: 5px;
+}
+
+.sq-fc-part {
+    margin: 5px;
+}
+
+.sq-button {
+    margin-left: 0 !important;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.sq-info-prompt {
+    width: 100%;
+    font-size: larger;
+    padding: 5px;
+    color: #187992;
+    background-color: white;
+    flex: 0 0 content;
 }
 
 .sq-progress-bar-container {
-  width: 100%;
-  height: 20px;
-  background-color: #75a1fa;
-  margin: 0 !important;
+    width: 100%;
+    height: 20px;
+    background-color: #75a1fa;
+    margin: 0 !important;
 }
 
 .sq-progress-bar {
-  height: 100%;
-  background-color: aqua;
-  margin: 0 !important;
+    height: 100%;
+    background-color: aqua;
+    margin: 0 !important;
 }
 
 .sq-output {
-  padding: 10px;
+    padding: 10px;
 }
 
 .sq-options {
-  padding-left: 5px;
+    padding-left: 5px;
 }
 
-.sq-pb-label {
-  color: black;
-  text-align: right;
+.sq-choice {
+    display: flex;
+    gap: 5px;
+    margin-left: 5px;
+    margin-right: 5px;
 }
 
-.sq-checkboxes {
-  margin-left: 30px!important;
+.sq-pb-label {
+    color: black;
+    text-align: right;
 }
 
-.sq-feature-constructor {
-
+.sq-checkboxes {
+    margin-left: 30px !important;
 }
 
 .sq-feature-template {
-  background-color: lightcyan;
-  border: 2px solid gray;
-  padding: 5px;
+    background-color: lightcyan;
+    border: 2px solid gray;
+    padding: 5px;
 }
 
 .sq-new-feature {
 }
 
 .sq-new-feature-item {
-  flex: 1 0 auto;
+    flex: 1 0 auto;
+}
+
+.sq-training-pane {
+    overflow: auto;
+}
+
+.sq-training-buttons {
+    margin: 10px;
+    display: flex;
+    justify-content: center;
+}
+
+.sq-training-settings-panel {
+    display: flex;
+    margin: 5px;
+}
+
+.sq-training-settings {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    background-color: lightcyan;
+    border: thin solid gray;
+    margin: 5px;
+}
+
+.sq-training-iterations {
+    margin: 0 5px 0 5px;
+    display: flex;
+    align-items: baseline;
+}
+
+.sq-training-checkboxes {
+    display: flex;
+    flex-direction: column;
+    margin: 0 5px 5px 5px;
+}
+
+.sq-model-table {
+
+}
+
+td .dx-button {
+    text-align: center;
+}
+
+.sq-model-table .dx-button-content {
+    padding: 0!important;
 }
 
 .dx-dropdowneditor-button.dx-button-mode-contained,
 .dx-dropdowneditor-button.dx-button-mode-outlined,
 .dx-dropdowneditor-button.dx-button-mode-text {
-  margin-left: 0!important;
+    margin-left: 0 !important;
 }
 
 .dx-item-content label {
-  display: flex;
+    display: flex;
+    margin: 2px;
 }
 
 .dx-item-content span {
-  flex-shrink: 0;
-  padding-right: 3px;
-  padding-top: 5px;
+    flex-shrink: 0;
+    padding-right: 3px;
+    padding-top: 5px;
 }
 
 .dx-dropdowneditor-field-clickable {
-  flex-shrink: 1;
+    flex-shrink: 1;
 }
 
 .dx-button-mode-contained {
-  border-color: #aaa;
-  box-shadow: 2px 2px lightgray;
-  margin-left: 20px!important;
+    border-color: #aaa;
+    box-shadow: 2px 2px lightgray;
+    margin-left: 20px !important;
 }
 
 .dx-button .dx-button-content {
-  padding: 10px;
-}
\ No newline at end of file
+    padding: 10px;
+}
+
+.sq-feature-list .dx-button-content {
+    padding: 0;
+}
+
+.sq-feature-list .dx-button {
+    padding-left: 10px;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+    margin: 0!important;
+}
+
+.sq-feature-delete {
+    /*alignment: right;*/
+}
+
+.sq-feature-list .dx-icon {
+    color: #337ab7;
+}
diff --git a/src/storyq.test.tsx b/src/storyq.test.tsx
index 08d2318..8ce4b21 100755
--- a/src/storyq.test.tsx
+++ b/src/storyq.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Storyq from './storyq';
+import Storyq from './components/storyq';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
diff --git a/src/storyq.tsx b/src/storyq.tsx
deleted file mode 100755
index 3852095..0000000
--- a/src/storyq.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import React, {Component} from 'react';
-import 'devextreme/dist/css/dx.common.css';
-import 'devextreme/dist/css/dx.light.compact.css';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faArrowLeft,faQuestionCircle} from '@fortawesome/free-solid-svg-icons'
-import codapInterface from "./lib/CodapInterface";
-import Button from 'devextreme-react/button';
-import {
-	initializePlugin,
-	openStory,
-	openTable,
-	registerObservers
-} from './lib/codap-helper';
-import './storyq.css';
-import {WritingManager, kStoryFeaturesContextName, kStoryTextComponentName} from './writing_manager';
-import DataManager from './data_manager';
-import {FeatureManager, FM_StorageCallbackFuncs} from './feature_manager';
-import {ClassificationManager, Classification_StorageCallbackFuncs} from './classification_manager';
-
-// import {string} from "prop-types";
-
-interface StoryqValues {
-	mode: string,
-	textManagerStorage: any,
-	dataManagerStorage: any,
-	featureManagerStorage: any,
-	classificationManagerStorage: any
-}
-
-interface StoryqStorage {
-	success: boolean,
-	values: StoryqValues
-}
-
-class Storyq extends Component<{}, { className: string, mode: string }> {
-	private kPluginName = "StoryQ";
-	private kVersion = "1.02";
-	private kInitialDimensions = {
-		width: 280,
-		height: 450
-	};
-
-	private writingManager: WritingManager;
-	private dataManager: DataManager;
-	private featureManagerCreateStorage: any;
-	private featureManagerRestoreStorage: any;
-	private stashedFeatureManagerStorage: any;
-	private classificationManagerCreateStorage: any;
-	private classificationManagerRestoreStorage: any;
-	private stashedClassificationManagerStorage: any;
-
-	constructor(props: any) {
-		super(props);
-		this.state = {className: 'storyText', mode: 'welcome'};
-		this.dataManager = new DataManager();
-		this.writingManager = new WritingManager(this.dataManager);
-
-		this.writeStory = this.writeStory.bind(this);
-		this.extractFeatures = this.extractFeatures.bind(this);
-		this.classify = this.classify.bind(this);
-		this.restorePluginState = this.restorePluginState.bind(this);
-		this.getPluginState = this.getPluginState.bind(this);
-		this.setFeatureManagerStorageCallbacks = this.setFeatureManagerStorageCallbacks.bind(this);
-		this.setClassificationManagerStorageCallbacks = this.setClassificationManagerStorageCallbacks.bind(this);
-
-		codapInterface.on('update', 'interactiveState', '', this.restorePluginState);
-		codapInterface.on('get', 'interactiveState', '', this.getPluginState);
-		initializePlugin(this.kPluginName, this.kVersion, this.kInitialDimensions, this.restorePluginState)
-			.then(() => registerObservers());
-	}
-
-	getPluginState(): StoryqStorage {
-		return {
-			success: true,
-			values: {
-				mode: this.state.mode,
-				textManagerStorage: this.writingManager.createStorage(),
-				dataManagerStorage: this.dataManager.createStorage(),
-				featureManagerStorage: this.featureManagerCreateStorage ? this.featureManagerCreateStorage() : null,
-				classificationManagerStorage: this.classificationManagerCreateStorage ? this.classificationManagerCreateStorage() : null,
-			}
-		};
-	}
-
-	async restorePluginState(iStorage: StoryqValues) {
-		if (iStorage) {
-			this.writingManager.restoreFromStorage(iStorage.textManagerStorage);
-			await this.dataManager.restoreFromStorage(iStorage.dataManagerStorage);
-			this.stashedFeatureManagerStorage = iStorage.featureManagerStorage;
-			if (this.featureManagerRestoreStorage && this.stashedFeatureManagerStorage) {
-				this.featureManagerRestoreStorage(this.stashedFeatureManagerStorage);
-				this.stashedFeatureManagerStorage = null;
-			}
-			this.stashedClassificationManagerStorage = iStorage.classificationManagerStorage;
-			if (this.classificationManagerRestoreStorage && this.stashedClassificationManagerStorage) {
-				this.classificationManagerRestoreStorage(this.stashedClassificationManagerStorage);
-				this.stashedClassificationManagerStorage = null;
-			}
-			this.setState({className: this.state.className, mode: iStorage.mode || 'welcome'});
-			if (this.state.mode === 'write') {
-				this.writingManager.setIsActive(true);
-				await this.writingManager.checkStory();
-			} else
-				this.writingManager.setIsActive(false);
-		}
-	}
-
-	public setFeatureManagerStorageCallbacks(iCallbackFuncs: FM_StorageCallbackFuncs) {
-		this.featureManagerCreateStorage = iCallbackFuncs.createStorageCallback;
-		this.featureManagerRestoreStorage = iCallbackFuncs.restoreStorageCallback;
-		if (this.stashedFeatureManagerStorage) {
-			this.featureManagerRestoreStorage(this.stashedFeatureManagerStorage);
-		}
-	}
-
-	public setClassificationManagerStorageCallbacks(iCallbackFuncs: Classification_StorageCallbackFuncs) {
-		this.classificationManagerCreateStorage = iCallbackFuncs.createStorageCallback;
-		this.classificationManagerRestoreStorage = iCallbackFuncs.restoreStorageCallback;
-		if (this.stashedClassificationManagerStorage) {
-			this.classificationManagerRestoreStorage(this.stashedClassificationManagerStorage);
-		}
-	}
-
-	async writeStory() {
-		this.writingManager.setIsActive(true);
-		this.setState({ mode: 'write'});
-		await this.dataManager.createDataContext(kStoryFeaturesContextName);
-		openTable(kStoryFeaturesContextName);
-		let textComponentID = await openStory(kStoryTextComponentName);
-		this.writingManager.setTextComponentID(textComponentID);
-	}
-
-	extractFeatures() {
-		this.writingManager.setIsActive(false);
-		this.setState({mode: 'extractFeatures'});
-	}
-
-	classify(iMode:string) {
-		this.writingManager.setIsActive(false);
-		this.setState({mode: iMode});
-	}
-
-	backArrow() {
-		return (
-			<div className="back-arrow"
-					 onClick={() => {
-						 this.setState({mode: 'welcome'});
-						 this.writingManager.setIsActive(false);
-					 }}
-					 title="Back Home">
-				<FontAwesomeIcon icon={faArrowLeft}/>
-			</div>
-		);
-	}
-
-	questionMark() {
-		return (
-			<div className="question-circle"
-					 onClick={() => {
-					 	window.open("https://docs.google.com/document/d/16cYwR_2QIq24CHaL69o09shQSMeKk9gmXltBTM43q7A/edit?usp=sharing", "_blank");
-					 }}
-					 title="Learn how to use StoryQ">
-				<FontAwesomeIcon icon={faQuestionCircle}/>
-			</div>
-		);
-	}
-
-	welcome(heading:string, includeBackArrow: boolean) {
-		const arrow = includeBackArrow ? this.backArrow() : "";
-		return (
-			<div>
-				{arrow}
-				<div className="title">
-					<p>{heading}</p>
-				</div>
-				{this.questionMark()}
-			</div>
-		);
-	}
-
-	getPane() {
-		switch (this.state.mode) {
-			case 'welcome':
-				return (
-					<div>
-						{this.welcome('Welcome to StoryQ',false)}
-						<div className="button-list">
-							<Button onClick={this.writeStory} >Write and Analyze a Story</Button>
-							<br/><br/>
-							<Button onClick={this.extractFeatures} >Train a Model</Button>
-							<br/><br/>
-							<Button onClick={()=>this.classify('using')} >Use a Model</Button>
-						</div>
-					</div>
-				)
-			case 'write':
-				return (<div>
-					{this.welcome('Write and Analyze a Story',true)}
-					<p>Enjoy writing and analyzing your story!</p>
-				</div>);
-			case 'extractFeatures':
-				let tFMStatus = (this.stashedFeatureManagerStorage && this.stashedFeatureManagerStorage.status) || 'active';
-				return (
-					<div>
-						{this.welcome('Train a Model',true)}
-						<FeatureManager status={tFMStatus} setStorageCallbacks={this.setFeatureManagerStorageCallbacks}/>
-					</div>);
-			case 'using':
-				let tClassificationStatus = this.state.mode;
-				return (
-					<div>
-						{this.welcome('Classify using a Model',true)}
-						<ClassificationManager status={tClassificationStatus}
-																	 setStorageCallbacks={this.setClassificationManagerStorageCallbacks}/>
-					</div>);
-
-		}
-	}
-
-	public render() {
-		return (
-			<div className="storyq">
-				{this.getPane()}
-			</div>
-		);
-	}
-}
-
-export default Storyq;
diff --git a/src/storyq_constants.ts b/src/storyq_constants.ts
deleted file mode 100644
index 0baae9e..0000000
--- a/src/storyq_constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- **/
-
-export const SQConstants = {
-	featureCountThreshold: 4
-};
\ No newline at end of file
diff --git a/src/storyq_types.ts b/src/storyq_types.ts
new file mode 100644
index 0000000..a3e5729
--- /dev/null
+++ b/src/storyq_types.ts
@@ -0,0 +1,50 @@
+import {entityInfo} from "./lib/codap-helper";
+
+/**
+ * Types and interfaces for StoryQ
+ */
+
+export interface StoryqStorage {
+	success: boolean,
+	values: {
+		domainStore: object,
+		uiStore: object
+	}
+
+}
+
+export interface FMStorage {
+	datasetName: string | null;
+	targetDatasetInfo: entityInfo | null,
+	targetDatasetInfoArray: entityInfo[] | null,
+	targetCollectionName: string,
+	targetCollectionNames: string[],
+	targetAttributeName: string,
+	targetAttributeNames: string[],
+	targetCaseCount: number,
+	targetPositiveCategory: string,
+	targetCategories: string[],
+	targetColumnFeatureNames: string[],
+	targetClassAttributeName: string,
+	modelsDatasetName: string,
+	modelsDatasetID: number,
+	featureCollectionName: string,
+	modelCurrentParentCaseID: number,
+	modelCollectionName: string,
+	featureCaseCount: number,
+	frequencyThreshold: number,
+	modelAccuracy: number,
+	modelKappa: number,
+	modelThreshold: number,
+	unigrams: boolean,
+	useColumnFeatures: boolean,
+	ignoreStopWords: boolean,
+	lockIntercept: boolean,
+	lockProbThreshold: boolean,
+	accordianSelection: Record<string, number>,
+	status: string
+}
+
+export const SQConstants = {
+	featureCountThreshold: 4
+};
\ No newline at end of file
diff --git a/src/text_feedback_manager.ts b/src/text_feedback_manager.ts
deleted file mode 100644
index b991401..0000000
--- a/src/text_feedback_manager.ts
+++ /dev/null
@@ -1,348 +0,0 @@
-/**
- * The TextFeedbackManager displays phrases in a text component based on user selection of target phrases
- * or features of the model.
- */
-
-import codapInterface from "./lib/CodapInterface";
-import {ClassLabel, HeadingsManager, HeadingSpec, PhraseTriple} from "./headings_manager";
-import pluralize from "pluralize";
-import {getComponentByTypeAndTitle, getSelectedCasesFrom} from "./lib/codap-helper";
-import {phraseToFeatures, textToObject} from "./utilities";
-import {ClassificationManager} from "./classification_manager";
-import {FeatureManager} from "./feature_manager";
-
-export interface TFMStorage {
-	textComponentName: string,
-	textComponentID: number
-}
-
-export default class TextFeedbackManager {
-
-	public textComponentName: string = '';
-	public textComponentID: number = -1;
-
-	private headingsManager: HeadingsManager;
-	public targetCategories: string[];
-	public targetAttributeName: string;
-
-	constructor(iTargetCategories: string[], iTargetAttributeName: string) {
-		this.targetCategories = iTargetCategories;
-		this.targetAttributeName = iTargetAttributeName;
-		this.headingsManager = new HeadingsManager();
-	}
-
-	public createStorage(): TFMStorage {
-		return {
-			textComponentName: this.textComponentName,
-			textComponentID: this.textComponentID
-		}
-	}
-
-	public restoreStorage(iStorage: TFMStorage | null) {
-		if (iStorage) {
-			this.textComponentName = iStorage.textComponentName;
-			this.textComponentID = iStorage.textComponentID;
-		}
-	}
-
-	getHeadingsManager(): HeadingsManager {
-		if (!this.headingsManager) {
-			this.headingsManager = new HeadingsManager();
-		}
-		this.headingsManager.setupHeadings(this.targetCategories[0], this.targetCategories[1],
-			'', 'Actual', 'Predicted')
-		return this.headingsManager;
-	}
-
-	/**
-	 * If the Features dataset has cases selected, for each selected case
-	 * 	- Pull out the array of 'usages' - the the case IDs of the cases in the dataset being analyzed
-	 * 	- Select these cases in that dataset
-	 * 	- Pull the phrase from the target case
-	 */
-	public async handleFeatureSelection(aManager: ClassificationManager | FeatureManager) {
-		const kMaxStatementsToDisplay = 40;
-		let tEndPhrase: string,
-			tSelectedCases = await getSelectedCasesFrom(aManager.modelsDatasetName);
-		let tFeatures: string[] = [],
-			tUsedIDsSet: Set<number> = new Set();
-		tSelectedCases.forEach((iCase: any) => {
-			let tUsages = iCase.values.usages;
-			if (typeof tUsages === 'string' && tUsages.length > 0) {
-				(JSON.parse(tUsages)).forEach((anID: number) => {
-					tUsedIDsSet.add(anID);
-				});
-			}
-			tFeatures.push(iCase.values.feature);
-		});
-		let tUsedCaseIDs: number[] = Array.from(tUsedIDsSet);
-		await codapInterface.sendRequest({
-			action: 'create',
-			resource: `dataContext[${aManager.targetDatasetInfo.name}].selectionList`,
-			values: tUsedCaseIDs
-		});
-		let tTriples: { actual: string, predicted: string, phrase: string }[] = [];
-		tEndPhrase = (tUsedCaseIDs.length > kMaxStatementsToDisplay) ? 'Not all statements could be displayed' : '';
-		const tTargetPhrasesToShow = Math.min(tUsedCaseIDs.length, kMaxStatementsToDisplay);
-		// Here is where we put the contents of the text component together
-		for (let i = 0; i < tTargetPhrasesToShow; i++) {
-			let tGetCaseResult: any = await codapInterface.sendRequest({
-				action: 'get',
-				resource: `dataContext[${aManager.targetDatasetInfo.name}].collection[${aManager.targetCollectionName}].caseByID[${tUsedCaseIDs[i]}]`
-			});
-			let tActualClass = tGetCaseResult.values.case.values[aManager.targetClassAttributeName];
-			let tPredictedClass = tGetCaseResult.values.case.values[aManager.targetPredictedLabelAttributeName];
-			let tPhrase = tGetCaseResult.values.case.values[this.targetAttributeName];
-			tTriples.push({actual: tActualClass, predicted: tPredictedClass, phrase: tPhrase});
-		}
-		await this.composeText(tTriples, tFeatures, textToObject,
-			aManager.targetColumnFeatureNames.concat(aManager.getConstructedFeatureNames()), tEndPhrase);
-	}
-
-	/**
-	 * First, For each selected target phrase, select the cases in the Feature dataset that contain the target
-	 * case id.
-	 * Second, under headings for the classification, display each selected target phrase as text with
-	 * features highlighted and non-features grayed out
-	 */
-	public async handleTargetSelection(aManager: ClassificationManager | FeatureManager) {
-		if (aManager.targetDatasetInfo.name === '' || aManager.modelsDatasetName === '') {
-			console.log('in handleTargetSelection but one of target or model doesn\'t exist');
-			return;
-		}
-		let tSelectedTargetCases: any = await getSelectedCasesFrom(aManager.targetDatasetInfo.name),
-			tTargetTriples: PhraseTriple[] = [],
-			tIDsOfFeaturesToSelect: number[] = [];
-		tSelectedTargetCases.forEach((iCase: any) => {
-			if (iCase) {
-				let tFeatureIDs: number[] = JSON.parse(iCase.values.featureIDs);
-				tIDsOfFeaturesToSelect = tIDsOfFeaturesToSelect.concat(tFeatureIDs);
-				tTargetTriples.push({
-					actual: iCase.values[aManager.targetClassAttributeName],
-					predicted: iCase.values[aManager.targetPredictedLabelAttributeName],
-					phrase: iCase.values[aManager.targetAttributeName]
-				});
-			}
-		});
-		// Select the features
-		await codapInterface.sendRequest({
-			action: 'create',
-			resource: `dataContext[${aManager.modelsDatasetName}].selectionList`,
-			values: tIDsOfFeaturesToSelect
-		});
-		// Get the features and stash them in a set
-		let tSelectedFeatureCases: any = await getSelectedCasesFrom(aManager.modelsDatasetName),
-			tFeatures = new Set<string>(),
-			tFeaturesArray: string[] = [];
-		tSelectedFeatureCases.forEach((iCase: any) => {
-			tFeatures.add(iCase.values.feature);
-		});
-		tFeatures.forEach(iFeature => {
-			tFeaturesArray.push(iFeature);
-		});
-		await this.composeText(tTargetTriples, tFeaturesArray,
-			phraseToFeatures, aManager.targetColumnFeatureNames.concat(aManager.getConstructedFeatureNames()));
-	}
-
-	private async clearText() {
-		await codapInterface.sendRequest({
-			action: 'update',
-			resource: `component[${this.textComponentID}]`,
-			values: {
-				text: {
-					"object": "value",
-					"document": {
-						"children": [
-							{
-								"type": "paragraph",
-								"children": [
-									{
-										"text": `This is where selected ${pluralize(this.targetAttributeName)} appear.`
-									}
-								]
-							}
-						],
-						"objTypes": {
-							"paragraph": "block"
-						}
-					}
-				}
-			}
-		});
-	}
-
-	/**
-	 * Only add a text component if one with the designated name does not already exist.
-	 */
-	public async addTextComponent() {
-		this.textComponentName = 'Selected ' + pluralize(this.targetAttributeName);
-		let tFoundTextID = await getComponentByTypeAndTitle('text', this.textComponentName);
-		if (tFoundTextID === -1) {
-			let tResult: any = await codapInterface.sendRequest({
-				action: 'create',
-				resource: 'component',
-				values: {
-					type: 'text',
-					name: this.textComponentName,
-					title: this.textComponentName,
-					dimensions: {
-						width: 500,
-						height: 150
-					},
-					position: 'top',
-					cannotClose: true
-				}
-			});
-			this.textComponentID = tResult.values.id
-			this.clearText();
-		}
-	}
-
-	public async closeTextComponent() {
-		// this.textComponentName = 'Selected ' + pluralize(this.targetAttributeName);
-		await codapInterface.sendRequest({
-			action: 'delete',
-			resource: `component[${this.textComponentName}]`
-		});
-	}
-
-	/**
-	 * Cause the text component to display phrases with the feature highlighting determined by
-	 * 	given function
-	 * @param iPhraseTriples  Specifications for the phrases to be displayed
-	 * @param iFeatures {string[]}	The features to be highlighted
-	 * @param iHighlightFunc {Function}	Function called to do the highlighting
-	 * @param iSpecialFeatures {string[]} Typically "column features" true of the phrase, but the strings
-	 * 					themselves do not appear in the phrase
-	 * @param iEndPhrase {string} The text to display at the bottom of the list of phrases
-	 * @public
-	 */
-	public async composeText(iPhraseTriples: PhraseTriple[], iFeatures: string[], iHighlightFunc: Function,
-													 iSpecialFeatures: string[], iEndPhrase?: string) {
-		const kHeadingsManager = this.getHeadingsManager();
-		const kProps = ['negNeg', 'negPos', 'posNeg', 'posPos', 'blankNeg', 'blankPos'];
-		// @ts-ignore
-		const kHeadings: HeadingSpec = kHeadingsManager.headings;
-		let tClassItems = {
-				negNeg: [],
-				negPos: [],
-				posNeg: [],
-				posPos: [],
-				blankNeg: [],
-				blankPos: []
-			},
-			tItems: any = [];
-
-
-		function addOnePhrase(iTriple: PhraseTriple) {
-			// @ts-ignore
-			const kLabels: ClassLabel = kHeadingsManager.classLabels;
-
-			let tGroup: string = 'blankPos',
-				tColor: string = '';
-			switch (iTriple.actual) {
-				case kLabels.negLabel:
-					switch (iTriple.predicted) {
-						case kLabels.negLabel:
-							tGroup = 'negNeg';
-							// @ts-ignore
-							tColor = kHeadingsManager.colors.green;
-							break;
-						case kLabels.posLabel:
-							tGroup = 'negPos';
-							// @ts-ignore
-							tColor = kHeadingsManager.colors.red;
-					}
-					break;
-				case kLabels.posLabel:
-					switch (iTriple.predicted) {
-						case kLabels.negLabel:
-							tGroup = 'posNeg';
-							// @ts-ignore
-							tColor = kHeadingsManager.colors.red;
-							break;
-						case kLabels.posLabel:
-							tGroup = 'posPos';
-							// @ts-ignore
-							tColor = kHeadingsManager.colors.green;
-					}
-					break;
-				default:
-					switch (iTriple.predicted) {
-						case kLabels.negLabel:
-							tGroup = 'blankNeg';
-							tColor = kHeadingsManager.colors.orange;
-							break;
-						case kLabels.posLabel:
-							tGroup = 'blankPos';
-							tColor = kHeadingsManager.colors.blue;
-					}
-			}
-			const tSquare = {
-				text: '■ ',
-				color: tColor
-			}
-			// @ts-ignore
-			tClassItems[tGroup].push({
-				type: 'list-item',
-				children: [tSquare].concat(iHighlightFunc(iTriple.phrase, iFeatures, iSpecialFeatures))
-			});
-		}
-
-		iPhraseTriples.forEach(iTriple => {
-			addOnePhrase(iTriple);
-		});
-
-		// The phrases are all in their groups. Create the array of group objects
-		kProps.forEach(iProp => {
-			// @ts-ignore
-			let tPhrases = tClassItems[iProp];
-			if (tPhrases.length !== 0) {
-				let tHeadingItems = [
-					// @ts-ignore
-					kHeadings[iProp],
-					{
-						type: 'bulleted-list',
-						// @ts-ignore
-						children: tClassItems[iProp]
-					}];
-				tItems = tItems.concat(tHeadingItems);
-			}
-		});
-		if (iEndPhrase && iEndPhrase !== '') {
-			tItems.push({
-				"type": "paragraph",
-				"children": [
-					{
-						"text": iEndPhrase
-					}
-				]
-			})
-		}
-		if (tItems.length === 0)
-			this.clearText();
-		else {
-			// Send it all off to the text object
-			await codapInterface.sendRequest({
-				action: 'update',
-				resource: `component[${this.textComponentID}]`,
-				values: {
-					text: {
-						"object": "value",
-						document: {
-							children: tItems,
-							objTypes: {
-								'list-item': 'block',
-								'bulleted-list': 'block',
-								'paragraph': 'block'
-							}
-						}
-					}
-				}
-			});
-		}
-
-	}
-
-}
-
diff --git a/src/utilities.ts b/src/utilities/utilities.ts
similarity index 72%
rename from src/utilities.ts
rename to src/utilities/utilities.ts
index 4f6695a..208f831 100644
--- a/src/utilities.ts
+++ b/src/utilities/utilities.ts
@@ -1,4 +1,4 @@
-import {wordTokenizer} from "./lib/one_hot";
+import {wordTokenizer} from "../lib/one_hot";
 
 /**
  *
@@ -16,7 +16,7 @@ export function textToObject( iText:string, iSelectedWords:any, iSpecialFeatures
 			});
 	});
 
-	let words:string[] = wordTokenizer(iText, false);
+	let words:string[] = wordTokenizer(iText, false, false);
 	words.forEach((iWord) => {
 		let tRawWord = iWord.toLowerCase();
 		if (iSelectedWords.indexOf(tRawWord) >= 0) {
@@ -50,31 +50,32 @@ export function textToObject( iText:string, iSelectedWords:any, iSpecialFeatures
  */
 export function phraseToFeatures( iPhrase:string, iFeatures:string[], iSpecialFeatures:string[]):any {
 	let tResultArray:any = [];
-	// First prepend any special features that are given as regular features
-	iSpecialFeatures.forEach( iFeature => {
-		if( iFeatures.indexOf( iFeature) >= 0)
-			tResultArray.push( {
-				text: `<${iFeature}> `, bold: true, underlined: true
-			});
-	});
-	let words:RegExpMatchArray | [] = iPhrase.match(/[^ ]+/g) || [];
-	words.forEach((iWord) => {
-		let tRawWordArray = iWord.match(/\w+/),
-			tRawWord = (tRawWordArray && tRawWordArray.length > 0 ? tRawWordArray[0] : '').toLowerCase();
-		if (iFeatures.indexOf(tRawWord) >= 0) {
-			tResultArray.push({
-				text: iWord, bold: true, underlined: true
-			});
-		}
-		else {
+	if( iPhrase) {
+		// First prepend any special features that are given as regular features
+		iSpecialFeatures.forEach(iFeature => {
+			if (iFeatures.indexOf(iFeature) >= 0)
+				tResultArray.push({
+					text: `<${iFeature}> `, bold: true, underlined: true
+				});
+		});
+		let words: RegExpMatchArray | [] = iPhrase.match(/[^ ]+/g) || [];
+		words.forEach((iWord) => {
+			let tRawWordArray = iWord.match(/\w+/),
+				tRawWord = (tRawWordArray && tRawWordArray.length > 0 ? tRawWordArray[0] : '').toLowerCase();
+			if (iFeatures.indexOf(tRawWord) >= 0) {
+				tResultArray.push({
+					text: iWord, bold: true, underlined: true
+				});
+			} else {
+				tResultArray.push({
+					text: iWord, color: "#888888"
+				});
+			}
 			tResultArray.push({
-				text: iWord, color: "#888888"
-			});
-		}
-		tResultArray.push({
-			text: ' '
+				text: ' '
+			})
 		})
-	});
+	}
 	return tResultArray;
 }
 
diff --git a/src/writing_manager.ts b/src/writing_manager.ts
deleted file mode 100644
index b61a14c..0000000
--- a/src/writing_manager.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-/**
- * The WritingManager handles user activities in the "Write and Analyze a Story" phase.
- * As the user types in the text component, features are extracted and listed in the
- * "Story Measuresments" dataset.
- */
-
-import codapInterface, {CODAP_Notification} from "./lib/CodapInterface";
-import DataManager from './data_manager';
-import {textToObject} from "./utilities";
-
-export const kStoryFeaturesContextName = "Story Measurements";
-export const kStoryTextComponentName = 'A New Story';
-
-export class WritingManager {
-
-	private textComponentID:number | undefined;
-	private dataManager:DataManager;
-	private currentStory:string = '';
-	private isActive = false;
-	private subscriberIndex:number | null = null;
-
-	constructor(iDataManager:DataManager) {
-		this.dataManager = iDataManager;
-		this.handleNotification = this.handleNotification.bind(this);
-
-	}
-
-	public setIsActive( iIsActive:boolean) {
-		this.isActive = iIsActive;
-		if( iIsActive) {
-			this.subscriberIndex = codapInterface.on('notify', '*', '', this.handleNotification);
-		}
-		else if( this.subscriberIndex !== null){
-			codapInterface.off(this.subscriberIndex);
-		}
-	}
-
-	public setTextComponentID( iID:number) {
-		this.textComponentID = iID;
-	}
-
-	/**
-	 *
-	 * @param iNotification    (from CODAP)
-	 */
-	private handleNotification(iNotification: CODAP_Notification) {
-		if (iNotification.resource === 'undoChangeNotice' && iNotification.values.operation === 'clearRedo') {
-			this.checkStory();
-		} else if (iNotification.action === 'notify' && iNotification.values.operation === 'selectCases') {
-			this.handleSelection( iNotification.resource);
-		}
-	}
-
-	public async checkStory() {
-
-		function processChild( iChild: { type:string, text:string, children:any[] }) {
-			if( iChild.type && iChild.children) {
-				iChild.children.forEach( processChild);
-				tStory += '\n';
-			}
-			else if( iChild.text) {
-				tStory += iChild.text;
-			}
-		}
-
-		let tArrayOfChildren:[] = await this.getCurrentStory();
-		// console.log( `checkStory: ${ JSON.stringify( tArrayOfChildren)}`);
-		let tStory:string = '';
-		if( Array.isArray( tArrayOfChildren)) {
-			tArrayOfChildren.forEach(processChild);
-			if( tStory !== this.currentStory) {
-				this.currentStory = tStory;
-				this.dataManager.processAndAddData(tStory);
-			}
-		}
-	}
-
-	private async getCurrentStory(): Promise<any> {
-		let tRequest = {
-			action: 'get',
-			resource: `component[${this.textComponentID}]`
-		};
-		let tResult:any = await codapInterface.sendRequest( tRequest);
-		let tChildren = [];
-		try {
-			tChildren = JSON.parse(tResult.values.apiText).document.children;
-		}
-		catch {
-			console.log('unable to parse story');
-		}
-		return tChildren;
-	}
-
-	private async handleSelection( iResource:string) {
-		// @ts-ignore
-		let tDataContextName: string = iResource && iResource.match(/\[(.+)]/)[1];
-		if (tDataContextName !== kStoryFeaturesContextName)
-			return;
-
-		let tResult: any,
-				tNewStory: any = [],
-				tStoryChildren = await this.getCurrentStory(),
-				tSelectedWords:string[] = await this.dataManager.getSelectedWords();
-
-		function processChildRemoveFormatting(iChild: any) {
-			if (iChild.type === 'paragraph' && iChild.children) {
-				iChild.children.forEach(processChildRemoveFormatting)
-			}
-			else if (iChild.text) {
-				delete iChild.bold;
-				delete iChild.underlined;
-				delete iChild.color;
-			}
-		}
-
-		function processChildShowSelection(iChild: any, iIndex: number, iArray: any, top?: any) {
-			if (!top)
-				top = tNewStory;
-			if (iChild.type === 'paragraph' && iChild.children) {
-				let tNewNode = {type: 'paragraph', children: []};
-				top.push(tNewNode);
-				iChild.children.forEach((iChild: any, iChildIndex: number) => {
-					processChildShowSelection(iChild, iChildIndex, iChild.children, tNewNode.children);
-				});
-			}
-			else if (iChild.text) {
-				textToObject(iChild.text, tSelectedWords, []).forEach((anObject: any) => {
-					top.push(anObject);
-				});
-			}
-		}
-
-		if (tStoryChildren) {
-			// Remove bold chunks
-			tStoryChildren.forEach(processChildRemoveFormatting);
-			// Make bold chunks for the selected words
-			tStoryChildren.forEach(processChildShowSelection);
-
-			let tRequest: CODAP_Notification = {
-				action: 'update',
-				resource: `component[${this.textComponentID}]`,
-				values: {
-					text: {
-						document: {
-							children: tNewStory,
-							objTypes: {
-								paragraph: 'block'
-							}
-						}
-					}
-				}
-			};
-			try {
-				tResult = await codapInterface.sendRequest(tRequest);
-			}
-			catch {
-				console.log('Unable to update selection');
-			}
-			console.log(JSON.stringify(tResult));
-		}
-
-	}
-
-	public restoreFromStorage( iStorage: { textComponentID:number }) {
-		this.textComponentID = iStorage.textComponentID;
-	}
-
-	createStorage():{ textComponentID: number | undefined } {
-		return {
-			textComponentID: this.textComponentID
-		}
-	}
-}
-
diff --git a/tsconfig.json b/tsconfig.json
index 2f05999..84bed06 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,7 @@
     "types": [
       "jest"
     ],
-    "jsx": "preserve",
+    "jsx": "react",
     "lib": [
       "dom",
       "es5",
@@ -25,7 +25,9 @@
     "forceConsistentCasingInFileNames": true,
     "moduleResolution": "node",
     "noEmit": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "noFallthroughCasesInSwitch": true,
+    "useDefineForClassFields": true
   },
   "include": [
     "./src/**/*"