Support dropdown for discriminator

src/core/components/parameter-row.jsx

@@ -191,7 +191,7 @@ export default class ParameterRow extends Component {
   }
 
   render() {
-    let {param, rawParam, getComponent, getConfigs, isExecute, fn, onChangeConsumes, specSelectors, pathMethod, specPath, oas3Selectors} = this.props
+    let {param, rawParam, getComponent, getConfigs, isExecute, fn, onChangeConsumes, specSelectors, specActions, pathMethod, specPath, oas3Selectors} = this.props
 
     let isOAS3 = specSelectors.isOAS3()
 
@@ -357,6 +357,7 @@ export default class ParameterRow extends Component {
                                                 getConfigs={ getConfigs }
                                                 isExecute={ isExecute }
                                                 specSelectors={ specSelectors }
+                                                specActions={ specActions }
                                                 schema={ schema }
                                                 example={ bodyParam }
                                                 includeWriteOnly={ true }/>

src/core/components/parameters/parameters.jsx

@@ -236,6 +236,7 @@ export default class Parameters extends Component {
                 setRetainRequestBodyValueFlag={retainRequestBodyValueFlagForOperation}
                 userHasEditedBody={oas3Selectors.hasUserEditedBody(...pathMethod)}
                 specPath={specPath.slice(0, -1).push("requestBody")}
+                specActions={specActions}
                 requestBody={requestBody}
                 requestBodyValue={oas3Selectors.requestBodyValue(...pathMethod)}
                 requestBodyInclusionSetting={oas3Selectors.requestBodyInclusionSetting(...pathMethod)}

src/core/components/response.jsx

@@ -38,6 +38,7 @@ export default class Response extends React.Component {
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
+    specActions: PropTypes.object.isRequired,
     oas3Actions: PropTypes.object.isRequired,
     specPath: ImPropTypes.list.isRequired,
     fn: PropTypes.object.isRequired,
@@ -84,6 +85,7 @@ export default class Response extends React.Component {
       getComponent,
       getConfigs,
       specSelectors,
+      specActions,
       contentType,
       controlsAcceptHeader,
       oas3Actions,
@@ -237,6 +239,7 @@ export default class Response extends React.Component {
               getComponent={ getComponent }
               getConfigs={ getConfigs }
               specSelectors={ specSelectors }
+              specActions={ specActions }
               schema={ fromJSOrdered(schema) }
               example={ example }
               includeReadOnly={ true }/>

src/core/components/responses.jsx

@@ -65,6 +65,7 @@ export default class Responses extends React.Component {
       getComponent,
       getConfigs,
       specSelectors,
+      specActions,
       fn,
       producesValue,
       displayRequestDuration,
@@ -145,6 +146,7 @@ export default class Responses extends React.Component {
                               code={ code }
                               response={ response }
                               specSelectors={ specSelectors }
+                              specActions={ specActions }
                               controlsAcceptHeader={response === acceptControllingResponse}
                               onContentTypeChange={this.onResponseContentTypeChange}
                               contentType={ producesValue }

src/core/plugins/json-schema-5/components/model-example.jsx

@@ -47,6 +47,7 @@ const ModelExample = ({
   getComponent,
   getConfigs,
   specSelectors,
+  specActions,
 }) => {
   const { defaultModelRendering, defaultModelExpandDepth } = getConfigs()
   const ModelWrapper = getComponent("ModelWrapper")
@@ -132,6 +133,7 @@ const ModelExample = ({
             getComponent={getComponent}
             getConfigs={getConfigs}
             specSelectors={specSelectors}
+            specActions={specActions}
             expandDepth={defaultModelExpandDepth}
             specPath={specPath}
             includeReadOnly={includeReadOnly}
@@ -147,6 +149,7 @@ ModelExample.propTypes = {
   getComponent: PropTypes.func.isRequired,
   specSelectors: PropTypes.shape({ isOAS3: PropTypes.func.isRequired })
     .isRequired,
+  specActions: PropTypes.object.isRequired,
   schema: PropTypes.object.isRequired,
   example: PropTypes.any.isRequired,
   isExecute: PropTypes.bool,

src/core/plugins/json-schema-5/components/model-wrapper.jsx

@@ -1,9 +1,8 @@
-import React, { Component, } from "react"
+import React, { Component } from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 export default class ModelWrapper extends Component {
-
   static propTypes = {
     schema: PropTypes.object.isRequired,
     name: PropTypes.string,
@@ -13,32 +12,147 @@ export default class ModelWrapper extends Component {
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
+    specActions: PropTypes.object.isRequired,
     expandDepth: PropTypes.number,
     layoutActions: PropTypes.object,
     layoutSelectors: PropTypes.object.isRequired,
     includeReadOnly: PropTypes.bool,
     includeWriteOnly: PropTypes.bool,
   }
 
-  onToggle = (name,isShown) => {
+  constructor(props) {
+    super(props)
+    this.state = {
+      selectedSchema: null
+    }
+  }
+
+  onToggle = (name, isShown) => {
     // If this prop is present, we'll have deepLinking for it
     if(this.props.layoutActions) {
       this.props.layoutActions.show(this.props.fullPath, isShown)
     }
   }
 
-  render(){
-    let { getComponent, getConfigs } = this.props
+  onSchemaSelect = (e) => {
+    const selectedSchema = e.target.value
+    const schemaPath = ["components", "schemas", selectedSchema]
+
+    const isResolved = this.props.specSelectors.specResolvedSubtree(schemaPath) != null
+    if (!isResolved) {
+      this.props.specActions.requestResolvedSubtree(schemaPath)
+    }
+
+    this.setState({ selectedSchema })
+  }
+
+  decodeRefName = (uri) => {
+    const unescaped = uri.replace(/~1/g, "/").replace(/~0/g, "~")
+    try {
+      return decodeURIComponent(unescaped)
+    } catch {
+      return unescaped
+    }
+  }
+
+  getModelName = (uri) => {
+    if (typeof uri === "string" && uri.includes("#/components/schemas/")) {
+      return this.decodeRefName(uri.replace(/^.*#\/components\/schemas\//, ""))
+    }
+    return null
+  }
+
+  /**
+   * Builds a Map of schema options combining explicit discriminator mappings and implicit mappings.
+   * 
+   * @returns {Map<string, string[]>} A Map where:
+   *   - key: the schema name (e.g., "Cat", "Dog")
+   *   - value: array of discriminator values that map to this schema
+   * 
+   * Examples:
+   * 1. Explicit mapping only:
+   *    { "Cat": ["kitty", "kitten"], "Dog": ["puppy"] }
+   * 
+   * 2. Implicit mapping only:
+   *    { "Cat": ["Cat"], "Dog": ["Dog"] }
+   * 
+   * 3. Mixed mapping:
+   *    { "Cat": ["kitty", "kitten"], "Dog": ["Dog"] }
+   *    where "Cat" has explicit mappings but "Dog" uses implicit
+   */
+  buildSchemaOptions = (name, discriminator, schemaMap) => {
+    const options = new Map()
+    const mapping = discriminator && discriminator.get("mapping")
+
+    // First add any explicit mappings
+    if (mapping && mapping.size > 0) {
+      mapping.forEach((schemaRef, key) => {
+        const schemaName = this.getModelName(schemaRef)
+        if (schemaName) {
+          const existing = options.get(schemaName) || []
+          options.set(schemaName, [...existing, key])
+        }
+      })
+    }
+
+    // Then add implicit mappings for any schemas not already mapped
+    const childSchemas = schemaMap[name] || []
+    childSchemas.forEach(childName => {
+      if (!options.has(childName)) {
+        // No explicit mapping for this schema, use implicit
+        options.set(childName, [childName])
+      }
+    })
+
+    return options
+  }
+
+  render() {
+    let { getComponent, getConfigs, schema, specSelectors } = this.props
     const Model = getComponent("Model")
 
     let expanded
     if(this.props.layoutSelectors) {
-      // If this is prop is present, we'll have deepLinking for it
       expanded = this.props.layoutSelectors.isShown(this.props.fullPath)
     }
 
-    return <div className="model-box">
-      <Model { ...this.props } getConfigs={ getConfigs } expanded={expanded} depth={ 1 } onToggle={ this.onToggle } expandDepth={ this.props.expandDepth || 0 }/>
-    </div>
+    const name = this.getModelName(schema.get("$$ref"))
+    const schemaMap = specSelectors.getParentToChildMap()
+    const discriminator = schema.get("discriminator")
+
+    const options = this.buildSchemaOptions(name, discriminator, schemaMap)
+    const showDropdown = !!discriminator && options.size > 0
+
+    // Use selected schema or original base schema
+    const effectiveSchema = this.state.selectedSchema 
+      ? specSelectors.findDefinition(this.state.selectedSchema)
+      : schema
+
+    return (
+      <div className="model-box">
+        {showDropdown && (
+          <div className="model-box-control">
+            <select onChange={this.onSchemaSelect} value={this.state.selectedSchema || ""}>
+              <option value="">Base: {name}</option>
+              {Array.from(options.entries()).map(([schemaName, keys]) => (
+                <option key={schemaName} value={schemaName}>
+                  {keys.length > 1 ? `${keys.join(" | ")} (${schemaName})` : schemaName}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+        <Model 
+          { ...this.props }
+          name={this.state.selectedSchema}
+          schema={effectiveSchema}
+          getConfigs={getConfigs}
+          expanded={expanded}
+          depth={1}
+          onToggle={this.onToggle}
+          expandDepth={this.props.expandDepth || 0}
+        />
+      </div>
+    )
   }
 }

src/core/plugins/json-schema-5/components/models.jsx

@@ -43,7 +43,7 @@ export default class Models extends Component {
   }
 
   render(){
-    let { specSelectors, getComponent, layoutSelectors, layoutActions, getConfigs } = this.props
+    let { specSelectors, specActions, getComponent, layoutSelectors, layoutActions, getConfigs } = this.props
     let definitions = specSelectors.definitions()
     let { docExpansion, defaultModelsExpandDepth } = getConfigs()
     if (!definitions.size || defaultModelsExpandDepth < 0) return null
@@ -100,6 +100,7 @@ export default class Models extends Component {
               specPath={specPath}
               getComponent={ getComponent }
               specSelectors={ specSelectors }
+              specActions={ specActions }
               getConfigs = {getConfigs}
               layoutSelectors = {layoutSelectors}
               layoutActions = {layoutActions}

src/core/plugins/oas3/components/request-body.jsx

@@ -41,6 +41,7 @@ const RequestBody = ({
   getComponent,
   getConfigs,
   specSelectors,
+  specActions,
   fn,
   contentType,
   isExecute,
@@ -284,6 +285,7 @@ const RequestBody = ({
           getComponent={ getComponent }
           getConfigs={ getConfigs }
           specSelectors={ specSelectors }
+          specActions={ specActions }
           expandDepth={1}
           isExecute={isExecute}
           schema={mediaTypeValue.get("schema")}
@@ -319,6 +321,7 @@ RequestBody.propTypes = {
   getConfigs: PropTypes.func.isRequired,
   fn: PropTypes.object.isRequired,
   specSelectors: PropTypes.object.isRequired,
+  specActions: PropTypes.object.isRequired,
   contentType: PropTypes.string,
   isExecute: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,

src/core/plugins/oas31/components/model/model.jsx

@@ -19,11 +19,10 @@ const getModelName = (uri) => {
   }
   return null
 }
-
 const Model = forwardRef(
-  ({ schema, getComponent, onToggle = () => {} }, ref) => {
+  ({ schema, name: nameFromProp, getComponent, specSelectors, onToggle = () => {} }, ref) => {
     const JSONSchema202012 = getComponent("JSONSchema202012")
-    const name = getModelName(schema.get("$$ref"))
+    const name = nameFromProp || getModelName(schema.get("$$ref"))
 
     const handleExpand = useCallback(
       (e, expanded) => {
@@ -36,6 +35,7 @@ const Model = forwardRef(
       <JSONSchema202012
         name={name}
         schema={schema.toJS()}
+        specSelectors={specSelectors}
         ref={ref}
         onExpand={handleExpand}
       />
@@ -45,6 +45,8 @@ const Model = forwardRef(
 
 Model.propTypes = {
   schema: ImPropTypes.map.isRequired,
+  name: PropTypes.string,
+  specSelectors: PropTypes.func.isRequired,
   getComponent: PropTypes.func.isRequired,
   onToggle: PropTypes.func,
 }

src/core/plugins/spec/selectors.js

@@ -48,6 +48,36 @@ export const specResolved = createSelector(
   spec => spec.get("resolved", Map())
 )
 
+
+
+// Get parent-child schema map
+export const getParentToChildMap = createSelector(
+  specJS,
+  spec => {
+    const schemaMap = {}
+    const schemas = spec?.components?.schemas
+    if (schemas) {
+      Object.entries(schemas).forEach(([schemaName, schema]) => {
+        if (schema.allOf) {
+          schema.allOf.forEach(item => {
+            if (item.$ref) {
+              // Extract parent schema name from $ref
+              const parentName = item.$ref.split("/").pop()
+              // Add current schema as child of parent
+              if (!schemaMap[parentName]) {
+                schemaMap[parentName] = []
+              } 
+              schemaMap[parentName].push(schemaName)
+            }
+          })
+        }
+      })
+    }
+    return schemaMap
+  }
+)
+
+
 export const specResolvedSubtree = (state, path) => {
   return state.getIn(["resolvedSubtrees", ...path], undefined)
 }

src/style/_models.scss

@@ -2,7 +2,8 @@
 {
     font-size: 12px;
     font-weight: 300;
-
+    display: block;
+
     @include text_code();
 
     .deprecated