Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/embeddable iframe #11

Merged
merged 11 commits into from
Nov 11, 2021
Merged

Feature/embeddable iframe #11

merged 11 commits into from
Nov 11, 2021

Conversation

frostyfan109
Copy link

This PR adds functionality for embedding TranQL as an iframe in other applications through a query string parameter. It also replaces the old Robokop answer viewer with the newer Gamma Viewer.

Embedding

  • Embedded mode can be toggled with the following query string ?embed={FULL|SIMPLE|GRAPH|true|false|""}.
    • The query string value is case insensitive, and each value corresponds to a specific EmbedMode enum value:
      • full -> FULL -> Includes more of the App's functionality such as the codemirror (with autocompletion) and the answer viewer.
      • simple, graph, true, "" (just ?embed) -> SIMPLE -> Includes just the graph and answer viewer.
      • false, no query arg ->NONE -> The full app; embedded mode is not enabled.
    • A typical embedded URL may look like https://heal.renci.org/tranql?embed=FULL&q=SELECT%20phenotypic_feature-%3Edisease%0A%20%20FROM%20%22%2Fschema%22%0A%20WHERE%20phenotypic_feature%3D%22HP%3A0012378%22
  • The codemirror query will automatically execute on a 1000ms debounce in the full embed mode, since there is no "Run" button.
  • Graph zooming and panning is disabled in the embedded version. This is because the graph takes up 100vh and 100vw, so if a user scrolls down, there is no way to get back up to the codemirror (since the graph intercepts the scroll wheel for zooming).
    • Technically, this could be re-enabled in the SIMPLE embed mode, since the graph is the entire page in the first place. However, it has been left disabled for now for consistency.
  • localStorage and caching functionality has all been disabled when in embedded mode. Since the primary purpose is for cross-domain iframes, it does not make sense that the App would read or write from the normal sites memory, nor would it likely be able to in most browsers/environments (would throw lots of errors).

Gamma Viewer

  • Replaces Robokop answer viewer tool with Gamma Viewer widget.
  • Adds the Gamma Viewer to the embedded mode as well.

Bugs

This also fixes a bug with the query string argument ?query which automatically executes a query on page load. Something was going wrong with the way the App loaded and the param would result in an empty graph being returned even if the query would normally yield results.

Griffin Roupe and others added 11 commits November 1, 2021 18:23
…around getReasonerURLs

Query string arg ?embed=true or just ?embed will now has special functionality for embeddeding. This changes how the app renders, as well as specific behaviors such as disabling local storage/Dexie caching. This also adds a try catch block around the getReasonerURLs method which would previously throw an error if the API was down/unavailable.
…emoves window.localStorage when embedded so that the embedded App cannot make localStorage modifications
…he graph) or more complete (with banner, run button, and codemirror.
…ion on simple embedding (without run button).
…dds answer viewer into embedded page as well.
…wer viewer works inside of embedded version (component instead of modal now).
This branch branches off from feature/local-development accidentally, so some test-related files are out of date
@frostyfan109 frostyfan109 merged commit 9b02786 into develop Nov 11, 2021
@frostyfan109 frostyfan109 deleted the feature/embeddable-iframe branch November 11, 2021 19:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants