cifkao commited on
Commit
11a14e0
·
1 Parent(s): fdbcf74

Rebuild component

Browse files
highlighted_text/build/asset-manifest.json CHANGED
@@ -1,8 +1,8 @@
1
  {
2
  "files": {
3
  "main.css": "./static/css/main.b2f89d68.chunk.css",
4
- "main.js": "./static/js/main.b8970cf8.chunk.js",
5
- "main.js.map": "./static/js/main.b8970cf8.chunk.js.map",
6
  "runtime-main.js": "./static/js/runtime-main.e6b0ae4c.js",
7
  "runtime-main.js.map": "./static/js/runtime-main.e6b0ae4c.js.map",
8
  "static/js/2.ce130e37.chunk.js": "./static/js/2.ce130e37.chunk.js",
@@ -15,6 +15,6 @@
15
  "static/js/runtime-main.e6b0ae4c.js",
16
  "static/js/2.ce130e37.chunk.js",
17
  "static/css/main.b2f89d68.chunk.css",
18
- "static/js/main.b8970cf8.chunk.js"
19
  ]
20
  }
 
1
  {
2
  "files": {
3
  "main.css": "./static/css/main.b2f89d68.chunk.css",
4
+ "main.js": "./static/js/main.d475cbb2.chunk.js",
5
+ "main.js.map": "./static/js/main.d475cbb2.chunk.js.map",
6
  "runtime-main.js": "./static/js/runtime-main.e6b0ae4c.js",
7
  "runtime-main.js.map": "./static/js/runtime-main.e6b0ae4c.js.map",
8
  "static/js/2.ce130e37.chunk.js": "./static/js/2.ce130e37.chunk.js",
 
15
  "static/js/runtime-main.e6b0ae4c.js",
16
  "static/js/2.ce130e37.chunk.js",
17
  "static/css/main.b2f89d68.chunk.css",
18
+ "static/js/main.d475cbb2.chunk.js"
19
  ]
20
  }
highlighted_text/build/index.html CHANGED
@@ -1 +1 @@
1
- <!doctype html><html lang="en"><head><title>Highlighted text component</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Highlighted text"/><link href="./static/css/main.b2f89d68.chunk.css" rel="stylesheet"></head><body><div id="root"></div><script>!function(e){function t(t){for(var n,l,a=t[0],p=t[1],i=t[2],c=0,s=[];c<a.length;c++)l=a[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p[n]);for(f&&f(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var p=r[a];0!==o[p]&&(n=!1)}n&&(u.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},o={1:0},u=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(l.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(r,n,function(t){return e[t]}.bind(null,n));return r},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="./";var a=this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[],p=a.push.bind(a);a.push=t,a=a.slice();for(var i=0;i<a.length;i++)t(a[i]);var f=p;r()}([])</script><script src="./static/js/2.ce130e37.chunk.js"></script><script src="./static/js/main.b8970cf8.chunk.js"></script></body></html>
 
