graphiql-explorer/graphiqlExplorer.js

Interactive explorer plugin for GraphiQL.

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.GraphiQLExplorer = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
(function (global){(function (){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

exports.defaultValue = defaultValue;

var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);

var React = _interopRequireWildcard(_react);

var _graphql = require('graphql');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// TODO: 1. Add default fields recursively
// TODO: 2. Add default fields for all selections (not just fragments)
// TODO: 3. Add stylesheet and remove inline styles
// TODO: 4. Indication of when query in explorer diverges from query in editor pane
// TODO: 5. Separate section for deprecated args, with support for 'beta' fields
// TODO: 6. Custom default arg fields

// Note: Attempted 1. and 2., but they were more annoying than helpful

function capitalize(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

// Names match class names in graphiql app.css
// https://github.com/graphql/graphiql/blob/master/packages/graphiql/css/app.css
var defaultColors = {
  keyword: '#B11A04',
  // OperationName, FragmentName
  def: '#D2054E',
  // FieldName
  property: '#1F61A0',
  // FieldAlias
  qualifier: '#1C92A9',
  // ArgumentName and ObjectFieldName
  attribute: '#8B2BB9',
  number: '#2882F9',
  string: '#D64292',
  // Boolean
  builtin: '#D47509',
  // Enum
  string2: '#0B7FC7',
  variable: '#397D13',
  // Type
  atom: '#CA9800'
};

var defaultArrowOpen = React.createElement(
  'svg',
  { width: '12', height: '9' },
  React.createElement('path', { fill: '#666', d: 'M 0 2 L 9 2 L 4.5 7.5 z' })
);

var defaultArrowClosed = React.createElement(
  'svg',
  { width: '12', height: '9' },
  React.createElement('path', { fill: '#666', d: 'M 0 0 L 0 9 L 5.5 4.5 z' })
);

var defaultCheckboxChecked = React.createElement(
  'svg',
  {
    style: { marginRight: '3px', marginLeft: '-3px' },
    width: '12',
    height: '12',
    viewBox: '0 0 18 18',
    fill: 'none',
    xmlns: 'http://www.w3.org/2000/svg' },
  React.createElement('path', {
    d: 'M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM16 16H2V2H16V16ZM14.99 6L13.58 4.58L6.99 11.17L4.41 8.6L2.99 10.01L6.99 14L14.99 6Z',
    fill: '#666'
  })
);

var defaultCheckboxUnchecked = React.createElement(
  'svg',
  {
    style: { marginRight: '3px', marginLeft: '-3px' },
    width: '12',
    height: '12',
    viewBox: '0 0 18 18',
    fill: 'none',
    xmlns: 'http://www.w3.org/2000/svg' },
  React.createElement('path', {
    d: 'M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z',
    fill: '#CCC'
  })
);

function Checkbox(props) {
  return props.checked ? props.styleConfig.checkboxChecked : props.styleConfig.checkboxUnchecked;
}

function defaultGetDefaultFieldNames(type) {
  var fields = type.getFields();

  // Is there an `id` field?
  if (fields['id']) {
    var res = ['id'];
    if (fields['email']) {
      res.push('email');
    } else if (fields['name']) {
      res.push('name');
    }
    return res;
  }

  // Is there an `edges` field?
  if (fields['edges']) {
    return ['edges'];
  }

  // Is there an `node` field?
  if (fields['node']) {
    return ['node'];
  }

  if (fields['nodes']) {
    return ['nodes'];
  }

  // Include all leaf-type fields.
  var leafFieldNames = [];
  Object.keys(fields).forEach(function (fieldName) {
    if ((0, _graphql.isLeafType)(fields[fieldName].type)) {
      leafFieldNames.push(fieldName);
    }
  });

  if (!leafFieldNames.length) {
    // No leaf fields, add typename so that the query stays valid
    return ['__typename'];
  }
  return leafFieldNames.slice(0, 2); // Prevent too many fields from being added
}

function isRequiredArgument(arg) {
  return (0, _graphql.isNonNullType)(arg.type) && arg.defaultValue === undefined;
}

function unwrapOutputType(outputType) {
  var unwrappedType = outputType;
  while ((0, _graphql.isWrappingType)(unwrappedType)) {
    unwrappedType = unwrappedType.ofType;
  }
  return unwrappedType;
}

function unwrapInputType(inputType) {
  var unwrappedType = inputType;
  while ((0, _graphql.isWrappingType)(unwrappedType)) {
    unwrappedType = unwrappedType.ofType;
  }
  return unwrappedType;
}

function coerceArgValue(argType, value) {
  // Handle the case where we're setting a variable as the value
  if (typeof value !== 'string' && value.kind === 'VariableDefinition') {
    return value.variable;
  } else if ((0, _graphql.isScalarType)(argType)) {
    try {
      switch (argType.name) {
        case 'String':
          return {
            kind: 'StringValue',
            value: String(argType.parseValue(value))
          };
        case 'Float':
          return {
            kind: 'FloatValue',
            value: String(argType.parseValue(parseFloat(value)))
          };
        case 'Int':
          return {
            kind: 'IntValue',
            value: String(argType.parseValue(parseInt(value, 10)))
          };
        case 'Boolean':
          try {
            var parsed = JSON.parse(value);
            if (typeof parsed === 'boolean') {
              return { kind: 'BooleanValue', value: parsed };
            } else {
              return { kind: 'BooleanValue', value: false };
            }
          } catch (e) {
            return {
              kind: 'BooleanValue',
              value: false
            };
          }
        default:
          return {
            kind: 'StringValue',
            value: String(argType.parseValue(value))
          };
      }
    } catch (e) {
      console.error('error coercing arg value', e, value);
      return { kind: 'StringValue', value: value };
    }
  } else {
    try {
      var parsedValue = argType.parseValue(value);
      if (parsedValue) {
        return { kind: 'EnumValue', value: String(parsedValue) };
      } else {
        return { kind: 'EnumValue', value: argType.getValues()[0].name };
      }
    } catch (e) {
      return { kind: 'EnumValue', value: argType.getValues()[0].name };
    }
  }
}

var InputArgView = function (_React$PureComponent) {
  _inherits(InputArgView, _React$PureComponent);

  function InputArgView() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, InputArgView);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = InputArgView.__proto__ || Object.getPrototypeOf(InputArgView)).call.apply(_ref, [this].concat(args))), _this), _this._getArgSelection = function () {
      return _this.props.selection.fields.find(function (field) {
        return field.name.value === _this.props.arg.name;
      });
    }, _this._removeArg = function () {
      var selection = _this.props.selection;

      var argSelection = _this._getArgSelection();
      _this._previousArgSelection = argSelection;
      _this.props.modifyFields(selection.fields.filter(function (field) {
        return field !== argSelection;
      }), true);
    }, _this._addArg = function () {
      var _this$props = _this.props,
          selection = _this$props.selection,
          arg = _this$props.arg,
          getDefaultScalarArgValue = _this$props.getDefaultScalarArgValue,
          parentField = _this$props.parentField,
          makeDefaultArg = _this$props.makeDefaultArg;

      var argType = unwrapInputType(arg.type);

      var argSelection = null;
      if (_this._previousArgSelection) {
        argSelection = _this._previousArgSelection;
      } else if ((0, _graphql.isInputObjectType)(argType)) {
        var _fields = argType.getFields();
        argSelection = {
          kind: 'ObjectField',
          name: { kind: 'Name', value: arg.name },
          value: {
            kind: 'ObjectValue',
            fields: defaultInputObjectFields(getDefaultScalarArgValue, makeDefaultArg, parentField, Object.keys(_fields).map(function (k) {
              return _fields[k];
            }))
          }
        };
      } else if ((0, _graphql.isLeafType)(argType)) {
        argSelection = {
          kind: 'ObjectField',
          name: { kind: 'Name', value: arg.name },
          value: getDefaultScalarArgValue(parentField, arg, argType)
        };
      }

      if (!argSelection) {
        console.error('Unable to add arg for argType', argType);
      } else {
        return _this.props.modifyFields([].concat(_toConsumableArray(selection.fields || []), [argSelection]), true);
      }
    }, _this._setArgValue = function (event, options) {
      var settingToNull = false;
      var settingToVariable = false;
      var settingToLiteralValue = false;
      try {
        if (event.kind === 'VariableDefinition') {
          settingToVariable = true;
        } else if (event === null || typeof event === 'undefined') {
          settingToNull = true;
        } else if (typeof event.kind === 'string') {
          settingToLiteralValue = true;
        }
      } catch (e) {}

      var selection = _this.props.selection;


      var argSelection = _this._getArgSelection();

      if (!argSelection) {
        console.error('missing arg selection when setting arg value');
        return;
      }
      var argType = unwrapInputType(_this.props.arg.type);

      var handleable = (0, _graphql.isLeafType)(argType) || settingToVariable || settingToNull || settingToLiteralValue;

      if (!handleable) {
        console.warn('Unable to handle non leaf types in InputArgView.setArgValue', event);
        return;
      }
      var targetValue = void 0;
      var value = void 0;

      if (event === null || typeof event === 'undefined') {
        value = null;
      } else if (!event.target && !!event.kind && event.kind === 'VariableDefinition') {
        targetValue = event;
        value = targetValue.variable;
      } else if (typeof event.kind === 'string') {
        value = event;
      } else if (event.target && typeof event.target.value === 'string') {
        targetValue = event.target.value;
        value = coerceArgValue(argType, targetValue);
      }

      var newDoc = _this.props.modifyFields((selection.fields || []).map(function (field) {
        var isTarget = field === argSelection;
        var newField = isTarget ? _extends({}, field, {
          value: value
        }) : field;

        return newField;
      }), options);

      return newDoc;
    }, _this._modifyChildFields = function (fields) {
      return _this.props.modifyFields(_this.props.selection.fields.map(function (field) {
        return field.name.value === _this.props.arg.name ? _extends({}, field, {
          value: {
            kind: 'ObjectValue',
            fields: fields
          }
        }) : field;
      }), true);
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(InputArgView, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          arg = _props.arg,
          parentField = _props.parentField;

      var argSelection = this._getArgSelection();

      return React.createElement(AbstractArgView, {
        argValue: argSelection ? argSelection.value : null,
        arg: arg,
        parentField: parentField,
        addArg: this._addArg,
        removeArg: this._removeArg,
        setArgFields: this._modifyChildFields,
        setArgValue: this._setArgValue,
        getDefaultScalarArgValue: this.props.getDefaultScalarArgValue,
        makeDefaultArg: this.props.makeDefaultArg,
        onRunOperation: this.props.onRunOperation,
        styleConfig: this.props.styleConfig,
        onCommit: this.props.onCommit,
        definition: this.props.definition
      });
    }
  }]);

  return InputArgView;
}(React.PureComponent);

