function renderDatasets()

in modules/ui/rapid_view_manage_datasets.js [237:409]
132 lines of code
19 McCabe index (conditional complexity)

  function renderDatasets(selection) {
    const status = selection.selectAll('.rapid-view-manage-datasets-status');
    const results = selection.selectAll('.rapid-view-manage-datasets');

    const showPreview = prefs('rapid-internal-feature.previewDatasets') === 'true';
    const service = services.esriData;

    if (!service || (Array.isArray(_datasetInfo) && !_datasetInfo.length)) {
      results.classed('hide', true);
      status.classed('hide', false).text(t('rapid_feature_toggle.esri.no_datasets'));
      return;
    }

    if (!_datasetInfo) {
      results.classed('hide', true);
      status.classed('hide', false)
        .text(t('rapid_feature_toggle.esri.fetching_datasets'));

      status
        .append('br');

      status
        .append('img')
        .attr('class', 'rapid-view-manage-datasets-spinner')
        .attr('src', context.imagePath('loader-black.gif'));

      service.loadDatasets()
        .then(results => {
          // Build set of available categories
          let categories = new Set();

          Object.values(results).forEach(d => {
            d.groupCategories.forEach(c => {
              categories.add(c.toLowerCase().replace('/categories/', ''));
            });
          });
          if (!showPreview) categories.delete('preview');

          const combodata = Array.from(categories).sort().map(c => {
            let item = { title: c, value: c };
            if (c === 'preview') item.display = `${c} <span class="rapid-view-manage-dataset-beta beta"></span>`;
            return item;
          });
          categoryCombo.data(combodata);

          // Exclude preview datasets unless user has opted into them
          _datasetInfo = Object.values(results)
            .filter(d => showPreview || !d.groupCategories.some(category => category.toLowerCase() === '/categories/preview'));

          return _datasetInfo;
        })
        .then(() => _content.call(renderModalContent));

      return;
    }

    results.classed('hide', false);
    status.classed('hide', true);

    // Apply filters
    let count = 0;
    _datasetInfo.forEach(d => {
      const title = (d.title || '').toLowerCase();
      const snippet = (d.snippet || '').toLowerCase();

      if (datasetAdded(d)) {  // always show added datasets at the top of the list
        d.filtered = false;
        ++count;
        return;
      }
      if (_filterText && title.indexOf(_filterText) === -1 && snippet.indexOf(_filterText) === -1) {
        d.filtered = true;   // filterText not found anywhere in `title` or `snippet`
        return;
      }
      if (_filterCategory && !(d.groupCategories.some(category => category.toLowerCase() === `/categories/${_filterCategory}`))) {
        d.filtered = true;   // filterCategory not found anywhere in `groupCategories``
        return;
      }

      d.filtered = (++count > MAXRESULTS);
    });


    let datasets = results.selectAll('.rapid-view-manage-dataset')
      .data(_datasetInfo, d => d.id);

    // exit
    datasets.exit()
      .remove();

    // enter
    let datasetsEnter = datasets.enter()
      .append('div')
      .attr('class', 'rapid-view-manage-dataset');

    let labelsEnter = datasetsEnter
      .append('div')
      .attr('class', 'rapid-view-manage-dataset-label');

    labelsEnter
      .append('div')
      .attr('class', 'rapid-view-manage-dataset-name');

    labelsEnter
      .append('div')
      .attr('class', 'rapid-view-manage-dataset-license')
      .append('a')
      .attr('class', 'rapid-view-manage-dataset-link')
      .attr('target', '_blank')
      .attr('href', d => d.itemURL)
      .text(t('rapid_feature_toggle.esri.more_info'))
      .call(svgIcon('#iD-icon-out-link', 'inline'));

    let featuredEnter = labelsEnter.selectAll('.rapid-view-manage-dataset-featured')
      .data(d => d.groupCategories.filter(d => d.toLowerCase() === '/categories/featured'))
      .enter()
      .append('div')
      .attr('class', 'rapid-view-manage-dataset-featured');

    featuredEnter
      .append('span')
      .text('\u2b50');

    featuredEnter
      .append('span')
      .text(t('rapid_feature_toggle.esri.featured'));

    labelsEnter.selectAll('.rapid-view-manage-dataset-beta')
      .data(d => d.groupCategories.filter(d => d.toLowerCase() === '/categories/preview'))
      .enter()
      .append('div')
      .attr('class', 'rapid-view-manage-dataset-beta beta')
      .attr('title', t('rapid_poweruser_features.beta'));

    labelsEnter
      .append('div')
      .attr('class', 'rapid-view-manage-dataset-snippet');

    labelsEnter
      .append('button')
      .attr('class', 'rapid-view-manage-dataset-action')
      .on('click', toggleDataset);

    let thumbsEnter = datasetsEnter
      .append('div')
      .attr('class', 'rapid-view-manage-dataset-thumb');

    thumbsEnter
      .append('img')
      .attr('class', 'rapid-view-manage-dataset-thumbnail')
      .attr('src', d => `https://openstreetmap.maps.arcgis.com/sharing/rest/content/items/${d.id}/info/${d.thumbnail}?w=400`);

    // update
    datasets = datasets
      .merge(datasetsEnter)
      .sort(sortDatasets)
      .classed('hide', d => d.filtered);

    datasets.selectAll('.rapid-view-manage-dataset-name')
      .html(d => highlight(_filterText, d.title));

    datasets.selectAll('.rapid-view-manage-dataset-snippet')
      .html(d => highlight(_filterText, d.snippet));

    datasets.selectAll('.rapid-view-manage-dataset-action')
      .classed('secondary', d => datasetAdded(d))
      .text(d => datasetAdded(d) ? t('rapid_feature_toggle.esri.remove') : t('rapid_feature_toggle.esri.add_to_map'));

    const numShown = _datasetInfo.filter(d => !d.filtered).length;
    const gt = (count > MAXRESULTS && numShown === MAXRESULTS) ? '>' : '';
    _content.selectAll('.rapid-view-manage-filter-results')
      .text(t('rapid_feature_toggle.esri.datasets_found', { num: `${gt}${numShown}` }));
  }