1
+ <!doctype html><html lang="en"><head><title>Highlighted text component</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Highlighted text"/><link href="./static/css/main.b2f89d68.chunk.css" rel="stylesheet"></head><body><div id="root"></div><script>!function(e){function t(t){for(var n,l,a=t[0],p=t[1],i=t[2],c=0,s=[];c<a.length;c++)l=a[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p[n]);for(f&&f(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var p=r[a];0!==o[p]&&(n=!1)}n&&(u.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},o={1:0},u=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(l.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(r,n,function(t){return e[t]}.bind(null,n));return r},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="./";var a=this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[],p=a.push.bind(a);a.push=t,a=a.slice();for(var i=0;i<a.length;i++)t(a[i]);var f=p;r()}([])</script><script src="./static/js/2.ce130e37.chunk.js"></script><script src="./static/js/main.d475cbb2.chunk.js"></script></body></html>
highlighted_text/build/static/js/{main.b8970cf8.chunk.js → main.d475cbb2.chunk.js} RENAMED
@@ -1,2 +1,2 @@
1
- (this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[]).push([[0],{27:function(t,e,n){},28:function(t,e,n){"use strict";n.r(e);var a=n(7),s=n.n(a),c=n(18),r=n.n(c),i=n(4),o=n(0),l=n(1),h=n(2),d=n(3),j=n(16),u=n(6),b=function(t){Object(h.a)(n,t);var e=Object(d.a)(n);function n(){var t;Object(o.a)(this,n);for(var a=arguments.length,s=new Array(a),c=0;c<a;c++)s[c]=arguments[c];return(t=e.call.apply(e,[this].concat(s))).state={activeIndex:null,hoverIndex:null,isFrozen:!1},t}return Object(l.a)(n,[{key:"render",value:function(){var t=this,e=this.props.args.tokens,n=this.getScores(),a="highlighted-text";this.state.isFrozen&&(a+=" frozen");var s=function(){t.setState({isFrozen:!1})};return Object(u.jsxs)(u.Fragment,{children:[Object(u.jsxs)("div",{className:"status-bar",children:[Object(u.jsxs)("span",{className:this.state.isFrozen?"":" d-none",children:[Object(u.jsx)("i",{className:"fa fa-lock"})," "]},"lock-icon"),null!=this.state.activeIndex?Object(u.jsxs)(u.Fragment,{children:[Object(u.jsx)("strong",{children:"index:"},"index-label")," ",Object(u.jsxs)("span",{children:[this.state.activeIndex," "]},"index")]}):Object(u.jsx)(u.Fragment,{})]},"status-bar"),Object(u.jsx)("div",{className:a,onClick:s,children:e.map((function(e,a){var c="token";t.state&&t.state.activeIndex==a&&(c+=" active");var r={backgroundColor:n[a]>0?"rgba(32, 255, 32, ".concat(n[a],")"):"rgba(255, 32, 32, ".concat(-n[a],")")};return Object(u.jsx)("span",{className:c,style:r,onMouseOver:function(){t.state.isFrozen||t.setState({activeIndex:a}),t.setState({hoverIndex:a})},onClick:s,children:e},a)}))},"text")]})}},{key:"getScores",value:function(){var t=this.props.args.tokens;if(!this.state||null==this.state.activeIndex||this.state.activeIndex<1)return t.map((function(){return 0}));var e=this.props.args.scores,n=this.state.activeIndex-1,a=Math.min(Math.max(0,n),e[n].length),s=e[n].slice(0,a);s.reverse();var c=[].concat(Object(i.a)(Array(Math.max(0,n-1-s.length)).fill(0)),Object(i.a)(s.map((function(t){return void 0==t||isNaN(t)?0:t}))));return c=[].concat(Object(i.a)(c),Object(i.a)(Array(t.length-c.length).fill(0)))}}]),n}(j.a),v=Object(j.b)(b);n(27);r.a.render(Object(u.jsx)(s.a.StrictMode,{children:Object(u.jsx)(v,{})}),document.getElementById("root"))}},[[28,1,2]]]);
2
- //# sourceMappingURL=main.b8970cf8.chunk.js.map
 
