The link-devtools from ontola

link-devtools's People

Contributors

Watchers

link-devtools's Issues

Devtools extension panel

See the extension branch for current progress.

Data panel
Inbox-view with resource selection on the left and current store contents of that resource on the right.
Delta panel
Inbox-view with delta selection on the left and the contents on the right.
Ontology panel
Some view where the current state of the reasoner can be analysed.
View panel
Some view where the currently registered views can be looked up. Views probably can't cross the page-extension memory border, so there will probably be some limitations to what can be shown.

Data panel

Delta panel

"JSON" view
Quad table
Replay delta button
Execute a new delta (hand typed or edit of previous)

Ontology panel

Inheritance tree display
Displays the contents of the super map
Equality table
Displays the contents of the equivalence set
Class / resource tester
User can enter an IRI of a class or a resource and see the outputs of various functions of the schema.

Views panel

Unclear

Other

Inject link-devtools if not loaded by the page
Allows the dev. methods to be used on link pages even if the page hasn't got the devtools loaded by itself.

Easier way to see data

Opening the devtools, going to the react tab, finding the right LinkedResourceContainer in the tree, going back to the console, and typing dev.data is a bit bothersome.

As a developer, I'd love to get that data using a keyboard shortcut and clicking on a component.

In one project, I created something that does this called the HoverHelper. Hold Alt to make the Subjects light up, click to show the data in the console. It uses HTML RDFa attributes to find the subject, and then uses link to fetch the relevant data.

Here's the code:

import PropTypes from 'prop-types';
import { NamedNode } from 'rdflib';
import React, { Component } from 'react';
import { HotKeys } from 'react-hotkeys';

import { expandPath } from '../../helpers/iris';

const propTypes = {
  children: PropTypes.node,
};

const TRIGGER_KEYS = ['Alt', 'AltGraph'];

class HoverHelper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activated: false,
    };
  }

  static getElement(e) {
    e.preventDefault();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    const x = e.clientX;
    const y = e.clientY;
    const elementMouseIsOver = document.elementFromPoint(x, y);
    let currentElement = elementMouseIsOver;
    const maxDepth = 100;
    for (let i = 0; i < maxDepth; i++) {
      const resourceLink = currentElement.getAttribute('resource')
        || expandPath(currentElement.getAttribute('href'));
      if (resourceLink) {
        /* global dev:true */
        const trips = dev.getLRS().tryEntity(NamedNode.find(resourceLink));
        console.log(dev.toObject(trips)); // eslint-disable-line no-console
        break;
      }
      if (currentElement.tagName === 'BODY') {
        console.log('Nothing found!'); // eslint-disable-line no-console
        break;
      }
      currentElement = currentElement.parentElement;
    }
  }

  handleKeyDown(e) {
    if (e.key === TRIGGER_KEYS) {
      this.setState({
        activated: true,
      });
    }
  }

  handleKeyUp(e) {
    if (e.key === TRIGGER_KEYS) {
      this.setState({
        activated: false,
      });
    }
  }

  render() {
    if (!__DEVELOPMENT__) {
      return this.props.children;
    }

    const listeners = this.state.activated ? { onClick: e => HoverHelper.getElement(e) } : {};

    const handlers = {
      startHoverHelper: () => this.setState({
        activated: true,
      }),
      stopHoverHelper: () => this.setState({
        activated: false,
      }),
    };

    return (
      <HotKeys
        handlers={handlers}
        tabIndex={null}
      >
        <div
          className={`${this.state.activated ? 'HoverHelper--show-borders' : ''}`}
          {...listeners}
        >
          {this.props.children}
        </div>
      </HotKeys>
    );
  }
}

HoverHelper.propTypes = propTypes;

export default HoverHelper;

And the styles:

.HoverHelper--show-borders {
  & [resource],
  & [href] {
    box-shadow: 0 0 1px 0 $focus-red;
    // sass-lint:disable no-important
    pointer-events: all !important;

    &:hover {
      box-shadow: 0 0 3px 2px $focus-red;
      z-index: 1;
    }

    &:active {
      box-shadow: 0 0 5px 3px $focus-red;
      z-index: 1;
    }
  }

  & *:not([resource]) {
    pointer-events: none;
  }
}