Merge pull request #1004 from griffithlab/example-queries

Example Queries Wrapper around GraphiQL sandbox
griffithlab · Mar 7, 2024 · e629a86 · e629a86
2 parents 8fbf1e9 + ac2368e
commit e629a86
Show file tree

Hide file tree

Showing 11 changed files with 339 additions and 67 deletions.
diff --git a/server/Gemfile b/server/Gemfile
@@ -50,8 +50,6 @@ gem 'typhoeus', '~>1.4.0'
 
 gem 'audited', '~> 5.3'
 
-gem 'graphiql-rails', '~> 1.8.0'
-
 #user comment rendering
 gem 'rinku', '~> 2.0.6'
 gem 'sanitize', '~> 6.0.2'

diff --git a/server/Gemfile.lock b/server/Gemfile.lock
@@ -179,9 +179,6 @@ GEM
       raabro (~> 1.4)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    graphiql-rails (1.8.0)
-      railties
-      sprockets-rails
     graphql (1.12.24)
     graphql-batch (0.4.3)
       graphql (>= 1.3, < 2)
@@ -500,7 +497,6 @@ DEPENDENCIES
   dockerfile-rails (>= 1.5)
   ed25519
   elasticsearch (~> 7.13.0)
-  graphiql-rails (~> 1.8.0)
   graphql (~> 1.12.4)
   graphql-batch (~> 0.4.3)
   htmlentities (~> 4.3.4)

