MutualInformationDiagram

Source

body.html

<div class="info-diagram-container">
  <div class="info-diagram-placeholder">
    <div class="id-placeholder-row">
      <span class="id-placeholder-title">Information Diagram</span>
    </div>
    <div class="id-placeholder-row">
      <img class="id-placeholder-image"/>
    </div>
    <div class="id-placeholder-row">
      <span class="id-placeholder-info">Please select two or more variables</span>
    </div>
  </div>
  <div class="status-bar-container">
    <div class="status-bar">
      <i class="show-button"></i>
      <i class="hide-button"></i>
      <input type="text" class="status-bar-text" readonly="true" />
    </div>
  </div>
</div>

index.js

import d3 from 'd3';

import style from 'PVWStyle/InfoVizNative/InformationDiagram.mcss';

import CompositeClosureHelper from 'paraviewweb/src/Common/Core/CompositeClosureHelper';
import htmlContent from 'paraviewweb/src/InfoViz/Native/MutualInformationDiagram/body.html';
import iconImage from 'paraviewweb/src/InfoViz/Native/MutualInformationDiagram/InfoDiagramIconSmall.png';
// import multiClicker from '../../Core/D3MultiClick';
import SelectionBuilder from 'paraviewweb/src/Common/Misc/SelectionBuilder';
import AnnotationBuilder from 'paraviewweb/src/Common/Misc/AnnotationBuilder';

import {
  calculateAngleAndRadius,
  downsample,
  freqToProb,
  topBinPmi,
  topPmi,
} from './utils';

const PMI_CHORD_MODE_NONE = 0;
const PMI_CHORD_MODE_ONE_BIN_ALL_VARS = 1;
const PMI_CHORD_MODE_ALL_BINS_TWO_VARS = 2;

let miCount = 0;

/* eslint-disable no-use-before-define */

// ----------------------------------------------------------------------------
// Information Diagram
// ----------------------------------------------------------------------------

