Merge branch 'master' of github.com:swagger-api/swagger-ui into ft/oas3

2017-07-28 19:13:24 -07:00
parent 2173900c82 81bb7dafd2
commit f7018bc78f
75 changed files with 1196 additions and 1030 deletions
--- a/src/core/components/array-model.jsx
+++ b/src/core/components/array-model.jsx
@@ -0,0 +1,47 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+const propStyle = { color: "#999", fontStyle: "italic" }
+
+export default class ArrayModel extends Component {
+  static propTypes = {
+    schema: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    required: PropTypes.bool,
+    expandDepth: PropTypes.number,
+    depth: PropTypes.number
+  }
+
+  render(){
+    let { getComponent, required, schema, depth, expandDepth, name } = this.props
+    let items = schema.get("items")
+    let title = schema.get("title") || name
+    let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
+
+    const ModelCollapse = getComponent("ModelCollapse")
+    const Model = getComponent("Model")
+
+    const titleEl = title &&
+      <span className="model-title">
+        <span className="model-title__text">{ title }</span>
+      </span>
+
+    return <span className="model">
+      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
+        [
+          <span><Model { ...this.props } schema={ items } required={ false }/></span>
+        ]
+        {
+          properties.size ? <span>
+              { properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={propStyle}>
+                <br />{ `${key}:`}{ String(v) }</span>)
+              }<br /></span>
+            : null
+        }
+      </ModelCollapse>
+      { required && <span style={{ color: "red" }}>*</span>}
+    </span>
+  }
+}
--- a/src/core/components/enum-model.jsx
+++ b/src/core/components/enum-model.jsx
@@ -0,0 +1,19 @@
+import React from "react"
+import ImPropTypes from "react-immutable-proptypes"
+
+const EnumModel = ({ value, getComponent }) => {
+  let ModelCollapse = getComponent("ModelCollapse")
+  let collapsedContent = <span>Array [ { value.count() } ]</span>
+  return <span className="prop-enum">
+    Enum:<br />
+    <ModelCollapse collapsedContent={ collapsedContent }>
+      [ { value.join(", ") } ]
+    </ModelCollapse>
+  </span>
+}
+EnumModel.propTypes = {
+  value: ImPropTypes.iterable,
+  getComponent: ImPropTypes.func
+}
+
+export default EnumModel
--- a/src/core/components/info.jsx
+++ b/src/core/components/info.jsx
@@ -15,7 +15,7 @@ class Path extends React.Component {

    return (
      <pre className="base-url">
-        [ Base url: {host}{basePath}]
+        [ Base URL: {host}{basePath} ]
      </pre>
    )
  }
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -13,8 +13,13 @@ export default class BaseLayout extends React.Component {
    getComponent: PropTypes.func.isRequired
  }

+  onFilterChange =(e) => {
+    let {target: {value}} = e
+    this.props.layoutActions.updateFilter(value)
+  }
+
  render() {
-    let { specSelectors, specActions, getComponent } = this.props
+    let { specSelectors, specActions, getComponent, layoutSelectors } = this.props

    let info = specSelectors.info()
    let url = specSelectors.url()
@@ -26,11 +31,20 @@ export default class BaseLayout extends React.Component {

    let Info = getComponent("info")
    let Operations = getComponent("operations", true)
-    let Models = getComponent("models", true)
+    let Models = getComponent("Models", true)
    let AuthorizeBtn = getComponent("authorizeBtn", true)
    let Row = getComponent("Row")
    let Col = getComponent("Col")
    let Errors = getComponent("errors", true)
+
+    let isLoading = specSelectors.loadingStatus() === "loading"
+    let isFailed = specSelectors.loadingStatus() === "failed"
+    let filter = layoutSelectors.currentFilter()
+
+    let inputStyle = {}
+    if(isFailed) inputStyle.color = "red"
+    if(isLoading) inputStyle.color = "#aaa"
+
    const Schemes = getComponent("schemes")

    const isSpecEmpty = !specSelectors.specStr()
@@ -57,6 +71,7 @@ export default class BaseLayout extends React.Component {
                  { schemes && schemes.size ? (
                    <Schemes schemes={ schemes } specActions={ specActions } />
                  ) : null }
+
                  { securityDefinitions ? (
                    <AuthorizeBtn />
                  ) : null }
@@ -64,6 +79,15 @@ export default class BaseLayout extends React.Component {
              </div>
            ) : null }

+            {
+              filter === null || filter === false ? null :
+                <div className="filter-container">
+                  <Col className="filter wrapper" mobile={12}>
+                    <input className="operation-filter-input" placeholder="Filter by tag" type="text" onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter} disabled={isLoading} style={inputStyle} />
+                  </Col>
+                </div>
+            }
+
            <Row>
              <Col mobile={12} desktop={12} >
                <Operations/>
--- a/src/core/components/model-collapse.jsx
+++ b/src/core/components/model-collapse.jsx
@@ -0,0 +1,47 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+export default class ModelCollapse extends Component {
+  static propTypes = {
+    collapsedContent: PropTypes.any,
+    collapsed: PropTypes.bool,
+    children: PropTypes.any,
+    title: PropTypes.element
+  }
+
+  static defaultProps = {
+    collapsedContent: "{...}",
+    collapsed: true,
+    title: null
+  }
+
+  constructor(props, context) {
+    super(props, context)
+
+    let { collapsed, collapsedContent } = this.props
+
+    this.state = {
+      collapsed: collapsed !== undefined ? collapsed : ModelCollapse.defaultProps.collapsed,
+      collapsedContent: collapsedContent || ModelCollapse.defaultProps.collapsedContent
+    }
+  }
+
+  toggleCollapsed=()=>{
+    this.setState({
+      collapsed: !this.state.collapsed
+    })
+  }
+
+  render () {
+    const {title} = this.props
+    return (
+      <span>
+        { title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</span> }
+        <span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
+          <span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
+        </span>
+        { this.state.collapsed ? this.state.collapsedContent : this.props.children }
+      </span>
+    )
+  }
+}
--- a/src/core/components/model-example.jsx
+++ b/src/core/components/model-example.jsx
@@ -28,7 +28,7 @@ export default class ModelExample extends React.Component {

  render() {
    let { getComponent, specSelectors, schema, example, isExecute } = this.props
-    const Model = getComponent("model")
+    const ModelWrapper = getComponent("ModelWrapper")

    return <div>
      <ul className="tab">
@@ -44,7 +44,7 @@ export default class ModelExample extends React.Component {
          (isExecute || this.state.activeTab === "example") && example
        }
        {
-          !isExecute && this.state.activeTab === "model" && <Model schema={ schema }
+          !isExecute && this.state.activeTab === "model" && <ModelWrapper schema={ schema }
                                                     getComponent={ getComponent }
                                                     specSelectors={ specSelectors }
                                                     expandDepth={ 1 } />
--- a/src/core/components/model-wrapper.jsx
+++ b/src/core/components/model-wrapper.jsx
@@ -0,0 +1,23 @@
+import React, { Component, } from "react"
+import PropTypes from "prop-types"
+
+export default class ModelComponent extends Component {
+  static propTypes = {
+    schema: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    getComponent: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    expandDepth: PropTypes.number
+  }
+
+  render(){
+    let { getComponent } = this.props
+    const Model = getComponent("Model")
+
+    return <div className="model-box">
+      <Model { ...this.props } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
+    </div>
+  }
+}
+
+
--- a/src/core/components/model.jsx
+++ b/src/core/components/model.jsx
@@ -1,275 +1,7 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
-import ImPropTypes from "react-immutable-proptypes"
-import { List } from "immutable"
-const braceOpen = "{"
-const braceClose = "}"

-const propStyle = { color: "#999", fontStyle: "italic" }
-
-const EnumModel = ({ value }) => {
-  let collapsedContent = <span>Array [ { value.count() } ]</span>
-  return <span className="prop-enum">
-    Enum:<br />
-    <Collapse collapsedContent={ collapsedContent }>
-      [ { value.join(", ") } ]
-    </Collapse>
-  </span>
-}
-
-EnumModel.propTypes = {
-  value: ImPropTypes.iterable
-}
-
-class ObjectModel extends Component {
-  static propTypes = {
-    schema: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    specSelectors: PropTypes.object.isRequired,
-    name: PropTypes.string,
-    isRef: PropTypes.bool,
-    expandDepth: PropTypes.number,
-    depth: PropTypes.number,
-    deprecated: PropTypes.boolean
-  }
-
-  render(){
-    let { schema, name, isRef, getComponent, depth, deprecated, ...props } = this.props
-    let { expandDepth, specSelectors } = this.props
-    const JumpToPath = getComponent("JumpToPath", true)
-    let description = schema.get("description")
-    let nullable = schema.get("nullable")
-    let properties = schema.get("properties")
-    let additionalProperties = schema.get("additionalProperties")
-    let title = schema.get("title") || name
-    let required = schema.get("required")
-
-    let anyOf = specSelectors.isOAS3() ? schema.get("anyOf") : null
-    let oneOf = specSelectors.isOAS3() ? schema.get("oneOf") : null
-    let not = specSelectors.isOAS3() ? schema.get("not") : null
-
-    const Markdown = getComponent("Markdown")
-    const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span>
-  let collapsedContent = (<span>
-      <span>{ braceOpen }</span>...<span>{ braceClose }</span>
-      {
-        isRef ? <JumpToPathSection name={ name }/> : ""
-      }
-    </span>)
-
-    return <span className={`model ${deprecated ? "deprecated" : ""}`}>
-      {
-        title && <span className="model-title">
-          { isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
-          <span className="model-title__text">{ title }</span>
-        </span>
-      }
-      <Collapse collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
-         <span className="brace-open object">{ braceOpen }</span>
-          {
-            !isRef ? null : <JumpToPathSection name={ name }/>
-          }
-          <span className="inner-object">
-            {
-              <table className="model" style={{ marginLeft: "2em" }}><tbody>
-              {
-                !description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
-                    <td>description:</td>
-                    <td>
-                      <Markdown source={ description } />
-                    </td>
-                  </tr>
-              }
-              {
-                (!specSelectors.isOAS3() || !nullable) ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
-                    <td>nullable</td>
-                    <td>{ nullable }</td>
-                  </tr>
-              }
-              {
-                !(properties && properties.size) ? null : properties.entrySeq().map(
-                    ([key, value]) => {
-                      let isRequired = List.isList(required) && required.contains(key)
-                      let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
-                      if ( isRequired ) {
-                        propertyStyle.fontWeight = "bold"
-                      }
-
-                      return (<tr key={key} className={`${value.get("deprecated") ? "deprecated" : ""}`}>
-                        <td style={ propertyStyle }>{ key }:</td>
-                        <td style={{ verticalAlign: "top" }}>
-                          <Model key={ `object-${name}-${key}_${value}` } { ...props }
-                                 required={ isRequired }
-                                 getComponent={ getComponent }
-                                 schema={ value }
-                                 depth={ depth + 1 } />
-                        </td>
-                      </tr>)
-                    }).toArray()
-              }
-              {
-                !additionalProperties || !additionalProperties.size ? null
-                  : <tr>
-                    <td>{ "< * >:" }</td>
-                    <td>
-                      <Model { ...props } required={ false }
-                             getComponent={ getComponent }
-                             schema={ additionalProperties }
-                             depth={ depth + 1 } />
-                    </td>
-                  </tr>
-              }
-              {
-                !anyOf ? null
-                  : <tr>
-                    <td>{ "anyOf ->" }</td>
-                    <td>
-                      {anyOf.map(schema => {
-                        return <div><Model { ...props } required={ false }
-                                 getComponent={ getComponent }
-                                 schema={ schema }
-                                 depth={ depth + 1 } /></div>
-                      })}
-                    </td>
-                  </tr>
-              }
-              {
-                !oneOf ? null
-                  : <tr>
-                    <td>{ "oneOf ->" }</td>
-                    <td>
-                      {oneOf.map(schema => {
-                        return <div><Model { ...props } required={ false }
-                                 getComponent={ getComponent }
-                                 schema={ schema }
-                                 depth={ depth + 1 } /></div>
-                      })}
-                    </td>
-                  </tr>
-              }
-              {
-                !not ? null
-                  : <tr>
-                    <td>{ "not ->" }</td>
-                    <td>
-                      {not.map(schema => {
-                        return <div><Model { ...props } required={ false }
-                                 getComponent={ getComponent }
-                                 schema={ schema }
-                                 depth={ depth + 1 } /></div>
-                      })}
-                    </td>
-                  </tr>
-              }
-              </tbody></table>
-          }
-        </span>
-        <span className="brace-close">{ braceClose }</span>
-      </Collapse>
-    </span>
-  }
-}
-
-class Primitive extends Component {
-  static propTypes = {
-    schema: PropTypes.object.isRequired,
-    name: PropTypes.string,
-    getComponent: PropTypes.func.isRequired,
-    required: PropTypes.bool,
-    deprecated: PropTypes.bool
-  }
-
-  render(){
-    let { schema, getComponent, name, required, deprecated } = this.props
-
-    if(!schema || !schema.get) {
-      // don't render if schema isn't correctly formed
-      return <div></div>
-    }
-
-    let type = schema.get("type")
-    let format = schema.get("format")
-    let xml = schema.get("xml")
-    let enumArray = schema.get("enum")
-    let title = schema.get("title") || name
-    let description = schema.get("description")
-    let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
-    let style = required ? { fontWeight: "bold" } : {}
-    const Markdown = getComponent("Markdown")
-
-    return <span className={`model ${deprecated ? "deprecated" : ""}`}>
-      {
-        title && <span className="model-title" style={{ marginRight: "2em" }}>
-          <span className="model-title__text">{ title }</span>
-        </span>
-      }
-      <span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
-      { format && <span className="prop-format">(${format})</span>}
-      {
-        properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
-          <br />{ key }: { String(v) }</span>)
-          : null
-      }
-      {
-        !description ? null :
-          <Markdown source={ description } />
-      }
-      {
-        xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
-          {
-            xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
-          }
-        </span>): null
-      }
-      {
-        enumArray && <EnumModel value={ enumArray } />
-      }
-    </span>
-  }
-}
-
-class ArrayModel extends Component {
-  static propTypes = {
-    schema: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    specSelectors: PropTypes.object.isRequired,
-    name: PropTypes.string,
-    required: PropTypes.bool,
-    expandDepth: PropTypes.number,
-    depth: PropTypes.number
-  }
-
-  render(){
-    let { required, schema, depth, name, expandDepth } = this.props
-    let items = schema.get("items")
-    let title = schema.get("title") || name
-    let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
-
-    return <span className="model">
-      {
-        title && <span className="model-title">
-          <span className="model-title__text">{ title }</span>
-        </span>
-      }
-      <Collapse collapsed={ depth > expandDepth } collapsedContent="[...]">
-        [
-          <span><Model { ...this.props } name="" schema={ items } required={ false }/></span>
-        ]
-        {
-          properties.size ? <span>
-              { properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={propStyle}>
-                <br />{ `${key}:`}{ String(v) }</span>)
-              }<br /></span>
-            : null
-        }
-      </Collapse>
-      { required && <span style={{ color: "red" }}>*</span>}
-    </span>
-  }
-}
-
-
-export class Model extends Component {
+export default class Model extends Component {
  static propTypes = {
    schema: PropTypes.object.isRequired,
    getComponent: PropTypes.func.isRequired,
@@ -298,6 +30,9 @@ export class Model extends Component {

  render () {
    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
+    let ObjectModel = getComponent("ObjectModel")
+    let ArrayModel = getComponent("ArrayModel")
+    let PrimitiveModel = getComponent("PrimitiveModel")
    let $$ref = schema && schema.get("$$ref")
    let modelName = $$ref && this.getModelName( $$ref )
    let modelSchema, type
@@ -335,69 +70,12 @@ export class Model extends Component {
      case "integer":
      case "boolean":
      default:
-        return <Primitive
+        return <PrimitiveModel
          { ...this.props }
          getComponent={ getComponent }
          schema={ modelSchema }
          name={ name || modelName }
          deprecated={deprecated}
-          required={ required }/>
-    }
-  }
-}
-
-
-export default class ModelComponent extends Component {
-  static propTypes = {
-    schema: PropTypes.object.isRequired,
-    name: PropTypes.string,
-    getComponent: PropTypes.func.isRequired,
-    specSelectors: PropTypes.object.isRequired,
-    expandDepth: PropTypes.number
-  }
-
-  render(){
-    return <div className="model-box">
-      <Model { ...this.props } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
-    </div>
-  }
-}
-
-class Collapse extends Component {
-  static propTypes = {
-    collapsedContent: PropTypes.any,
-    collapsed: PropTypes.bool,
-    children: PropTypes.any
-  }
-
-  static defaultProps = {
-    collapsedContent: "{...}",
-    collapsed: true,
-  }
-
-  constructor(props, context) {
-    super(props, context)
-
-    let { collapsed, collapsedContent } = this.props
-
-    this.state = {
-      collapsed: collapsed !== undefined ? collapsed : Collapse.defaultProps.collapsed,
-      collapsedContent: collapsedContent || Collapse.defaultProps.collapsedContent
-    }
-  }
-
-  toggleCollapsed=()=>{
-    this.setState({
-      collapsed: !this.state.collapsed
-    })
-  }
-
-  render () {
-    return (<span>
-      <span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
-        <span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
-      </span>
-      { this.state.collapsed ? this.state.collapsedContent : this.props.children }
-    </span>)
+          required={ required }/>    }
  }
 }
--- a/src/core/components/models.jsx
+++ b/src/core/components/models.jsx
@@ -16,7 +16,7 @@ export default class Models extends Component {
    let { docExpansion } = getConfigs()
    let showModels = layoutSelectors.isShown("models", docExpansion === "full" || docExpansion === "list" )

-    const Model = getComponent("model")
+    const ModelWrapper = getComponent("ModelWrapper")
    const Collapse = getComponent("Collapse")

    if (!definitions.size) return null
@@ -28,11 +28,11 @@ export default class Models extends Component {
          <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
        </svg>
      </h4>
-      <Collapse isOpened={showModels} animated>
+      <Collapse isOpened={showModels}>
        {
          definitions.entrySeq().map( ( [ name, model ])=>{
            return <div className="model-container" key={ `models-section-${name}` }>
-              <Model name={ name }
+              <ModelWrapper name={ name }
                     schema={ model }
                     isRef={ true }
                     getComponent={ getComponent }
--- a/src/core/components/object-model.jsx
+++ b/src/core/components/object-model.jsx
@@ -0,0 +1,105 @@
+import React, { Component, } from "react"
+import PropTypes from "prop-types"
+import { List } from "immutable"
+
+const braceOpen = "{"
+const braceClose = "}"
+
+export default class ObjectModel extends Component {
+  static propTypes = {
+    schema: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    isRef: PropTypes.bool,
+    expandDepth: PropTypes.number,
+    depth: PropTypes.number
+  }
+
+  render(){
+    let { schema, name, isRef, getComponent, depth, ...props } = this.props
+    let { expandDepth } = this.props
+    let description = schema.get("description")
+    let properties = schema.get("properties")
+    let additionalProperties = schema.get("additionalProperties")
+    let title = schema.get("title") || name
+    let requiredProperties = schema.get("required")
+
+    const JumpToPath = getComponent("JumpToPath", true)
+    const Markdown = getComponent("Markdown")
+    const Model = getComponent("Model")
+    const ModelCollapse = getComponent("ModelCollapse")
+
+    const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span>
+    const collapsedContent = (<span>
+        <span>{ braceOpen }</span>...<span>{ braceClose }</span>
+        {
+        isRef ? <JumpToPathSection name={ name }/> : ""
+        }
+    </span>)
+    
+    const titleEl = title && <span className="model-title">
+      { isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
+      <span className="model-title__text">{ title }</span>
+    </span>
+
+    return <span className="model">
+      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
+         <span className="brace-open object">{ braceOpen }</span>
+          {
+            !isRef ? null : <JumpToPathSection name={ name }/>
+          }
+          <span className="inner-object">
+            {
+              <table className="model" style={{ marginLeft: "2em" }}><tbody>
+              {
+                !description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
+                    <td>description:</td>
+                    <td>
+                      <Markdown source={ description } />
+                    </td>
+                  </tr>
+              }
+              {
+                !(properties && properties.size) ? null : properties.entrySeq().map(
+                    ([key, value]) => {
+                      let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
+                      let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
+                      if ( isRequired ) {
+                        propertyStyle.fontWeight = "bold"
+                      }
+
+                      return (<tr key={key}>
+                        <td style={ propertyStyle }>
+                          { key }{ isRequired && <span style={{ color: "red" }}>*</span> }
+                        </td>
+                        <td style={{ verticalAlign: "top" }}>
+                          <Model key={ `object-${name}-${key}_${value}` } { ...props }
+                                 required={ isRequired }
+                                 getComponent={ getComponent }
+                                 schema={ value }
+                                 depth={ depth + 1 } />
+                        </td>
+                      </tr>)
+                    }).toArray()
+              }
+              {
+                !additionalProperties || !additionalProperties.size ? null
+                  : <tr>
+                    <td>{ "< * >:" }</td>
+                    <td>
+                      <Model { ...props } required={ false }
+                             getComponent={ getComponent }
+                             schema={ additionalProperties }
+                             depth={ depth + 1 } />
+                    </td>
+                  </tr>
+              }
+              </tbody></table>
+          }
+        </span>
+        <span className="brace-close">{ braceClose }</span>
+      </ModelCollapse>
+    </span>
+  }
+}
--- a/src/core/components/operation.jsx
+++ b/src/core/components/operation.jsx
@@ -116,7 +116,8 @@ export default class Operation extends PureComponent {
      specActions,
      specSelectors,
      authActions,
-      authSelectors
+      authSelectors,
+      getConfigs
    } = this.props

    let summary = operation.get("summary")
@@ -141,6 +142,10 @@ export default class Operation extends PureComponent {
    const Markdown = getComponent( "Markdown" )
    const Schemes = getComponent( "schemes" )

+    const { deepLinking } = getConfigs()
+
+    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
+
    // Merge in Live Response
    if(response && response.size > 0) {
      let notDocumented = !responses.get(String(response.get("status")))
@@ -152,13 +157,18 @@ export default class Operation extends PureComponent {
    let onChangeKey = [ path, method ] // Used to add values to _this_ operation ( indexed by path and method )

    return (
-        <div className={deprecated ? "opblock opblock-deprecated" : shown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey} >
+        <div className={deprecated ? "opblock opblock-deprecated" : shown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey.join("-")} >
          <div className={`opblock-summary opblock-summary-${method}`} onClick={this.toggleShown} >
-            <span className="opblock-summary-method">{method.toUpperCase()}</span>
-            <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
-              <span>{path}</span>
-              <JumpToPath path={jumpToKey} />
-            </span>
+              <span className="opblock-summary-method">{method.toUpperCase()}</span>
+              <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
+                <a
+                  className="nostyle"
+                  onClick={(e) => e.preventDefault()}
+                  href={ isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : ""} >
+                  <span>{path}</span>
+                </a>
+                <JumpToPath path={jumpToKey} />
+              </span>

            { !showSummary ? null :
                <div className="opblock-summary-description">
@@ -191,7 +201,9 @@ export default class Operation extends PureComponent {
                <div className="opblock-external-docs-wrapper">
                  <h4 className="opblock-title_normal">Find more details</h4>
                  <div className="opblock-external-docs">
-                    <span className="opblock-external-docs__description">{ externalDocs.get("description") }</span>
+                    <span className="opblock-external-docs__description">
+                      <Markdown source={ externalDocs.get("description") } />
+                    </span>
                    <a className="opblock-external-docs__link" href={ externalDocs.get("url") }>{ externalDocs.get("url") }</a>
                  </div>
                </div> : null
--- a/src/core/components/operations.jsx
+++ b/src/core/components/operations.jsx
@@ -1,5 +1,8 @@
 import React from "react"
 import PropTypes from "prop-types"
+import { helpers } from "swagger-client"
+
+const { opId } = helpers

 export default class Operations extends React.Component {

@@ -33,7 +36,29 @@ export default class Operations extends React.Component {
    const Collapse = getComponent("Collapse")

    let showSummary = layoutSelectors.showSummary()
-    let { docExpansion, displayOperationId, displayRequestDuration } = getConfigs()
+    let {
+      docExpansion,
+      displayOperationId,
+      displayRequestDuration,
+      maxDisplayedTags,
+      deepLinking
+    } = getConfigs()
+
+    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
+
+    let filter = layoutSelectors.currentFilter()
+
+    if (filter) {
+      if (filter !== true) {
+        taggedOps = taggedOps.filter((tagObj, tag) => {
+          return tag.indexOf(filter) !== -1
+        })
+      }
+    }
+
+    if (maxDisplayedTags && !isNaN(maxDisplayedTags) && maxDisplayedTags >= 0) {
+      taggedOps = taggedOps.slice(0, maxDisplayedTags)
+    }

    return (
        <div>
@@ -48,8 +73,16 @@ export default class Operations extends React.Component {
              return (
                <div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} key={"operation-" + tag}>

-                  <h4 onClick={() => layoutActions.show(isShownKey, !showTag)} className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }>
-                    <span>{tag}</span>
+                  <h4
+                    onClick={() => layoutActions.show(isShownKey, !showTag)}
+                    className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
+                    id={isShownKey.join("-")}>
+                    <a
+                      className="nostyle"
+                      onClick={(e) => e.preventDefault()}
+                      href={ isDeepLinkingEnabled ? `#/${tag}` : ""}>
+                      <span>{tag}</span>
+                    </a>
                    { !tagDescription ? null :
                        <small>
                          { tagDescription }
@@ -67,11 +100,14 @@ export default class Operations extends React.Component {
                    {
                      operations.map( op => {

-                        const isShownKey = ["operations", op.get("id"), tag]
                        const path = op.get("path", "")
                        const method = op.get("method", "")
                        const jumpToKey = `paths.${path}.${method}`

+                        const operationId =
+                        op.getIn(["operation", "operationId"]) || op.getIn(["operation", "__originalOperationId"]) || opId(op.get("operation"), path, method) || op.get("id")
+                        const isShownKey = ["operations", tag, operationId]
+
                        const allowTryItOut = specSelectors.allowTryItOutFor(op.get("path"), op.get("method"))
                        const response = specSelectors.responseFor(op.get("path"), op.get("method"))
                        const request = specSelectors.requestFor(op.get("path"), op.get("method"))
--- a/src/core/components/param-body.jsx
+++ b/src/core/components/param-body.jsx
@@ -49,10 +49,11 @@ export default class ParamBody extends PureComponent {
    let { specSelectors, pathMethod, param, isExecute, consumesValue="" } = props
    let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name")) : {}
    let isXml = /xml/i.test(consumesValue)
+    let isJson = /json/i.test(consumesValue)
    let paramValue = isXml ? parameter.get("value_xml") : parameter.get("value")

    if ( paramValue !== undefined ) {
-      let val = !paramValue && !isXml ? "{}" : paramValue
+      let val = !paramValue && isJson ? "{}" : paramValue
      this.setState({ value: val })
      this.onChange(val, {isXml: isXml, isEditBox: isExecute})
    } else {
@@ -79,8 +80,11 @@ export default class ParamBody extends PureComponent {
  _onChange = (val, isXml) => { (this.props.onChange || NOOP)(this.props.param, val, isXml) }

  handleOnChange = e => {
-    let {consumesValue} = this.props
-    this.onChange(e.target.value.trim(), {isXml: /xml/i.test(consumesValue)})
+    const {consumesValue} = this.props
+    const isJson = /json/i.test(consumesValue)
+    const isXml = /xml/i.test(consumesValue)
+    const inputValue = isJson ? e.target.value.trim() : e.target.value
+    this.onChange(inputValue, {isXml})
  }

  toggleIsEditBox = () => this.setState( state => ({isEditBox: !state.isEditBox}))
--- a/src/core/components/parameter-row.jsx
+++ b/src/core/components/parameter-row.jsx
@@ -94,7 +94,7 @@ export default class ParameterRow extends Component {
            { param.get("name") }
            { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
          </div>
-          <div className="parаmeter__type">{ param.get("type") } { itemType && `[${itemType}]` }</div>
+          <div className="parameter__type">{ param.get("type") } { itemType && `[${itemType}]` }</div>
          <div className="parameter__in">({ param.get("in") })</div>
        </td>

--- a/src/core/components/primitive-model.jsx
+++ b/src/core/components/primitive-model.jsx
@@ -0,0 +1,55 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+const propStyle = { color: "#999", fontStyle: "italic" }
+
+export default class Primitive extends Component {
+  static propTypes = {
+    schema: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    required: PropTypes.bool
+  }
+
+  render(){
+    let { schema, getComponent, required } = this.props
+
+    if(!schema || !schema.get) {
+      // don't render if schema isn't correctly formed
+      return <div></div>
+    }
+
+    let type = schema.get("type")
+    let format = schema.get("format")
+    let xml = schema.get("xml")
+    let enumArray = schema.get("enum")
+    let description = schema.get("description")
+    let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
+    let style = required ? { fontWeight: "bold" } : {}
+    const Markdown = getComponent("Markdown")
+    const EnumModel = getComponent("EnumModel")
+
+    return <span className="prop">
+      <span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
+      { format && <span className="prop-format">(${format})</span>}
+      {
+        properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
+          <br />{ key }: { String(v) }</span>)
+          : null
+      }
+      {
+        !description ? null :
+          <Markdown source={ description } />
+      }
+      {
+        xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
+          {
+            xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
+          }
+        </span>): null
+      }
+      {
+        enumArray && <EnumModel value={ enumArray } getComponent={ getComponent } />
+      }
+    </span>
+  }
+}
--- a/src/core/components/providers/markdown.jsx
+++ b/src/core/components/providers/markdown.jsx
@@ -11,10 +11,12 @@ function Markdown({ source }) {
    return null
  }

-  return <Remarkable
-    options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
-    source={sanitized}
-    ></Remarkable>
+  return <div className="markdown">
+    <Remarkable
+      options={{html: true, typographer: true, breaks: true, linkify: true, linkTarget: "_blank"}}
+      source={sanitized}
+      ></Remarkable>
+  </div>
 }

 Markdown.propTypes = {
--- a/src/core/components/response-body.jsx
+++ b/src/core/components/response-body.jsx
@@ -40,7 +40,7 @@ export default class ResponseBody extends React.Component {

      // Image
    } else if (/^image\//i.test(contentType)) {
-      bodyEl = <img src={ url } />
+      bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } />

      // Audio
    } else if (/^audio\//i.test(contentType)) {
--- a/src/core/components/schemes.jsx
+++ b/src/core/components/schemes.jsx
@@ -19,8 +19,9 @@ export default class Schemes extends React.Component {
  }

  componentWillReceiveProps(nextProps) {
-    if ( this.props.operationScheme && !nextProps.schemes.has(this.props.operationScheme) ) {
-      //fire 'change' event if our selected scheme is no longer an option
+    if ( !this.props.operationScheme || !nextProps.schemes.has(this.props.operationScheme) ) {
+      // if we don't have a selected operationScheme or if our selected scheme is no longer an option,
+      // then fire 'change' event and select the first scheme in the list of options
      this.setScheme(nextProps.schemes.first())
    }
  }
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -7,12 +7,18 @@ import * as AllPlugins from "core/plugins/all"
 import { parseSearch } from "core/utils"

 // eslint-disable-next-line no-undef
-const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION } = buildInfo
+const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION, HOSTNAME, BUILD_TIME } = buildInfo

 module.exports = function SwaggerUI(opts) {

  win.versions = win.versions || {}
-  win.versions.swaggerUi = `${PACKAGE_VERSION}/${GIT_COMMIT || "unknown"}${GIT_DIRTY ? "-dirty" : ""}`
+  win.versions.swaggerUi = {
+    version: PACKAGE_VERSION,
+    gitRevision: GIT_COMMIT,
+    gitDirty: GIT_DIRTY,
+    buildTimestamp: BUILD_TIME,
+    machine: HOSTNAME
+  }

  const defaults = {
    // Some general settings, that we floated to the top
@@ -22,15 +28,19 @@ module.exports = function SwaggerUI(opts) {
    urls: null,
    layout: "BaseLayout",
    docExpansion: "list",
+    maxDisplayedTags: null,
+    filter: null,
    validatorUrl: "https://online.swagger.io/validator",
    configs: {},
    custom: {},
    displayOperationId: false,
    displayRequestDuration: false,
+    deepLinking: false,

    // Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
    // Instead, we can compile the first plugin ( it can be a collection of plugins ), then batch the rest.
    presets: [
+      ApisPreset
    ],

    // Plugins; ( loaded after presets )
@@ -46,7 +56,9 @@ module.exports = function SwaggerUI(opts) {
    store: { },
  }

-  const constructorConfig = deepExtend({}, defaults, opts)
+  let queryConfig = parseSearch()
+
+  const constructorConfig = deepExtend({}, defaults, opts, queryConfig)

  const storeConfigs = deepExtend({}, constructorConfig.store, {
    system: {
@@ -55,7 +67,8 @@ module.exports = function SwaggerUI(opts) {
    plugins: constructorConfig.presets,
    state: {
      layout: {
-        layout: constructorConfig.layout
+        layout: constructorConfig.layout,
+        filter: constructorConfig.filter
      },
      spec: {
        spec: "",
@@ -76,7 +89,6 @@ module.exports = function SwaggerUI(opts) {
  store.register([constructorConfig.plugins, inlinePlugin])

  var system = store.getSystem()
-  let queryConfig = parseSearch()

  system.initOAuth = system.authActions.configureAuth

--- a/src/core/path-translator.js
+++ b/src/core/path-translator.js
@@ -1,67 +0,0 @@
-import get from "lodash/get"
-
-export function transformPathToArray(property, jsSpec) {
-  if(property.slice(0,9) === "instance.") {
-    var str = property.slice(9)
-  } else { // eslint-disable-next-line no-redeclare
-    var str = property
-  }
-
-  var pathArr = []
-
-  str
-    .split(".")
-    .map(item => {
-      // "key[0]" becomes ["key", "0"]
-      if(item.includes("[")) {
-        let index = parseInt(item.match(/\[(.*)\]/)[1])
-        let keyName = item.slice(0, item.indexOf("["))
-        return [keyName, index.toString()]
-      } else {
-        return item
-      }
-    })
-    .reduce(function(a, b) {
-      // flatten!
-      return a.concat(b)
-    }, [])
-    .concat([""]) // add an empty item into the array, so we don't get stuck with something in our buffer below
-    .reduce((buffer, curr) => {
-      let obj = pathArr.length ? get(jsSpec, pathArr) : jsSpec
-
-      if(get(obj, makeAccessArray(buffer, curr))) {
-        if(buffer.length) {
-          pathArr.push(buffer)
-        }
-        if(curr.length) {
-          pathArr.push(curr)
-        }
-        return ""
-      } else {
-        // attach key to buffer
-        return `${buffer}${buffer.length ? "." : ""}${curr}`
-      }
-    }, "")
-
-  if(typeof get(jsSpec, pathArr) !== "undefined") {
-    return pathArr
-  } else {
-    // if our path is not correct (there is no value at the path),
-    // return null
-    return null
-  }
-}
-
-function makeAccessArray(buffer, curr) {
-  let arr = []
-
-  if(buffer.length) {
-    arr.push(buffer)
-  }
-
-  if(curr.length) {
-    arr.push(curr)
-  }
-
-  return arr
-}
--- a/src/core/plugins/auth/actions.js
+++ b/src/core/plugins/auth/actions.js
@@ -73,7 +73,7 @@ export const authorizePassword = ( auth ) => ( { authActions } ) => {
  let { schema, name, username, password, passwordType, clientId, clientSecret } = auth
  let form = {
    grant_type: "password",
-    scopes: encodeURIComponent(auth.scopes.join(scopeSeparator))
+    scope: encodeURIComponent(auth.scopes.join(scopeSeparator))
  }
  let query = {}
  let headers = {}
--- a/src/core/plugins/deep-linking/README.md
+++ b/src/core/plugins/deep-linking/README.md
@@ -0,0 +1 @@
+See `docs/deep-linking.md`.
--- a/src/core/plugins/deep-linking/helpers.js
+++ b/src/core/plugins/deep-linking/helpers.js
@@ -0,0 +1,7 @@
+export const setHash = (value) => {
+  if(value) {
+    return history.pushState(null, null, `#${value}`)
+  } else {
+    return window.location.hash = ""
+  }
+}
--- a/src/core/plugins/deep-linking/index.js
+++ b/src/core/plugins/deep-linking/index.js
@@ -0,0 +1,18 @@
+// import reducers from "./reducers"
+// import * as actions from "./actions"
+// import * as selectors from "./selectors"
+import * as specWrapActions from "./spec-wrap-actions"
+import * as layoutWrapActions from "./layout-wrap-actions"
+
+export default function() {
+  return {
+    statePlugins: {
+      spec: {
+        wrapActions: specWrapActions
+      },
+      layout: {
+        wrapActions: layoutWrapActions
+      }
+    }
+  }
+}
--- a/src/core/plugins/deep-linking/layout-wrap-actions.js
+++ b/src/core/plugins/deep-linking/layout-wrap-actions.js
@@ -0,0 +1,36 @@
+import { setHash } from "./helpers"
+
+export const show = (ori, { getConfigs }) => (...args) => {
+  ori(...args)
+
+  const isDeepLinkingEnabled = getConfigs().deepLinking
+  if(!isDeepLinkingEnabled || isDeepLinkingEnabled === "false") {
+    return
+  }
+
+  try {
+    let [thing, shown] = args
+    let [type] = thing
+
+    if(type === "operations-tag" || type === "operations") {
+      if(!shown) {
+        return setHash("/")
+      }
+
+      if(type === "operations") {
+        let [, tag, operationId] = thing
+        setHash(`/${tag}/${operationId}`)
+      }
+
+      if(type === "operations-tag") {
+        let [, tag] = thing
+        setHash(`/${tag}`)
+      }
+    }
+
+  } catch(e) {
+    // This functionality is not mission critical, so if something goes wrong
+    // we'll just move on
+    console.error(e)
+  }
+}
--- a/src/core/plugins/deep-linking/spec-wrap-actions.js
+++ b/src/core/plugins/deep-linking/spec-wrap-actions.js
@@ -0,0 +1,51 @@
+import scrollTo from "scroll-to-element"
+
+const SCROLL_OFFSET = -5
+let hasHashBeenParsed = false
+
+
+export const updateResolved = (ori, { layoutActions, getConfigs }) => (...args) => {
+  ori(...args)
+
+  const isDeepLinkingEnabled = getConfigs().deepLinking
+  if(!isDeepLinkingEnabled || isDeepLinkingEnabled === "false") {
+    return
+  }
+
+  if(window.location.hash && !hasHashBeenParsed ) {
+    let hash = window.location.hash.slice(1) // # is first character
+
+    if(hash[0] === "!") {
+      // Parse UI 2.x shebangs
+      hash = hash.slice(1)
+    }
+
+    if(hash[0] === "/") {
+      // "/pet/addPet" => "pet/addPet"
+      // makes the split result cleaner
+      // also handles forgotten leading slash
+      hash = hash.slice(1)
+    }
+
+    let [tag, operationId] = hash.split("/")
+
+    if(tag && operationId) {
+      // Pre-expand and scroll to the operation
+      layoutActions.show(["operations-tag", tag], true)
+      layoutActions.show(["operations", tag, operationId], true)
+
+      scrollTo(`#operations-${tag}-${operationId}`, {
+        offset: SCROLL_OFFSET
+      })
+    } else if(tag) {
+      // Pre-expand and scroll to the tag
+      layoutActions.show(["operations-tag", tag], true)
+
+      scrollTo(`#operations-tag-${tag}`, {
+        offset: SCROLL_OFFSET
+      })
+    }
+  }
+
+  hasHashBeenParsed = true
+}
--- a/src/core/plugins/layout/actions.js
+++ b/src/core/plugins/layout/actions.js
@@ -1,6 +1,7 @@
 import { normalizeArray } from "core/utils"

 export const UPDATE_LAYOUT = "layout_update_layout"
+export const UPDATE_FILTER = "layout_update_filter"
 export const UPDATE_MODE = "layout_update_mode"
 export const SHOW = "layout_show"

@@ -13,6 +14,13 @@ export function updateLayout(layout) {
  }
 }

+export function updateFilter(filter) {
+  return {
+    type: UPDATE_FILTER,
+    payload: filter
+  }
+}
+
 export function show(thing, shown=true) {
  thing = normalizeArray(thing)
  return {
--- a/src/core/plugins/layout/reducers.js
+++ b/src/core/plugins/layout/reducers.js
@@ -1,5 +1,6 @@
 import {
  UPDATE_LAYOUT,
+  UPDATE_FILTER,
  UPDATE_MODE,
  SHOW
 } from "./actions"
@@ -8,6 +9,8 @@ export default {

  [UPDATE_LAYOUT]: (state, action) => state.set("layout", action.payload),

+  [UPDATE_FILTER]: (state, action) => state.set("filter", action.payload),
+
  [SHOW]: (state, action) => {
    let thing = action.payload.thing
    let shown = action.payload.shown
--- a/src/core/plugins/layout/selectors.js
+++ b/src/core/plugins/layout/selectors.js
@@ -5,6 +5,8 @@ const state = state => state

 export const current = state => state.get("layout")

+export const currentFilter = state => state.get("filter")
+
 export const isShown = (state, thing, def) => {
  thing = normalizeArray(thing)
  return Boolean(state.getIn(["shown", ...thing], def))
--- a/src/core/plugins/spec/selectors.js
+++ b/src/core/plugins/spec/selectors.js
@@ -1,6 +1,6 @@
 import { createSelector } from "reselect"
 import { sorters } from "core/utils"
-import { fromJS, Set, Map, List } from "immutable"
+import { fromJS, Set, Map, OrderedMap, List } from "immutable"

 const DEFAULT_TAG = "default"

@@ -194,25 +194,35 @@ export const tagDetails = (state, tag) => {

 export const operationsWithTags = createSelector(
  operationsWithRootInherited,
-  operations => {
+  tags,
+  (operations, tags) => {
    return operations.reduce( (taggedMap, op) => {
      let tags = Set(op.getIn(["operation","tags"]))
      if(tags.count() < 1)
        return taggedMap.update(DEFAULT_TAG, List(), ar => ar.push(op))
      return tags.reduce( (res, tag) => res.update(tag, List(), (ar) => ar.push(op)), taggedMap )
-    }, Map())
+    }, tags.reduce( (taggedMap, tag) => {
+      return taggedMap.set(tag.get("name"), List())
+    } , OrderedMap()))
  }
 )

-export const taggedOperations = ( state ) =>( { getConfigs } ) => {
-  let { operationsSorter }= getConfigs()
+export const taggedOperations = (state) => ({ getConfigs }) => {
+  let { tagsSorter, operationsSorter } = getConfigs()
+  return operationsWithTags(state)
+    .sortBy(
+      (val, key) => key, // get the name of the tag to be passed to the sorter
+      (tagA, tagB) => {
+        let sortFn = (typeof tagsSorter === "function" ? tagsSorter : sorters.tagsSorter[ tagsSorter ])
+        return (!sortFn ? null : sortFn(tagA, tagB))
+      }
+    )
+    .map((ops, tag) => {
+      let sortFn = (typeof operationsSorter === "function" ? operationsSorter : sorters.operationsSorter[ operationsSorter ])
+      let operations = (!sortFn ? ops : ops.sort(sortFn))

-  return operationsWithTags(state).map((ops, tag) => {
-    let sortFn = typeof operationsSorter === "function" ? operationsSorter
-                                                        : sorters.operationsSorter[operationsSorter]
-    let operations = !sortFn ? ops : ops.sort(sortFn)
-
-    return Map({tagDetails: tagDetails(state, tag), operations: operations})})
+      return Map({ tagDetails: tagDetails(state, tag), operations: operations })
+    })
 }

 export const responses = createSelector(
@@ -281,12 +291,13 @@ export function parametersIncludeType(parameters, typeValue="") {
 export function contentTypeValues(state, pathMethod) {
  let op = spec(state).getIn(["paths", ...pathMethod], fromJS({}))
  const parameters = op.get("parameters") || new List()
-  const requestContentType = (
-      parametersIncludeType(parameters, "file") ? "multipart/form-data"
-    : parametersIncludeIn(parameters, "formData") ? "application/x-www-form-urlencoded"
-    : op.get("consumes_value")
-  )

+  const requestContentType = (
+    op.get("consumes_value") ? op.get("consumes_value")
+      : parametersIncludeType(parameters, "file") ? "multipart/form-data"
+      : parametersIncludeType(parameters, "formData") ? "application/x-www-form-urlencoded"
+      : undefined
+  )

  return fromJS({
    requestContentType,
--- a/src/core/plugins/split-pane-mode/components/split-pane-mode.jsx
+++ b/src/core/plugins/split-pane-mode/components/split-pane-mode.jsx
@@ -1,7 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 import SplitPane from "react-split-pane"
-import "./split-pane-mode.less"

 const MODE_KEY = ["split-pane-mode"]
 const MODE_LEFT = "left"
--- a/src/core/plugins/split-pane-mode/components/split-pane-mode.less
+++ b/src/core/plugins/split-pane-mode/components/split-pane-mode.less
@@ -1,5 +0,0 @@
-.swagger-ui {
-  .Resizer.vertical.disabled {
-    display: none;
-  }
-}
--- a/src/core/plugins/util/index.js
+++ b/src/core/plugins/util/index.js
@@ -1,8 +1,7 @@
 import { shallowEqualKeys } from "core/utils"
-import { transformPathToArray } from "core/path-translator"

 export default function() {
  return {
-    fn: { shallowEqualKeys, transformPathToArray }
+    fn: { shallowEqualKeys }
  }
 }
--- a/src/core/presets/base.js
+++ b/src/core/presets/base.js
@@ -10,6 +10,7 @@ import auth from "core/plugins/auth"
 import util from "core/plugins/util"
 import SplitPaneModePlugin from "core/plugins/split-pane-mode"
 import downloadUrlPlugin from "core/plugins/download-url"
+import deepLinkingPlugin from "core/plugins/deep-linking"

 import App from "core/components/app"
 import AuthorizationPopup from "core/components/auth/authorization-popup"
@@ -41,9 +42,15 @@ import Footer from "core/components/footer"
 import ParamBody from "core/components/param-body"
 import Curl from "core/components/curl"
 import Schemes from "core/components/schemes"
+import ModelCollapse from "core/components/model-collapse"
 import ModelExample from "core/components/model-example"
+import ModelWrapper from "core/components/model-wrapper"
 import Model from "core/components/model"
 import Models from "core/components/models"
+import EnumModel from "core/components/enum-model"
+import ObjectModel from "core/components/object-model"
+import ArrayModel from "core/components/array-model"
+import PrimitiveModel from "core/components/primitive-model"
 import TryItOutButton from "core/components/try-it-out-button"
 import VersionStamp from "core/components/version-stamp"

@@ -89,8 +96,14 @@ export default function() {
      curl: Curl,
      schemes: Schemes,
      modelExample: ModelExample,
-      model: Model,
-      models: Models,
+      ModelWrapper,
+      ModelCollapse,
+      Model,
+      Models,
+      EnumModel,
+      ObjectModel,
+      ArrayModel,
+      PrimitiveModel,
      TryItOutButton,
      Markdown,
      BaseLayout,
@@ -121,6 +134,7 @@ export default function() {
    auth,
    ast,
    SplitPaneModePlugin,
-    downloadUrlPlugin
+    downloadUrlPlugin,
+    deepLinkingPlugin
  ]
 }
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -41,7 +41,7 @@ export function fromJSOrdered (js) {
  return !isObject(js) ? js :
    Array.isArray(js) ?
      Im.Seq(js).map(fromJSOrdered).toList() :
-      Im.Seq(js).map(fromJSOrdered).toOrderedMap()
+      Im.OrderedMap(js).map(fromJSOrdered)
 }

 export function bindToState(obj, state) {
@@ -228,13 +228,13 @@ export function highlight (el) {

  var reset = function(el) {
    var text = el.textContent,
-      pos = 0,       // current position
+      pos = 0, // current position
      next1 = text[0], // next character
-      chr = 1,       // current character
-      prev1,           // previous character
-      prev2,           // the one before the previous
-      token =          // current token content
-        el.innerHTML = "",  // (and cleaning the node)
+      chr = 1, // current character
+      prev1, // previous character
+      prev2, // the one before the previous
+      token = // current token content
+        el.innerHTML = "", // (and cleaning the node)

    // current token type:
    //  0: anything else (whitespaces / newlines)
@@ -274,11 +274,11 @@ export function highlight (el) {
        (tokenType > 8 && chr == "\n") ||
        [ // finalize conditions for other token types
          // 0: whitespaces
-          /\S/[test](chr),  // merged together
+          /\S/[test](chr), // merged together
          // 1: operators
-          1,                // consist of a single character
+          1, // consist of a single character
          // 2: braces
-          1,                // consist of a single character
+          1, // consist of a single character
          // 3: (key)word
          !/[$\w]/[test](chr),
          // 4: regex
@@ -341,12 +341,12 @@ export function highlight (el) {
        // condition)
        tokenType = 11
        while (![
-          1,                   //  0: whitespace
+          1, //  0: whitespace
                               //  1: operator or braces
-          /[\/{}[(\-+*=<>:;|\\.,?!&@~]/[test](chr),   // eslint-disable-line no-useless-escape
-          /[\])]/[test](chr),  //  2: closing brace
-          /[$\w]/[test](chr),  //  3: (key)word
-          chr == "/" &&        //  4: regex
+          /[\/{}[(\-+*=<>:;|\\.,?!&@~]/[test](chr), // eslint-disable-line no-useless-escape
+          /[\])]/[test](chr), //  2: closing brace
+          /[$\w]/[test](chr), //  3: (key)word
+          chr == "/" && //  4: regex
            // previous token was an
            // opening brace or an
            // operator (otherwise
@@ -355,13 +355,13 @@ export function highlight (el) {
            // workaround for xml
            // closing tags
          prev1 != "<",
-          chr == "\"",          //  5: string with "
-          chr == "'",          //  6: string with '
+          chr == "\"", //  5: string with "
+          chr == "'", //  6: string with '
                               //  7: xml comment
          chr+next1+text[pos+1]+text[pos+2] == "<!--",
-          chr+next1 == "/*",   //  8: multiline comment
-          chr+next1 == "//",   //  9: single-line comment
-          chr == "#"           // 10: hash-style comment
+          chr+next1 == "/*", //  8: multiline comment
+          chr+next1 == "//", //  9: single-line comment
+          chr == "#" // 10: hash-style comment
        ][--tokenType]);
      }

@@ -451,17 +451,23 @@ export const propChecker = (props, nextProps, objectList=[], ignoreList=[]) => {
 }

 export const validateNumber = ( val ) => {
-  if ( !/^-?\d+(\.?\d+)?$/.test(val)) {
+  if (!/^-?\d+(\.?\d+)?$/.test(val)) {
    return "Value must be a number"
  }
 }

 export const validateInteger = ( val ) => {
-  if ( !/^-?\d+$/.test(val)) {
+  if (!/^-?\d+$/.test(val)) {
    return "Value must be an integer"
  }
 }

+export const validateFile = ( val ) => {
+  if ( val && !(val instanceof win.File) ) {
+    return "Value must be a file"
+  }
+}
+
 // validation of parameters before execute
 export const validateParam = (param, isXml) => {
  let errors = []
@@ -472,11 +478,18 @@ export const validateParam = (param, isXml) => {
  let stringCheck = type === "string" && !value
  let arrayCheck = type === "array" && Array.isArray(value) && !value.length
  let listCheck = type === "array" && Im.List.isList(value) && !value.count()
-  if ( required && (stringCheck || arrayCheck || listCheck) ) {
+  let fileCheck = type === "file" && !(value instanceof win.File)
+  let nullUndefinedCheck = value === null || value === undefined
+
+  if ( required && (stringCheck || arrayCheck || listCheck || fileCheck || nullUndefinedCheck) ) {
    errors.push("Required field is not provided")
    return errors
  }

+  if ( value === null || value === undefined ) {
+    return errors
+  }
+
  if ( type === "number" ) {
    let err = validateNumber(value)
    if (!err) return errors
@@ -505,7 +518,10 @@ export const validateParam = (param, isXml) => {
        errors.push({ index: index, error: err})
      }
    })
-
+  } else if ( type === "file" ) {
+    let err = validateFile(value)
+    if (!err) return errors
+    errors.push(err)
  }

  return errors
@@ -563,6 +579,9 @@ export const sorters = {
  operationsSorter: {
    alpha: (a, b) => a.get("path").localeCompare(b.get("path")),
    method: (a, b) => a.get("method").localeCompare(b.get("method"))
+  },
+  tagsSorter: {
+    alpha: (a, b) => a.localeCompare(b)
  }
 }

--- a/src/plugins/add-plugin.md
+++ b/src/plugins/add-plugin.md
@@ -20,7 +20,7 @@ SwaggerUI({
 })
 ```

-Or if you're updating the core plugins.. you'll add it to [src/js/bootstrap-plugin](https://github.com/SmartBear/swagger-ux/blob/master/src/js/bootstrap-plugin.js)
+Or if you're updating the core plugins.. you'll add it to the base preset: [src/core/presets/base.js](https://github.com/swagger-api/swagger-ui/blob/master/src/core/presets/base.js)

 Each Plugin is a function that returns an object. That object will get merged with the `system` and later bound to the state.
 Here is an example of each `type`
--- a/src/plugins/topbar/topbar.jsx
+++ b/src/plugins/topbar/topbar.jsx
@@ -6,6 +6,10 @@ import Logo from "./logo_small.png"

 export default class Topbar extends React.Component {

+  static propTypes = {
+    layoutActions: PropTypes.object.isRequired
+  }
+
  constructor(props, context) {
    super(props, context)
    this.state = { url: props.specSelectors.url(), selectedIndex: 0 }
@@ -80,6 +84,11 @@ export default class Topbar extends React.Component {
    }
  }

+  onFilterChange =(e) => {
+    let {target: {value}} = e
+    this.props.layoutActions.updateFilter(value)
+  }
+
  render() {
    let { getComponent, specSelectors, getConfigs } = this.props
    const Button = getComponent("Button")
@@ -121,7 +130,7 @@ export default class Topbar extends React.Component {
        <div className="wrapper">
          <div className="topbar-wrapper">
            <Link href="#" title="Swagger UX">
-              <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
+              <img height="30" width="30" src={ Logo } alt="Swagger UI"/>
              <span>swagger</span>
            </Link>
            <form className="download-url-wrapper" onSubmit={formOnSubmit}>
--- a/src/plugins/topbar/topbar.less
+++ b/src/plugins/topbar/topbar.less
@@ -1,52 +0,0 @@
-.swagger-ui {
-  .topbar {
-    background-color: #89bf04;
-  }
-
-  .topbar-wrapper {
-    padding: 0.7em;
-  }
-
-  .topbar-logo__img {
-    float: left;
-  }
-
-  .topbar-logo__title {
-    display: inline-block;
-    color: #fff;
-    font-size: 1.5em;
-    font-weight: bold;
-    margin: 0.15em 0 0 0.5em;
-  }
-
-  .download-url-wrapper {
-    text-align: right;
-    float: right;
-  }
-
-  .topbar .download-url__text {
-    width: 28em;
-    height: 2em;
-    margin-right: 0.5em;
-  }
-
-  .download-url__btn {
-    background-color: #547f00;
-    border-color: #547f00;
-    text-decoration: none;
-    font-weight: bold;
-    padding: 0.2em 0.3em;
-    color: white;
-    border-radius: 0.1em;
-
-    &:hover {
-      &:extend(.download-url__btn);
-    }
-  }
-
-  .center-700 {
-    display: block;
-    margin: 0 auto;
-    width: 45em;
-  }
-}
--- a/src/standalone/index.js
+++ b/src/standalone/index.js
@@ -1,6 +1,4 @@
 import StandaloneLayout from "./layout"
-import "../style/main.scss"
-
 import TopbarPlugin from "plugins/topbar"
 import ConfigsPlugin from "plugins/configs"

--- a/src/standalone/layout.jsx
+++ b/src/standalone/layout.jsx
@@ -29,7 +29,7 @@ export default class StandaloneLayout extends React.Component {
    return (

      <Container className='swagger-ui'>
-        { Topbar ? <Topbar/> : null }
+        { Topbar ? <Topbar /> : null }
        { loadingStatus === "loading" &&
          <div className="info">
            <h4 className="title">Loading...</h4>
@@ -45,7 +45,7 @@ export default class StandaloneLayout extends React.Component {
            <h4 className="title">Failed to load config.</h4>
          </div>
        }
-        { !loadingStatus || loadingStatus === "success" && <BaseLayout/> }
+        { !loadingStatus || loadingStatus === "success" && <BaseLayout /> }
        <Row>
          <Col>
            <OnlineValidatorBadge />
--- a/src/style/_form.scss
+++ b/src/style/_form.scss
@@ -42,7 +42,8 @@ label
 input[type=text],
 input[type=password],
 input[type=search],
-input[type=email]
+input[type=email],
+input[type=file]
 {
    min-width: 100px;
    margin: 5px 0;
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -45,6 +45,7 @@ body
 .opblock-tag
 {
    display: flex;
+    align-items: center;

    padding: 10px 20px 10px 10px;

@@ -53,8 +54,6 @@ body

    border-bottom: 1px solid rgba(#3b4151, .3);

-    align-items: center;
-
    &:hover
    {
        background: rgba(#000,.02);
@@ -111,14 +110,15 @@ body
        font-size: 14px;
        font-weight: normal;

+        flex: 1;
+
        padding: 0 10px;

-        flex: 1;
        @include text_body();
    }
 }

-.parаmeter__type
+.parameter__type
 {
    font-size: 12px;

@@ -139,6 +139,8 @@ body
    transition: all .5s;
 }

+
+
 .opblock
 {
    margin: 0 0 15px 0;
@@ -204,6 +206,7 @@ body
    .opblock-section-header
    {
        display: flex;
+        align-items: center;

        padding: 8px 20px;

@@ -212,19 +215,17 @@ body
        background: rgba(#fff,.8);
        box-shadow: 0 1px 2px rgba(#000,.1);

-        align-items: center;
-
        label
        {
            font-size: 12px;
            font-weight: bold;

            display: flex;
+            align-items: center;

            margin: 0;
            margin-left: auto;

-            align-items: center;
            @include text_headline();

            span
@@ -237,6 +238,8 @@ body
        {
            font-size: 14px;

+            flex: 1;
+
            margin: 0;

            @include text_headline();
@@ -267,11 +270,11 @@ body
        font-size: 16px;

        display: flex;
+        align-items: center;

        padding: 0 10px;

        @include text_code();
-        align-items: center;

        .view-line-link
        {
@@ -310,18 +313,18 @@ body
        font-size: 13px;

        flex: 1;
+
        @include text_body();
    }

    .opblock-summary
    {
        display: flex;
+        align-items: center;

        padding: 5px;

        cursor: pointer;
-
-        align-items: center;
    }

    &.opblock-post
@@ -377,6 +380,18 @@ body
    }
 }

+.filter
+{
+    .operation-filter-input
+    {
+        width: 100%;
+        margin: 20px 0;
+        padding: 10px 10px;
+
+        border: 2px solid #d8dde7;
+    }
+}
+

 .tab
 {
@@ -428,6 +443,7 @@ body
 }

 .opblock-description-wrapper,
+.opblock-external-docs-wrapper,
 .opblock-title_normal
 {
    font-size: 12px;
@@ -456,6 +472,12 @@ body
    }
 }

+.opblock-external-docs-wrapper {
+  h4 {
+    padding-left: 0px;
+  }
+}
+
 .execute-wrapper
 {
    padding: 20px;
@@ -539,6 +561,15 @@ body
        {
            margin: 0;
        }
+
+        a
+        {
+            @include text_code(#89bf04);
+            text-decoration: underline;
+            &:hover {
+                color: #81b10c;
+            }
+        }
    }
 }

@@ -550,13 +581,11 @@ body
    margin: 0;
    padding: 10px;

-
+    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    hyphens: auto;
-    white-space: pre-wrap;
-

    border-radius: 4px;
    background: #41444e;
@@ -585,10 +614,9 @@ body
    .schemes
    {
        display: flex;
-
        align-items: center;

-        > label
+         > label
        {
            font-size: 12px;
            font-weight: bold;
@@ -688,3 +716,25 @@ body
        opacity: 0;
    }
 }
+
+
+section
+{
+    h3
+    {
+        @include text_headline();
+    }
+}
+
+a.nostyle {
+  text-decoration: inherit;
+  color: inherit;
+  cursor: auto;
+  display: inline;
+
+  &:visited {
+    text-decoration: inherit;
+    color: inherit;
+    cursor: auto;
+  }
+}
--- a/src/style/_models.scss
+++ b/src/style/_models.scss
@@ -86,6 +86,10 @@
        border-radius: 4px;
        background: rgba(#000,.7);
    }
+
+    p {
+        margin: 0 0 1em 0;
+    }
 }


--- a/src/style/_split-pane-mode.scss
+++ b/src/style/_split-pane-mode.scss
@@ -0,0 +1,3 @@
+.Resizer.vertical.disabled {
+  display: none;
+}
--- a/src/style/_topbar.scss
+++ b/src/style/_topbar.scss
@@ -43,7 +43,6 @@
            margin: 0;

            border: 2px solid #547f00;
-            border-radius: 4px 0 0 4px;
            outline: none;
        }

--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -14,4 +14,5 @@
    @import 'information';
    @import 'authorize';
    @import 'errors';
+    @import 'split-pane-mode';
 }