Hugging Face's logo

Spaces:
simon-clmtd
/
exbert
Runtime error

App Files Community
exbert
File size: 4,873 Bytes 
63858e7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
import * as d3 from "d3";
import * as R from 'ramda'
import 'd3-selection-multi'
import {d3S, D3Sel} from "../etc/Util";
import { VComponent } from "./VisComponent";
import { SimpleEventHandler } from "../etc/SimpleEventHandler";
import * as tp from "../etc/types"
import '../etc/xd3'

// Helpers
const currMatchIdx = (elem) => +(<Element>elem.parentNode).getAttribute('matchidx')
const currRowNum = (elem) => +(<Element>elem.parentNode).getAttribute('rownum')
const backgroundColor = x => `rgba(128, 0, 150, ${0.6*x})`

export class CorpusInspector extends VComponent<tp.FaissSearchResults[]>{
    css_name = 'corpus-inspector';
    _current: {};

    _data: tp.FaissSearchResults[]; // The passed data

    static events = {
        rowMouseOver: "CorpusInspector_rowMouseOver",
        rowMouseOut: "CorpusInspector_rowMouseOut",
        rowClick: "CorpusInspector_rowClick",
        rowDblClick: "CorpusInspector_rowDblClick",
        cellMouseOver: "CorpusInspector_cellMouseOver",
        cellMouseOut: "CorpusInspector_cellMouseOut",
        cellClick: "CorpusInspector_cellClick",
        cellDblClick: "CorpusInspector_cellDblClick",
    }

    options = {
        showNext: false
    }

    // COMPONENTS
    inspectorRows: D3Sel
    inspectorCells: D3Sel
    scaler = d3.scalePow().range([0,0.9]).exponent(2)

    constructor(d3Parent: D3Sel, eventHandler?:SimpleEventHandler, options: {} = {}) {
        super(d3Parent, eventHandler)
        this.superInitHTML(options)
        this._init()
    }

    private createRows() {
        const data = this._data

        this.inspectorRows = this.base.selectAll(".inspector-row")
            .data(data)
            .join('div')
            .classed('inspector-row', true)
            .attrs({
                matchIdx: d => d.index,
                rowNum: (d, i) => i,
            })
            .on("mouseover", (d, i) => {
              this.eventHandler.trigger(CorpusInspector.events.rowMouseOver, {})
            })
    }

    private addTooltip() {
        this.inspectorCells = this.inspectorCells
            .classed('celltooltip', true)
            .append('span')
            .classed('tooltiptext', true)
            .html((d, i, n) => {
                const entityStr = d.is_ent ? "<br>Entity" : ""
                const att = (<Element>n[i].parentNode).getAttribute('att').slice(0, 7)
                const attStr = `<br>Attention: ${att}`

                return `POS: ${d.pos.toLowerCase()}<br>DEP: ${d.dep.toLowerCase()}` + entityStr + attStr
            })
    }

    private createCells() {
        const self = this

        this.inspectorCells = this.inspectorRows.selectAll('.inspector-cell')
            .data((d:tp.FaissSearchResults) => d.tokens)
            .join('div')
            .classed('inspector-cell', true)
            .attr('index-offset', (d, i, n:HTMLElement[]) => {
                const matchIdx = currMatchIdx(n[i])
                return i - matchIdx 
            })
            .attrs({
                pos: d => d.pos.toLowerCase(),
                dep: d => d.dep.toLowerCase(), 
                is_ent: d => d.is_ent
            })
            .text(d => d.token.replace("\u0120", " "))
            .classed('matched-cell', d => d.is_match)
            .classed('next-cell', function(d) {
                return self.showNext() && d.is_next_word
            })
            .classed('gray-cell', function(d, i) {
                const idx = +currMatchIdx(this)
                return self.showNext() && i > idx
            })

        // Highlight the cells appropriately
        this.inspectorCells.each((d,i,n) => {
            const idx = currMatchIdx(n[i])
            if (i == idx) {
                const att = d.inward
                const maxAtt = +d3.max(att)
                const currRow = currRowNum(n[i])
                const scaler = self.scaler.domain([0, maxAtt])

                d3.selectAll(`.inspector-row[rownum='${currRow}']`)
                    .selectAll(`.inspector-cell`)
                    .style('background', (d, i) => {
                        return backgroundColor(scaler(att[i]))
                    })
                    .attr('att', (d, i) => att[i])
            }
        })

        self.addTooltip()
    }

    private updateData() {
        this.createRows()
        this.createCells()
    }

    _init() {}

    _wrangle(data: tp.FaissSearchResults[]) {
        this._data = data
        return data;
    }

    _render(data: tp.FaissSearchResults[]) {
        // Remember that this._data is defined in wrangle which should always be called before render
        // as is defined in the update function
        this.updateData()
    }

    showNext(): boolean
    showNext(v:boolean): this
    showNext(v?) {
        if (v == null) return this.options.showNext

        this.options.showNext = v
        return this
    }
}