onChanged: any;

  constructor(graph: any) {

    // The settings we're showing (or would like to but the widget

    // isn't registered yet):

    // dev+attr : {setting: Uri, onChangeFunc: f, jsValue: str_or_float}

    this.graph = graph;

    this.settings = new Map();

    this.keyForSetting = new Map(); // setting uri str -> dev+attr

    // Registered graphValueChanged funcs, by dev+attr. Kept even when

    // settings are deleted.

    this.onChanged = new Map();

  }

    const key = device.value + " " + deviceAttr.value;

    if (this.settings.has(key)) {

      throw new Error("repeated setting on " + key);

    }

    if (this.keyForSetting.has(setting.value)) {

      throw new Error("repeated keyForSetting on " + setting.value);

    }

    this.settings.set(key, {

      setting,

      onChangeFunc: this.onChanged[key],

    });

    this.keyForSetting.set(setting.value, key);

    if (this.onChanged[key] != null) {

      return this.onChanged[key](value);

    }

  }

    return this.keyForSetting.has(setting.value);

  }

    row.jsValue = value;

  }

    const key = device.value + " " + deviceAttr.value;

    this.onChanged[key] = graphValueChanged;

      const row = this.settings.get(key);

      row.onChangeFunc = graphValueChanged;

  }

    const key = device.value + " " + attr.value;

    }

    return null;

  }

    const key = this.keyForSetting.get(setting.value);

    const row = this.settings.get(key);

    }

    this.settings.delete(key);

  }

  clear() {

    });

    this.settings.clear();

  }

  forAll(cb: (arg0: any) => any) {

    const all = Array.from(this.keyForSetting.keys());

    return Array.from(all).map((s: any) => cb(this.graph.Uri(s)));

  }

};

// Like element.set(path, newArray), but minimizes splices.