function informationDiagram(publicAPI, model) {
  let lastAnnotationPushed = null;

  if (
    !model.provider ||
    !model.provider.isA('MutualInformationProvider') ||
    !model.provider.isA('Histogram1DProvider') ||
    !model.provider.isA('FieldProvider')
  ) {
    console.log('Invalid provider:', model.provider);
    return;
  }

  model.renderState = {
    pmiAllBinsTwoVars: null,
    pmiOneBinAllVars: null,
    pmiHighlight: null,
  };

  model.clientRect = null;

  miCount += 1;
  // unique id, based on count
  model.instanceID = `pvwInformationDiagram-${miCount}`;

  // Handle style for status bar
  function updateStatusBarVisibility() {
    const cntnr = d3.select(model.container);
    if (model.statusBarVisible) {
      cntnr
        .select('.status-bar-container')
        .style('width', function updateWidth() {
          return this.dataset.width;
        });
      cntnr.select('.show-button').classed(style.hidden, true);
      cntnr.select('.hide-button').classed(style.hidden, false);
      cntnr.select('.status-bar-text').classed(style.hidden, false);
    } else {
      cntnr.select('.status-bar-container').style('width', '20px');
      cntnr.select('.show-button').classed(style.hidden, false);
      cntnr.select('.hide-button').classed(style.hidden, true);
      cntnr.select('.status-bar-text').classed(style.hidden, true);
    }
  }

  publicAPI.propagateAnnotationInsteadOfSelection = (
    useAnnotation = true,
    defaultScore = 0,
    defaultWeight = 0
  ) => {
    model.useAnnotation = useAnnotation;
    model.defaultScore = defaultScore;
    model.defaultWeight = defaultWeight;
  };

  publicAPI.resize = () => {
    if (!model.container) {
      return; // no shirt, no shoes, no service.
    }

    model.clientRect = model.container.getBoundingClientRect();

    d3.select(model.container)
      .select('div.status-bar-container')
      .attr('data-width', `${model.clientRect.width - 20}px`);

    publicAPI.render();
  };

  publicAPI.setContainer = (el) => {
    if (model.container) {
      while (model.container.firstChild) {
        model.container.removeChild(model.container.firstChild);
      }
    }

    model.container = el;

    if (model.container) {
      // Create placeholder
      model.container.innerHTML = htmlContent;

      // Apply style
      const d3Container = d3
        .select(model.container)
        .select('.info-diagram-container')
        .classed(style.infoDiagramContainer, true);

      d3Container
        .select('.status-bar-container')
        .classed(style.statusBarContainer, true);

      d3Container.select('.status-bar-text').classed(style.statusBarText, true);

      d3Container.select('.show-button').classed(style.showButton, true);

      d3Container.select('.hide-button').classed(style.hideButton, true);

      d3Container
        .select('.info-diagram-placeholder')
        .classed(style.infoDiagramPlaceholder, true)
        .select('img')
        .attr('src', iconImage);

      // Attach listener for show/hide status bar
      d3Container.selectAll('.show-button, .hide-button').on('click', () => {
        model.statusBarVisible = !model.statusBarVisible;
        updateStatusBarVisibility();
        d3.event.preventDefault();
        d3.event.stopPropagation();
      });

      updateStatusBarVisibility();
    }
  };

  publicAPI.updateStatusBarText = (msg) =>
    d3
      .select(model.container)
      .select('input.status-bar-text')
      .attr('value', msg);

  publicAPI.selectStatusBarText = () => {
    // select text so user can press ctrl-c if desired.
    if (model.statusBarVisible) {
      // https://www.sitepoint.com/javascript-copy-to-clipboard/
      d3.select(model.container)
        .select('input.status-bar-text')
        .node()
        .select();
      // Copy-to-clipboard works because status bar text is an 'input':
      try {
        document.execCommand('copy');
      } catch (err) {
        console.log('Copy to clipboard failed. Press Ctrl-C to copy');
      }
    }
  };

  // track chord mode between renders
  const pmiChordMode = {
    mode: PMI_CHORD_MODE_NONE,
    srcParam: null,
    srcBin: null,
    miIndex: -1,
  };

  publicAPI.render = () => {
    // Extract provider data for local access
    const getLegend = model.provider.isA('LegendProvider')
      ? model.provider.getLegend
      : null;
    const histogram1DnumberOfBins = model.numberOfBins;
    const variableList = model.provider.getActiveFieldNames();

    if (variableList.length < 2 || !model.container) {
      // Select the main circle and hide it and unhide placeholder
      d3.select(model.container)
        .select('svg.information-diagram')
        .classed(style.informationDiagramSvgShow, false)
        .classed(style.informationDiagramSvgHide, true);
      d3.select(model.container)
        .select('div.info-diagram-placeholder')
        .classed(style.hidden, false);
      publicAPI.updateStatusBarText('');
      return;
    }

    // Guard against rendering if container is non-null but has no size (as
    // in the case when workbench layout doesn't include our container)
    if (
      model.clientRect === null ||
      model.clientRect.width === 0 ||
      model.clientRect.height === 0
    ) {
      return;
    }

    const width = model.clientRect.width;
    const height = model.clientRect.height;

    // Make sure we have all the data we need
    if (!model.mutualInformationData || !model.histogramData) {
      return;
    }

    // Update
    updateStatusBarVisibility();

    d3.select(model.container)
      .select('div.info-diagram-placeholder')
      .classed(style.hidden, true);
    d3.select(model.container)
      .select('svg.information-diagram')
      .classed(style.informationDiagramSvgHide, false)
      .classed(style.informationDiagramSvgShow, true);

    const outerHistoRadius = Math.min(width, height) / 2;
    const veryOutermostRadius = outerHistoRadius + 80;
    const histoRadius = outerHistoRadius - 20;
    const outerRadius = histoRadius - 50;
    const innerRadius = outerRadius - 24;
    const deltaRadius = outerRadius - innerRadius;

    const formatPercent = d3.format('.1%');
    const formatMI = d3.format('.2f');
    const formatVal = d3.format('.2s');

    const arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);

    const histoArc = d3.svg.arc().innerRadius(outerRadius + 10);

    const insideArc = d3.svg.arc().innerRadius(1).outerRadius(innerRadius);

    const layout = d3.layout
      .chord()
      .padding(0.04)
      .sortSubgroups(d3.descending)
      .sortChords(d3.ascending);

    const path = d3.svg.chord().radius(innerRadius);

    let svgParent = d3.select(model.container).select('svg');
    let svg = svgParent.select('.main-circle');
    if (svgParent.empty()) {
      svgParent = d3
        .select(model.container)
        .append('svg')
        .style('float', 'left')
        .attr('class', style.informationDiagramSvgShow)
        .classed('information-diagram', true);
      svg = svgParent
        .append('g')
        .classed('main-circle', true)
        .classed(style.mainCircle, true);
    }

    svgParent.attr('width', width).attr('height', height);
    svg.attr('transform', `translate(${width / 2}, ${height / 2})`);

    function findGroupAndBin(relCoords) {
      const result = {
        found: false,
        group: null,
        bin: -1,
        radius: 0,
      };
      const [angle, radius] = calculateAngleAndRadius(relCoords, [
        width,
        height,
      ]);
      result.radius = radius;
      for (let groupIdx = 0; groupIdx < layout.groups().length; ++groupIdx) {
        const groupData = layout.groups()[groupIdx];
        const groupName =
          model.mutualInformationData.vmap[groupData.index].name;
        if (angle > groupData.startAngle && angle <= groupData.endAngle) {
          const binSizeRadians =
            (groupData.endAngle - groupData.startAngle) / model.numberOfBins;
          const binIndex = Math.floor(
            (angle - groupData.startAngle) / binSizeRadians
          );
          result.found = true;
          result.group = groupName;
          result.bin = binIndex;
          break;
        }
      }
      return result;
    }

    function unHoverBin(param) {
      if (model.provider.isA('HistogramBinHoverProvider')) {
        const state = {};
        state[param] = [-1];
        model.provider.setHoverState({
          source: 'MutualInformationDiagram',
          state,
        });
      }
    }

    function hoverBins(binMap) {
      if (model.provider.isA('HistogramBinHoverProvider')) {
        model.provider.setHoverState({
          source: 'MutualInformationDiagram',
          state: binMap,
        });
      }
    }

    function updateActiveSelection(binMap) {
      if (
        !model.provider.isA('SelectionProvider') ||
        !model.provider.isA('FieldProvider')
      ) {
        return;
      }

      const vars = {};
      let proceed = false;

      Object.keys(binMap).forEach((pName) => {
        const paramRange = model.provider.getField(pName).range;
        const binList = binMap[pName];
        const rangeList = [];
        for (let i = 0; i < binList.length; ++i) {
          if (binList[i] !== -1) {
            rangeList.push({
              interval: getBinRange(binList[i], histogram1DnumberOfBins, [
                paramRange[0],
                paramRange[1],
                paramRange[1] - paramRange[0],
              ]),
            });
          }
        }
        if (rangeList.length > 0) {
          proceed = true;
          vars[pName] = rangeList;
        }
      });

      if (proceed) {
        const selection = SelectionBuilder.range(vars);
        if (model.useAnnotation) {
          lastAnnotationPushed = model.provider.getAnnotation();
          if (
            !lastAnnotationPushed ||
            model.provider.shouldCreateNewAnnotation() ||
            lastAnnotationPushed.selection.type !== 'range'
          ) {
            lastAnnotationPushed = AnnotationBuilder.annotation(
              selection,
              [model.defaultScore],
              model.defaultWeight
            );
            if (lastAnnotationPushed.name === '') {
              // set default range annotation name
              AnnotationBuilder.setDefaultName(lastAnnotationPushed);
              if (model.provider.isA('AnnotationStoreProvider')) {
                lastAnnotationPushed.name = model.provider.getNextStoredAnnotationName(
                  lastAnnotationPushed.name
                );
              }
            }
          } else {
            lastAnnotationPushed = AnnotationBuilder.update(
              lastAnnotationPushed,
              {
                selection,
                score: [model.defaultScore],
                weight: model.defaultWeight,
              }
            );
          }
          AnnotationBuilder.updateReadOnlyFlag(
            lastAnnotationPushed,
            model.readOnlyFields
          );
          model.provider.setAnnotation(lastAnnotationPushed);
        } else {
          model.provider.setSelection(selection);
        }
      }
    }

    // function findPmiChordsToHighlight(param, bin, highlight = true, oneBinAllVarsMode = false) {
    function findPmiChordsToHighlight() {
      const {
        group: param,
        bin,
        highlight,
        mode: oneBinAllVarsMode,
      } = model.renderState.pmiHighlight;
      if (highlight) {
        svg
          .select('g.pmiChords')
          .selectAll('path.pmiChord')
          .classed('highlight-pmi', false);
      }

      const binMap = {};

      function addBin(pName, bIdx) {
        if (!binMap[pName]) {
          binMap[pName] = [];
        }
        if (binMap[pName].indexOf(bIdx) === -1) {
          binMap[pName].push(bIdx);
        }
      }

      if (oneBinAllVarsMode) {
        svg
          .select('g.pmiChords')
          .selectAll(`path[data-source-name="${param}"]:not(.fade)`)
          .classed('highlight-pmi', highlight)
          .each(function highlightPMI(d, i) {
            const elt = d3.select(this);
            addBin(param, bin);
            addBin(
              elt.attr('data-target-name'),
              Number.parseInt(elt.attr('data-target-bin'), 10)
            );
          });

        svg
          .select('g.pmiChords')
          .selectAll(`path[data-target-name="${param}"]:not(.fade)`)
          .each(function inner(d, i) {
            const elt = d3.select(this);
            addBin(param, Number.parseInt(elt.attr('data-target-bin'), 10));
            addBin(
              elt.attr('data-source-name'),
              Number.parseInt(elt.attr('data-source-bin'), 10)
            );
          });

        if (binMap[param] && binMap[param].indexOf(bin) >= 0) {
          binMap[param] = [bin];
        }

        svg
          .select('g.pmiChords')
          .selectAll(`path[data-target-name="${param}"]:not(.fade)`)
          .classed('highlight-pmi', function inner(d, i) {
            const elt = d3.select(this);
            return (
              binMap[param].indexOf(
                Number.parseInt(elt.attr('data-target-bin'), 10)
              ) >= 0
            );
          });
      } else {
        svg
          .select('g.pmiChords')
          .selectAll(
            `path[data-source-name="${param}"][data-source-bin="${bin}"]:not(.fade)`
          )
          .classed('highlight-pmi', highlight)
          .each(function highlightPMI(d, i) {
            const elt = d3.select(this);
            addBin(param, bin);
            addBin(
              elt.attr('data-target-name'),
              Number.parseInt(elt.attr('data-target-bin'), 10)
            );
          });

        svg
          .select('g.pmiChords')
          .selectAll(
            `path[data-target-name="${param}"][data-target-bin="${bin}"]:not(.fade)`
          )
          .classed('highlight-pmi', highlight)
          .each(function highlightPMI(d, i) {
            const elt = d3.select(this);
            addBin(param, bin);
            addBin(
              elt.attr('data-source-name'),
              Number.parseInt(elt.attr('data-source-bin'), 10)
            );
          });
      }

      return binMap;
    }

    // Chord handling ---------------------------------------------------------

    function updateChordVisibility(options) {
      if (options.mi && options.mi.show === true) {
        if (options.mi.index !== undefined) {
          chord.classed(
            'fade',
            (p) =>
              p.source.index !== options.mi.index &&
              p.target.index !== options.mi.index
          );
        } else {
          chord.classed('fade', false);
        }
        svg.selectAll('g.pmiChords path.pmiChord').classed('fade', true);
      } else if (options.pmi && options.pmi.show === true) {
        // Currently drawing pmi chords fades all mi chords, so we
        // don't have to do anything here to keep things consistent.
      }
    }

    function drawPMIAllBinsTwoVars() {
      const d = model.renderState.pmiAllBinsTwoVars.d;
      if (d.source.index === d.target.index) {
        // console.log('Cannot render self-PMI', model.mutualInformationData.vmap[d.source.index].name);
        return;
      }

      pmiChordMode.mode = PMI_CHORD_MODE_ALL_BINS_TWO_VARS;
      pmiChordMode.srcParam = null;
      pmiChordMode.srcBin = null;

      // Turn off MI rendering
      chord.classed('fade', true);
      // Turn on PMI rendering
      let va = model.mutualInformationData.vmap[d.source.index].name;
      let vb = model.mutualInformationData.vmap[d.target.index].name;
      let swap = false;
      if (vb < va) {
        const tmp = vb;
        vb = va;
        va = tmp;
        swap = true;
      }

      const cAB = downsample(
        model.mutualInformationData.joint[va][vb],
        histogram1DnumberOfBins,
        swap
      );
      const probDict = freqToProb(cAB);
      const linksToDraw = topPmi(probDict, 0.95);

      // Make mutual info chords invisible.
      svg.selectAll('g.group path.chord').classed('fade', true);

      const linkData = svg
        .select('g.pmiChords')
        .selectAll('path.pmiChord')
        .data(
          d3.zip(
            linksToDraw.idx,
            linksToDraw.pmi,
            new Array(linksToDraw.idx.length).fill([va, vb])
          )
        );

      linkData
        .enter()
        .append('path')
        .classed('pmiChord', true)
        .classed(style.pmiChord, true);
      linkData.exit().remove();

      const vaGroup = layout.groups()[d.source.index];
      const vbGroup = layout.groups()[d.target.index];
      const vaRange = [
        vaGroup.startAngle,
        vaGroup.endAngle - vaGroup.startAngle,
        (vaGroup.endAngle - vaGroup.startAngle) / histogram1DnumberOfBins,
      ];
      const vbRange = [
        vbGroup.startAngle,
        vbGroup.endAngle - vbGroup.startAngle,
        (vbGroup.endAngle - vbGroup.startAngle) / histogram1DnumberOfBins,
      ];

      linkData
        .classed('fade', false)
        .attr('d', (data, index) =>
          path({
            source: {
              startAngle: vaRange[0] + data[0][0] * vaRange[2],
              endAngle: vaRange[0] + (data[0][0] + 1) * vaRange[2],
            },
            target: {
              startAngle: vbRange[0] + data[0][1] * vbRange[2],
              endAngle: vbRange[0] + (data[0][1] + 1) * vbRange[2],
            },
          })
        )
        .attr('data-source-name', swap ? vb : va)
        .attr('data-source-bin', (data, index) => `${data[0][0]}`)
        .attr('data-target-name', swap ? va : vb)
        .attr('data-target-bin', (data, iindex) => `${data[0][1]}`)
        .classed('highlight-pmi', false)
        .classed('positive', (data, index) => data[1] >= 0.0)
        .classed('negative', (data, index) => data[1] < 0.0)
        .attr('data-details', (data, index) => {
          const sIdx = swap ? 1 : 0;
          const tIdx = swap ? 0 : 1;
          const sourceBinRange = getParamBinRange(
            data[0][sIdx],
            histogram1DnumberOfBins,
            data[2][0]
          );
          const targetBinRange = getParamBinRange(
            data[0][tIdx],
            histogram1DnumberOfBins,
            data[2][1]
          );
          return (
            'PMI: ' +
            `${data[2][0]} ∈ [ ${formatVal(sourceBinRange[0])}, ${formatVal(
              sourceBinRange[1]
            )}] ↔︎ ` +
            `${data[2][1]} ∈ [ ${formatVal(targetBinRange[0])}, ${formatVal(
              targetBinRange[1]
            )}] ${formatMI(data[1])}`
          );
        })
        .on('mouseover', function mouseOver() {
          publicAPI.updateStatusBarText(d3.select(this).attr('data-details'));
        })
        .on('mouseout', () => {
          publicAPI.updateStatusBarText('');
        })
        .on('click', () => {
          publicAPI.selectStatusBarText();
        });
    }

    // Mouse move handling ----------------------------------------------------

    svgParent
      /* eslint-disable prefer-arrow-callback */
      // need d3 provided 'this', below.
      .on('mousemove', function mouseMove(d, i) {
        /* xxeslint-enable prefer-arrow-callback */
        const overCoords = d3.mouse(model.container);
        const info = findGroupAndBin(overCoords);
        let clearStatusBar = false;
        let groupHoverName = null;
        let groupInsideName = null;
        let highlightAllGroups = false;

        for (let idx = 0; idx < variableList.length; ++idx) {
          unHoverBin(variableList[idx]);
        }

        if (info.radius > veryOutermostRadius) {
          highlightAllGroups = true;
          clearStatusBar = true;
        } else if (info.found) {
          if (info.radius > innerRadius && info.radius <= outerRadius)
            groupHoverName = info.group;
          else if (info.radius <= innerRadius) groupInsideName = info.group;

          let binMap = {};
          if (
            !(
              info.radius <= innerRadius &&
              pmiChordMode.mode === PMI_CHORD_MODE_NONE
            )
          ) {
            const oneBinAllVarsMode =
              info.radius <= innerRadius &&
              pmiChordMode.mode === PMI_CHORD_MODE_ONE_BIN_ALL_VARS;
            model.renderState.pmiHighlight = {
              group: info.group,
              bin: info.bin,
              highlight: true,
              mode: oneBinAllVarsMode,
            };
            const pmiBinMap = findPmiChordsToHighlight();
            if (info.radius <= innerRadius) {
              binMap = pmiBinMap;
            } else {
              svg
                .select(`g.group[param-name='${info.group}'`)
                .selectAll('path.htile')
                .each(function hTileInner(data, index) {
                  if (index === info.bin) {
                    publicAPI.updateStatusBarText(
                      d3.select(this).attr('data-details')
                    );
                  }
                });
            }
            if (!oneBinAllVarsMode) {
              binMap[info.group] = [info.bin];
            }
          }
          hoverBins(binMap);
        } else {
          clearStatusBar = true;
        }
        // show a clickable variable legend arc, if hovered, or
        // highlight all groups if a click will reset to default view (veryOutermostRadius)
        svg
          .selectAll(`g.group path[id^=\'${model.instanceID}-group\']`)
          .classed(
            style.hoverOutline,
            (data, idx) =>
              highlightAllGroups ||
              model.mutualInformationData.vmap[idx].name === groupHoverName
          );

        // show mouse-interaction guide inside the legend arcs.
        svg
          .selectAll('g.group')
          .select(`.${style.jsMouseArc}`)
          .attr('class', (data, idx) =>
            model.mutualInformationData.vmap[idx].name === groupInsideName
              ? style.mouseArcViz
              : style.mouseArcHidden
          );

        if (clearStatusBar === true) {
          publicAPI.updateStatusBarText('');
        }
      })
      .on('mouseout', (d, i) => {
        for (let idx = 0; idx < variableList.length; ++idx) {
          unHoverBin(variableList[idx]);
        }
      })
      .on(
        'click', // multiClicker([
        function singleClick(d, i) {
          // single click handler
          const overCoords = d3.mouse(model.container);
          const info = findGroupAndBin(overCoords);
          if (info.radius > veryOutermostRadius) {
            showAllChords();
          } else if (
            info.radius > outerRadius ||
            (info.radius <= innerRadius &&
              pmiChordMode.mode === PMI_CHORD_MODE_ONE_BIN_ALL_VARS &&
              info.group === pmiChordMode.srcParam)
          ) {
            if (info.found) {
              model.renderState.pmiAllBinsTwoVars = null;
              model.renderState.pmiOneBinAllVars = {
                group: info.group,
                bin: info.bin,
                d,
                i,
              };
              drawPMIOneBinAllVars()(d, i);
              publicAPI.selectStatusBarText();
            }
          }
          // },
        }
      )
      .on('dblclick', function doubleClick(d, i) {
        // double click handler
        const overCoords = d3.mouse(model.container);
        const info = findGroupAndBin(overCoords);

        if (info.found) {
          let binMap = {};
          const oneBinAllVarsMode =
            info.radius <= innerRadius &&
            pmiChordMode.mode === PMI_CHORD_MODE_ONE_BIN_ALL_VARS;
          if (info.radius <= innerRadius) {
            model.renderState.pmiHighlight = {
              group: info.group,
              bin: info.bin,
              highlight: true,
              mode: oneBinAllVarsMode,
            };
            binMap = findPmiChordsToHighlight();
          }
          if (!oneBinAllVarsMode) {
            binMap[info.group] = [info.bin];
          }
          updateActiveSelection(binMap);
        }

        d3.event.stopPropagation();
        //   },
        // ])
      });
    let miChordsG = svg.select('g.mutualInfoChords');
    if (miChordsG.empty()) {
      svg.append('circle').attr('r', outerRadius);
      miChordsG = svg.append('g').classed('mutualInfoChords', true);
      svg.append('g').classed('pmiChords', true);

      // add a straight path so IE/Edge can measure text lengths usefully.
      // Otherwise, along a curved path, they return the horizontal space covered.
      svg
        .append('defs')
        .append('path')
        .attr('id', 'straight-text-path')
        .attr('d', `M0,0L${width},0`);
    }
    // Compute the chord layout.
    layout.matrix(model.mutualInformationData.matrix);

    // Get lookups for pmi chords
    model.mutualInformationData.lkup = {};
    Object.keys(model.mutualInformationData.vmap).forEach((i) => {
      model.mutualInformationData.lkup[
        model.mutualInformationData.vmap[i].name
      ] = i;
    });

    // Only used when there is no legend service
    const cmap = d3.scale.category20();

    // Add a group per neighborhood.
    const group = svg
      .selectAll('.group')
      // set a key === field name, so groups are re-used. Need a fall-back for removed fields, though.
      .data(layout.groups, (d) =>
        model.mutualInformationData.vmap[d.index]
          ? model.mutualInformationData.vmap[d.index].name
          : d.index
      );
    const groupEnter = group
      .enter()
      .append('g')
      .classed('group', true)
      .classed(style.group, true);

    // Add the group arc.
    groupEnter
      .append('path')
      .attr('id', (d, i) => `${model.instanceID}-group${i}`);
    // add mouse-interaction arc - show where mouse affects this group's chords.
    groupEnter.append('path').classed(style.mouseArcHidden, true);

    // Add a text label.
    const groupText = groupEnter
      .append('text')
      // .attr('x', 6) // prevents ie11 from seeing text-anchor and startOffset.
      .attr('dy', 15);

    if (!model.textLengthMap) model.textLengthMap = {};
    groupText
      .append('textPath')
      .attr('startOffset', '25%')
      .text((d, i) => model.mutualInformationData.vmap[i].name);

    // enter + update items.
    const groupPath = group.select('path').attr('d', arc);
    group.select(`.${style.jsMouseArc}`).attr('d', insideArc);

    const textPath = group.select('text').select('textPath');

    // pull a stunt to measure text length - use a straight path, then switch to the real curved one.
    textPath
      .filter(
        (d) =>
          !model.textLengthMap[model.mutualInformationData.vmap[d.index].name]
      )
      .text((d) => model.mutualInformationData.vmap[d.index].name)
      .attr('xlink:href', '#straight-text-path')
      .each(function textLen(d) {
        model.textLengthMap[
          model.mutualInformationData.vmap[d.index].name
        ] = this.getComputedTextLength();
      });

    textPath
      .attr('xlink:href', (d, i) => `#${model.instanceID}-group${d.index}`)
      // Remove the labels that don't fit, or shorten label, using ...
      .each(function truncate(d, i) {
        d.textShown = true;
        const availLength =
          groupPath[0][d.index].getTotalLength() / 2 -
          deltaRadius -
          model.glyphSize;
        // shorten text based on string length vs initial total length.
        const fullText = model.mutualInformationData.vmap[i].name;
        const textLength = model.textLengthMap[fullText];
        const strLength = fullText.length;
        // we fit! done.
        if (textLength <= availLength) {
          d3.select(this).text(fullText);
          d.textLength = textLength;
          return;
        }
        // if we don't have 15 pixels left, or short string, don't show label.
        if (availLength < 15 || strLength < 9) {
          d.textShown = false;
          return;
        }
        // drop the middle 50%.
        let testStrLen = Math.floor(strLength * 0.25);
        // estimate new length, +2 to account for adding '...'
        d.textLength = ((testStrLen * 2 + 2) / strLength) * textLength;
        if (d.textLength < availLength) {
          d3.select(this).text(
            `${fullText.slice(0, testStrLen)}...${fullText.slice(-testStrLen)}`
          );
          return;
        }
        // start at 1/3 of the string, go down to 3 chars plus ...
        testStrLen = Math.floor(strLength / 2.99);
        while (testStrLen >= 3) {
          d.textLength = ((testStrLen + 2) / strLength) * textLength;
          if (d.textLength < availLength) {
            d3.select(this).text(`${fullText.slice(0, testStrLen)}...`);
            return;
          }
          testStrLen -= 1;
        }
        // small string doesn't fit - hide.
        d.textShown = false;
      })
      .attr('display', (d, i) => (d.textShown ? null : 'none'));
    // .remove(); ie11 throws errors if we use .remove() - hide instead.

    // Add group for glyph, or assign color as fallback.
    group.each(function addLegend(glyphData) {
      if (getLegend) {
        let glyph = d3.select(this).select('g.glyph');
        if (glyph.empty()) {
          glyph = d3
            .select(this)
            .append('g')
            .classed('glyph', true)
            .classed(style.glyph, true);
          glyph.append('svg').append('use');
        }

        const legend = getLegend(
          model.mutualInformationData.vmap[glyphData.index].name
        );
        // Add the glyph to the group
        const textLength = glyphData.textShown ? glyphData.textLength : 0;
        const pathLength = groupPath[0][glyphData.index].getTotalLength();
        const avgRadius = (innerRadius + outerRadius) / 2;
        // Start at edge of arc, move to text anchor, back up half of text length and glyph size
        const glyphAngle =
          glyphData.startAngle +
          (pathLength * 0.25) / outerRadius -
          ((textLength + model.glyphSize) * 0.5) / avgRadius;
        // console.log(model.mutualInformationData.vmap[glyphData.index].name, textLength, pathLength, glyphAngle);

        glyph
          .attr(
            'transform',
            `translate(
            ${avgRadius * Math.sin(glyphAngle) - model.glyphSize / 2},
            ${-avgRadius * Math.cos(glyphAngle) - model.glyphSize / 2})`
          )
          .select('svg')
          .attr('width', model.glyphSize)
          .attr('height', model.glyphSize)
          .attr('stroke', 'black')
          .attr('fill', legend.color)
          .select('use')
          .attr('xlink:href', legend.shape);

        model.mutualInformationData.vmap[glyphData.index].color = legend.color;

        // Remove the glyphs that don't fit
        if (
          groupPath[0][glyphData.index].getTotalLength() / 2 - deltaRadius <
          model.glyphSize
        ) {
          // glyph.remove(); ie11 objects, hide instead.
          glyph.attr('display', 'none');
        }
      } else {
        model.mutualInformationData.vmap[glyphData.index].color = cmap(
          glyphData.index
        );
      }
    });

    // Add the color to the group arc
    group
      .select('path')
      .style(
        'fill',
        (d) => model.mutualInformationData.vmap[d.index].color || 'red'
      );
    group
      .select(`.${style.jsMouseArc}`)
      .style(
        'fill',
        (d) => model.mutualInformationData.vmap[d.index].color || 'red'
      );

    function getParamBinRange(index, numberOfBins, paramName) {
      const paramRange = model.provider.getField(paramName).range;
      return getBinRange(index, numberOfBins, [
        paramRange[0],
        paramRange[1],
        paramRange[1] - paramRange[0],
      ]);
    }

    function getBinRange(index, numberOfBins, paramRange) {
      return [
        (index / numberOfBins) * paramRange[2] + paramRange[0],
        ((index + 1) / numberOfBins) * paramRange[2] + paramRange[0],
      ];
    }

    // Zip histogram info into layout.groups() (which we initially have no control over as it is
    // generated for us).
    group.each(function buildHistogram(groupData) {
      const gname = model.mutualInformationData.vmap[groupData.index].name;
      const gvar = model.histogramData[gname];

      if (!gvar) return;

      groupData.range = [gvar.min, gvar.max, gvar.max - gvar.min];

      const delta =
        (groupData.endAngle - groupData.startAngle) / gvar.counts.length;
      const total = Number(gvar.counts.reduce((a, b) => a + b));
      const maxcnt = Number(gvar.counts.reduce((a, b) => (a > b ? a : b)));

      /* eslint-disable arrow-body-style */
      groupData.histo = gvar.counts.map((d, i) => {
        return {
          startAngle: i * delta + groupData.startAngle,
          endAngle: (i + 1) * delta + groupData.startAngle,
          innerRadius: outerRadius + 10,
          outerRadius:
            outerRadius + 10 + (d / maxcnt) * (histoRadius - outerRadius),
          index: i,
          value: d / total,
        };
      });

      const htile = d3
        .select(this)
        .attr('param-name', gname)
        .selectAll('path.htile')
        .data(groupData.histo);
      htile.enter().append('path').classed('htile', true);
      htile
        .attr('d', (d, i) => histoArc.outerRadius(d.outerRadius)(d))
        .attr('data-details', (d, i) => {
          const binRange = getBinRange(
            i,
            histogram1DnumberOfBins,
            groupData.range
          );
          return `p(${gname} ∈ [${formatVal(binRange[0])}, ${formatVal(
            binRange[1]
          )}]) = ${formatPercent(d.value)}`;
        })
        .attr('fill', (d, i) => (i % 2 ? '#bebebe' : '#a9a9a9'));
    });

    function showAllChords() {
      pmiChordMode.mode = PMI_CHORD_MODE_NONE;
      pmiChordMode.srcParam = null;
      pmiChordMode.srcBin = null;
      pmiChordMode.miIndex = -1;
      model.renderState = {
        pmiAllBinsTwoVars: null,
        pmiOneBinAllVars: null,
        pmiHighlight: null,
      };
      updateChordVisibility({ mi: { show: true } });
    }
    // do we need to reset?
    const groupExit = group.exit();
    const needReset = !groupEnter.empty() || !groupExit.empty();
    groupExit.remove();

    // Add the chords. Color only chords that show self-mutual-information.
    const chord = miChordsG.selectAll('.chord').data(layout.chords);
    chord
      .enter()
      .append('path')
      .classed('chord', true)
      .classed(style.chord, true);

    chord.exit().remove();

    chord
      .classed('selfchord', (d) => d.source.index === d.target.index)
      .attr('d', path)
      .style('fill', null)
      .on('click', (d, i) => {
        model.renderState.pmiOneBinAllVars = null;
        model.renderState.pmiAllBinsTwoVars = { d, i };
        drawPMIAllBinsTwoVars();
        publicAPI.selectStatusBarText();
      })
      .on('mouseover', function inner(d, i) {
        publicAPI.updateStatusBarText(d3.select(this).attr('data-details'));
      })
      .on('mouseout', () => {
        publicAPI.updateStatusBarText('');
      });

    miChordsG
      .selectAll('.selfchord')
      .style(
        'fill',
        (d) => model.mutualInformationData.vmap[d.source.index].color
      );

    chord.attr(
      'data-details',
      (d, i) =>
        `Mutual information: ${
          model.mutualInformationData.vmap[d.source.index].name
        } ↔︎ ${model.mutualInformationData.vmap[d.target.index].name} ` +
        `${formatMI(
          model.mutualInformationData.matrix[d.source.index][d.target.index]
        )}`
    );
    // The lines below are for the case when the MI matrix has been row-normalized:
    // model.mutualInformationData.matrix[d.source.index][d.target.index] *
    // model.mutualInformationData.vmap[d.source.index].autoInfo/model.mutualInformationData.matrix[d.source.index][d.source.index]);

    // after chord is defined.
    if (needReset) {
      showAllChords();
      publicAPI.updateStatusBarText('');
    }

    svg
      .selectAll(`g.group path[id^=\'${model.instanceID}-group\']`)
      .on('click', (d, i) => {
        if (
          pmiChordMode.mode !== PMI_CHORD_MODE_NONE ||
          pmiChordMode.miIndex !== i
        ) {
          pmiChordMode.mode = PMI_CHORD_MODE_NONE;
          pmiChordMode.srcParam = null;
          pmiChordMode.srcBin = null;
          pmiChordMode.miIndex = i;
          updateChordVisibility({ mi: { show: true, index: i } });
        } else {
          showAllChords();
        }
      });

    if (
      model.renderState.pmiAllBinsTwoVars !== null &&
      pmiChordMode.mode === PMI_CHORD_MODE_ALL_BINS_TWO_VARS
    ) {
      drawPMIAllBinsTwoVars();
    } else if (
      model.renderState.pmiOneBinAllVars !== null &&
      pmiChordMode.mode === PMI_CHORD_MODE_ONE_BIN_ALL_VARS
    ) {
      const { group: g, bin: b, d, i } = model.renderState.pmiOneBinAllVars;
      drawPMIOneBinAllVars(g, b)(d, i);
    } else {
      // only happens on 'needReset', above.
      // showAllChords();
    }

    if (
      model.renderState.pmiHighlight !== null &&
      pmiChordMode.mode !== PMI_CHORD_MODE_NONE
    ) {
      findPmiChordsToHighlight();
    }

    function drawPMIOneBinAllVars() {
      const binVar = model.renderState.pmiOneBinAllVars.group; // Hold on to the name of the variable whose bin we should draw.
      const binIdx = model.renderState.pmiOneBinAllVars.bin;

      pmiChordMode.mode = PMI_CHORD_MODE_ONE_BIN_ALL_VARS;
      pmiChordMode.srcParam = binVar;
      pmiChordMode.srcBin = binIdx;

      // Return a function that, given a bin datum, renders the highest PMI (or probability)
      // links from that bin to any/all other bins in other variables it co-occurs with.
      return (d, i) => {
        // Turn off MI rendering
        chord.classed('fade', true);

        // Turn on PMI rendering
        let linkAccum = [];
        Object.keys(model.mutualInformationData.vmap).forEach((iother) => {
          const other = model.mutualInformationData.vmap[iother];
          let va = binVar;
          let vb = other.name;
          if (!vb || vb === va) {
            return; // Can't draw links to self...
          }
          let swap = false;
          if (vb < va) {
            const tmp = vb;
            vb = va;
            va = tmp;
            swap = true;
          }

          const cAB = downsample(
            model.mutualInformationData.joint[va][vb],
            histogram1DnumberOfBins,
            swap
          );
          const probDict = freqToProb(cAB);
          const linksToDraw = topBinPmi(probDict, true, binIdx, 0.8);
          linkAccum = linkAccum.concat(
            d3.zip(
              linksToDraw.idx,
              linksToDraw.pmi,
              linksToDraw.pAB,
              new Array(linksToDraw.idx.length).fill([binVar, other.name])
            )
          );
        });

        // Make mutual info chords invisible.
        svg.selectAll('g.group path.chord').classed('fade', true);

        const linkData = svg
          .select('g.pmiChords')
          .selectAll('path.pmiChord')
          .data(linkAccum);

        linkData
          .enter()
          .append('path')
          .classed('pmiChord', true)
          .classed(style.pmiChord, true);
        linkData.exit().remove();

        linkData
          .classed('fade', false)
          .attr('d', (data, index) => {
            const vaGrp = layout.groups()[
              model.mutualInformationData.lkup[data[3][0]]
            ];
            const vbGrp = layout.groups()[
              model.mutualInformationData.lkup[data[3][1]]
            ];
            const vaRange = [
              vaGrp.startAngle,
              vaGrp.endAngle - vaGrp.startAngle,
              (vaGrp.endAngle - vaGrp.startAngle) / histogram1DnumberOfBins,
            ];
            const vbRange = [
              vbGrp.startAngle,
              vbGrp.endAngle - vbGrp.startAngle,
              (vbGrp.endAngle - vbGrp.startAngle) / histogram1DnumberOfBins,
            ];
            return path({
              source: {
                startAngle: vaRange[0] + data[0][0] * vaRange[2],
                endAngle: vaRange[0] + (data[0][0] + 1) * vaRange[2],
              },
              target: {
                startAngle: vbRange[0] + data[0][1] * vbRange[2],
                endAngle: vbRange[0] + (data[0][1] + 1) * vbRange[2],
              },
            });
          })
          .attr('data-source-name', (data) => data[3][0])
          .attr('data-source-bin', (data) => data[0][0])
          .attr('data-target-name', (data) => data[3][1])
          .attr('data-target-bin', (data) => data[0][1])
          .classed('highlight-pmi', false)
          .classed('positive', (data) => data[1] >= 0.0)
          .classed('negative', (data) => data[1] < 0.0)
          .attr('data-details', (data) => {
            const sourceBinRange = getParamBinRange(
              data[0][0],
              histogram1DnumberOfBins,
              data[3][0]
            );
            const targetBinRange = getParamBinRange(
              data[0][1],
              histogram1DnumberOfBins,
              data[3][1]
            );
            return (
              'PMI: ' +
              `${data[3][0]} ∈ [ ${formatVal(sourceBinRange[0])}, ${formatVal(
                sourceBinRange[1]
              )}] ↔︎ ` +
              `${data[3][1]} ∈ [ ${formatVal(targetBinRange[0])}, ${formatVal(
                targetBinRange[1]
              )}] ${formatMI(data[1])}`
            );
          })
          .on('mouseover', function mouseOver() {
            publicAPI.updateStatusBarText(d3.select(this).attr('data-details'));
          })
          .on('mouseout', () => {
            publicAPI.updateStatusBarText('');
          })
          .on('click', () => {
            publicAPI.selectStatusBarText();
          });
      };
    }
  };

  function handleHoverUpdate(data) {
    const svg = d3.select(model.container);
    Object.keys(data.state).forEach((pName) => {
      const binList = data.state[pName];
      svg
        .selectAll(`g.group[param-name='${pName}'] > path.htile`)
        .classed(
          'hilite',
          (d, i) => binList.indexOf(-1) === -1 && binList.indexOf(i) >= 0
        );
    });
  }

  // Make sure default values get applied
  publicAPI.setContainer(model.container);

  model.subscriptions.push({ unsubscribe: publicAPI.setContainer });
  model.subscriptions.push(
    model.provider.onFieldChange(() => {
      model.renderState = {
        pmiAllBinsTwoVars: null,
        pmiOneBinAllVars: null,
        pmiHighlight: null,
      };
      if (model.provider.setMutualInformationParameterNames) {
        model.provider.setMutualInformationParameterNames(
          model.provider.getActiveFieldNames()
        );
      }
    })
  );

  if (model.provider.isA('Histogram1DProvider')) {
    model.histogram1DDataSubscription = model.provider.subscribeToHistogram1D(
      (data) => {
        model.histogramData = data;
        publicAPI.render();
      },
      model.provider.getFieldNames(),
      {
        numberOfBins: model.numberOfBins,
        partial: false,
      }
    );

    model.subscriptions.push(model.histogram1DDataSubscription);
  }

  if (model.provider.isA('MutualInformationProvider')) {
    model.mutualInformationDataSubscription = model.provider.onMutualInformationReady(
      (data) => {
        model.mutualInformationData = data;
        publicAPI.render();
      }
    );

    model.subscriptions.push(model.mutualInformationDataSubscription);
    model.provider.setMutualInformationParameterNames(
      model.provider.getActiveFieldNames()
    );
  }

  if (model.provider.isA('HistogramBinHoverProvider')) {
    model.subscriptions.push(
      model.provider.onHoverBinChange(handleHoverUpdate)
    );
  }

  if (model.provider.isA('SelectionProvider')) {
    model.subscriptions.push(
      model.provider.onAnnotationChange((annotation) => {
        if (
          lastAnnotationPushed &&
          annotation.selection.type === 'range' &&
          annotation.id === lastAnnotationPushed.id &&
          annotation.generation === lastAnnotationPushed.generation + 1
        ) {
          // Assume that it is still ours but edited by someone else
          lastAnnotationPushed = annotation;
          // Capture the score and update our default
          model.defaultScore = lastAnnotationPushed.score[0];
        }
      })
    );
  }
}