1
+ (this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[]).push([[0],{27:function(t,e,n){},28:function(t,e,n){"use strict";n.r(e);var a=n(7),s=n.n(a),c=n(18),r=n.n(c),i=n(4),o=n(0),l=n(1),h=n(2),d=n(3),j=n(16),u=n(6),b=function(t){Object(h.a)(n,t);var e=Object(d.a)(n);function n(){var t;Object(o.a)(this,n);for(var a=arguments.length,s=new Array(a),c=0;c<a;c++)s[c]=arguments[c];return(t=e.call.apply(e,[this].concat(s))).state={activeIndex:null,hoverIndex:null,isFrozen:!1},t}return Object(l.a)(n,[{key:"render",value:function(){var t=this,e=this.props.args.tokens,n=this.getScores(),a="highlighted-text";this.state.isFrozen&&(a+=" frozen");var s=function(){t.setState({isFrozen:!1})};return Object(u.jsxs)(u.Fragment,{children:[Object(u.jsxs)("div",{className:"status-bar",children:[Object(u.jsxs)("span",{className:this.state.isFrozen?"":" d-none",children:[Object(u.jsx)("i",{className:"fa fa-lock"})," "]},"lock-icon"),null!=this.state.activeIndex?Object(u.jsxs)(u.Fragment,{children:[Object(u.jsx)("strong",{children:"index:"},"index-label")," ",Object(u.jsxs)("span",{children:[this.state.activeIndex," "]},"index")]}):Object(u.jsx)(u.Fragment,{})]},"status-bar"),Object(u.jsx)("div",{className:a,onClick:s,children:e.map((function(e,a){var c="token";t.state&&t.state.activeIndex==a&&(c+=" active");var r={backgroundColor:n[a]>0?"rgba(32, 255, 32, ".concat(n[a],")"):"rgba(255, 32, 32, ".concat(-n[a],")")};return Object(u.jsx)("span",{className:c,style:r,onMouseOver:function(){t.state.isFrozen||t.setState({activeIndex:a}),t.setState({hoverIndex:a})},onClick:s,children:e},a)}))},"text")]})}},{key:"getScores",value:function(){var t=this.props.args.tokens;if(!this.state||null==this.state.activeIndex||this.state.activeIndex<1)return t.map((function(){return 0}));var e=this.props.args.scores,n=this.state.activeIndex-1,a=Math.min(Math.max(0,n),e[n].length),s=e[n].slice(0,a);s.reverse();var c=[].concat(Object(i.a)(Array(Math.max(0,n-s.length)).fill(0)),Object(i.a)(s.map((function(t){return void 0==t||isNaN(t)?0:t}))));return c=[].concat(Object(i.a)(c),Object(i.a)(Array(t.length-c.length).fill(0)))}}]),n}(j.a),v=Object(j.b)(b);n(27);r.a.render(Object(u.jsx)(s.a.StrictMode,{children:Object(u.jsx)(v,{})}),document.getElementById("root"))}},[[28,1,2]]]);
2
+ //# sourceMappingURL=main.d475cbb2.chunk.js.map
highlighted_text/build/static/js/{main.b8970cf8.chunk.js.map → main.d475cbb2.chunk.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":["HighlightedText.tsx","index.tsx"],"names":["HighlightedText","_StreamlitComponentBa","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","state","activeIndex","hoverIndex","isFrozen","_createClass","key","value","_this2","tokens","this","props","scores","getScores","className","onClick","setState","_jsxs","_Fragment","children","_jsx","map","t","i","style","backgroundColor","onMouseOver","allScores","hi","Math","min","max","row","slice","reverse","result","_toConsumableArray","fill","x","undefined","isNaN","StreamlitComponentBase","withStreamlitConnection","ReactDOM","render","React","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.b8970cf8.chunk.js","sourcesContent":["import {\n StreamlitComponentBase,\n withStreamlitConnection,\n} from \"streamlit-component-lib\";\n\ntype HighlightedTextState = {\n activeIndex: number | null,\n hoverIndex: number | null,\n isFrozen: boolean\n};\n\n/**\n * This is a React-based component template. The `render()` function is called\n * automatically when your component should be re-rendered.\n */\nclass HighlightedText extends StreamlitComponentBase<HighlightedTextState> {\n public state = {activeIndex: null, hoverIndex: null, isFrozen: false};\n\n render() {\n const tokens: string[] = this.props.args[\"tokens\"];\n const scores: number[] = this.getScores();\n\n let className = \"highlighted-text\";\n if (this.state.isFrozen) {\n className += \" frozen\";\n }\n\n const onClick = () => {\n this.setState({ isFrozen: false });\n };\n\n return <>\n <div className=\"status-bar\" key=\"status-bar\">\n <span className={this.state.isFrozen ? \"\" : \" d-none\"} key=\"lock-icon\"><i className=\"fa fa-lock\"></i> </span>\n {\n this.state.activeIndex != null ?\n <>\n <strong key=\"index-label\">index:</strong> <span key=\"index\">{this.state.activeIndex} </span>\n </>\n : <></>\n }\n </div>\n <div className={className} onClick={onClick} key=\"text\">\n {\n tokens.map((t: string, i: number) => {\n let className = \"token\";\n if (this.state) {\n if (this.state.activeIndex == i) {\n className += \" active\";\n }\n }\n const style = {\n backgroundColor:\n scores[i] > 0\n ? `rgba(32, 255, 32, ${scores[i]})`\n : `rgba(255, 32, 32, ${-scores[i]})`\n };\n\n const onMouseOver = () => {\n if (!this.state.isFrozen) {\n this.setState({ activeIndex: i });\n }\n this.setState({ hoverIndex: i });\n };\n return <span key={i} className={className} style={style}\n onMouseOver={onMouseOver} onClick={onClick}>{t}</span>;\n })\n }\n </div>\n </>;\n }\n\n private getScores() {\n const tokens = this.props.args[\"tokens\"];\n if (!this.state || this.state.activeIndex == null || this.state.activeIndex < 1) {\n return tokens.map(() => 0);\n }\n const allScores: number[][] = this.props.args[\"scores\"];\n\n const i = this.state.activeIndex - 1;\n const hi = Math.min(Math.max(0, i), allScores[i].length);\n const row = allScores[i].slice(0, hi);\n row.reverse();\n let result = [\n ...Array(Math.max(0, i - 1 - row.length)).fill(0), \n ...row.map((x) => x == undefined || isNaN(x) ? 0 : x)\n ];\n result = [...result, ...Array(tokens.length - result.length).fill(0)];\n return result;\n }\n}\n\nexport default withStreamlitConnection(HighlightedText);\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport HighlightedText from \"./HighlightedText\";\nimport \"./index.scss\";\n\nReactDOM.render(\n <React.StrictMode>\n <HighlightedText />\n </React.StrictMode>,\n document.getElementById(\"root\")\n)\n"],"sourceRoot":""}
 