function defaultValue(argType) {
  if ((0, _graphql.isEnumType)(argType)) {
    return { kind: 'EnumValue', value: argType.getValues()[0].name };
  } else {
    switch (argType.name) {
      case 'String':
        return { kind: 'StringValue', value: '' };
      case 'Float':
        return { kind: 'FloatValue', value: '1.5' };
      case 'Int':
        return { kind: 'IntValue', value: '10' };
      case 'Boolean':
        return { kind: 'BooleanValue', value: false };
      default:
        return { kind: 'StringValue', value: '' };
    }
  }
}

function defaultGetDefaultScalarArgValue(parentField, arg, argType) {
  return defaultValue(argType);
}

var ArgView = function (_React$PureComponent2) {
  _inherits(ArgView, _React$PureComponent2);

  function ArgView() {
    var _ref2;

    var _temp2, _this2, _ret2;

    _classCallCheck(this, ArgView);

    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    return _ret2 = (_temp2 = (_this2 = _possibleConstructorReturn(this, (_ref2 = ArgView.__proto__ || Object.getPrototypeOf(ArgView)).call.apply(_ref2, [this].concat(args))), _this2), _this2._getArgSelection = function () {
      var selection = _this2.props.selection;


      return (selection.arguments || []).find(function (arg) {
        return arg.name.value === _this2.props.arg.name;
      });
    }, _this2._removeArg = function (commit) {
      var selection = _this2.props.selection;

      var argSelection = _this2._getArgSelection();
      _this2._previousArgSelection = argSelection;
      return _this2.props.modifyArguments((selection.arguments || []).filter(function (arg) {
        return arg !== argSelection;
      }), commit);
    }, _this2._addArg = function (commit) {
      var _this2$props = _this2.props,
          selection = _this2$props.selection,
          getDefaultScalarArgValue = _this2$props.getDefaultScalarArgValue,
          makeDefaultArg = _this2$props.makeDefaultArg,
          parentField = _this2$props.parentField,
          arg = _this2$props.arg;

      var argType = unwrapInputType(arg.type);

      var argSelection = null;
      if (_this2._previousArgSelection) {
        argSelection = _this2._previousArgSelection;
      } else if ((0, _graphql.isInputObjectType)(argType)) {
        var _fields2 = argType.getFields();
        argSelection = {
          kind: 'Argument',
          name: { kind: 'Name', value: arg.name },
          value: {
            kind: 'ObjectValue',
            fields: defaultInputObjectFields(getDefaultScalarArgValue, makeDefaultArg, parentField, Object.keys(_fields2).map(function (k) {
              return _fields2[k];
            }))
          }
        };
      } else if ((0, _graphql.isLeafType)(argType)) {
        argSelection = {
          kind: 'Argument',
          name: { kind: 'Name', value: arg.name },
          value: getDefaultScalarArgValue(parentField, arg, argType)
        };
      }

      if (!argSelection) {
        console.error('Unable to add arg for argType', argType);
        return null;
      } else {
        return _this2.props.modifyArguments([].concat(_toConsumableArray(selection.arguments || []), [argSelection]), commit);
      }
    }, _this2._setArgValue = function (event, options) {
      var settingToNull = false;
      var settingToVariable = false;
      var settingToLiteralValue = false;
      try {
        if (event.kind === 'VariableDefinition') {
          settingToVariable = true;
        } else if (event === null || typeof event === 'undefined') {
          settingToNull = true;
        } else if (typeof event.kind === 'string') {
          settingToLiteralValue = true;
        }
      } catch (e) {}
      var selection = _this2.props.selection;

      var argSelection = _this2._getArgSelection();
      if (!argSelection && !settingToVariable) {
        console.error('missing arg selection when setting arg value');
        return;
      }
      var argType = unwrapInputType(_this2.props.arg.type);

      var handleable = (0, _graphql.isLeafType)(argType) || settingToVariable || settingToNull || settingToLiteralValue;

      if (!handleable) {
        console.warn('Unable to handle non leaf types in ArgView._setArgValue');
        return;
      }

      var targetValue = void 0;
      var value = void 0;

      if (event === null || typeof event === 'undefined') {
        value = null;
      } else if (event.target && typeof event.target.value === 'string') {
        targetValue = event.target.value;
        value = coerceArgValue(argType, targetValue);
      } else if (!event.target && event.kind === 'VariableDefinition') {
        targetValue = event;
        value = targetValue.variable;
      } else if (typeof event.kind === 'string') {
        value = event;
      }

      return _this2.props.modifyArguments((selection.arguments || []).map(function (a) {
        return a === argSelection ? _extends({}, a, {
          value: value
        }) : a;
      }), options);
    }, _this2._setArgFields = function (fields, commit) {
      var selection = _this2.props.selection;

      var argSelection = _this2._getArgSelection();
      if (!argSelection) {
        console.error('missing arg selection when setting arg value');
        return;
      }

      return _this2.props.modifyArguments((selection.arguments || []).map(function (a) {
        return a === argSelection ? _extends({}, a, {
          value: {
            kind: 'ObjectValue',
            fields: fields
          }
        }) : a;
      }), commit);
    }, _temp2), _possibleConstructorReturn(_this2, _ret2);
  }

  _createClass(ArgView, [{
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          arg = _props2.arg,
          parentField = _props2.parentField;

      var argSelection = this._getArgSelection();

      return React.createElement(AbstractArgView, {
        argValue: argSelection ? argSelection.value : null,
        arg: arg,
        parentField: parentField,
        addArg: this._addArg,
        removeArg: this._removeArg,
        setArgFields: this._setArgFields,
        setArgValue: this._setArgValue,
        getDefaultScalarArgValue: this.props.getDefaultScalarArgValue,
        makeDefaultArg: this.props.makeDefaultArg,
        onRunOperation: this.props.onRunOperation,
        styleConfig: this.props.styleConfig,
        onCommit: this.props.onCommit,
        definition: this.props.definition
      });
    }
  }]);

  return ArgView;
}(React.PureComponent);

function isRunShortcut(event) {
  return event.ctrlKey && event.key === 'Enter';
}

function canRunOperation(operationName) {
  // it does not make sense to try to execute a fragment
  return operationName !== 'FragmentDefinition';
}

var ScalarInput = function (_React$PureComponent3) {
  _inherits(ScalarInput, _React$PureComponent3);

  function ScalarInput() {
    var _ref3;

    var _temp3, _this3, _ret3;

    _classCallCheck(this, ScalarInput);

    for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
      args[_key3] = arguments[_key3];
    }

    return _ret3 = (_temp3 = (_this3 = _possibleConstructorReturn(this, (_ref3 = ScalarInput.__proto__ || Object.getPrototypeOf(ScalarInput)).call.apply(_ref3, [this].concat(args))), _this3), _this3._handleChange = function (event) {
      _this3.props.setArgValue(event, true);
    }, _temp3), _possibleConstructorReturn(_this3, _ret3);
  }

  _createClass(ScalarInput, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var input = this._ref;
      var activeElement = document.activeElement;
      if (input && activeElement && !(activeElement instanceof HTMLTextAreaElement)) {
        input.focus();
        input.setSelectionRange(0, input.value.length);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _props3 = this.props,
          arg = _props3.arg,
          argValue = _props3.argValue,
          styleConfig = _props3.styleConfig;

      var argType = unwrapInputType(arg.type);
      var value = typeof argValue.value === 'string' ? argValue.value : '';
      var color = this.props.argValue.kind === 'StringValue' ? styleConfig.colors.string : styleConfig.colors.number;
      return React.createElement(
        'span',
        { style: { color: color } },
        argType.name === 'String' ? '"' : '',
        React.createElement('input', {
          style: {
            border: 'none',
            borderBottom: '1px solid #888',
            outline: 'none',
            width: Math.max(1, Math.min(15, value.length)) + 'ch',
            color: color
          },
          ref: function ref(_ref4) {
            _this4._ref = _ref4;
          },
          type: 'text',
          onChange: this._handleChange,
          value: value
        }),
        argType.name === 'String' ? '"' : ''
      );
    }
  }]);

  return ScalarInput;
}(React.PureComponent);

var AbstractArgView = function (_React$PureComponent4) {
  _inherits(AbstractArgView, _React$PureComponent4);

  function AbstractArgView() {
    var _ref5;

    var _temp4, _this5, _ret4;

    _classCallCheck(this, AbstractArgView);

    for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
      args[_key4] = arguments[_key4];
    }

    return _ret4 = (_temp4 = (_this5 = _possibleConstructorReturn(this, (_ref5 = AbstractArgView.__proto__ || Object.getPrototypeOf(AbstractArgView)).call.apply(_ref5, [this].concat(args))), _this5), _this5.state = { displayArgActions: false }, _temp4), _possibleConstructorReturn(_this5, _ret4);
  }

  _createClass(AbstractArgView, [{
    key: 'render',
    value: function render() {
      var _this6 = this;

      var _props4 = this.props,
          argValue = _props4.argValue,
          arg = _props4.arg,
          styleConfig = _props4.styleConfig;
      /* TODO: handle List types*/

      var argType = unwrapInputType(arg.type);

      var input = null;
      if (argValue) {
        if (argValue.kind === 'Variable') {
          input = React.createElement(
            'span',
            { style: { color: styleConfig.colors.variable } },
            '$',
            argValue.name.value
          );
        } else if ((0, _graphql.isScalarType)(argType)) {
          if (argType.name === 'Boolean') {
            input = React.createElement(
              'select',
              {
                style: {
                  color: styleConfig.colors.builtin
                },
                onChange: this.props.setArgValue,
                value: argValue.kind === 'BooleanValue' ? argValue.value : undefined },
              React.createElement(
                'option',
                { key: 'true', value: 'true' },
                'true'
              ),
              React.createElement(
                'option',
                { key: 'false', value: 'false' },
                'false'
              )
            );
          } else {
            input = React.createElement(ScalarInput, {
              setArgValue: this.props.setArgValue,
              arg: arg,
              argValue: argValue,
              onRunOperation: this.props.onRunOperation,
              styleConfig: this.props.styleConfig
            });
          }
        } else if ((0, _graphql.isEnumType)(argType)) {
          if (argValue.kind === 'EnumValue') {
            input = React.createElement(
              'select',
              {
                style: {
                  backgroundColor: 'white',
                  color: styleConfig.colors.string2
                },
                onChange: this.props.setArgValue,
                value: argValue.value },
              argType.getValues().map(function (value) {
                return React.createElement(
                  'option',
                  { key: value.name, value: value.name },
                  value.name
                );
              })
            );
          } else {
            console.error('arg mismatch between arg and selection', argType, argValue);
          }
        } else if ((0, _graphql.isInputObjectType)(argType)) {
          if (argValue.kind === 'ObjectValue') {
            var _fields3 = argType.getFields();
            input = React.createElement(
              'div',
              { style: { marginLeft: 16 } },
              Object.keys(_fields3).sort().map(function (fieldName) {
                return React.createElement(InputArgView, {
                  key: fieldName,
                  arg: _fields3[fieldName],
                  parentField: _this6.props.parentField,
                  selection: argValue,
                  modifyFields: _this6.props.setArgFields,
                  getDefaultScalarArgValue: _this6.props.getDefaultScalarArgValue,
                  makeDefaultArg: _this6.props.makeDefaultArg,
                  onRunOperation: _this6.props.onRunOperation,
                  styleConfig: _this6.props.styleConfig,
                  onCommit: _this6.props.onCommit,
                  definition: _this6.props.definition
                });
              })
            );
          } else {
            console.error('arg mismatch between arg and selection', argType, argValue);
          }
        }
      }

      var variablize = function variablize() {
        /**
        1. Find current operation variables
        2. Find current arg value
        3. Create a new variable
        4. Replace current arg value with variable
        5. Add variable to operation
        */

        var baseVariableName = arg.name;
        var conflictingNameCount = (_this6.props.definition.variableDefinitions || []).filter(function (varDef) {
          return varDef.variable.name.value.startsWith(baseVariableName);
        }).length;

        var variableName = void 0;
        if (conflictingNameCount > 0) {
          variableName = '' + baseVariableName + conflictingNameCount;
        } else {
          variableName = baseVariableName;
        }
        // To get an AST definition of our variable from the instantiated arg,
        // we print it to a string, then parseType to get our AST.
        var argPrintedType = arg.type.toString();
        var argType = (0, _graphql.parseType)(argPrintedType);

        var base = {
          kind: 'VariableDefinition',
          variable: {
            kind: 'Variable',
            name: {
              kind: 'Name',
              value: variableName
            }
          },
          type: argType,
          directives: []
        };

        var variableDefinitionByName = function variableDefinitionByName(name) {
          return (_this6.props.definition.variableDefinitions || []).find(function (varDef) {
            return varDef.variable.name.value === name;
          });
        };

        var variable = void 0;

        var subVariableUsageCountByName = {};

        if (typeof argValue !== 'undefined' && argValue !== null) {
          /** In the process of devariabilizing descendent selections,
           * we may have caused their variable definitions to become unused.
           * Keep track and remove any variable definitions with 1 or fewer usages.
           * */
          var cleanedDefaultValue = (0, _graphql.visit)(argValue, {
            Variable: function Variable(node) {
              var varName = node.name.value;
              var varDef = variableDefinitionByName(varName);

              subVariableUsageCountByName[varName] = subVariableUsageCountByName[varName] + 1 || 1;

              if (!varDef) {
                return;
              }

              return varDef.defaultValue;
            }
          });

          var isNonNullable = base.type.kind === 'NonNullType';

          // We're going to give the variable definition a default value, so we must make its type nullable
          var unwrappedBase = isNonNullable ? _extends({}, base, { type: base.type.type }) : base;

          variable = _extends({}, unwrappedBase, { defaultValue: cleanedDefaultValue });
        } else {
          variable = base;
        }

        var newlyUnusedVariables = Object.entries(subVariableUsageCountByName)
        // $FlowFixMe: Can't get Object.entries to realize usageCount *must* be a number
        .filter(function (_ref6) {
          var _ref7 = _slicedToArray(_ref6, 2),
              _ = _ref7[0],
              usageCount = _ref7[1];

          return usageCount < 2;
        }).map(function (_ref8) {
          var _ref9 = _slicedToArray(_ref8, 2),
              varName = _ref9[0],
              _ = _ref9[1];

          return varName;
        });

        if (variable) {
          var _newDoc = _this6.props.setArgValue(variable, false);

          if (_newDoc) {
            var targetOperation = _newDoc.definitions.find(function (definition) {
              if (!!definition.operation && !!definition.name && !!definition.name.value &&
              //
              !!_this6.props.definition.name && !!_this6.props.definition.name.value) {
                return definition.name.value === _this6.props.definition.name.value;
              } else {
                return false;
              }
            });

            var newVariableDefinitions = [].concat(_toConsumableArray(targetOperation.variableDefinitions || []), [variable]).filter(function (varDef) {
              return newlyUnusedVariables.indexOf(varDef.variable.name.value) === -1;
            });

            var newOperation = _extends({}, targetOperation, {
              variableDefinitions: newVariableDefinitions
            });

            var existingDefs = _newDoc.definitions;

            var newDefinitions = existingDefs.map(function (existingOperation) {
              if (targetOperation === existingOperation) {
                return newOperation;
              } else {
                return existingOperation;
              }
            });

            var finalDoc = _extends({}, _newDoc, {
              definitions: newDefinitions
            });

            _this6.props.onCommit(finalDoc);
          }
        }
      };

      var devariablize = function devariablize() {
        /**
         * 1. Find the current variable definition in the operation def
         * 2. Extract its value
         * 3. Replace the current arg value
         * 4. Visit the resulting operation to see if there are any other usages of the variable
         * 5. If not, remove the variableDefinition
         */
        if (!argValue || !argValue.name || !argValue.name.value) {
          return;
        }

        var variableName = argValue.name.value;
        var variableDefinition = (_this6.props.definition.variableDefinitions || []).find(function (varDef) {
          return varDef.variable.name.value === variableName;
        });

        if (!variableDefinition) {
          return;
        }

        var defaultValue = variableDefinition.defaultValue;

        var newDoc = _this6.props.setArgValue(defaultValue, {
          commit: false
        });

        if (newDoc) {
          var targetOperation = newDoc.definitions.find(function (definition) {
            return definition.name.value === _this6.props.definition.name.value;
          });

          if (!targetOperation) {
            return;
          }

          // After de-variabilizing, see if the variable is still in use. If not, remove it.
          var variableUseCount = 0;

          (0, _graphql.visit)(targetOperation, {
            Variable: function Variable(node) {
              if (node.name.value === variableName) {
                variableUseCount = variableUseCount + 1;
              }
            }
          });

          var newVariableDefinitions = targetOperation.variableDefinitions || [];

          // A variable is in use if it shows up at least twice (once in the definition, once in the selection)
          if (variableUseCount < 2) {
            newVariableDefinitions = newVariableDefinitions.filter(function (varDef) {
              return varDef.variable.name.value !== variableName;
            });
          }

          var newOperation = _extends({}, targetOperation, {
            variableDefinitions: newVariableDefinitions
          });

          var existingDefs = newDoc.definitions;

          var newDefinitions = existingDefs.map(function (existingOperation) {
            if (targetOperation === existingOperation) {
              return newOperation;
            } else {
              return existingOperation;
            }
          });

          var finalDoc = _extends({}, newDoc, {
            definitions: newDefinitions
          });

          _this6.props.onCommit(finalDoc);
        }
      };

      var isArgValueVariable = argValue && argValue.kind === 'Variable';

      var variablizeActionButton = !this.state.displayArgActions ? null : React.createElement(
        'button',
        {
          type: 'submit',
          className: 'toolbar-button',
          title: isArgValueVariable ? 'Remove the variable' : 'Extract the current value into a GraphQL variable',
          onClick: function onClick(event) {
            event.preventDefault();
            event.stopPropagation();

            if (isArgValueVariable) {
              devariablize();
            } else {
              variablize();
            }
          },
          style: styleConfig.styles.actionButtonStyle },
        React.createElement(
          'span',
          { style: { color: styleConfig.colors.variable } },
          '$'
        )
      );

      return React.createElement(
        'div',
        {
          style: {
            cursor: 'pointer',
            minHeight: '16px',
            WebkitUserSelect: 'none',
            userSelect: 'none'
          },
          'data-arg-name': arg.name,
          'data-arg-type': argType.name,
          className: 'graphiql-explorer-' + arg.name },
        React.createElement(
          'span',
          {
            style: { cursor: 'pointer' },
            onClick: function onClick(event) {
              var shouldAdd = !argValue;
              if (shouldAdd) {
                _this6.props.addArg(true);
              } else {
                _this6.props.removeArg(true);
              }
              _this6.setState({ displayArgActions: shouldAdd });
            } },
          (0, _graphql.isInputObjectType)(argType) ? React.createElement(
            'span',
            null,
            !!argValue ? this.props.styleConfig.arrowOpen : this.props.styleConfig.arrowClosed
          ) : React.createElement(Checkbox, {
            checked: !!argValue,
            styleConfig: this.props.styleConfig
          }),
          React.createElement(
            'span',
            {
              style: { color: styleConfig.colors.attribute },
              title: arg.description,
              onMouseEnter: function onMouseEnter() {
                // Make implementation a bit easier and only show 'variablize' action if arg is already added
                if (argValue !== null && typeof argValue !== 'undefined') {
                  _this6.setState({ displayArgActions: true });
                }
              },
              onMouseLeave: function onMouseLeave() {
                return _this6.setState({ displayArgActions: false });
              } },
            arg.name,
            isRequiredArgument(arg) ? '*' : '',
            ': ',
            variablizeActionButton,
            ' '
          ),
          ' '
        ),
        input || React.createElement('span', null),
        ' '
      );
    }
  }]);

  return AbstractArgView;
}(React.PureComponent);

var AbstractView = function (_React$PureComponent5) {
  _inherits(AbstractView, _React$PureComponent5);

  function AbstractView() {
    var _ref10;

    var _temp5, _this7, _ret5;

    _classCallCheck(this, AbstractView);

    for (var _len5 = arguments.length, args = Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
      args[_key5] = arguments[_key5];
    }

    return _ret5 = (_temp5 = (_this7 = _possibleConstructorReturn(this, (_ref10 = AbstractView.__proto__ || Object.getPrototypeOf(AbstractView)).call.apply(_ref10, [this].concat(args))), _this7), _this7._addFragment = function () {
      _this7.props.modifySelections([].concat(_toConsumableArray(_this7.props.selections), [_this7._previousSelection || {
        kind: 'InlineFragment',
        typeCondition: {
          kind: 'NamedType',
          name: { kind: 'Name', value: _this7.props.implementingType.name }
        },
        selectionSet: {
          kind: 'SelectionSet',
          selections: _this7.props.getDefaultFieldNames(_this7.props.implementingType).map(function (fieldName) {
            return {
              kind: 'Field',
              name: { kind: 'Name', value: fieldName }
            };
          })
        }
      }]));
    }, _this7._removeFragment = function () {
      var thisSelection = _this7._getSelection();
      _this7._previousSelection = thisSelection;
      _this7.props.modifySelections(_this7.props.selections.filter(function (s) {
        return s !== thisSelection;
      }));
    }, _this7._getSelection = function () {
      var selection = _this7.props.selections.find(function (selection) {
        return selection.kind === 'InlineFragment' && selection.typeCondition && _this7.props.implementingType.name === selection.typeCondition.name.value;
      });
      if (!selection) {
        return null;
      }
      if (selection.kind === 'InlineFragment') {
        return selection;
      }
    }, _this7._modifyChildSelections = function (selections, options) {
      var thisSelection = _this7._getSelection();
      return _this7.props.modifySelections(_this7.props.selections.map(function (selection) {
        if (selection === thisSelection) {
          return {
            directives: selection.directives,
            kind: 'InlineFragment',
            typeCondition: {
              kind: 'NamedType',
              name: { kind: 'Name', value: _this7.props.implementingType.name }
            },
            selectionSet: {
              kind: 'SelectionSet',
              selections: selections
            }
          };
        }
        return selection;
      }), options);
    }, _temp5), _possibleConstructorReturn(_this7, _ret5);
  }

  _createClass(AbstractView, [{
    key: 'render',
    value: function render() {
      var _this8 = this;

      var _props5 = this.props,
          implementingType = _props5.implementingType,
          schema = _props5.schema,
          getDefaultFieldNames = _props5.getDefaultFieldNames,
          styleConfig = _props5.styleConfig;

      var selection = this._getSelection();
      var fields = implementingType.getFields();
      var childSelections = selection ? selection.selectionSet ? selection.selectionSet.selections : [] : [];

      return React.createElement(
        'div',
        { className: 'graphiql-explorer-' + implementingType.name },
        React.createElement(
          'span',
          {
            style: { cursor: 'pointer' },
            onClick: selection ? this._removeFragment : this._addFragment },
          React.createElement(Checkbox, {
            checked: !!selection,
            styleConfig: this.props.styleConfig
          }),
          React.createElement(
            'span',
            { style: { color: styleConfig.colors.atom } },
            this.props.implementingType.name
          )
        ),
        selection ? React.createElement(
          'div',
          { style: { marginLeft: 16 } },
          Object.keys(fields).sort().map(function (fieldName) {
            return React.createElement(FieldView, {
              key: fieldName,
              field: fields[fieldName],
              selections: childSelections,
              modifySelections: _this8._modifyChildSelections,
              schema: schema,
              getDefaultFieldNames: getDefaultFieldNames,
              getDefaultScalarArgValue: _this8.props.getDefaultScalarArgValue,
              makeDefaultArg: _this8.props.makeDefaultArg,
              onRunOperation: _this8.props.onRunOperation,
              onCommit: _this8.props.onCommit,
              styleConfig: _this8.props.styleConfig,
              definition: _this8.props.definition,
              availableFragments: _this8.props.availableFragments
            });
          })
        ) : null
      );
    }
  }]);

  return AbstractView;
}(React.PureComponent);

var FragmentView = function (_React$PureComponent6) {
  _inherits(FragmentView, _React$PureComponent6);

  function FragmentView() {
    var _ref11;

    var _temp6, _this9, _ret6;

    _classCallCheck(this, FragmentView);

    for (var _len6 = arguments.length, args = Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
      args[_key6] = arguments[_key6];
    }

    return _ret6 = (_temp6 = (_this9 = _possibleConstructorReturn(this, (_ref11 = FragmentView.__proto__ || Object.getPrototypeOf(FragmentView)).call.apply(_ref11, [this].concat(args))), _this9), _this9._addFragment = function () {
      _this9.props.modifySelections([].concat(_toConsumableArray(_this9.props.selections), [_this9._previousSelection || {
        kind: 'FragmentSpread',
        name: _this9.props.fragment.name
      }]));
    }, _this9._removeFragment = function () {
      var thisSelection = _this9._getSelection();
      _this9._previousSelection = thisSelection;
      _this9.props.modifySelections(_this9.props.selections.filter(function (s) {
        var isTargetSelection = s.kind === 'FragmentSpread' && s.name.value === _this9.props.fragment.name.value;

        return !isTargetSelection;
      }));
    }, _this9._getSelection = function () {
      var selection = _this9.props.selections.find(function (selection) {
        return selection.kind === 'FragmentSpread' && selection.name.value === _this9.props.fragment.name.value;
      });

      return selection;
    }, _temp6), _possibleConstructorReturn(_this9, _ret6);
  }

  _createClass(FragmentView, [{
    key: 'render',
    value: function render() {
      var styleConfig = this.props.styleConfig;

      var selection = this._getSelection();
      return React.createElement(
        'div',
        { className: 'graphiql-explorer-' + this.props.fragment.name.value },
        React.createElement(
          'span',
          {
            style: { cursor: 'pointer' },
            onClick: selection ? this._removeFragment : this._addFragment },
          React.createElement(Checkbox, {
            checked: !!selection,
            styleConfig: this.props.styleConfig
          }),
          React.createElement(
            'span',
            {
              style: { color: styleConfig.colors.def },
              className: 'graphiql-explorer-' + this.props.fragment.name.value },
            this.props.fragment.name.value
          )
        )
      );
    }
  }]);

  return FragmentView;
}(React.PureComponent);

