Graceful degradation

.gitignore

@@ -1,2 +1,4 @@
 node_modules/
 .idea
+.env
+*.DS_Store

client/main.js

@@ -1,7 +1,7 @@
 import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
 // errors in browser consol
-// import './main.html'; 
+// import './main.html';
 
 // Template.hello.onCreated(function helloOnCreated() {
 //   // counter starts at 0

client/stylesheets/feature_discovery.css

@@ -0,0 +1,9 @@
+/* larger size field for things like text or text options */
+.h-4-large-size-field {
+  width: 120px;
+}
+
+/* modifying the color of the bootstrap badge to match the focus color of the progress bar */
+.badge {
+  background-color: #04AA6D;
+}

client/stylesheets/interactionReflection.css

@@ -0,0 +1,25 @@
+.h-4-x-large-size-field {
+  width: 250px;
+}
+
+.h-4-xx-large-size-field {
+  width: 500px;
+}
+
+
+
+.h-4-xx-large-size-field, .h-4-x-large-size-field {
+	height: 1.5em;
+	/* color: #040505; */
+  background-color: #444;
+	font-size: 14px;
+	line-height: 14px;
+	font-family: FF Mark;
+	/* text-align: center; */
+	margin-left: 7px;
+	margin-right: 7px;
+	padding-left: 7px !important;
+	padding-right: 7px !important;
+	padding-bottom: 7px !important;
+	box-sizing: border-box;
+}

client/stylesheets/monitorVisitations.css

