enabling profiling in graphiql (diff against https://github.com/sangria-graphql/sangria-playground/blob/68382f961e002f468511d9e8a93ccb3623cb46b3/public/javascripts/app-graphiql.js)

app-graphiql.js

$(function (global) {
  /**
   * This GraphiQL example illustrates how to use some of GraphiQL's props
   * in order to enable reading and updating the URL parameters, making
   * link sharing of queries a little bit easier.
   *
   * This is only one example of this kind of feature, GraphiQL exposes
   * various React params to enable interesting integrations.
   */
  var graphiql = null
  var doProfile = false

  // Parse the search string to get url parameters.
  var search = window.location.search;
  var parameters = {};
  search.substr(1).split('&').forEach(function (entry) {
    var eq = entry.indexOf('=');
    if (eq >= 0) {
      parameters[decodeURIComponent(entry.slice(0, eq))] =
          decodeURIComponent(entry.slice(eq + 1));
    }
  });

  // if variables was provided, try to format it.
  if (parameters.variables) {
    try {
      parameters.variables =
          JSON.stringify(JSON.parse(query.variables), null, 2);
    } catch (e) {
      // Do nothing
    }
  }

  // When the query and variables string is edited, update the URL bar so
  // that it can be easily shared
  function onEditQuery(newQuery) {
    parameters.query = newQuery;
    updateURL();
  }

  function onEditVariables(newVariables) {
    parameters.variables = newVariables;
    updateURL();
  }

  function updateURL() {
    var newSearch = '?' + Object.keys(parameters).map(function (key) {
          return encodeURIComponent(key) + '=' +
              encodeURIComponent(parameters[key]);
        }).join('&');
    history.replaceState(null, null, newSearch);
  }

  // Defines a GraphQL fetcher using the fetch API.
  function graphQLFetcher(graphQLParams) {
    var res = fetch(window.location.origin + '/graphql' + (doProfile ? '?profile' : ''), {
      method: 'post',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(graphQLParams),
      credentials: 'include'
    }).then(function (response) {
      return response.text();
    }).then(function (responseBody) {
      try {
        var json = JSON.parse(responseBody);

        if (graphiql && json.extensions && json.extensions.metrics) {
          graphiql.getQueryEditor().setValue(json.extensions.metrics.query)
          delete json.extensions.metrics.query
        } else if (graphiql && json.extensions && json.extensions.formattedQuery) {
          graphiql.getQueryEditor().setValue(json.extensions.formattedQuery)
          delete json.extensions
        }

        return json
      } catch (error) {
        return responseBody;
      }
    });

    doProfile = false

    return res
  }

  function setupZoom(percent) {
    $('html > head').append($('<style>body {zoom: ' + percent + '%;}</style>'))
  }

  if (parameters['zoom']) {
    setupZoom(parameters['zoom'])
  }

  if (parameters["hideVariables"]) {
    $('html > head').append($('<style>.variable-editor {display: none !important}</style>'))
  }

  function onProfile () {
    if (graphiql) {
      doProfile = true
      graphiql._runQueryAtCursor()
    }
  }

  global.renderGraphiql = function (elem) {
    // Render <GraphiQL /> into the body.
    ReactDOM.render(
      React.createElement(GraphiQL,
        {
          ref: function (x) {graphiql = x},
          fetcher: graphQLFetcher,
          query: parameters.query,
          variables: parameters.variables,
          response: parameters.response,
          onEditQuery: onEditQuery,
          onEditVariables: onEditVariables,
          defaultQuery:
            "# Welcome to GraphiQL\n" +
            "#\n" +
            "# GraphiQL is an in-browser IDE for writing, validating, and\n" +
            "# testing GraphQL queries.\n" +
            "#\n" +
            "# Type queries into this side of the screen, and you will\n" +
            "# see intelligent typeaheads aware of the current GraphQL type schema and\n" +
            "# live syntax and validation errors highlighted within the text.\n" +
            "#\n" +
            "# To bring up the auto-complete at any point, just press Ctrl-Space.\n" +
            "#\n" +
            "# Press the run button above, or Cmd-Enter to execute the query, and the result\n" +
            "# will appear in the pane to the right.\n\n" +
            "query HeroAndFriends {\n  hero {\n    name\n    friends {\n      name\n    }\n  }\n}"
        },
        React.createElement(GraphiQL.Toolbar, {},
          React.createElement(GraphiQL.Button, {
            onClick: function() {graphiql.handlePrettifyQuery()},
            label: "Prettify",
            title: "Prettify Query"
          }),
          React.createElement(GraphiQL.Button, {
            onClick: function() {graphiql.handleToggleHistory()},
            label: "History",
            title: "Show History"
          }),
          React.createElement(GraphiQL.Button, {
            onClick: onProfile,
            label: "Profile",
            title: "Profile Query"
          }))
      ),
      elem
    );
  }
}(window))

app-graphiql.js.patch

Index: public/javascripts/app-graphiql.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- public/javascripts/app-graphiql.js	(revision a224f76f494b91da5e7a5086ad9597459ec30108)
+++ public/javascripts/app-graphiql.js	(date 1497750030591)
@@ -7,6 +7,8 @@
    * This is only one example of this kind of feature, GraphiQL exposes
    * various React params to enable interesting integrations.
    */
+  var graphiql = null
+  var doProfile = false
 
   // Parse the search string to get url parameters.
   var search = window.location.search;
@@ -51,7 +53,7 @@
 
   // Defines a GraphQL fetcher using the fetch API.
   function graphQLFetcher(graphQLParams) {
-    return fetch(window.location.origin + '/graphql', {
+    var res = fetch(window.location.origin + '/graphql' + (doProfile ? '?profile' : ''), {
       method: 'post',
       headers: {
         'Accept': 'application/json',
@@ -63,11 +65,25 @@
       return response.text();
     }).then(function (responseBody) {
       try {
-        return JSON.parse(responseBody);
+        var json = JSON.parse(responseBody);
+
+        if (graphiql && json.extensions && json.extensions.metrics) {
+          graphiql.getQueryEditor().setValue(json.extensions.metrics.query)
+          delete json.extensions.metrics.query
+        } else if (graphiql && json.extensions && json.extensions.formattedQuery) {
+          graphiql.getQueryEditor().setValue(json.extensions.formattedQuery)
+          delete json.extensions
+        }
+
+        return json
       } catch (error) {
         return responseBody;
       }
     });
+
+    doProfile = false
+
+    return res
   }
 
   function setupZoom(percent) {
@@ -82,10 +98,19 @@
     $('html > head').append($('<style>.variable-editor {display: none !important}</style>'))
   }
 
+  function onProfile () {
+    if (graphiql) {
+      doProfile = true
+      graphiql._runQueryAtCursor()
+    }
+  }
+
   global.renderGraphiql = function (elem) {
     // Render <GraphiQL /> into the body.
     ReactDOM.render(
-        React.createElement(GraphiQL, {
+      React.createElement(GraphiQL,
+        {
+          ref: function (x) {graphiql = x},
           fetcher: graphQLFetcher,
           query: parameters.query,
           variables: parameters.variables,
@@ -107,8 +132,25 @@
             "# Press the run button above, or Cmd-Enter to execute the query, and the result\n" +
             "# will appear in the pane to the right.\n\n" +
             "query HeroAndFriends {\n  hero {\n    name\n    friends {\n      name\n    }\n  }\n}"
-        }),
-        elem
+        },
+        React.createElement(GraphiQL.Toolbar, {},
+          React.createElement(GraphiQL.Button, {
+            onClick: function() {graphiql.handlePrettifyQuery()},
+            label: "Prettify",
+            title: "Prettify Query"
+          }),
+          React.createElement(GraphiQL.Button, {
+            onClick: function() {graphiql.handleToggleHistory()},
+            label: "History",
+            title: "Show History"
+          }),
+          React.createElement(GraphiQL.Button, {
+            onClick: onProfile,
+            label: "Profile",
+            title: "Profile Query"
+          }))
+      ),
+      elem
     );
   }
 }(window))