diff --git a/server/app/assets/config/manifest.js b/server/app/assets/config/manifest.js
@@ -1,4 +1,2 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
-//= link graphiql/rails/application.css
-//= link graphiql/rails/application.js
diff --git a/server/app/controllers/graphiql_controller.rb b/server/app/controllers/graphiql_controller.rb
@@ -0,0 +1,7 @@
+class GraphiqlController < ApplicationController
+  layout false
+  def show
+    @initial_query = GQL_EXAMPLES.initial_query
+    @examples = GQL_EXAMPLES.examples
+  end
+end
diff --git a/server/app/javascript/application.js b/server/app/javascript/application.js
diff --git a/server/app/views/graphiql/show.html.erb b/server/app/views/graphiql/show.html.erb
@@ -0,0 +1,150 @@
+<!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>CIViC GraphiQL</title>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+    </style>
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      If you do not want to rely on a CDN, you can host these files locally or
+      include them directly in your favored resource bundler.
+    -->
+    <script
+      crossorigin
+      src="https://unpkg.com/react@18/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
+    ></script>
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
+    <script
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+      type="application/javascript"
+    ></script>
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <!-- 
+      These are imports for the GraphIQL Explorer plugin.
+     -->
+    <script
+      src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
+      crossorigin
+    ></script>
+
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://www.unpkg.com/bulma@0.9.4/css/bulma.min.css"
+    />
+  </head>
+
+  <body>
+    <nav class="navbar is-dark is-spaced ">
+      <div class="navbar-brand">
+        <a class="navbar-item" href="https://civicdb.org">
+          <img src="/assets/images/civic-logo_sidebar-expanded.png" height="28">
+        </a>
+        <a class="navbar-item" href="https://civicdb.org/api/graphiql">
+          <h1 class="title has-text-light">GraphQL Sandbox</h1>
+        </a>
+      </div>
+      <div class="navbar-menu">
+        <div class="navbar-end">
+          <a class="navbar-item" href="https://docs.civicdb.org" target="_blank">
+            Documentation
+          </a>
+          <a class="navbar-item" href="https://civicdb.org/pages/help" target="_blank">
+            Contact
+          </a>
+        </div>
+      </div>
+    </nav>
+    <section class="section">
+      <div class="content">
+        <p>
+          Welcome to the CIViC GraphiQL Sandbox. Here you can browse the API schema 
+          and documentation as well as view example queries in the sidebar. Click the 
+          <svg height="1em" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg"><title>docs icon</title><path d="M0.75 3C0.75 4.24264 1.75736 5.25 3 5.25H17.25M0.75 3C0.75 1.75736 1.75736 0.75 3 0.75H16.25C16.8023 0.75 17.25 1.19772 17.25 1.75V5.25M0.75 3V21C0.75 22.2426 1.75736 23.25 3 23.25H18.25C18.8023 23.25 19.25 22.8023 19.25 22.25V6.25C19.25 5.69771 18.8023 5.25 18.25 5.25H17.25" stroke="currentColor" stroke-width="1.5"></path><line x1="13" y1="11.75" x2="6" y2="11.75" stroke="currentColor" stroke-width="1.5"></line></svg>
+           icon to browse the CIViC API Documentation or <a href="https://graphql.org/learn/" target="_blank">click here</a> to learn more about GraphQL.
+        </p>
+      </div>
+      <div class="columns">
+        <div class="column is-2 is-narrow" style="margin-top: 18px;">
+          <% @examples.each do |ex| %>
+            <div class="block">
+              <div class="field">
+                <div class="control">
+                  <button class="button is-info is-outlined" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" onclick="updateQuery(`<%= ex["query"] %>`)"><%= ex["name"] %></button>
+                  <div class="content">
+                    <p class="help">
+                    <%= ex["description"] %>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        </div>
+        <div class="column">
+          <div id="graphiql">Loading...</div>
+        </div>
+      </div>
+    </section>
+
+    <script>
+      const root = ReactDOM.createRoot(document.getElementById("graphiql"));
+      const fetcher = GraphiQL.createFetcher({
+        url: "/api/graphql",
+      });
+
+      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+
+      const gql = React.createElement(GraphiQL, {
+        fetcher,
+        defaultQuery: `<%= @initial_query %>`,
+        defaultEditorToolsVisibility: true,
+        plugins: [explorerPlugin],
+      });
+
+      root.render(gql);
+
+      function updateQuery(newQuery) {
+        const newGQL = React.createElement(GraphiQL, {
+          fetcher,
+          query: newQuery,
+          defaultEditorToolsVisibility: true,
+          plugins: [explorerPlugin],
+        });
+
+        root.render(newGQL);
+      }
+    </script>
+  </body>
+</html>
diff --git a/server/config/initializers/graphiql.rb b/server/config/initializers/graphiql.rb
@@ -1,58 +1,15 @@
-GraphiQL::Rails.config.initial_query =  <<~QUERY
-# Below is an example of fetching a page of accepted Evidence Items using the GraphQL API.
-# You can press the "Play >" button to run the query and see the response. Note how the structure mirrors the fields requested in the query.
-# Clicking "Docs" in the upper right will allow you to explore the schema including all available queries and the fields you can request on them.
-#
-# The GraphiQL environment will offer autocompletion and validation as you experient with what's possible.
-#
-{  
-  evidenceItems(status: ACCEPTED, first: 25) {
-    totalCount  #Total Count of EIDs matching the criteria
-    pageInfo {
-      endCursor  #Cursor for the last item in the response. You can pass this to "after" to get the next page.
-      hasNextPage #Is there a page after this one?
-    }
-    nodes {
-      id
-      status
-      molecularProfile {
-        id
-        name
-        link
-      }
-      evidenceType
-      evidenceLevel
-      evidenceRating
-      evidenceDirection
-      phenotypes {
-        id
-        hpoId
-        name
-      }
-      description
-      disease {
-        id
-        doid
-        name
-        diseaseAliases
-        displayName
-      }
-      therapies {
-        id
-        ncitId
-        name
-        therapyAliases
-      }
-      source {
-        ascoAbstractId
-        citationId
-        pmcId
-        sourceType
-        title
-      }
-      therapyInteractionType
+class GqlExamples
+  attr_reader :initial_query, :examples
+
+  def initialize(path)
+    config_files =  Dir.glob("*.yml", base: path)
+    @examples = config_files.map { |f| YAML.load_file(File.join(path, f)) }
+      .sort_by { |e| e['order'] || 999 }
+
+    @initial_query = @examples.first["query"]
+  end
+end
+
+path = File.join(Rails.root, 'config', 'query_examples')
+GQL_EXAMPLES = GqlExamples.new(path)
 
-    }
-  }
-}
-QUERY
diff --git a/server/config/query_examples/accepted_evidence.yml b/server/config/query_examples/accepted_evidence.yml
@@ -0,0 +1,60 @@
+name: Accepted Evidence
+description: Get only Accepted Evidence Items in CIViC
+order: 0
+query: |
+  # Below is an example of fetching a page of accepted Evidence Items using the GraphQL API.
+  # You can press the "Play >" button to run the query and see the response. Note how the structure mirrors the fields requested in the query.
+  # Clicking the Docs icon to the left will allow you to explore the schema including all available queries and the fields you can request on them.
+  #
+  # The GraphiQL environment will offer autocompletion and validation as you experient with what's possible.
+  #
+  {  
+    evidenceItems(status: ACCEPTED, first: 25) {
+      totalCount  #Total Count of EIDs matching the criteria
+      pageInfo {
+        endCursor  #Cursor for the last item in the response. You can pass this to "after" to get the next page.
+        hasNextPage #Is there a page after this one?
+      }
+      nodes {
+        id
+        status
+        molecularProfile {
+          id
+          name
+          link
+        }
+        evidenceType
+        evidenceLevel
+        evidenceRating
+        evidenceDirection
+        phenotypes {
+          id
+          hpoId
+          name
+        }
+        description
+        disease {
+          id
+          doid
+          name
+          diseaseAliases
+          displayName
+        }
+        therapies {
+          id
+          ncitId
+          name
+          therapyAliases
+        }
+        source {
+          ascoAbstractId
+          citationId
+          pmcId
+          sourceType
+          title
+        }
+        therapyInteractionType
+
+      }
+    }
+  }
diff --git a/server/config/query_examples/evidence_counts.yml b/server/config/query_examples/evidence_counts.yml
@@ -0,0 +1,25 @@
+name: Use Allele Registry ID
+description: Query for Molecular Profiles in CIViC by using a ClinGen Allele Registry ID, fetching Evidence Item counts for each
+order: 1
+query: |
+  {
+    molecularProfiles(alleleRegistryId:"CA123643") {
+      totalCount
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+      nodes {
+        name
+        id
+        link
+        evidenceCountsByType {
+          diagnosticCount
+          predictiveCount
+          predisposingCount
+          oncogenicCount
+          functionalCount
+        }
+      }
+    }
+