index.html

---
layout: default
---
<div class="container-fluid" style="margin-top:20px; height:100%;">
  <div class="container-fluid" style="height:100%;">
    <div class="row" style="height:var(--breadcrumb-height);">
      <ol class="breadcrumb showAsHome" style="display:none">
        <li class="active">Home</li>
      </ol>
      <ol class="breadcrumb showAsSearch" style="display:none">
        <li><a href="{{site.baseurl}}/">Home</a></li>
        <li class="active">Package List</li>
      </ol>
    </div>
    <div class="row" style="height:var(--distro-height);">
      {% include distro_switch.html %}
    </div>
    <div class="row" style="height:var(--search-height);">
      <div class="panel panel-default" style="height:100%;">
        <div class="panel-heading" style="height:100%;">
          <div class="row" style="height:100%;">
            <div class="col-xs-6">
              <div class="input-group">
                <input id="search-query" type="text" class="form-control"
                        autocomplete="off" placeholder="Search packages">
                <span class="input-group-btn">
                  <button id="search-button" title="Search packages" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span>
                  </button>
                </span>
                <span class="input-group-addon showCellAsSearch" style="display:none">
                  <input type="checkbox" id="search-enable-box"/>
                  <span class="hidden-xs"> Enable search </span>
                </span>
              </div>
            </div>
            <div class="col-xs-4" style="line-height:35px;">
              <p class="showAsSearch" style="display:none;">
                <span class="hidden-xs">Showing </span>
                <span id="table-filtered-count">0</span> of
                <span id="table-unfiltered-count">0</span>
                <span class="hidden-xs"> packages</span>
              </p>
            </div>
            <div class="col-xs-2 text-right" style="line-height:35px">
              <p>
                <a href="{{site.baseurl}}/help/package_list/">
                  <span class="glyphicon glyphicon-question-sign"></span>
                  <span class="hidden-xs"> Help</span>
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row showAsHome" style="display:none;">
      <h2>Welcome to ROS Index</h2>
      <p>
        ROS Index is the entry point for searching ROS and ROS 2 resources, including packages, repositories, and system dependencies.
      </p>
      <p>
        You can enter keywords and phrases in the search bar and then filter results by resource type, or you can browse the complete package, repository and system dependency lists.
      </p>
      <p>
        New to ROS Index? Be sure to follow our
        <a href="{{site.baseurl}}/help/tutorial">Tutorial</a>
        To learn more about the process of searching for packages.
      </p>
      <h2>Active Distributions</h2>
      <p>
        <a href="https://wiki.ros.org/noetic">ROS Noetic</a>
      </p>
      <p>
        <a href="https://docs.ros.org/en/humble/Releases/Release-Humble-Hawksbill.html">ROS 2 Humble</a>
      </p>
      <p>
        <a href="https://docs.ros.org/en/jazzy/Releases/Release-Jazzy-Jalisco.html">ROS 2 Jazzy</a>
      </p>
      <h2>Development Distribution</h2>
      <p>
        <a href="http://docs.ros.org/en/rolling/Releases/Release-Rolling-Ridley.html">ROS 2 Rolling</a>
      </p>
      <h2>More resources</h2>
      <p>
        <a href="https://discourse.ros.org/">ROS Discourse</a>
      </p>
      <p>
        <a href="https://robotics.stackexchange.com/">Robotics Stack Exchange</a>
      </p>
      <p>
        <a href="https://www.ros.org/">ros.org</a>
      </p>
    </div>

    <div class="row tab-table showAsSearch" style="height:calc(var(--content-height) - var(--search-height) - var(--distro-height) - var(--breadcrumb-height) - var(--table-margins))">
      <div id="packages-table"></div>
    </div>

  </div>
</div>

