@decidables/detectable-elements 0.2.15 → 0.3.0

package/src/examples/interactive.js

@@ -4,10 +4,100 @@ import SDTMath from '@decidables/detectable-math';
 import SDTExample from './sdt-example';
 
 /*
-  SDTExample_Interactive element
+  SDTExampleInteractive element
   <sdt-example-interactive>
 */
 export default class SDTExampleInteractive extends SDTExample {
+  static get properties() {
+    return {
+      color: {
+        attribute: 'color',
+        type: String,
+        reflect: true,
+      },
+      zRoc: {
+        attribute: 'z-roc',
+        type: Boolean,
+        reflect: true,
+      },
+
+      h: {
+        attribute: 'hits',
+        type: Number,
+        reflect: true,
+      },
+      m: {
+        attribute: 'misses',
+        type: Number,
+        reflect: true,
+      },
+      fa: {
+        attribute: 'false-alarms',
+        type: Number,
+        reflect: true,
+      },
+      cr: {
+        attribute: 'correct-rejections',
+        type: Number,
+        reflect: true,
+      },
+
+      hr: {
+        attribute: 'hr',
+        type: Number,
+        reflect: true,
+      },
+      far: {
+        attribute: 'far',
+        type: Number,
+        reflect: true,
+      },
+
+      d: {
+        attribute: 'd',
+        type: Number,
+        reflect: true,
+      },
+      c: {
+        attribute: 'c',
+        type: Number,
+        reflect: true,
+      },
+      s: {
+        attribute: 's',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.color = 'all';
+    this.zRoc = false;
+
+    this.h = undefined;
+    this.m = undefined;
+    this.fa = undefined;
+    this.cr = undefined;
+
+    this.hr = undefined;
+    this.far = undefined;
+
+    this.d = SDTMath.d.DEFAULT;
+    this.c = SDTMath.c.DEFAULT;
+    this.s = SDTMath.s.DEFAULT;
+
+    this.detectableControl = null;
+    this.detectableTable = null;
+    this.rocSpace = null;
+    this.sdtModel = null;
+    this.sdtParameters = null;
+
+    this.rocSpaces = [];
+  }
+
   connectedCallback() {
     super.connectedCallback();
 
@@ -15,118 +105,166 @@ export default class SDTExampleInteractive extends SDTExample {
     this.detectableTable = this.querySelector('detectable-table');
     this.rocSpace = this.querySelector('roc-space');
     this.sdtModel = this.querySelector('sdt-model');
+    this.sdtParameters = this.querySelector('sdt-parameters');
 
     this.rocSpaces = this.querySelectorAll('roc-space');
 
-    if (this.detectableControl && this.detectableControl.hasAttribute('color')) {
-      this.detectableControl.addEventListener('detectable-control-color', (event) => {
-        if (this.sdtModel) {
-          this.sdtModel.color = event.detail.color;
-        }
+    if (
+      this.h !== undefined
+      && this.m !== undefined
+      && this.fa !== undefined
+      && this.cr !== undefined
+    ) {
+      this.hr = SDTMath.hM2Hr(this.h, this.m);
+      this.far = SDTMath.faCr2Far(this.fa, this.cr);
 
-        if (this.detectableTable) {
-          this.detectableTable.color = event.detail.color;
-        }
-      });
+      this.d = SDTMath.hrFar2D(this.hr, this.far, this.s);
+      this.c = SDTMath.hrFar2C(this.hr, this.far, this.s);
+    } else if (this.hr !== undefined && this.far !== undefined) {
+      this.d = SDTMath.hrFar2D(this.hr, this.far, this.s);
+      this.c = SDTMath.hrFar2C(this.hr, this.far, this.s);
+    } else if (this.d !== undefined && this.c !== undefined) {
+      this.hr = SDTMath.dC2Hr(this.d, this.c, this.s);
+      this.far = SDTMath.dC2Far(this.d, this.c, this.s);
+
+      const total = 100;
+      this.h = Math.round(total * this.hr);
+      this.m = total - this.h;
+      this.fa = Math.round(total * this.far);
+      this.cr = total - this.fa;
     }
 
     if (this.detectableControl) {
+      this.detectableControl.addEventListener('detectable-control-color', (event) => {
+        this.color = event.detail.color;
+      });
+
       this.detectableControl.addEventListener('detectable-control-z-roc', (event) => {
-        if (this.rocSpaces.length > 0) {
-          this.rocSpaces.forEach((rocSpace) => {
-            rocSpace.zRoc = event.detail.zRoc;
-          });
-        }
+        this.zRoc = event.detail.zRoc;
       });
     }
 
     if (this.detectableTable) {
-      if (this.rocSpace) {
-        this.rocSpace.hr = SDTMath.hM2Hr(this.detectableTable.h, this.detectableTable.m);
-        this.rocSpace.far = SDTMath.faCr2Far(this.detectableTable.fa, this.detectableTable.cr);
-      }
-
-      if (this.sdtModel) {
-        this.sdtModel.d = SDTMath.hrFar2D(
-          SDTMath.hM2Hr(this.detectableTable.h, this.detectableTable.m),
-          SDTMath.faCr2Far(this.detectableTable.fa, this.detectableTable.cr),
-          this.sdtModel.s,
-        );
-        this.sdtModel.c = SDTMath.hrFar2C(
-          SDTMath.hM2Hr(this.detectableTable.h, this.detectableTable.m),
-          SDTMath.faCr2Far(this.detectableTable.fa, this.detectableTable.cr),
-          this.sdtModel.s,
-        );
-      }
-
       this.detectableTable.addEventListener('detectable-table-change', (event) => {
-        if (this.rocSpace) {
-          this.rocSpace.far = event.detail.far;
-          this.rocSpace.hr = event.detail.hr;
-        }
-
-        if (this.sdtModel) {
-          this.sdtModel.d = SDTMath.hrFar2D(event.detail.hr, event.detail.far, this.sdtModel.s);
-          this.sdtModel.c = SDTMath.hrFar2C(event.detail.hr, event.detail.far, this.sdtModel.s);
-        }
+        this.h = event.detail.h;
+        this.m = event.detail.m;
+        this.fa = event.detail.fa;
+        this.cr = event.detail.cr;
+
+        this.far = event.detail.far;
+        this.hr = event.detail.hr;
+
+        this.d = SDTMath.hrFar2D(this.hr, this.far, this.s);
+        this.c = SDTMath.hrFar2C(this.hr, this.far, this.s);
       });
     }
 
     if (this.rocSpace) {
-      if (this.sdtModel && !this.detectableTable) {
-        this.sdtModel.d = SDTMath.hrFar2D(this.rocSpace.hr, this.rocSpace.far, this.rocSpace.s);
-        this.sdtModel.c = SDTMath.hrFar2C(this.rocSpace.hr, this.rocSpace.far, this.rocSpace.s);
-        this.sdtModel.s = this.rocSpace.s;
-      }
-
       this.rocSpace.addEventListener('roc-point-change', (event) => {
-        if (this.sdtModel) {
-          this.sdtModel.d = event.detail.d;
-          this.sdtModel.c = event.detail.c;
-          this.sdtModel.s = event.detail.s;
-        }
-
-        if (this.detectableTable) {
-          const newh = Math.round(
-            (this.detectableTable.h + this.detectableTable.m) * event.detail.hr,
-          );
-          const newm = (this.detectableTable.h + this.detectableTable.m) - newh;
-          const newfa = Math.round(
-            (this.detectableTable.fa + this.detectableTable.cr) * event.detail.far,
-          );
-          const newcr = (this.detectableTable.fa + this.detectableTable.cr) - newfa;
-          this.detectableTable.h = newh;
-          this.detectableTable.m = newm;
-          this.detectableTable.fa = newfa;
-          this.detectableTable.cr = newcr;
-        }
+        this.d = event.detail.d;
+        this.c = event.detail.c;
+        this.s = event.detail.s;
+
+        this.hr = event.detail.hr;
+        this.far = event.detail.far;
+
+        const newh = Math.round((this.h + this.m) * this.hr);
+        const newm = (this.h + this.m) - newh;
+        const newfa = Math.round((this.fa + this.cr) * this.far);
+        const newcr = (this.fa + this.cr) - newfa;
+        this.h = newh;
+        this.m = newm;
+        this.fa = newfa;
+        this.cr = newcr;
       });
     }
 
     if (this.sdtModel) {
       this.sdtModel.addEventListener('sdt-model-change', (event) => {
-        if (this.rocSpaces.length > 0) {
-          this.rocSpaces.forEach((rocSpace) => {
-            rocSpace.setWithSDT(event.detail.d, event.detail.c, 'default', '', event.detail.s);
-          });
-        }
-
-        if (this.detectableTable) {
-          const newh = Math.round(
-            (this.detectableTable.h + this.detectableTable.m) * event.detail.hr,
-          );
-          const newm = (this.detectableTable.h + this.detectableTable.m) - newh;
-          const newfa = Math.round(
-            (this.detectableTable.fa + this.detectableTable.cr) * event.detail.far,
-          );
-          const newcr = (this.detectableTable.fa + this.detectableTable.cr) - newfa;
-          this.detectableTable.h = newh;
-          this.detectableTable.m = newm;
-          this.detectableTable.fa = newfa;
-          this.detectableTable.cr = newcr;
-        }
+        this.d = event.detail.d;
+        this.c = event.detail.c;
+        this.s = event.detail.s;
+
+        this.hr = event.detail.hr;
+        this.far = event.detail.far;
+
+        const newh = Math.round((this.h + this.m) * this.hr);
+        const newm = (this.h + this.m) - newh;
+        const newfa = Math.round((this.fa + this.cr) * this.far);
+        const newcr = (this.fa + this.cr) - newfa;
+        this.h = newh;
+        this.m = newm;
+        this.fa = newfa;
+        this.cr = newcr;
       });
     }
+
+    if (this.sdtParameters) {
+      this.sdtParameters.addEventListener('sdt-parameters-d', (event) => {
+        this.d = event.detail.d;
+      });
+
+      this.sdtParameters.addEventListener('sdt-parameters-c', (event) => {
+        this.c = event.detail.c;
+      });
+
+      this.sdtParameters.addEventListener('sdt-parameters-s', (event) => {
+        this.s = event.detail.s;
+      });
+    }
+  }
+
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    if (this.detectableControl) {
+      this.detectableControl.color = (this.detectableControl.color != null)
+        ? this.color
+        : undefined;
+      this.detectableControl.zRoc = (this.detectableControl.zRoc != null)
+        ? this.zRoc
+        : undefined;
+    }
+
+    if (this.detectableTable) {
+      this.detectableTable.color = this.color;
+      this.detectableTable.h = this.h;
+      this.detectableTable.m = this.m;
+      this.detectableTable.cr = this.cr;
+      this.detectableTable.fa = this.fa;
+    }
+
+    if (this.rocSpace) {
+      this.rocSpace.hr = this.hr;
+      this.rocSpace.far = this.far;
+    }
+
+    if (this.sdtModel) {
+      this.sdtModel.color = this.color;
+
+      this.sdtModel.d = this.d;
+      this.sdtModel.c = this.c;
+      this.sdtModel.s = this.s;
+    }
+
+    if (this.rocSpaces.length > 0) {
+      this.rocSpaces.forEach((rocSpace) => {
+        rocSpace.zRoc = this.zRoc;
+        rocSpace.setWithSDT(this.d, this.c, 'default', '', this.s);
+      });
+    }
+
+    if (this.sdtParameters) {
+      this.sdtParameters.d = (this.sdtParameters.d != null)
+        ? this.d
+        : undefined;
+      this.sdtParameters.c = (this.sdtParameters.c != null)
+        ? this.c
+        : undefined;
+      this.sdtParameters.s = (this.sdtParameters.s != null)
+        ? this.s
+        : undefined;
+    }
   }
 }