adding red color to show loose coupling (#239)

Fixes #235

src/components/table-field.jsx

@@ -72,8 +72,9 @@ function TableFieldWithoutState({
     classes += ' single-hit';
   }
 
+  const stroke = fieldData.srcTable.qLoose ? 'dashed' : 'solid';
   const fieldStyle = {
-    border: `2px solid ${fieldData.backgroundColor}`,
+    border: `2px ${stroke} ${fieldData.backgroundColor}`,
   };
 
   const filterBox = showFilterbox ? <Filterbox model={model} layout={layout} field={field} /> : null;

src/components/tooltip.jsx

@@ -53,6 +53,20 @@ export function getExtraInfoForField(fieldData) {
   const avgDup = rowWithValueCount > uniqueValueCount ? `~ ${(rowWithValueCount / uniqueValueCount).toFixed(3)}` : '1';
 
   function keyDescription() {
+    if (fieldData.srcTable.qLoose) {
+      return (
+        <React.Fragment>
+          <div className="headerContainer">
+            <h3 className="loose">Circular reference</h3>
+          </div>
+          <span>The red color indicates a circular reference.</span>
+          <p>
+            To avoid ambiguous results, table <i>{fieldData.srcTable.qName}</i> is marked as “loosely coupled”,
+            which means that the logical inference cannot propagate through this table. Avoid circular references.
+          </p>
+        </React.Fragment>
+      );
+    }
     switch (fieldData.qKeyType) {
       case 'PERFECT_KEY':
         return (

src/components/tooltip.pcss

@@ -12,6 +12,10 @@
     display: inline;
   }
 
+  .loose {
+    color: #c00;
+  }
+
   .perfect-key {
     color: #398ab5;
   }

src/logic/logic.js

@@ -18,6 +18,9 @@ function mixColors(color1, color2, weight) {
 }
 
 function colorOfField(field) {
+  if (field.srcTable.qLoose) {
+    return '#cc0000';
+  }
   switch (field.qKeyType) {
     case 'PERFECT_KEY':
       return '#398ab5';