// Dotted paths don't work yet.

  let pos = 0;

  let newPos = 0;

  while (newPos < newArray.length) {

    if (pos < element[path].length) {

      if (isElementEqual(element[path][pos], newArray[newPos])) {

        pos += 1;

        newPos += 1;

      } else {

      }

    } else {

      pos += 1;

      newPos += 1;

    }

  }

  if (pos < element[path].length) {

  }

};

  activeSettings: ActiveSettings;

  // More efficient bridge between liveControl widgets and graph edits,

  // as opposed to letting each widget scan the graph and push lots of

  // tiny patches to it.

    this.activeSettings = new ActiveSettings(this.graph);

  }

  }

    this.clearSettings();

    this.effect = effect;

    // are these going to pile up? consider @graph.triggerHandler('GTC sync')

  }

  newEffect() {

    // wrong- this should be our editor's scratch effect, promoted to a

    // real one when you name it.

    const ctx = this.ctxForEffect(effect);

    const addQuads = [

    ];

    this.graph.applyAndSendPatch(patch);

    return effect;

  }

  syncFromGraph() {

    const toClear = new Set(this.activeSettings.allSettingsStr());

      const pred = valuePred(this.graph, devAttr);

      try {

        value = this.graph.uriValue(setting, pred);

        if (!value.id.match(/^http/)) {

          throw new Error("not uri");

  }

  register(device: any, deviceAttr: any, graphValueChanged: any) {

    return this.activeSettings.registerWidget(device, deviceAttr, graphValueChanged);

  }

    // this is a bug for zoom=0, since collector will default it to

    // stick at the last setting if we don't explicitly send the

    // 0. rx/ry similar though not the exact same deal because of

    // their remap.

  }

  emptyEffect() {

    return this.activeSettings.forAll(this._removeEffectSetting.bind(this));

  }

    // todo: controls should be disabled if there's no effect and they won't do anything.

    // value is float or #color or (Uri or null)

    const effectSetting = this.activeSettings.effectSettingLookup(device, deviceAttr);

    // sometimes this misses an existing setting, which leads to a mess

    if (this.shouldBeStored(deviceAttr, value)) {

        return this._addEffectSetting(device, deviceAttr, value);

      } else {

        return this._patchExistingEffectSetting(effectSetting, deviceAttr, value);

      }

    } else {

      return this._removeEffectSetting(effectSetting);

    }

  }

      return value;

    }

    return this.graph.prettyLiteral(value);

  }

    const U = (x: string) => this.graph.Uri(x);

    this.activeSettings.addSettingsRow(device, deviceAttr, effectSetting, value);

    const addQuads = [

    ];

    return this.graph.applyAndSendPatch(patch);

  }

    this.activeSettings.setValue(effectSetting, value);

  }

    const U = (x: string) => this.graph.Uri(x);

    if (effectSetting != null) {

      for (let q of Array.from(this.graph.graph.getQuads(effectSetting))) {

        toDel.push(q);

      }

      return this.activeSettings.deleteSetting(effectSetting);

    }

  }

}

     paper-listbox {

         --paper-listbox-background-color: none;

         --paper-listbox-color: white;

         --paper-listbox: {

             /* measure biggest item? use flex for columns? */

             column-width: 9em;

             background: #0b1d0b;

         }

     }

     paper-item.iron-selected {

         background: #7b7b4a;

     }

      <paper-item on-focus="selectOnFocus">None</paper-item>

      <template is="dom-repeat" items="{{choices}}">

        <paper-item on-focus="selectOnFocus" uri="{{item.uri}}">{{item.label}}</paper-item>

      </template>

    </paper-listbox>

       properties: {

         if (ev.target.uri === undefined) {

           // *don't* clear for this, or we can't cycle through all choices (including none) with up/down keys

           //this.clear();

           //return;

         }

         this.value = ev.target.uri;

         if (value === null) {

           this.clear();

         }

           this.value = undefined;

   #colorControls {

       display: flex;

       align-items: center;

   }

   #colorControls > * {

       margin: 0 3px;

   }

   #colorControls paper-slider {

   }

   paper-slider {

       --paper-slider-knob-color: var(--paper-red-500);

       --paper-slider-active-color: var(--paper-red-500);

       --paper-slider-font-color: white;

       --paper-slider-input: {

           width: 75px;

           background: black;

           display: inline-block;

       }

   }

  <template is="dom-if" if="{{deviceAttrRow.useSlider}}">

                  max="{{deviceAttrRow.max}}"

                  step=".001"

                  editable

                  content-type="application/json"

                  value="{{sliderWriteValue}}"

  </template>

  <template is="dom-if" if="{{deviceAttrRow.useColor}}">

    <div id="colorControls">

      <button on-click="goBlack">0.0</button>

      <light9-color-picker color="{{value}}"></light9-color-picker>

    </div>

  </template>

  <template is="dom-if" if="{{deviceAttrRow.useChoice}}">

  </template>

          value: { type: any; notify: boolean; }; // null, Uri, float, str

      enableChange: boolean;

      value: any;

      immediateSlider: any;

      deviceAttrRow: any;

      sliderWriteValue: { value: any; };

      choiceValue: any;

      graphToControls: any;

      graph: any;

      pickedChoice: any;

      static initClass() {

        this.getter_properties = {

          graph: { type: Object, notify: true },

          device: { type: Object },

          deviceAttrRow: { type: Object }, // object returned from attrRow, below

          value: { type: Object, notify: true }, // null, Uri, float, str

          choiceValue: { type: Object },

          sliderWriteValue: { type: Number },

        };

      }

      constructor() {

        super();

        this.enableChange = false; // until 1st graph read

      }

        gtc.register(this.device, this.deviceAttrRow.uri, this.graphValueChanged.bind(this));

      }

        device(device: any, uri: any, arg2: any) {

            throw new Error("Method not implemented.");

        }

        this.enableChange = false;

        if (v === null) {

          this.clear();

        } else {

          this.value = v;

        }

      }

      onChoice(value: any) {

        if (value != null) {

          value = this.graph.Uri(value);

        } else {

          value = null;

        }

        return this.graphToControls.controlChanged(this.device, this.deviceAttrRow.uri, value);

      }

      onChange(value: any) {

        //log('change: control tells graph', @deviceAttrRow.uri.value, value)

        if (value === undefined) {

          value = null;

        }

        return this.graphToControls.controlChanged(this.device, this.deviceAttrRow.uri, value);

      }

      clear() {

        this.pickedChoice = null;

        this.sliderWriteValue = 0;

        if (this.deviceAttrRow.useColor) {

        } else if (this.deviceAttrRow.useChoice) {

        } else {

        }

      }

    }

   :host {

       display: flex;

       flex-direction: column;

   }

   #preview {

       width: 100%;

   }

   light9-live-device-control > div {

       break-inside: avoid-column;

   }

   light9-live-device-control {

  <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

  <h1>device control</h1>

  <div id="save">

    <div>

        uri="{{device.uri}}"

        effect="{{effect}}"

        graph-to-controls="{{graphToControls}}"

      ></light9-live-device-control>

    </template>

  </div>

      static getter_properties: {

          // string uri of the effect being edited, or null. This is the

          // master value; GraphToControls follows.

      };

      static getter_observers: {};

      graphToControls: any;

      okToWriteUrl: boolean;

      currentSettings: {};

      graph: any;

      effectChoice: any;

      static initClass() {

        this.getter_properties = {

          graph: { type: Object, notify: true },

          devices: { type: Array, notify: true, value: [] },

          // string uri of the effect being edited, or null. This is the

          // master value; GraphToControls follows.

          effectChoice: { type: String, notify: true, value: null },

        };

      }

      constructor() {

        super();

        this.graphToControls = null;

        this.okToWriteUrl = false;

      }

      ready() {

        super.ready(...arguments).ready();

      }