Expand all by default

[karlismelderis]

Can you please add an option to generate file where all responses are expanded by default?
I think it duplicates this -#211

Problem is that we still need to provide PDF file of spec (due to internal procedures) and it's painful to click through API spec and expand all before saving to PDF :)

[karlismelderis]

just to clarify I'm looking to expand both "Responses" and "Response Samples"
Response samples might be trickiest as all samples need to be visible

[jsamr]

@karlismelderis In the meantime, you can just do:

document.querySelectorAll('div').forEach((div) => div.click())

in the browser console.

[SaraivaDaniel]

I also have the need to expand all elements in the response schema (not examples). I tried the comment by @jsamr above, but it only expanded first level.

To expand all definitions, I've included the following script after redoc initialization:

// inspired by https://gist.github.com/stephenorem/5162a871c5d96bfa522e31ede6205e51
function getMaxDepth(elem) {
  var maxDepth = 0,
	  d,
	  parents;
	  
  document.querySelectorAll(elem).forEach((e) => {
	parents = getParents(e);
	d = parents ? parents.length + 1 : 1;
	maxDepth = d > maxDepth ? d : maxDepth;
  });

  return maxDepth;
}
	
// https://gomakethings.com/how-to-get-all-parent-elements-with-vanilla-javascript/
var getParents = function (elem) {
	// Set up a parent array
	var parents = [];
	
	// Push each parent element to the array
	for ( ; elem && elem !== document; elem = elem.parentNode ) {
		parents.push(elem);
	}
	
	// Return our parent array
	return parents;
};
	
document.querySelectorAll('div').forEach((div) => div.click());
max = getMaxDepth('td');
setTimeout(function() {
	for (i = 0; i <= max; i++) {
		document.querySelectorAll('tr:not(.expanded) > td').forEach((td) => td.click());
	}
}, 1000); 
// the timeout above is needed to let the divs be expanded first (didn't care to figure out right now why)

[JohnGoldInc]

//My quick fix in just pasting into Console

async function loadScript(url) {
let response = await fetch(url);
let script = await response.text();
eval(script);
}

let scriptUrl = "https://code.jquery.com/jquery-3.3.1.min.js"
loadScript(scriptUrl);
$('div.zippy-title').click();
$('span.param-name-wrap').click();

[RomanHotsiy]

Duplicate of #211

note that you can expand all responses by using `expandResponses: "all`` setting.
There is no corresponding option for schemas yet though.

[benbro]

What's the difference between expand all responses and expand schemas? Isn't the schema part of the response?

I've tried adding expand-responses="all" to the redoc tag but the items array inside my response example is still collapsed:

<redoc spec-url="openapi.yaml" expand-responses="all"></redoc>

[RomanHotsiy]

Collapsed responses:

Expanded Responses with collapsed subschemas:

Expanded Responses with expanded subschemas:

[bohnman]

None of these solutions seem to expand deeply nested schemas. My solution is the following:

    var expandInterval = setInterval(function() {
        document.querySelectorAll('tr:not(.expanded) > td').forEach((td) => td.click())
    }, 100);

    setTimeout(function() {
        clearInterval(expandInterval)
    }, 3000);

[rhatfield-bushel]

Here's what I think is a slightly more elegant solution, figured I'd share. It's still a work around, but it doesn't cause any visible expanding, and updates when oneOf sections change.

This works in an almost recursive fashion, with each click event causing a mutation and in turn another click event (and so on).

One slight side effect, the schema sections are no longer collapsable, but for my purposes that's acceptable.

<redoc></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"></script>
<script>
  var expand = () => {
    // this likely could be narrowed, but this finds all table cells,
    // and clicks them just in case.
    document
      .querySelectorAll("tr:not(.expanded) > td")
      .forEach(td => td.click());
  };

  var observe = ({ elements, action, types }) => {
    var ddObserver = new MutationObserver(mutations => action(mutations));
    elements.forEach(dd => ddObserver.observe(dd, types));
  };

  var onLoadCallback = err => {
    // first, watch all buttons to see when the selection changes
    // then, watch the table and expand all subitems
    var observables = [
      {
        elements: document.querySelectorAll(
          ".api-content>div>div>div>div>ul>li"
        ),
        action: mutations => mutations.forEach(m => expand()),
        types: {
          attributes: true
        }
      },
      {
        elements: document.querySelectorAll(
          ".api-content>div>div>div>div>table"
        ),
        action: expand,
        types: {
          attributes: true,
          subtree: true
        }
      }
    ];

    observables.forEach(o => observe(o));

    // once for good measure
    expand();
  };

  Redoc.init(
    "openapi.yaml",
    {
      jsonSampleExpandLevel: "all"
    },
    document.querySelector("redoc"),
    onLoadCallback
  );
</script>

[thim81]

@RomanHotsiy

How can you configure the Expanded Responses with expanded subschemas?

By setting the to expandResponses: "all" or expandResponses: "200,201,422", it is not expending the subschema's like in your screenshot?

Is there another setting that can be used for this?

[enihsyou]

Thanks to #593 (comment) I have the following solution.
It works on 2.0.0-rc.48 (right now), and narrows down to button.

// find all expandable button and click on it
const expandInterval = setInterval(() => document
    .querySelectorAll('tr:not(.expanded) > td > button[aria-label*=expand]')
    .forEach((btn) => btn.click()), 100);

// click repeatedly for 1 second, that roughly 10 levels.
setTimeout(() => clearInterval(expandInterval), 1000);

Wrap this in a script tag and append at the end of HTML body tag and it works perfectly.

[tothdaniel]

Actually the previous solution expands almost everyting except the payloads since those expander buttons are in a different html sctucture (under div instead of under tr > td). Handling both pathes solves the issue and expands everything, tested on 2.0.0-rc.63.

const expandIntervalTrTd = setInterval(() => document
    .querySelectorAll('tr:not(.expanded) > td > button[aria-label*=expand]')
    .forEach((btn) => btn.click()), 100);

setTimeout(() => clearInterval(expandIntervalTrTd), 1000);


const expandIntervalDiv = setInterval(() => document.
    querySelectorAll('div.collapsed > button[aria-label*="expand"]')
    .forEach((btn) => btn.click()), 100);

setTimeout(() => clearInterval(expandIntervalDiv), 1000);

[jfoclpf]

@jsamr is not that wise clicking in every div, you can filter by button and content

To collapse all

document.querySelectorAll('button').forEach(btn => {
    if(btn.innerHTML.includes('Collapse all')) btn.click()
})

To expand all

document.querySelectorAll('button').forEach(btn => {
    if(btn.innerHTML.includes('Expand all')) btn.click()
})