@@ -0,0 +1,101 @@
+/* -- REMOVE ARROWS AND SPINNERS (so the story text can look cleaner) */
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.story-form {
+  display: flex;
+  /* grid-row-gap: 0; */
+  /* align-items: center; */
+}
+
+.story-content {
+  font-size: 14px;
+  letter-spacing: 0;
+  display: inline-block;
+  /* font-family: 'FF Mark'; */
+}
+
+.story-form-text {
+
+}
+
+.story-form-input {
+  /* so its one line */
+  display: inline-flex;
+  /* so the input text is centered with the story-text */
+  /* bottom: -1rem; */
+  /* so each line has space between them */
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.blue-line-border {
+	border: 0 !important;
+  border-top-color: currentcolor;
+  border-top-style: none;
+  border-top-width: 0px;
+  border-right-color: currentcolor;
+  border-right-style: none;
+  border-right-width: 0px;
+  border-bottom-color: currentcolor;
+  border-bottom-style: none;
+  border-bottom-width: 0px;
+  border-left-color: currentcolor;
+  border-left-style: none;
+  border-left-width: 0px;
+  border-image-outset: 0;
+  border-image-repeat: stretch;
+  border-image-slice: 100%;
+  border-image-source: none;
+  border-image-width: 1;
+	border-radius: 0 !important;
+	border-bottom: 2px solid #145bff !important;
+}
+
+/* small horizontal size for number fields*/
+.h-4-light-age {
+  width: 70px;
+}
+
+.h-4-large-size-field, .h-4-light-age, .h-4-mid-size-field, .h-4-x-large-size-field {
+	height: 1.5em;
+	/* color: #040505; */
+  background-color: #444;
+	font-size: 14px;
+	line-height: 14px;
+	font-family: FF Mark;
+	text-align: center;
+	margin-left: 7px;
+	margin-right: 7px;
+	padding-left: 7px !important;
+	padding-right: 7px !important;
+	padding-bottom: 7px !important;
+	box-sizing: border-box;
+}
+
+ /* changing bootstrap progress to have a small margin all around  */
+.progress {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.progress-container-focused {
+  background-color: #04AA6D;
+  margin: 2px 2px 2px 2px;
+}
+
+td {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+

client/stylesheets/style.css

@@ -218,6 +218,18 @@ body {
 
 .topcontent {
 	grid-area: topcontent;
+	display: grid;
+	grid-gap: 5px;
+	grid-template-columns: 1fr 1fr;
+	grid-template-areas: "monitorvisitations interactionreflection"
+}
+
+.monitorvisitations {
+	grid-area: monitorvisitations;
+}
+
+.interactionreflection{
+	grid-area: interactionreflection;
 }
 
 .header {
@@ -239,9 +251,10 @@ body {
 	grid-gap: 5px;
 	grid-template-columns: 1fr 6fr;
 	/* related to blockly-div and feature-list */
-	grid-template-rows: 50vh auto;
+	grid-template-rows: auto 50vh auto;
 	grid-template-areas:
 	"sidebar topcontent"
+	"sidebar workspace"
 	"bottomcontent bottomcontent";
 	background-color: #fff;
 	color: #444;
@@ -289,7 +302,7 @@ body {
 }
 
 .feature-list {
-	height: 46vh;
+	height: 63vh;
 	overflow: scroll;
 }
 

client/templates/blockly.js

@@ -1,5 +1,6 @@
 import Blockly from 'blockly';
-import {applyDetector} from "../../lib/detectors/detectors";
+import { Concept } from 'pos/lexicon';
+import {applyDetector, setOfContextFeaturesInBlockly, splitVarDeclarationAndRules} from "../../lib/detectors/detectors";
 
 export let WORKSPACE;
 
@@ -21,6 +22,11 @@ Template.blockly.rendered = function() {
   WORKSPACE.addChangeListener(function (event) {
     let code = Blockly.JavaScript.workspaceToCode(WORKSPACE);
     document.getElementById('compiledBlockly').value = code;
+
+    let conceptExpressionDefinition = new ConceptExpressionDefinition();
+    conceptExpressionDefinition.update(code);
+    console.log('after update: ', conceptExpressionDefinition.variableDeclaration);
+
     compiledBlocklyDep.changed();
 
     if (event.element == "comment") {
@@ -38,11 +44,35 @@ Template.blockly.rendered = function() {
       }
     }
   });
+
+  // Initialize a top-level concept variable for the concept expression
+  let detectorDescription = $('input[name=detectorname]').val() || 'SITUATION'
+  ReflectAndExpand.createConceptVariable(detectorDescription);
 };
 
+export class ConceptExpressionDefinition {
+  // Singleton-method
+  constructor() {
+    if (ConceptExpressionDefinition._instance) {
+      return ConceptExpressionDefinition._instance;
+    }
+    ConceptExpressionDefinition._instance = this;
+    this.variableDeclaration = null;
+    this.rules = null;
+  }
+
+  update(compiledBlocklyValue) {
+    [this.variableDeclaration, this.rules] = splitVarDeclarationAndRules(compiledBlocklyValue);
+
+  }
+  allFeatures() {
+    return setOfContextFeaturesInBlockly(this.variableDeclaration, this.rules);
+  }
+}
+
 export class ReflectAndExpand {
   static showReflectPrompt(block) {
-    blockName = ReflectAndExpand.parseBlockName(block);
+    let blockName = ReflectAndExpand.parseBlockName(block);
     if (blockName) {
       let detectorDescription = $('input[name=detectorname]').val()
       block.setCommentText(ReflectAndExpand.reflectPromptText(blockName, detectorDescription));
@@ -54,7 +84,7 @@ export class ReflectAndExpand {
   }
   static parseBlockName(block) {
     if (block.getField('VAR')) {
-      blockName = block.getField('VAR').textContent_.data
+      let blockName = block.getField('VAR').textContent_.data
       return blockName;
     }
   }
@@ -64,7 +94,7 @@ export class ReflectAndExpand {
     return abstractConcept;
   }
   static activateExpander(block, commentText) {
-    abstractConcept = ReflectAndExpand.parseReflect(commentText);
+    let abstractConcept = ReflectAndExpand.parseReflect(commentText);
     block.setCommentText(commentText + ReflectAndExpand.expandPromptText(abstractConcept));
     ReflectAndExpand.createConceptVariable(abstractConcept);
   }
@@ -102,8 +132,8 @@ export const mockTestDetector = function (userAffordances, varDecl, rules) {
 
 export const defaultToolbox = function () {
   let toolbox = {};
-  toolbox["weather"] = defaultToolboxWeather();
-  toolbox["time"] = defaultToolboxTimeOfDay() + defaultToolboxTimeOfWeek() + defaultToolboxTimeZone();
+  // toolbox["weather"] = defaultToolboxWeather();
+  // toolbox["time"] = defaultToolboxTimeOfDay() + defaultToolboxTimeOfWeek() + defaultToolboxTimeZone();
   toolbox["operators"] = defaultToolboxOperators();
   toolbox["variables"] = defaultToolboxVariables();
   return toolbox;
@@ -115,11 +145,15 @@ export const stringifyToolboxTree = function(toolboxTree) {
     string += toolboxTree["discoveries"];
     string += '<sep gap="48"></sep>';
   }
-  string += toolboxTree["placeCategories"];
-  string += '<sep gap="48"></sep>';
-  string += toolboxTree["weather"];
-  string += toolboxTree["time"];
-  string += '<sep gap="48"></sep>';
+  if (toolboxTree.hasOwnProperty("weather")) {
+    string += toolboxTree["weather"];
+    string += '<sep gap="48"></sep>';
+  }
+  if (toolboxTree.hasOwnProperty("time")) {
+    string += toolboxTree["time"];
+    string += '<sep gap="48"></sep>';
+  }
+  // string += toolboxTree["placeCategories"];
   string += toolboxTree["operators"];
   string += toolboxTree["variables"];
   string += "</xml>";
@@ -184,6 +218,10 @@ export const createAndBlock = function(a, b) {
   return createLogicOperationBlock('AND', a, b);
 }
 
+export const createNotBlock = function(a) {
+  return `<block type="logic_negate">${a}</block>`
+}
+
 export const createMultiVarOrBlock = function(abc) {
   if (abc.length === 1) {
     return createGetVariable(abc[0]);
@@ -337,13 +375,14 @@ const defaultToolboxTimeZone = function() {
 
 const defaultToolboxOperators = function() {
   return wrapBlocksInCategory("and, or, not, =",
-    createAndBlock("", "") +
+    createOrBlock(createOrBlock("",""),createOrBlock("","")) +
     createOrBlock("", "") +
-    '<block type="logic_negate"></block>' +
-    '<block type="logic_compare"></block>' +
-    createOrBlock(createOrBlock("",""), "") +
-    createOrBlock(createOrBlock("",""),
-                     createOrBlock("","")));
+    createAndBlock("", createNotBlock("")) +
+    createAndBlock("", "") +
+    createNotBlock(""),
+    // '<block type="logic_compare"></block>' +
+    // createOrBlock(createOrBlock("",""), "")
+  );
 };
 
 const defaultToolboxVariables = function() {

client/templates/cooccurances/search_cooccurances.html

@@ -0,0 +1,31 @@
+<template name="searchCooccurances">
+  <h4>Explore Cooccuring Place Tags</h4>
+  {{#if Template.subscriptionsReady}}
+    <form id="cooccurances">
+      {{> selectPlaceDropdown}}
+      <div class="input-group">
+        <span class="input-group-btn">
+          <button class="btn btn-default" type="submit">
+            <span class="glyphicon glyphicon-search"></span>Co-occuring Yelp Categories
+          </button>
+        </span>
+      </div>
+    </form>
+    <div class="panel panel-default">
+      <!-- <div class="panel-heading">Results</div> -->
+      <ul class="list-group">
+        {{#each (cooccuringCategories)}}
+          <li class="list-group-item" placeCategory="{{this.feature}}">
+            <div>
+              {{this.feature}}
+              <button type="button" class="btn-add-cat btn btn-primary btn-xs pull-right btn-panel-item">
+                <span class="glyphicon glyphicon-plus"  aria-hidden="true"></span>
+              </button>
+              <!-- {{ shortenDecimal this.}} -->
+            </div>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+  {{/if}}
+</template>