https://embed-goodfire-attr-graph.netlify.app/feature_examples/init-feature-examples-list.js

1window.initFeatureExamplesList = function({renderAll, visState, sel}){
2  var sel = sel.select('.feature-example-list')
3  renderAll.feature.fns.push(async () => {
4    if (visState.feature.isDead) return sel.html(`Feature ${visState.feature.featureIndex} failed to load`)
5
6    // // Put quantiles into cols to fill white space.
7    // var cols = d3.range(Math.max(1, Math.floor(sel.node().offsetWidth/800))).map(d => [])
8    // cols.forEach(col => col.y = 0)
9    // visState.feature.examples_quantiles.forEach((d, i) => {
10    //   var col = cols[d3.minIndex(cols, d => d.y)]
11    //   col.push(d)
12    //   col.y += d.examples.length + 2 // quantile header/whitespace is about 2× bigger than an example
13    //   if (!i) col.y += 6
14    // })
15    // 
16    var cols = [visState.feature.examples_quantiles]
17    sel.html('')
18      .appendMany('div.example-2-col', cols)
19      .appendMany('div', d => d)
20      .each(drawQuantile)
21
22    var firstColSel = sel.select('.example-2-col').append('div').lower()
23  })
24
25  function drawQuantile(quantile){
26    var sel = d3.select(this)
27
28    var quintileSel = sel.append('div.example-quantile')
29      .append('span.quantile-title').text(quantile.quantile_name + ' ')
30
31    sel.appendMany('div.ctx-container', quantile.examples).each(drawExample)
32  }
33
34  function maybeHexEscapedToBytes(token) { // -> number[]
35    let ret = [];
36    while (token.length) {
37      if (/^\\x[0-9a-f]{2}/.exec(token)) {
38        ret.push(parseInt(token.slice(2, 4), 16));
39        token = token.slice(4);
40      } else {
41        ret.push(...new TextEncoder().encode(token[0]));
42        token = token.slice(1);
43      }
44    }
45    return ret;
46  }
47  function mergeHexEscapedMax(tokens, acts) {
48    // -> {token: string, act: number, minIndex: int, maxIndex: int}[]
49    let ret = [];
50    let i = 0;
51    while (i < tokens.length) {
52      let maxAct = acts[i];
53      let pushedMerge = false;
54      if (/\\x[0-9a-f]{2}/.exec(tokens[i])) {
55        let buf = maybeHexEscapedToBytes(tokens[i]);
56        for (let j = i + 1; j < Math.min(i + 5, tokens.length); j++) {
57          maxAct = Math.max(maxAct, acts[j]);
58          buf.push(...maybeHexEscapedToBytes(tokens[j]));
59          try {
60            let text = new TextDecoder("utf-8", { fatal: true }).decode(
61              new Uint8Array(buf),
62            );
63            ret.push({
64              token: text,
65              act: maxAct,
66              minIndex: i,
67              maxIndex: j,
68            });
69            i = j + 1;
70            pushedMerge = true;
71            break;
72          } catch (e) {
73            continue;
74          }
75        }
76      }
77      if (!pushedMerge) {
78        ret.push({
79          token: tokens[i],
80          act: acts[i],
81          minIndex: i,
82          maxIndex: i,
83        });
84        i++;
85      }
86    }
87    return ret;
88  }
89
90  function drawExample(exp){
91    var sel = d3.select(this).append('div')
92      .st({opacity: exp.is_repeated_datapoint ? .4 : 1})
93    var textSel = sel.append('div.text-wrapper')
94
95    var tokenData = mergeHexEscapedMax(exp.tokens, exp.tokens_acts_list);
96    var tokenSel = textSel.appendMany('span.token', tokenData)
97        .text(d => d.token)
98        // .at({title: d => `${d.token} (${d.act})` })
99
100    tokenSel
101        .filter(d => d.act)
102        .st({background: d => visState.feature.colorScale(d.act)})
103
104    var centerNode = tokenSel
105        .filter(d => d.minIndex <= exp.train_token_ind && exp.train_token_ind <= d.maxIndex)
106        .classed('train_token_ind', 1)
107        .node()
108
109    if (!centerNode) return
110    var leftOffset = (sel.node().offsetWidth - centerNode.offsetWidth)/2 - centerNode.offsetLeft
111    textSel.translate([leftOffset, 0])
112  }
113}
114
115// window.initFeatureExample?.()
116window.init?.()