--- a/light9/fade/Light9FadeUi.ts	Wed May 24 14:44:38 2023 -0700
+++ b/light9/fade/Light9FadeUi.ts	Wed May 24 14:45:25 2023 -0700
@@ -1,7 +1,7 @@
 import { fastSlider, fastSliderLabel, provideFASTDesignSystem } from "@microsoft/fast-components";
 import debug from "debug";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { NamedNode } from "n3";
 import { getTopGraph } from "../web/RdfdbSyncedGraph";
 import { SyncedGraph } from "../web/SyncedGraph";
@@ -91,56 +91,66 @@
       </fast-slider>
       <div>${this.value.toPrecision(3)}</div>
       <div>eff: <edit-choice .uri=${this.effect} @edited=${this.onEffectChange}></edit-choice></div>
-      <div>attr: <edit-choice .uri=${this.effectAttr}></edit-choice></div>
+      <div>attr: <edit-choice .uri=${this.effectAttr} @edited=${this.onEffectAttrChange}></edit-choice></div>
       <div>&lt;=&gt; Slider ${this.column}</div>
     `;
   }
 
-  graph!: SyncedGraph;
+  graph?: SyncedGraph;
   ctx: NamedNode = new NamedNode(showRoot + "/fade");
   @property() uri!: NamedNode;
   @property() column!: string;
   @property() effect: NamedNode | null = null;
   @property() effectAttr: NamedNode | null = null;
+  @state() setting: NamedNode | null = null;
 
-  @property() value: number = 0.111;
+  @property() value: number = 0.0;
 
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
-      this.graph.runHandler(this.compile.bind(this), `config ${this.uri.value}`);
-      this.graph.runHandler(this.compileValue.bind(this), `valueSync ${this.uri.value}`);
+      this.graph.runHandler(this.compile.bind(this, this.graph), `config ${this.uri.value}`);
+      this.graph.runHandler(this.compileValue.bind(this, this.graph), `valueSync ${this.uri.value}`);
     });
   }
 
-  private compile() {
-    const U = this.graph.U();
-    if (!this.graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
+  private compile(graph: SyncedGraph) {
+    const U = graph.U();
+    if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
       // not loaded yet, perhaps
       this.column = "unset";
       this.effect = null;
       this.effectAttr = null;
       return;
     }
-    this.column = this.graph.stringValue(this.uri, U(":column"));
-    this.effect = this.graph.uriValue(this.uri, U(":effect"));
-    const s = this.graph.uriValue(this.uri, U(":setting"));
-    this.effectAttr = this.graph.uriValue(s, U(":effectAttr"));
+    this.column = graph.stringValue(this.uri, U(":column"));
+    this.effect = graph.uriValue(this.uri, U(":effect"));
+    this.setting = graph.uriValue(this.uri, U(":setting"));
+    if (this.setting !== null) {
+      try {
+        this.effectAttr = graph.uriValue(this.setting, U(":effectAttr"));
+      } catch (e) {
+        this.effectAttr = null;
+      }
+    }
   }
 
-  private compileValue() {
-    const U = this.graph.U();
-    if (!this.graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
+  private compileValue(graph: SyncedGraph) {
+    const U = graph.U();
+    if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
       // not loaded yet
       // console.timeEnd(`valueSync ${this.uri.value}`)
       return;
     }
 
-    this.value = this.graph.floatValue(this.uri, this.graph.Uri(":value"));
+    this.value = graph.floatValue(this.uri, graph.Uri(":value"));
   }
 
   onSliderInput(ev: CustomEvent) {
+    if (this.graph === undefined) {
+      return;
+    }
     const prev = this.value;
     const v: number = (ev.target as any).valueAsNumber;
     this.value = parseFloat(v.toPrecision(3)); // rewrite pls
@@ -152,7 +162,22 @@
   }
 
   onEffectChange(ev: CustomEvent) {
+    if (this.graph === undefined) {
+      return;
+    }
     const { newValue } = ev.detail;
     this.graph.patchObject(this.uri, this.graph.Uri(":effect"), newValue, this.ctx);
   }
+
+  onEffectAttrChange(ev: CustomEvent) {
+    if (this.graph === undefined) {
+      return;
+    }
+    const { newValue } = ev.detail;
+    if (this.setting === null) {
+      this.setting = this.graph.nextNumberedResource(this.graph.Uri(":fade_set"));
+      this.graph.patchObject(this.uri, this.graph.Uri(":setting"), this.setting, this.ctx);
+    }
+    this.graph.patchObject(this.setting, this.graph.Uri(":effectAttr"), newValue, this.ctx);
+  }
 }