// ----------------------------------------------------------------------------
// Object factory
// ----------------------------------------------------------------------------

const DEFAULT_VALUES = {
  container: null,
  provider: null,

  needData: true,

  glyphSize: 15,

  statusBarVisible: false,

  useAnnotation: false,
  defaultScore: 0,
  defaultWeight: 1,

  numberOfBins: 32,
};

// ----------------------------------------------------------------------------

export function extend(publicAPI, model, initialValues = {}) {
  Object.assign(model, DEFAULT_VALUES, initialValues);

  CompositeClosureHelper.destroy(publicAPI, model);
  CompositeClosureHelper.isA(publicAPI, model, 'VizComponent');
  CompositeClosureHelper.get(publicAPI, model, [
    'provider',
    'container',
    'numberOfBins',
  ]);
  CompositeClosureHelper.set(publicAPI, model, ['numberOfBins']);
  CompositeClosureHelper.dynamicArray(publicAPI, model, 'readOnlyFields');

  informationDiagram(publicAPI, model);
}

// ----------------------------------------------------------------------------

export const newInstance = CompositeClosureHelper.newInstance(extend);

// ----------------------------------------------------------------------------

export default { newInstance, extend };

utils.js

// -----------------------------------------------------------------------------------
// -- Private utility methods for dealing with joint (2d) probability distributions --
// -----------------------------------------------------------------------------------