1
+ {"version":3,"sources":["HighlightedText.tsx","index.tsx"],"names":["HighlightedText","_StreamlitComponentBa","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","state","activeIndex","hoverIndex","isFrozen","_createClass","key","value","_this2","tokens","this","props","scores","getScores","className","onClick","setState","_jsxs","_Fragment","children","_jsx","map","t","i","style","backgroundColor","onMouseOver","allScores","hi","Math","min","max","row","slice","reverse","result","_toConsumableArray","fill","x","undefined","isNaN","StreamlitComponentBase","withStreamlitConnection","ReactDOM","render","React","StrictMode","document","getElementById"],"mappings":"gQAeMA,EAAe,SAAAC,GAAAC,YAAAF,EAAAC,GAAA,IAAAE,EAAAC,YAAAJ,GAAA,SAAAA,IAAA,IAAAK,EAAAC,YAAA,KAAAN,GAAA,QAAAO,EAAAC,UAAAC,OAAAC,EAAA,IAAAC,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GACqD,OADrDP,EAAAF,EAAAU,KAAAC,MAAAX,EAAA,OAAAY,OAAAL,KACVM,MAAQ,CAACC,YAAa,KAAMC,WAAY,KAAMC,UAAU,GAAMd,CAAC,CAyErE,OAzEoEe,YAAApB,EAAA,EAAAqB,IAAA,SAAAC,MAErE,WAAU,IAADC,EAAA,KACCC,EAAmBC,KAAKC,MAAMhB,KAAa,OAC3CiB,EAAmBF,KAAKG,YAE1BC,EAAY,mBACZJ,KAAKT,MAAMG,WACXU,GAAa,WAGjB,IAAMC,EAAU,WACZP,EAAKQ,SAAS,CAAEZ,UAAU,GAC9B,EAEA,OAAOa,eAAAC,WAAA,CAAAC,SAAA,CACHF,eAAA,OAAKH,UAAU,aAAYK,SAAA,CACvBF,eAAA,QAAMH,UAAWJ,KAAKT,MAAMG,SAAW,GAAK,UAAUe,SAAA,CAAiBC,cAAA,KAAGN,UAAU,eAAiB,MAA1C,aAE7B,MAA1BJ,KAAKT,MAAMC,YACXe,eAAAC,WAAA,CAAAC,SAAA,CACIC,cAAA,UAAAD,SAA0B,UAAd,eAA6B,IAACF,eAAA,QAAAE,SAAA,CAAmBT,KAAKT,MAAMC,YAAY,MAAhC,YAEtDkB,cAAAF,WAAA,MAPsB,cAUhCE,cAAA,OAAKN,UAAWA,EAAWC,QAASA,EAAQI,SAEpCV,EAAOY,KAAI,SAACC,EAAWC,GACnB,IAAIT,EAAY,QACZN,EAAKP,OACDO,EAAKP,MAAMC,aAAeqB,IAC1BT,GAAa,WAGrB,IAAMU,EAAQ,CACVC,gBACIb,EAAOW,GAAK,EAAC,qBAAAvB,OACcY,EAAOW,GAAE,0BAAAvB,QACRY,EAAOW,GAAE,MAS7C,OAAOH,cAAA,QAAcN,UAAWA,EAAWU,MAAOA,EAC9CE,YAPgB,WACXlB,EAAKP,MAAMG,UACZI,EAAKQ,SAAS,CAAEd,YAAaqB,IAEjCf,EAAKQ,SAAS,CAAEb,WAAYoB,GAChC,EAE8BR,QAASA,EAAQI,SAAEG,GAD/BC,EAEtB,KAxByC,UA4BzD,GAAC,CAAAjB,IAAA,YAAAC,MAED,WACI,IAAME,EAASC,KAAKC,MAAMhB,KAAa,OACvC,IAAKe,KAAKT,OAAmC,MAA1BS,KAAKT,MAAMC,aAAuBQ,KAAKT,MAAMC,YAAc,EAC1E,OAAOO,EAAOY,KAAI,kBAAM,CAAC,IAE7B,IAAMM,EAAwBjB,KAAKC,MAAMhB,KAAa,OAEhD4B,EAAIb,KAAKT,MAAMC,YAAc,EAC7B0B,EAAKC,KAAKC,IAAID,KAAKE,IAAI,EAAGR,GAAII,EAAUJ,GAAG7B,QAC3CsC,EAAML,EAAUJ,GAAGU,MAAM,EAAGL,GAClCI,EAAIE,UACJ,IAAIC,EAAM,GAAAnC,OAAAoC,YACHxC,MAAMiC,KAAKE,IAAI,EAAGR,EAAIS,EAAItC,SAAS2C,KAAK,IAAED,YAC1CJ,EAAIX,KAAI,SAACiB,GAAC,YAAUC,GAALD,GAAkBE,MAAMF,GAAK,EAAIA,CAAC,MAGxD,OADAH,EAAM,GAAAnC,OAAAoC,YAAOD,GAAMC,YAAKxC,MAAMa,EAAOf,OAASyC,EAAOzC,QAAQ2C,KAAK,IAEtE,KAACpD,CAAA,CA1EgB,CAASwD,KA6EfC,cAAwBzD,G,MCvFvC0D,IAASC,OACPxB,cAACyB,IAAMC,WAAU,CAAA3B,SACfC,cAACnC,EAAe,MAElB8D,SAASC,eAAe,Q","file":"static/js/main.d475cbb2.chunk.js","sourcesContent":["import {\n StreamlitComponentBase,\n withStreamlitConnection,\n} from \"streamlit-component-lib\";\n\ntype HighlightedTextState = {\n activeIndex: number | null,\n hoverIndex: number | null,\n isFrozen: boolean\n};\n\n/**\n * This is a React-based component template. The `render()` function is called\n * automatically when your component should be re-rendered.\n */\nclass HighlightedText extends StreamlitComponentBase<HighlightedTextState> {\n public state = {activeIndex: null, hoverIndex: null, isFrozen: false};\n\n render() {\n const tokens: string[] = this.props.args[\"tokens\"];\n const scores: number[] = this.getScores();\n\n let className = \"highlighted-text\";\n if (this.state.isFrozen) {\n className += \" frozen\";\n }\n\n const onClick = () => {\n this.setState({ isFrozen: false });\n };\n\n return <>\n <div className=\"status-bar\" key=\"status-bar\">\n <span className={this.state.isFrozen ? \"\" : \" d-none\"} key=\"lock-icon\"><i className=\"fa fa-lock\"></i> </span>\n {\n this.state.activeIndex != null ?\n <>\n <strong key=\"index-label\">index:</strong> <span key=\"index\">{this.state.activeIndex} </span>\n </>\n : <></>\n }\n </div>\n <div className={className} onClick={onClick} key=\"text\">\n {\n tokens.map((t: string, i: number) => {\n let className = \"token\";\n if (this.state) {\n if (this.state.activeIndex == i) {\n className += \" active\";\n }\n }\n const style = {\n backgroundColor:\n scores[i] > 0\n ? `rgba(32, 255, 32, ${scores[i]})`\n : `rgba(255, 32, 32, ${-scores[i]})`\n };\n\n const onMouseOver = () => {\n if (!this.state.isFrozen) {\n this.setState({ activeIndex: i });\n }\n this.setState({ hoverIndex: i });\n };\n return <span key={i} className={className} style={style}\n onMouseOver={onMouseOver} onClick={onClick}>{t}</span>;\n })\n }\n </div>\n </>;\n }\n\n private getScores() {\n const tokens = this.props.args[\"tokens\"];\n if (!this.state || this.state.activeIndex == null || this.state.activeIndex < 1) {\n return tokens.map(() => 0);\n }\n const allScores: number[][] = this.props.args[\"scores\"];\n\n const i = this.state.activeIndex - 1;\n const hi = Math.min(Math.max(0, i), allScores[i].length);\n const row = allScores[i].slice(0, hi);\n row.reverse();\n let result = [\n ...Array(Math.max(0, i - row.length)).fill(0), \n ...row.map((x) => x == undefined || isNaN(x) ? 0 : x)\n ];\n result = [...result, ...Array(tokens.length - result.length).fill(0)];\n return result;\n }\n}\n\nexport default withStreamlitConnection(HighlightedText);\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport HighlightedText from \"./HighlightedText\";\nimport \"./index.scss\";\n\nReactDOM.render(\n <React.StrictMode>\n <HighlightedText />\n </React.StrictMode>,\n document.getElementById(\"root\")\n)\n"],"sourceRoot":""}