_selectionMenuTemplate(result) {
    if (!result) {
      return html``;
    }
    const { referenceCollections, searchTargetDeps } = result;
    return html`
      <test-table></test-table>

      <form class="u-c-mv2" id="selection-menu-form" action="" @change="${this._aggregateResults}">
        <fieldset>
          <legend>References (grouped by collection)</legend>
          ${Object.keys(referenceCollections).map(
            colName => html`
              <div role="separator">${colName}</div>
              ${referenceCollections[colName].map(
                refName => html`
                  <label
                    ><input
                      type="checkbox"
                      name="references"
                      .checked=${colName === 'lion-based-ui'}
                      .value="${refName}"
                    />${refName}</label
                  >
                `,
              )}
            `,
          )}
        </fieldset>

        <fieldset>
          <legend>Repositories (grouped by search target)</legend>
          ${Object.keys(searchTargetDeps).map(
            rootProjName => html`
              <details>
                <summary>
                  <span class="u-bold">${rootProjName}</span>
                  <input
                    aria-label="check all"
                    type="checkbox"
                    checked
                    @change="${({ target }) => {
                      // TODO: of course, logic depending on dom is never a good idea
                      const groupBoxes =
                        target.parentElement.nextElementSibling.querySelectorAll(
                          'input[type=checkbox]',
                        );
                      const { checked } = target;
                      Array.from(groupBoxes).forEach(box => {
                        // eslint-disable-next-line no-param-reassign
                        box.checked = checked;
                      });
                    }}"
                  />
                </summary>
                <div class="menu-group">
                  ${searchTargetDeps[rootProjName].map(
                    dep => html`
                      <label
                        ><input
                          type="checkbox"
                          name="repos"
                          .checked="${dep}"
                          .value="${dep}"
                        />${dep}</label
                      >
                    `,
                  )}
                </div>
                <hr />
              </details>
            `,
          )}
        </fieldset>
      </form>
    `;
  }
@param {object} referenceCollections references defined in providence.conf.js Includes reference projects
@param {object} searchTargetCollections programs defined in providence.conf.js. Includes search-target projects
@param {object[]} projDeps deps retrieved by running providence, read from search-target-deps-file.json