<!-- See https://github.com/olifolkerd/tabulator/issues/4419 for issue with Tabulator post-5.6.0 -->
<link href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<!-- <script src={{ "/js/tabulator.js" | prepend: site.baseurl }}></script> -->
<script src={{ "/js/distro_switch.js" | prepend: site.baseurl }}></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
<script src="{{site.baseurl}}/js/lunr.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var gData_promises = {};
  var gIndex_promises = {};
  var gTable = null;
  var gDistro = "{{ site.distros[0] }}";
  const DEFAULT_SORT = [{column:"url", dir:"asc"}];

  function setHome() {
    // Show the page as a home page, without the package table.
    $("body").css("height", "auto");
    $(".page-content").css("height", "auto");
    $(".wrapper").css("height", "auto");
    $(".showAsSearch").css("display", "none");
    $(".showCellAsSearch").css("display", "none");
    $(".showAsHome").css("display", "block");
  }

  function setSearch() {
    // Show the page as a package search/list page.
    $("body").css("height", "100vh");
    $(".page-content").css("height", "var(--content-height)");
    $(".wrapper").css("height", "100%");
    $(".showAsHome").css("display", "none");
    $(".showAsSearch").css("display", "block");
    $(".showCellAsSearch").css("display", "table-cell");
  }

  function addFilter(table, field, type, value) {
    // Add a new table filter, removing existing.
    removeFilterByField(table, field);
    table.addFilter(field, type, value);
  }

  function removeFilterByField(table, field) {
    // remove all filters on a specified field, if any.
    for (const existingFilter of table.getFilters()) {
      if ('field' in existingFilter && existingFilter['field'] == field) {
        table.removeFilter(existingFilter.field, existingFilter.type, existingFilter.value);
      }
    }
  }

  function getData(distro) {
    // Start and return a promise to get distro json data.
    if (distro in gData_promises) {
      return gData_promises[distro];
    }
    gData_promises[distro] =
      fetch(`{{site.baseurl}}/search/packages/data.${distro}.json`)
        .then((response) => response.json());

    return gData_promises[distro];
  }

  function getIndex(distro) {
    // Start and return a promise to get distro json index.
    if (distro in gIndex_promises) {
      return gIndex_promises[distro];
    }
    gIndex_promises[distro] =
      fetch(`{{site.baseurl}}/search/packages/index.${distro}.json`)
        .then((response) => response.json())
        .then((indexData) => {
          return lunr.Index.load(indexData);
        });

    return gIndex_promises[distro];
  }

  function getWindowSearchQuery() {
    return new URL(window.location.toString()).searchParams.get('pkgs');
  }

  function getIsSearch() {
    return new URL(window.location.toString()).searchParams.has('search_packages');
  }

  function setWindowSearchQuery(query) {
    // Populate the search input with querystring parameter.
    var url = new URL(window.location.toString());
    url.searchParams.set('pkgs', query);
    url.searchParams.set('search_packages', true);
    window.history.pushState({}, '', url);
  }

  function copySearchQueryToUI() {
    var query = getWindowSearchQuery() || '';
    $('#search-query').val(query);
    $("#search-enable-box").prop("checked", !!query);
  }

  function copyUIToSearchQuery() {
    if ($("#search-enable-box").prop("checked")) {
      setWindowSearchQuery($('#search-query').val());
    } else {
      setWindowSearchQuery('');
    }
  }

  function getSearchArray(distro, query) {
    // Returns a promise resolving to a search array of id hits.
    if (!query) {
      return Promise.resolve(null);
    }
    return getIndex(distro).then(searchIndex => {
      var searchResults = searchIndex.search(query);
      var searchArray = searchResults.map((result) => parseInt(result.ref));
      console.log(`Search returned ${searchArray.length} results`);
      // Tabulator filters don't seem to work with zero entries
      searchArray = searchArray.length ? searchArray : [-1];
      return searchArray;
    });
  }

  function setTableFilter(table, searchArray) {
    // Set the sort and filter for a table with search results.
    // Must be called after table built event.
    if (searchArray) {
      addFilter(table, 'id', 'in', searchArray);
    } else {
      removeFilterByField(table, 'id');
    }
  }

  function makeTable(distro, data, searchArray) {
    const CALENDAR = "\u{1F4C5}";
    const STAR = "\u2605";
    const LEFT_ARROW = "\u2B05";
    const RIGHT_ARROW = "\u27A1";

    var tableSort = DEFAULT_SORT;
    if (searchArray) {
      var tableFilter = [{field: 'id', type: 'in', value: searchArray}];
    } else {
      var tableFilter = [];
    }

    const table = new Tabulator("#packages-table", {
      columnDefaults:{ tooltip:true },
      maxHeight:"100%",
      data:data, //assign data to table
      layout:"fitColumns", //fit columns to width of table (optional)
      rowHeight:30, // Workaround for https://github.com/olifolkerd/tabulator/issues/4419
      initialSort: tableSort,
      initialFilter: tableFilter,
      columns:[ //Define Table Columns
        { title:"Name", field:"url", width:200,
          formatter:"link", formatterParams:{labelField:"name", urlPrefix:"{{site.baseurl}}"}},
        { title:"Description", field:"description", minWidth:300},
        { title:STAR, field:"released", width:40, formatter:"tickCross", headerTooltip:"release status", hozAlign:"center",
          formatterParams: {allowTruthy: true, allowEmpty: true}},
        { title:CALENDAR, field: "last_commit_time", width:80, headerHozAlign:"center", headerTooltip:"last commit date",
          sorter:"date", sorterParams:{format:"yyyy-MM-dd"}},
        { title:LEFT_ARROW, field:"pkg_deps", width:40, headerTooltip:"package dependency count"},
        { title:RIGHT_ARROW, field:"dependants", width:40, headerTooltip:"package used by count"},
        { title:"Authors", field:"authors", width:120},
        { title:"Maintainers", field:"maintainers", width:120},
        { title:"Repo", field:"repo_name", width:100,
          formatter:"link", formatterParams:{labelField:"repo_name", url:(cell) => {
            return `{{site.baseurl}}/r/${cell.getValue()}/#${distro}`}}},
        { title:"Org", field:"org", width:100},
      ],
      });
      return table;
    }

  function makeBuiltTable(distro, data, searchArray) {
    // Returns a promise resolving to a built Tabulator table.
    var table = makeTable(distro, data, searchArray);
    var tablePromise = new Promise((resolve, reject) => {
      table.on("dataFiltered", (filters, rows) => {
        console.log(`Table filtered: total: ${table.getDataCount()} rowCount: ${rows.length}`);
        $("#table-filtered-count").text(rows.length);
        $("#table-unfiltered-count").text(table.getDataCount());
      });
      table.on("tableBuilt", () => {
        resolve(table);
      });
    });
    return tablePromise;
  }

  function showTable(distro, query) {
    // Returns a promise that displays a Tabulator table.
    var searchPromise = query ? getSearchArray(distro, query) : Promise.resolve(null);
    return Promise.all([getData(distro), searchPromise]).then(values => {
      var data = values[0];
      var searchArray = values[1];
      if (!searchArray) {
        $("#table-filtered-count").text(data.length);
        $("#table-unfiltered-count").text(data.length);
      }

      if (gTable) {
        setTableFilter(gTable, searchArray);
        gTable.replaceData(data).then(console.log('table data replaced'));
        return;
      }
      else {
        makeBuiltTable(distro, data, searchArray).then(table => {
          gTable = table;
        });
      }
    });
  }

  $(function() {
    copySearchQueryToUI();
    gDistro = setupDistroSwitch("{{ site.distros[0] }}");
    getData(gDistro);
    if (getIsSearch()) {
      var query = getWindowSearchQuery();
      showTable(gDistro, query).then(setSearch());
    } else {
      setHome();
    }

    window.addEventListener("popstate", (event) => {
      console.log(`onpopstate: url: ${document.location.toString()}`);
      if (getIsSearch()) {
        copySearchQueryToUI();
        var query = getWindowSearchQuery();
        showTable(gDistro, query).then(setSearch());
      } else {
        setHome();
      }
    });

    window.addEventListener('hashchange', (event) => {
      // Reload the table if the distro changes.
      var url = new URL(document.location.toString());
      console.log(`hash change url: ${url.href}`);
      if (url.hash) {
        gDistro = url.hash.substring(1);
      } else {
        gDistro = gDistro || "{{ site.distros[0] }}";
      }
      getData(gDistro);
      var query = getWindowSearchQuery();
      if (gTable) {
        gTable.clearData();
      }
      if (getIsSearch()) {
        showTable(gDistro, query).then(setSearch());
      } else {
        setHome();
      }
    });

    $('#search-query').on('focus', (e) => {
      // Pre-load index to speed up search response.
      getIndex(gDistro);
    });

    $('#search-query').bind('keypress', (e) => {
      if (e.which == 13) {
        $("#search-enable-box").prop("checked", true);
        copyUIToSearchQuery();
        var query = getWindowSearchQuery() || '';
        showTable(gDistro, query).then(setSearch());
      }
    });

    $("#search-enable-box").on('click', (e) => {
      var element = e.currentTarget;
      var query = $("#search-query").val();
      if (element.checked && query) {
        copyUIToSearchQuery();
      } else {
        setWindowSearchQuery('');
        query = '';
        if (gTable) {
          gTable.setSort(DEFAULT_SORT);
        }
      }
      showTable(gDistro, query).then(setSearch());
    });

    $("#search-button").on('click', (e) => {
      var query = $("#search-query").val();
      if (query) {
        $("#search-enable-box").prop("checked", true);
        copyUIToSearchQuery();
      } else {
        setWindowSearchQuery('');
        query = '';
        if (gTable) {
          gTable.setSort(DEFAULT_SORT);
        }
      }
      showTable(gDistro, query).then(setSearch());
    });

  });
</script>