feat: add virtualization for schemas section for OpenAPI 2.0 and 3.0.x

.claude/implementation/perf-virtualization/phase-1-models-virtualization.md

@@ -76,39 +76,39 @@ component renders instead of this one.
 
 ## Acceptance Criteria
 
-- [ ] A spec **below** the 100-schema threshold renders today's markup unchanged (legacy path) —
+- [x] A spec **below** the 100-schema threshold renders today's markup unchanged (legacy path) —
       verify `model-collapse.cy.js` passes with no edits
-- [ ] A spec **above** the threshold uses the windowed path, and only visible models in the viewport
+- [x] A spec **above** the threshold uses the windowed path, and only visible models in the viewport
       are mounted (verify in React DevTools)
-- [ ] Boundary tested both sides — one fixture just under the threshold, one just over
-- [ ] Scrolling through the models list renders/unmounts items correctly
-- [ ] Collapsing and expanding the "Schemas/Models" section works as before
-- [ ] Existing `model-collapse.cy.js` scenarios still pass **with no edits** — its fixtures have 3
+- [x] Boundary tested both sides — one fixture just under the threshold, one just over
+- [x] Scrolling through the models list renders/unmounts items correctly
+- [x] Collapsing and expanding the "Schemas/Models" section works as before
+- [x] Existing `model-collapse.cy.js` scenarios still pass **with no edits** — its fixtures have 3
       definitions each, so they take the legacy path. If any of its selectors needed changing
       (`.models h4 .models-control`, `#model-User .model-box .model-box-control` at `:40`/`:44`,
       `#model-Pet` / `#model-Order` at `:18`/`:28`/`:34`), that means the legacy path was altered —
       treat it as a regression, not a test to update
-- [ ] `defaultModelsExpandDepth < 0` still short-circuits the whole section to `null`
+- [x] `defaultModelsExpandDepth < 0` still short-circuits the whole section to `null`
       (`models.jsx:51`), and `defaultModelsExpandDepth > 0 && isShown` still drives initial
       per-model expansion (`models.jsx:131`)
 - [ ] No visual regression — layout, spacing, expand/collapse of individual model unchanged
-- [ ] No accessibility regression — keyboard navigation and screen reader order preserved
-- [ ] Performance: initial render time for the 200+ model fixture reduced vs. the recorded baseline
+- [x] No accessibility regression — keyboard navigation and screen reader order preserved
+- [x] Performance: initial render time for the 200+ model fixture reduced vs. the recorded baseline
       (React Profiler, before/after)
-- [ ] Unit tests updated in `test/unit/core/plugins/json-schema-5/components/models.jsx`
-- [ ] `ResizeObserver` polyfill added to `test/unit/jest-shim.js` and `npm run test:unit` green
+- [x] Unit tests updated in `test/unit/core/plugins/json-schema-5/components/models.jsx`
+- [x] `ResizeObserver` polyfill added to `test/unit/jest-shim.js` and `npm run test:unit` green
       (blocking prerequisite — see Unit-test infrastructure)
 - [ ] Bundle-size impact recorded via `npm run deps-size` before/after; `@tanstack/react-virtual`
       adds ~5KB min+gzip. Flag it in the PR if the measured delta is materially larger
-- [ ] `swagger-ui-react` still renders models correctly — the flavor re-exports core, so it
+- [x] `swagger-ui-react` still renders models correctly — the flavor re-exports core, so it
       inherits this change with no code edit, but it is a separately published package and is not
       covered by the Cypress suite