function defaultInputObjectFields(getDefaultScalarArgValue, makeDefaultArg, parentField, fields) {
  var nodes = [];
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = fields[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var _field = _step.value;

      if ((0, _graphql.isRequiredInputField)(_field) || makeDefaultArg && makeDefaultArg(parentField, _field)) {
        var fieldType = unwrapInputType(_field.type);
        if ((0, _graphql.isInputObjectType)(fieldType)) {
          (function () {
            var fields = fieldType.getFields();
            nodes.push({
              kind: 'ObjectField',
              name: { kind: 'Name', value: _field.name },
              value: {
                kind: 'ObjectValue',
                fields: defaultInputObjectFields(getDefaultScalarArgValue, makeDefaultArg, parentField, Object.keys(fields).map(function (k) {
                  return fields[k];
                }))
              }
            });
          })();
        } else if ((0, _graphql.isLeafType)(fieldType)) {
          nodes.push({
            kind: 'ObjectField',
            name: { kind: 'Name', value: _field.name },
            value: getDefaultScalarArgValue(parentField, _field, fieldType)
          });
        }
      }
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }

  return nodes;
}

function defaultArgs(getDefaultScalarArgValue, makeDefaultArg, field) {
  var args = [];
  var _iteratorNormalCompletion2 = true;
  var _didIteratorError2 = false;
  var _iteratorError2 = undefined;

  try {
    for (var _iterator2 = field.args[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
      var _arg = _step2.value;

      if (isRequiredArgument(_arg) || makeDefaultArg && makeDefaultArg(field, _arg)) {
        var argType = unwrapInputType(_arg.type);
        if ((0, _graphql.isInputObjectType)(argType)) {
          (function () {
            var fields = argType.getFields();
            args.push({
              kind: 'Argument',
              name: { kind: 'Name', value: _arg.name },
              value: {
                kind: 'ObjectValue',
                fields: defaultInputObjectFields(getDefaultScalarArgValue, makeDefaultArg, field, Object.keys(fields).map(function (k) {
                  return fields[k];
                }))
              }
            });
          })();
        } else if ((0, _graphql.isLeafType)(argType)) {
          args.push({
            kind: 'Argument',
            name: { kind: '