selectImage: function()

in modules/services/streetside.js [739:898]
120 lines of code
9 McCabe index (conditional complexity)

  selectImage: function (context, key) {
    let that = this;

    let d = this.cachedImage(key);

    let viewer = context.container().select('.photoviewer');
    if (!viewer.empty()) viewer.datum(d);

    this.setStyles(context, null, true);

    let wrap = context.container().select('.photoviewer .ms-wrapper');
    let attribution = wrap.selectAll('.photo-attribution').html('');

    wrap.selectAll('.pnlm-load-box')   // display "loading.."
      .style('display', 'block');

    if (!d) return this;

    this.updateUrlImage(key);

    _sceneOptions.northOffset = d.ca;

    let line1 = attribution
      .append('div')
      .attr('class', 'attribution-row');

    const hiresDomId = utilUniqueString('streetside-hires');

    // Add hires checkbox
    let label = line1
      .append('label')
      .attr('for', hiresDomId)
      .attr('class', 'streetside-hires');

    label
      .append('input')
      .attr('type', 'checkbox')
      .attr('id', hiresDomId)
      .property('checked', _hires)
      .on('click', (d3_event) => {
        d3_event.stopPropagation();

        _hires = !_hires;
        _resolution = _hires ? 1024 : 512;
        wrap.call(setupCanvas, true);

        let viewstate = {
          yaw: _pannellumViewer.getYaw(),
          pitch: _pannellumViewer.getPitch(),
          hfov: _pannellumViewer.getHfov()
        };

        _sceneOptions = Object.assign(_sceneOptions, viewstate);
        that.selectImage(context, d.key)
          .showViewer(context);
      });

    label
      .append('span')
      .html(t.html('streetside.hires'));


    let captureInfo = line1
      .append('div')
      .attr('class', 'attribution-capture-info');

    // Add capture date
    if (d.captured_by) {
      const yyyy = (new Date()).getFullYear();

      captureInfo
        .append('a')
        .attr('class', 'captured_by')
        .attr('target', '_blank')
        .attr('href', 'https://www.microsoft.com/en-us/maps/streetside')
        .html('©' + yyyy + ' Microsoft');

      captureInfo
        .append('span')
        .html('|');
    }

    if (d.captured_at) {
      captureInfo
        .append('span')
        .attr('class', 'captured_at')
        .html(localeTimestamp(d.captured_at));
    }

    // Add image links
    let line2 = attribution
      .append('div')
      .attr('class', 'attribution-row');

    line2
      .append('a')
      .attr('class', 'image-view-link')
      .attr('target', '_blank')
      .attr('href', 'https://www.bing.com/maps?cp=' + d.loc[1] + '~' + d.loc[0] +
        '&lvl=17&dir=' + d.ca + '&style=x&v=2&sV=1')
      .html(t.html('streetside.view_on_bing'));

    line2
      .append('a')
      .attr('class', 'image-report-link')
      .attr('target', '_blank')
      .attr('href', 'https://www.bing.com/maps/privacyreport/streetsideprivacyreport?bubbleid=' +
        encodeURIComponent(d.key) + '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17')
      .html(t.html('streetside.report'));


    let bubbleIdQuadKey = d.key.toString(4);
    const paddingNeeded = 16 - bubbleIdQuadKey.length;
    for (let i = 0; i < paddingNeeded; i++) {
      bubbleIdQuadKey = '0' + bubbleIdQuadKey;
    }
    const imgUrlPrefix = streetsideImagesApi + 'hs' + bubbleIdQuadKey;
    const imgUrlSuffix = '.jpg?g=6338&n=z';

    // Cubemap face code order matters here: front=01, right=02, back=03, left=10, up=11, down=12
    const faceKeys = ['01','02','03','10','11','12'];

    // Map images to cube faces
    let quadKeys = getQuadKeys();
    let faces = faceKeys.map((faceKey) => {
      return quadKeys.map((quadKey) => {
        const xy = qkToXY(quadKey);
        return {
          face: faceKey,
          url: imgUrlPrefix + faceKey + quadKey + imgUrlSuffix,
          x: xy[0],
          y: xy[1]
        };
      });
    });

    loadFaces(faces)
      .then(function() {

        if (!_pannellumViewer) {
          that.initViewer();
        } else {
          // make a new scene
          _currScene += 1;
          let sceneID = _currScene.toString();
          _pannellumViewer
            .addScene(sceneID, _sceneOptions)
            .loadScene(sceneID);

          // remove previous scene
          if (_currScene > 2) {
            sceneID = (_currScene - 1).toString();
            _pannellumViewer
              .removeScene(sceneID);
          }
        }
      });

    return this;
  },