-- [ ] E2E test: models section scrolls and renders correctly with the new fixture
-- [ ] `#model-<Name>` browser-anchor navigation still works below the threshold, and its
+- [x] E2E test: models section scrolls and renders correctly with the new fixture
+- [x] `#model-<Name>` browser-anchor navigation still works below the threshold, and its
       above-threshold breakage is accepted per
       [Accepted Behavior Changes](#accepted-behavior-changes-confirm-with-maintainers-before-building).
       Note this is the plain browser anchor — model *deep linking* does not exist (see Technical Notes)
-- [ ] Expanding model A, scrolling it out of view, and scrolling back shows A still expanded and
+- [x] Expanding model A, scrolling it out of view, and scrolling back shows A still expanded and
       no *other* model wrongly expanded (guards the `getItemKey` requirement below)
 
 ## Technical Notes

package.json

@@ -76,6 +76,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.27.1",
     "@scarf/scarf": "=1.4.0",
+    "@tanstack/react-virtual": "=3.14.9",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",

src/core/plugins/deep-linking/layout.js

@@ -5,6 +5,8 @@ import Im, { fromJS } from "immutable"
 
 const SCROLL_TO = "layout_scroll_to"
 const CLEAR_SCROLL_TO = "layout_clear_scroll"
+const SCROLL_TO_VIRTUALIZED_SCHEMA = "layout_scroll_to_virtualized_schema"
+const CLEAR_SCROLL_TO_VIRTUALIZED_SCHEMA = "layout_clear_scroll_to_virtualized_schema"
 
 export const show = (ori, { getConfigs, layoutSelectors }) => (...args) => {
   ori(...args)
@@ -133,6 +135,15 @@ export const clearScrollTo = () => {
   }
 }
 
+export const scrollToVirtualizedSchema = (name) => ({
+  type: SCROLL_TO_VIRTUALIZED_SCHEMA,
+  payload: name,
+})
+
+export const clearScrollToVirtualizedSchema = () => ({
+  type: CLEAR_SCROLL_TO_VIRTUALIZED_SCHEMA,
+})
+
 // From: https://stackoverflow.com/a/42543908/3933724
 // Modified to return html instead of body element as last resort
 function getScrollParent(element, includeHidden) {
@@ -166,12 +177,17 @@ export default {
         scrollTo,
         clearScrollTo,
         readyToScroll,
-        parseDeepLinkHash
+        parseDeepLinkHash,
+        scrollToVirtualizedSchema,
+        clearScrollToVirtualizedSchema,
       },
       selectors: {
         getScrollToKey(state) {
           return state.get("scrollToKey")
         },
+        getScrollToVirtualizedSchema(state) {
+          return state.get("scrollToVirtualizedSchema")
+        },
         isShownKeyFromUrlHashArray(state, urlHashArray) {
           const [tag, operationId] = urlHashArray
           // We only put operations in the URL
@@ -199,7 +215,13 @@ export default {
         },
         [CLEAR_SCROLL_TO](state) {
           return state.delete("scrollToKey")
-        }
+        },
+        [SCROLL_TO_VIRTUALIZED_SCHEMA](state, action) {
+          return state.set("scrollToVirtualizedSchema", action.payload)
+        },
+        [CLEAR_SCROLL_TO_VIRTUALIZED_SCHEMA](state) {
+          return state.delete("scrollToVirtualizedSchema")
+        },
       },
       wrapActions: {
         show

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

@@ -19,10 +19,24 @@ export default class ArrayModel extends Component {
     depth: PropTypes.number,
     includeReadOnly: PropTypes.bool,
     includeWriteOnly: PropTypes.bool,
+    layoutActions: PropTypes.shape({
+      show: PropTypes.func.isRequired,
+    }),
+    layoutSelectors: PropTypes.shape({
+      isShown: PropTypes.func.isRequired,
+    }),
+  }
+
+  handleToggle = (modelName, shown) => {
+    const { layoutActions, specPath } = this.props
+    layoutActions?.show(specPath.toJS(), shown)
   }
 
   render(){
-    let { getComponent, getConfigs, schema, depth, expandDepth, name, displayName, specPath } = this.props
+    let { getComponent, getConfigs, schema, depth, expandDepth, name, displayName, specPath, layoutSelectors } = this.props
+    const defaultExpanded = depth <= expandDepth
+    const isExpanded = layoutSelectors?.isShown(specPath.toJS(), defaultExpanded) ?? defaultExpanded
+
     let description = schema.get("description")
     let items = schema.get("items")
     let title = schema.get("title") || displayName || name
@@ -48,7 +62,12 @@ export default class ArrayModel extends Component {
     */
 
     return <span className="model">
-      <ModelCollapse title={titleEl} expanded={ depth <= expandDepth } collapsedContent="[...]">
+      <ModelCollapse
+        title={titleEl}
+        onToggle={this.handleToggle}
+        expanded={isExpanded}
+        collapsedContent="[...]"
+      >
         [
           {
             properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null