export function constantMatrix(ii, jj, entry) {
  const arr = [];
  for (let i = 0; i < ii; ++i) {
    arr.push([]);
    for (let j = 0; j < jj; ++j) {
      arr[i].push(null);
    }
  }
  return arr;
}

export function zeros(ii, jj) {
  return constantMatrix(ii, jj, 0);
}

export function downsample(src, nn, swap) {
  const hsz = src ? src.length : 0;
  let arr;
  if (hsz === 0) {
    return [];
  }

  if (nn < 1) {
    return [];
  }

  // assert(hsz === src[0].length);
  let tn = 1;
  while (tn < nn && tn < hsz) {
    tn *= 2;
  }

  const stride = hsz / tn;

  if (stride === 1 && !swap) {
    arr = src;
  } else {
    arr = zeros(tn, tn);
    for (let i = 0; i < hsz; ++i) {
      for (let j = 0; j < hsz; ++j) {
        arr[Math.floor(i / stride)][Math.floor(j / stride)] += src[i][j];
      }
    }
  }

  if (swap) {
    for (let i = 0; i < tn; ++i) {
      for (let j = i + 1; j < tn; ++j) {
        const tmp = arr[i][j];
        arr[i][j] = arr[j][i];
        arr[j][i] = tmp;
      }
    }
  }

  return arr;
}

export function freqToProb(src) {
  const hsz = src ? src.length : 0;
  if (hsz === 0) {
    return [];
  }

  // assert(hsz === src[0].length);

  let total = 0;
  for (let i = 0; i < hsz; ++i) {
    for (let j = 0; j < hsz; ++j) {
      total += src[i][j];
    }
  }
  const pAB = zeros(hsz, hsz);
  const pA = zeros(hsz, 1);
  const pB = zeros(1, hsz);
  const pmi = constantMatrix(hsz, hsz, null);
  for (let i = 0; i < hsz; ++i) {
    for (let j = 0; j < hsz; ++j) {
      const p = src[i][j] / total;
      pAB[i][j] = p;
      pA[i][0] += p;
      pB[0][j] += p;
    }
  }

  for (let i = 0; i < hsz; ++i) {
    for (let j = 0; j < hsz; ++j) {
      const pj = pAB[i][j];
      if (pj > 0) {
        pmi[i][j] = (-1 * Math.log(pj / pA[i][0] / pB[0][j])) / Math.log(pj);
      }
    }
  }

  return { pAB, pA, pB, cardinality: total, pmi };
}

export function flattenMatrix(x) {
  return x.reduce((a, b) => a.concat(b));
}

export function quantile(xx, qq) {
  const xs = flattenMatrix(xx).sort((a, b) => a - b);
  return (xs[Math.floor(xs.length * qq)] + xs[Math.ceil(xs.length * qq)]) / 2;
}

export function matrixFind(xx, condition) {
  if (!xx || xx.length < 1) {
    return [];
  }

  const nn = xx[0].length;

  const xf = flattenMatrix(xx).reduce(
    (a, b, i) =>
      condition(b, i) ? a.concat([[Math.floor(i / nn), i % nn]]) : a,
    []
  );
  return xf;
}

export function matrixSubset(mat, isRow, idx) {
  if (isRow) {
    return [mat[idx]]; // return a "new" matrix that has only one row.
  }
  return mat.map((row) => [row[idx]]);
}

export function matrixChoose(xx, idxs) {
  return idxs.reduce((a, b) => a.concat(xx[b[0]][b[1]]), []);
}

export function topProb(dd, qq) {
  const qval = quantile(dd.pAB, qq);
  const idxs = matrixFind(dd.pAB, (d) => d > qval);
  return {
    pAB: matrixChoose(dd.pAB, idxs),
    pmi: matrixChoose(dd.pmi, idxs),
    idx: idxs,
  };
}

export function topPmi(dd, qq) {
  const apmi = dd.pmi.map((row) => row.map((v) => Math.abs(v)));
  const qval = quantile(apmi, qq);
  const idxs = matrixFind(apmi, (d) => d > qval);
  return {
    pAB: matrixChoose(dd.pAB, idxs),
    pmi: matrixChoose(dd.pmi, idxs),
    idx: idxs,
  };
}

