import { customElement, property, state } from "lit/decorators.js";

import { SyncedGraph } from "../../web/SyncedGraph";

import { GraphAwarePage } from "../../web/GraphAwarePage";

import { getTopGraph, GraphChangedEvent } from "../../web/RdfdbSyncedGraph";

import { NamedNode } from "n3";

import { Patch } from "../../web/patch";

import { linkHorizontal } from "d3";

export { RdfdbSyncedGraph } from "../../web/RdfdbSyncedGraph";

export { Light9CollectorDevice } from "../../web/collector/Light9CollectorDevice";

debug.enable("*");

export class Light9CollectorUi extends GraphAwarePage {

  graph?: SyncedGraph;

    return html`${super.render()}

      <light9-collector-device-list></light9-collector-device-list> `;

  }

}

@customElement("light9-collector-device-list")

export class Light9CollectorDeviceList extends LitElement {

  graph!: SyncedGraph;

  @property() devices: NamedNode[] = [];

  render() {

    return html`

      <h2>Devices</h2>

      <light9-collector-device uri="http://light9.bigasterisk.com/theater/skyline/device/strip1"></light9-collector-device>

      <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device uri="${d.value}"></light9-collector-device>`)}</div>

    getTopGraph().then((g) => {

      this.graph = g;

      this.graph.runHandler(this.findDevices.bind(this), "findDevices");

  findDevices(patch?: Patch) {

    const U = this.graph.U();

    this.devices = [];

        this.devices.push(dev as NamedNode);

    <script type="module" src="../collector/Light9CollectorUi"></script>

import debug from "debug";

import { Quad_Graph, Quad_Object, Quad_Predicate, Quad_Subject } from "n3";

import { filter } from "underscore";

import { allPatchSubjs, Patch } from "./patch";

const log = debug("autodep");

interface QuadPattern {

  subject: Quad_Subject | null;

  predicate: Quad_Predicate | null;

  object: Quad_Object | null;

  graph: Quad_Graph | null;

}

// use patch as an optional optimization, but you can't count on it

export type HandlerFunc = (p?: Patch) => void;

class Handler {

  patterns: QuadPattern[];

  innerHandlers: Handler[];

  // a function and the quad patterns it cared about

  constructor(public func: HandlerFunc | null, public label: string) {

    this.patterns = []; // s,p,o,g quads that should trigger the next run

    this.innerHandlers = []; // Handlers requested while this one was running

  }

}

export class AutoDependencies {

  handlers: Handler;

  handlerStack: Handler[];

  constructor() {

    // tree of all known Handlers (at least those with non-empty

    // patterns). Top node is not a handler.

    this.handlers = new Handler(null, "root");

    this.handlerStack = [this.handlers]; // currently running

  }

  runHandler(func: HandlerFunc, label: string) {

    // what if we have this func already? duplicate is safe?

    if (label == null) {

      throw new Error("missing label");

    }

    const h = new Handler(func, label);

    const tailChildren = this.handlerStack[this.handlerStack.length - 1].innerHandlers;

    const matchingLabel = filter(tailChildren, (c: { label: any }) => c.label === label).length;

    // ohno, something depends on some handlers getting run twice :(

    if (matchingLabel < 2) {

      tailChildren.push(h);

    }

    //console.time("handler #{label}") 

    // todo: this may fire 1-2 times before the

    // graph is initially loaded, which is a waste. Try deferring it if we

    // haven't gotten the graph yet.

    return this._rerunHandler(h, undefined);

  }

  //console.timeEnd("handler #{label}")

  //@_logHandlerTree()

  _rerunHandler(handler: Handler, patch?: Patch) {

    handler.patterns = [];

    this.handlerStack.push(handler);

    try {

      if (handler.func === null) {

        throw new Error("tried to rerun root");

      }

      handler.func(patch);

    } catch (e) {

      log("error running handler: ", e);

    } finally {

      // assuming here it didn't get to do all its queries, we could

      // add a *,*,*,* handler to call for sure the next time?

      // log('done. got: ', handler.patterns)

      this.handlerStack.pop();

    }

  }

  // handler might have no watches, in which case we could forget about it

  _logHandlerTree() {

    log("handler tree:");

    var prn = function (h: Handler, depth: number) {

      let indent = "";

      for (let i = 0; i < depth; i++) {

        indent += "  ";

      }

      log(`${indent} \"${h.label}\" ${h.patterns.length} pats`);

      return Array.from(h.innerHandlers).map((c: any) => prn(c, depth + 1));

    };

    return prn(this.handlers, 0);

  }

  _handlerIsAffected(child: Handler, patchSubjs: Set<string>) {

    if (patchSubjs === null) {

      return true;

    }

    if (!child.patterns.length) {

      return false;

    }

    for (let stmt of Array.from(child.patterns)) {

      if (stmt.subject === null) {

        // wildcard on subject

        return true;

      }

      if (patchSubjs.has(stmt.subject.value)) {

        return true;

      }

    }

    return false;

  }

  graphChanged(patch: Patch) {

    // SyncedGraph is telling us this patch just got applied to the graph.

    const subjs = allPatchSubjs(patch);

    var rerunInners = (cur: Handler) => {

      const toRun = cur.innerHandlers.slice();

      for (let child of Array.from(toRun)) {

        //match = @_handlerIsAffected(child, subjs)

        //continue if not match

        //log('match', child.label, match)

        //child.innerHandlers = [] # let all children get called again

        this._rerunHandler(child, patch);

        rerunInners(child);

      }

    };

    return rerunInners(this.handlers);

  }

  askedFor(s: Quad_Subject | null, p: Quad_Predicate | null, o: Quad_Object | null, g: Quad_Graph | null) {

    // SyncedGraph is telling us someone did a query that depended on

    // quads in the given pattern.

    const current = this.handlerStack[this.handlerStack.length - 1];

    if (current != null && current !== this.handlers) {

      return current.patterns.push({ subject: s, predicate: p, object: o, graph: g } as QuadPattern);

    }

  }

}

import debug from "debug";

import { html, LitElement } from "lit";

import { patchSizeSummary } from "../web/patch";

import { GraphChangedEvent } from "../web/RdfdbSyncedGraph";

import { SyncedGraph } from "./SyncedGraph";

const log = debug("graphaware");

export class GraphAwarePage extends LitElement {

  constructor() {

    super();

    this.classList.add("graph-events");

  }

  // prepend this to your subclass's render output, like

  // render() { return html`${super.render()} ....your page`; }

  render() {

    return html`<rdfdb-synced-graph @changed="${this.onGraphChanged}"></rdfdb-synced-graph>`;

  }

  onGraphChanged(ev: GraphChangedEvent) {

    log("patch from server [3]", patchSizeSummary(ev.detail.patch));

    // this.dispatchEvent(new CustomEvent("changed", { detail: ev.detail }));

    log("patch from server [4]");

  }

}

import debug from "debug";

import { html, LitElement, css } from "lit";

import { customElement, property } from "lit/decorators.js";

import { Patch } from "./patch";

import { SyncedGraph } from "./SyncedGraph";

const log = debug("syncedgraph-el");

// consider https://vitaly-t.github.io/sub-events/ for this stuff

export interface GraphChangedDetail {

  graph: SyncedGraph;

  patch: Patch;

}

export class GraphChangedEvent extends CustomEvent<GraphChangedDetail> {

  constructor(type: string, opts: { detail: GraphChangedDetail; bubbles: boolean; composed: boolean }) {

    super(type, opts);

  }

}

let RdfdbSyncedGraph

(window as any).topSyncedGraph = new Promise((res, rej) => {

  // Contains a SyncedGraph,

  // displays a little status box,

  // and emits 'changed' events with the graph and latest patch when it changes

  RdfdbSyncedGraph=customElement("rdfdb-synced-graph")(class RdfdbSyncedGraph extends LitElement {

    /*@property()*/ graph: SyncedGraph;

    /*@property()*/ status: string;

    /*@property()*/ testGraph = false;

    static styles = [

      css`

      `,

    ];

    render() {

      return html`graph: ${this.status}`;

      console.log("reset");

    constructor() {

      super();

      this.status = "startup";

        this.testGraph ? null : "/rdfdb/api/syncedGraph",

          "": "http://light9.bigasterisk.com/",

          dev: "http://light9.bigasterisk.com/device/",

          rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#",

          rdfs: "http://www.w3.org/2000/01/rdf-schema#",

          xsd: "http://www.w3.org/2001/XMLSchema#",

        },

        (s: string) => {

          this.status = s;

        this.onClear.bind(this),

        this.onGraphChanged.bind(this)

      );

      // (window as any).topSyncedGraph = this.graph;

      res(this.graph);

    private onGraphChanged(graph: SyncedGraph, patch: Patch) {

      this.dispatchEvent(

        new GraphChangedEvent("changed", {

          detail: { graph, patch },

          bubbles: true,

          composed: true,

        })

      );

  });

});

async function getTopGraph(): Promise<SyncedGraph> {

  const s = (window as any).topSyncedGraph;

  return await s;

}

export { RdfdbSyncedGraph, getTopGraph };

import debug from "debug";

import { css, html, LitElement, PropertyValues } from "lit";

import { customElement, property, state } from "lit/decorators.js";

import { NamedNode } from "n3";

// import { GraphChangedEvent } from "../../web/RdfdbSyncedGraph";

// import { runHandler } from "./GraphAwarePage";

import { Patch, patchContainsPreds, patchSizeSummary } from "./patch";

import { getTopGraph } from "./RdfdbSyncedGraph";

import { SyncedGraph } from "./SyncedGraph";

debug.enable("*");

const log = debug("device-el");

const RDFS_LABEL = new NamedNode("http://www.w3.org/2000/01/rdf-schema#label");

@customElement("resource-display")

export class ResourceDisplay extends LitElement {

  graph!: SyncedGraph;

  static styles = [

    css`

    `,

  ];

  render() {

    return html` <span class="${this.resClasses()}">

      <a href="${this.href()}" id="uri"> <!-- type icon goes here -->${this.label}</a>

    </span>`;

    // <template is="dom-if" if="{{rename}}">

    //   <button on-click="onRename">Rename</button>

    //   <paper-dialog id="renameDialog" modal on-iron-overlay-closed="onRenameClosed">

    //     <p>

    //       New label:

    //       <input id="renameTo" autofocus type="text" value="{{renameTo::input}}" on-keydown="onRenameKey" />

    //     </p>

    //     <div class="buttons">

    //       <paper-button dialog-dismiss>Cancel</paper-button>

    //       <paper-button dialog-confirm>OK</paper-button>

    //     </div>

    //   </paper-dialog>

    // </template>

    //    `;

  }

  // callers might set this as string or pass a NamedNode.

  @property() uri?: NamedNode | string;

  @state() label: string = "";

  @property() rename: boolean = false;

  @property() minor: boolean = false;

  // @state() renameTo: String; notify: true };

  constructor() {

    super();

    getTopGraph().then((g) => {

      this.graph = g;

      this.runUriHandler();

    });

  realUri(): NamedNode {

    if (!this.uri) {

      return new NamedNode("");

    return typeof this.uri === "string" ? new NamedNode(this.uri) : this.uri;

  }

  href() {

      return "javascript:;";

    }

    return typeof this.uri === "string" ? this.uri : this.uri.value;

  updated(changedProperties: PropertyValues) {

    if (changedProperties.has("uri")) {

      if (!this.graph) {

        return; /*too soon*/

      this.runUriHandler();

    }

  resClasses() {

    return this.minor ? "resource minor" : "resource";

  }

  runUriHandler() {

    this.graph.runHandler(this.onUri.bind(this), `rdisplay ${this.href()}` /*needs uniqueness?*/);

  }

  onUri(patch?: Patch) {

    const uri = this.realUri();

    this.graph.runHandler(this.setLabel.bind(this), `label ${uri.value}`);

  }

  setLabel(patch?: Patch) {

    if (patch && !patchContainsPreds(patch, [RDFS_LABEL])) {

    const uri = this.realUri();

    if (ev.key == "Enter") {

    if (ev.key == "Escape") {

      var label = this.graph.Uri("rdfs:label");

        throw new Error(`${ctxs.length} label stmts for ${this.uri.label}`);

      this.graph.patchObject(typeof this.uri === "string" ? this.graph.Uri(this.uri) : this.uri, label, this.graph.Literal(this.renameTo), ctxs[0]);

import { Quad, Quad_Object, Quad_Predicate, Quad_Subject } from "n3";

import { sortBy, unique } from "underscore";

import { AutoDependencies, HandlerFunc } from "./AutoDependencies";

import { Patch, patchSizeSummary } from "./patch";

  private _autoDeps: AutoDependencies;

  private _client: RdfDbClient;

  private graph: N3.Store;

  // Main graph object for a browser to use. Consider using RdfdbSyncedGraph element to create & own

  // one of these. Syncs both ways with rdfdb. Meant to hide the choice of RDF lib, so we can change it

    // url is the /syncedGraph path of an rdfdb server.

    public url: any,

    private clearCb: any,

    private onGraphChanged: (graph: SyncedGraph, newPatch: Patch)=>void

    this._autoDeps = new AutoDependencies();

    this._client = new RdfDbClient(this.url, this._clearGraphOnNewConnection.bind(this), this._applyPatch.bind(this), this.setStatus);

    this.cachedFloatValues = new Map(); // s + '|' + p -> number

    this.cachedUriValues = new Map(); // s + '|' + p -> Uri

    log("clearGraphOnNewConnection");

    log("clearGraphOnNewConnection done");