// Return the bins most probably linked to the given bin (above the \a qq quantile line of probability).
export function topBinProb(dd, isA, bin, qq) {
  const subset = matrixSubset(dd.pAB, !isA, bin);
  const qval = quantile(subset, qq);
  const idxs = matrixFind(subset, (d) => d > qval);

  console.log(
    'binprob, isA:',
    isA,
    ' bin:',
    bin,
    ' idxs:',
    idxs,
    ' midx: ',
    idxs.map((d) => (!isA ? [bin, d[1]] : [bin, d[0]])),
    ' subset: ',
    subset
  );

  return {
    pAB: matrixChoose(subset, idxs),
    pmi: matrixChoose(matrixSubset(dd.pmi, !isA, bin), idxs),
    idx: idxs.map((d) => (!isA ? [bin, d[1]] : [bin, d[0]])),
  };
}

export function topBinPmi(dd, isA, bin, qq) {
  const subset = matrixSubset(dd.pmi, !isA, bin);
  const apmi = subset.map((row) => row.map((v) => Math.abs(v)));
  const qval = quantile(apmi, qq);
  const idxs = matrixFind(apmi, (d) => d > qval);

  return {
    pAB: matrixChoose(matrixSubset(dd.pAB, !isA, bin), idxs),
    pmi: matrixChoose(subset, idxs),
    idx: idxs.map((d) => (!isA ? [bin, d[1]] : [bin, d[0]])),
  };
}

export function calculateAngleAndRadius(coords, containerDims) {
  const width = containerDims[0];
  const height = containerDims[1];
  const x = coords[0] - width / 2;
  const y = height - coords[1] - height / 2;
  // Need straight up in screen space to have angle 0, adjust atan2 args accordingly
  let arctangent = -Math.atan2(-x, y);
  if (arctangent < 0) {
    arctangent = Math.PI + (Math.PI + arctangent);
  }
  return [arctangent, Math.sqrt(x * x + y * y)];
}

export default {
  calculateAngleAndRadius,
  constantMatrix,
  downsample,
  flattenMatrix,
  freqToProb,
  matrixChoose,
  matrixFind,
  matrixSubset,
  quantile,
  topBinPmi,
  topBinProb,
  topPmi,
  topProb,
  zeros,
};