Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot load custom js with <script> on version 6.x #7325

Closed
CnBDM-Su opened this issue Apr 17, 2024 · 6 comments
Closed

Cannot load custom js with <script> on version 6.x #7325

CnBDM-Su opened this issue Apr 17, 2024 · 6 comments
Labels
bug status:Needs Info status:Needs Triage Applied to issues that need triage

Comments

@CnBDM-Su
Copy link

I use IPython HTML to load custom js like
HTML(<script>custom js content</script>) works well in notebook on version 5.x and 7.x.
But fail in 6.x.

The IPython HTML cannot find it. when I call it, it shows xxx not defined in console.
image

Does anyone know how to solve this without change the version of notebook?
Is there specific load custom js approach for version 6.x?

Thanks
@CnBDM-Su CnBDM-Su added bug status:Needs Triage Applied to issues that need triage labels Apr 17, 2024
@RRosio
Copy link
Collaborator

RRosio commented Apr 23, 2024

Hi @CnBDM-Su can you share which version of Notebook 6 you are experiencing this problem with?

@JasonWeill JasonWeill mentioned this issue Apr 23, 2024
Open
@CnBDM-Su
Copy link
Author

CnBDM-Su commented May 6, 2024

@RRosio 6.4.0

@RRosio
Copy link
Collaborator

RRosio commented May 7, 2024

Thank you for the update @CnBDM-Su, have you also used the display function from IPython.display? On my end, using Notebook 6.5.7 wrapping the HTML function call in a display() works as expected.

@JasonWeill
Copy link
Collaborator

@CnBDM-Su Any response to @RRosio 's question from last week? Thanks!

@CnBDM-Su
Copy link
Author

CnBDM-Su commented May 20, 2024 •
edited

Hi @RRosio , thanks for your help. But still not work.
Here is an easy test html script you can try.

script = '''
'\n            <!DOCTYPE html>\n            <html lang="en" style="height: 100%">\n            <head>\n            <meta charset="utf-8">\n            </head>\n            <body style="height: 100%; margin: 0">\n\n            \n            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>   <div id="1716194668.8439384" style="height: 600px; width: 800px"></div>\n            \n            <script type="text/javascript">\n            var dom = document.getElementById(\'1716194668.8439384\');\n            dom.innerHTML = ""\n            dom.setAttribute(\'_echarts_instance_\', \'\')\n            var myChart = echarts.init(dom, null, {\n                renderer: \'canvas\',\n                useDirtyRect: false\n                });\n            var app = {};\n\n            var option;\n    option = {"echarts_id": "1716194668.8439384", "link_id": null, "figname": "", "title": {"show": true, "text": "dsds", "link": "", "target": "blank", "textStyle": {"fontStyle": "normal", "fontWeight": "bolder", "fontFamily": "sans-serif", "fontSize": 15, "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "subtext": "", "sublink": "", "subtarget": "blank", "textAlign": "center", "textVerticalAlign": "auto", "padding": 0, "itemGap": 10, "z": 2, "left": "55%", "top": "5%", "right": "auto", "bottom": "auto", "backgroundColor": "transparent", "borderColor": "#ccc", "changed_name_key": {"id_": "id"}}, "grid": {"show": true, "width": "auto", "height": "auto", "z": 2, "left": "20%", "top": "10%", "right": "10%", "bottom": "5%", "borderColor": "#ccc", "borderWidth": 1, "containLabel": true, "backgroundColor": "transparent", "changed_name_key": {"id_": "id"}}, "legend": {"show": true, "type": "plain", "width": "auto", "height": "auto", "orient": "vertical", "align": "auto", "itemWidth": 25, "itemHeight": 14, "symbolRotate": "inherit", "selectedMode": true, "padding": 5, "itemGap": 10, "z": 2, "left": "1%", "top": "center", "right": "auto", "bottom": "auto", "borderColor": "#ccc", "borderWidth": 1, "inactiveColor": "#ccc", "inactiveBorderColor": "#ccc", "inactiveBorderWidth": "auto", "selected": {}, "textStyle": {"overflow": "truncate"}, "pageButtonItemGap": 5, "pageButtonPosition": "end", "pageFormatter": "{current}/{total}", "pageIconColor": "#2f4554", "pageIconInactiveColor": "#aaa", "pageIconSize": 15, "animationDurationUpdate": 800, "selectorItemGap": 7, "selectorButtonGap": 10}, "brush": null, "yAxis": [{"show": true, "type": "value", "position": "bottom", "name": "", "nameLocation": "center", "nameTextStyle": {"color": "black", "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "backgroundColor": "", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "nameGap": 35, "min": -1.198, "max": 1.198, "splitNumber": 5, "logBase": 10, "axisTick": {"show": true, "alignWithLabel": "none", "interval": "auto", "length": 5}, "axisLabel": {"show": true, "margin": 8, "showMinLabel": false, "showMaxLabel": false, "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "fontSize": 12, "backgroundColor": "transparent", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "truncate", "ellipsis": "...", "width": 40.0}, "splitLine": {"show": true, "interval": "auto"}, "splitArea": {"show": false, "interval": "auto"}, "dimension": "2d", "ignored": false, "changed_name_key": {"min_": "min", "max_": "max", "type_": "type", "name_": "name"}}], "xAxis": [{"show": true, "type": "value", "position": "bottom", "name": "", "nameLocation": "center", "nameTextStyle": {"color": "black", "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "backgroundColor": "", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "nameGap": 30, "min": -1.2, "max": 1.2, "splitNumber": 5, "logBase": 10, "axisTick": {"show": true, "alignWithLabel": "none", "interval": "auto", "length": 5}, "axisLabel": {"show": true, "margin": 8, "showMinLabel": false, "showMaxLabel": false, "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "fontSize": 12, "backgroundColor": "transparent", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "truncate", "ellipsis": "...", "width": null}, "splitLine": {"show": true, "interval": "auto"}, "splitArea": {"show": false, "interval": "auto"}, "dimension": "2d", "ignored": false, "changed_name_key": {"min_": "min", "max_": "max", "type_": "type", "name_": "name"}}], "parallelAxis": null, "series": [{"type": "scatter", "name": "0", "colorBy": "series", "z": 2, "xAxisIndex": 0, "yAxisIndex": 0, "legendHoverLink": true, "stackStrategy": "samesign", "cursor": "pointer", "clip": true, "emphasis": {"focus": "none"}, "seriesLayoutBy": "column", "data": [[-0.42577929156507216, -0.9048270524660198], [-0.8763066800438636, 0.4817536741017152], [0.7289686274214119, -0.6845471059286883], [0.0627905195293133, 0.9980267284282716], [-0.7289686274214117, 0.6845471059286885], [0.18738131458572452, 0.9822872507286887], [-0.9685831611286311, -0.24868988716485502], [0.9297764858882513, 0.368124552684678], [0.42577929156507266, 0.9048270524660196], [0.4257792915650726, -0.9048270524660196], [-0.8090169943749473, 0.5877852522924732], [-0.8090169943749472, -0.5877852522924734], [0.30901699437494745, 0.9510565162951535], [-0.18738131458572482, 0.9822872507286886], [-0.9921147013144779, -0.12533323356430429], [-0.9685831611286311, 0.24868988716485482], [-0.9921147013144779, 0.1253332335643041], [0.9921147013144779, 0.12533323356430426], [0.5358267949789965, 0.8443279255020151], [0.9921147013144779, -0.1253332335643038], [-0.30901699437494756, -0.9510565162951535], [0.63742398974869, -0.770513242775789], [0.06279051952931372, -0.9980267284282716], [-0.5358267949789963, -0.8443279255020153], [0.30901699437494723, -0.9510565162951536], [0.8763066800438636, 0.4817536741017153], [0.9685831611286311, 0.2486898871648548], [0.5358267949789968, -0.844327925502015], [1.0, 0.0], [-0.6374239897486895, -0.7705132427757894], [-0.5358267949789969, 0.844327925502015], [-0.18738131458572463, -0.9822872507286887], [-0.4257792915650727, 0.9048270524660195], [-0.0627905195293134, 0.9980267284282716], [0.6374239897486896, 0.7705132427757893], [-1.0, -3.216245299353273e-16], [-0.9297764858882512, -0.3681245526846783], [0.9685831611286312, -0.2486898871648545], [0.9297764858882515, -0.36812455268467786], [-0.9297764858882515, 0.36812455268467775], [-0.30901699437494756, 0.9510565162951535], [0.18738131458572513, -0.9822872507286886], [0.8090169943749478, -0.5877852522924726], [0.8763066800438636, -0.4817536741017153], [-0.7289686274214116, -0.6845471059286887], [0.7289686274214116, 0.6845471059286887], [-0.6374239897486897, 0.7705132427757893], [-0.8763066800438636, -0.4817536741017154], [-0.06279051952931321, -0.9980267284282716], [0.8090169943749475, 0.5877852522924731]], "animation": true, "animationThreshold": 2000, "animationDuration": 1000, "animationEasing": "cubicOut", "animationDurationUpdate": 300, "animationEasingUpdate": "cubicOut", "color": "", "coordinateSystem": "cartesian2d", "symbol": "circle", "symbolSize": 10, "symbolOffset": [0, 0], "large": true, "largeThreshold": 500, "progressive": 400, "progressiveThreshold": 3000, "data_dict": {}, "is_text": false, "ignore_axis": false}, {"type": "scatter", "name": "1", "colorBy": "series", "z": 2, "xAxisIndex": 0, "yAxisIndex": 0, "legendHoverLink": true, "stackStrategy": "samesign", "cursor": "pointer", "clip": true, "emphasis": {"focus": "none"}, "seriesLayoutBy": "column", "data": [[0.3406234332520581, -0.7238616419728157], [-0.6472135954999579, 0.4702282018339786], [0.14990505166857962, 0.785829800582951], [0.7936917610515823, 0.1002665868514434], [0.5831749019371293, 0.547637684742951], [0.7936917610515823, -0.10026658685144303], [-0.24721359549995806, 0.7608452130361228], [-0.743821188710601, -0.29449964214774266], [-0.42866143598319706, -0.6754623404016122], [-0.7748665289029049, 0.19895190973188387], [0.05023241562345098, -0.7984213827426173], [0.42866143598319745, -0.675462340401612], [0.5099391917989518, 0.6164105942206315], [-0.3406234332520582, 0.7238616419728157], [0.8, 0.0], [0.6472135954999583, -0.47022820183397807], [0.774866528902905, -0.1989519097318836], [-0.5099391917989519, 0.6164105942206315], [0.2472135954999578, -0.760845213036123], [-0.7936917610515823, -0.10026658685144343], [-0.7748665289029049, -0.19895190973188404], [-0.4286614359831975, 0.675462340401612], [0.647213595499958, 0.4702282018339785], [0.5831749019371295, -0.5476376847429506], [-0.24721359549995806, -0.7608452130361228], [0.14990505166858012, -0.7858298005829509], [0.7438211887106012, -0.2944996421477423], [-0.7936917610515823, 0.10026658685144328], [-0.8, -2.572996239482619e-16], [-0.7010453440350909, -0.3854029392813723], [-0.1499050516685797, -0.785829800582951], [-0.14990505166857987, 0.7858298005829509], [0.7748665289029049, 0.19895190973188384], [-0.5831749019371294, 0.5476376847429508], [-0.7010453440350909, 0.3854029392813722], [0.4286614359831973, 0.6754623404016121], [-0.05023241562345057, -0.7984213827426173], [-0.34062343325205774, -0.7238616419728159], [0.7438211887106011, 0.2944996421477424], [-0.5099391917989516, -0.6164105942206315], [-0.7438211887106012, 0.2944996421477422], [0.05023241562345065, 0.7984213827426173], [0.7010453440350909, 0.38540293928137226], [0.24721359549995797, 0.7608452130361228], [0.7010453440350909, -0.38540293928137226], [-0.5831749019371293, -0.547637684742951], [-0.050232415623450724, 0.7984213827426173], [-0.6472135954999578, -0.47022820183397873], [0.3406234332520581, 0.7238616419728157], [0.509939191798952, -0.6164105942206313]], "animation": true, "animationThreshold": 2000, "animationDuration": 1000, "animationEasing": "cubicOut", "animationDurationUpdate": 300, "animationEasingUpdate": "cubicOut", "color": "", "coordinateSystem": "cartesian2d", "symbol": "circle", "symbolSize": 10, "symbolOffset": [0, 0], "large": true, "largeThreshold": 500, "progressive": 400, "progressiveThreshold": 3000, "data_dict": {}, "is_text": false, "ignore_axis": false}], "visualMap": null, "toolbox": {"show": true, "orient": "horizontal", "itemSize": 15, "itemGap": 8, "showTitle": true, "feature": {"dataZoom": {}, "saveAsImage": {}}, "z": 2, "left": "auto", "top": "auto", "right": "1%", "bottom": "auto", "width": "auto", "height": "auto", "popup": true, "changed_name_key": {"id_": "id"}}, "tooltip": {"show": true, "trigger": "item", "axisPointer": {"show": true, "type": "line"}, "showContent": true, "triggerOn": "mousemove|click", "hideDelay": 100, "enterable": true, "renderMode": "html", "transitionDuration": 0.4, "borderColor": "#333", "padding": 5, "order": "seriesAsc"}, "dataZoom": null, "event": null, "graphic": null, "radar": null, "figsize": {"height": 600, "width": 800}, "color": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"], "controler_data": null, "save_img": false, "port": "5004"};option = support_popup(option=option, height="600px", width="800px", inner_html=`\n\n        <html lang="en" style="height: 100%">\n        <title>EchartsLib</title>\n        <head> <meta charset="utf-8"> </head>\n        <body style="height: 100%; margin: 0">\n        \n        \n            <script type="text/javascript" src="http://127.0.0.1:5004/resources/echarts_js"><\\/script>\n            <script type="text/javascript" src="http://127.0.0.1:5004/resources/echarts_gl_js"><\\/script>\n            <script type="text/javascript" src="http://127.0.0.1:5004/resources/dat_js"><\\/script>\n            <script type="text/javascript" src="http://127.0.0.1:5004/resources/echarts_wc_js"><\\/script>\n            \n\n        <div id="1716194668.8439384" style="height: 90%; width: 90%"></div>\n        <script type="text/javascript">\n            var dom = document.getElementById(\'1716194668.8439384\');\n            var myChart = echarts.init(dom, null, {\n                renderer: \'canvas\',\n                useDirtyRect: false\n                });\n            var app = {};\n\n            var option;\n        option = {"echarts_id": "1716194668.8439384", "link_id": null, "figname": "", "title": {"show": true, "text": "dsds", "link": "", "target": "blank", "textStyle": {"fontStyle": "normal", "fontWeight": "bolder", "fontFamily": "sans-serif", "fontSize": 15, "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "subtext": "", "sublink": "", "subtarget": "blank", "textAlign": "center", "textVerticalAlign": "auto", "padding": 0, "itemGap": 10, "z": 2, "left": "55%", "top": "5%", "right": "auto", "bottom": "auto", "backgroundColor": "transparent", "borderColor": "#ccc", "changed_name_key": {"id_": "id"}}, "grid": {"show": true, "width": "auto", "height": "auto", "z": 2, "left": "20%", "top": "10%", "right": "10%", "bottom": "5%", "borderColor": "#ccc", "borderWidth": 1, "containLabel": true, "backgroundColor": "transparent", "changed_name_key": {"id_": "id"}}, "legend": {"show": true, "type": "plain", "width": "auto", "height": "auto", "orient": "vertical", "align": "auto", "itemWidth": 25, "itemHeight": 14, "symbolRotate": "inherit", "selectedMode": true, "padding": 5, "itemGap": 10, "z": 2, "left": "1%", "top": "center", "right": "auto", "bottom": "auto", "borderColor": "#ccc", "borderWidth": 1, "inactiveColor": "#ccc", "inactiveBorderColor": "#ccc", "inactiveBorderWidth": "auto", "selected": {}, "textStyle": {"overflow": "truncate"}, "pageButtonItemGap": 5, "pageButtonPosition": "end", "pageFormatter": "{current}/{total}", "pageIconColor": "#2f4554", "pageIconInactiveColor": "#aaa", "pageIconSize": 15, "animationDurationUpdate": 800, "selectorItemGap": 7, "selectorButtonGap": 10}, "brush": null, "yAxis": [{"show": true, "type": "value", "position": "bottom", "name": "", "nameLocation": "center", "nameTextStyle": {"color": "black", "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "backgroundColor": "", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "nameGap": 35, "min": -1.198, "max": 1.198, "splitNumber": 5, "logBase": 10, "axisTick": {"show": true, "alignWithLabel": "none", "interval": "auto", "length": 5}, "axisLabel": {"show": true, "margin": 8, "showMinLabel": false, "showMaxLabel": false, "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "fontSize": 12, "backgroundColor": "transparent", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "truncate", "ellipsis": "...", "width": 40.0}, "splitLine": {"show": true, "interval": "auto"}, "splitArea": {"show": false, "interval": "auto"}, "dimension": "2d", "ignored": false, "changed_name_key": {"min_": "min", "max_": "max", "type_": "type", "name_": "name"}}], "xAxis": [{"show": true, "type": "value", "position": "bottom", "name": "", "nameLocation": "center", "nameTextStyle": {"color": "black", "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "backgroundColor": "", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "nameGap": 30, "min": -1.2, "max": 1.2, "splitNumber": 5, "logBase": 10, "axisTick": {"show": true, "alignWithLabel": "none", "interval": "auto", "length": 5}, "axisLabel": {"show": true, "margin": 8, "showMinLabel": false, "showMaxLabel": false, "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "fontSize": 12, "backgroundColor": "transparent", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "truncate", "ellipsis": "...", "width": null}, "splitLine": {"show": true, "interval": "auto"}, "splitArea": {"show": false, "interval": "auto"}, "dimension": "2d", "ignored": false, "changed_name_key": {"min_": "min", "max_": "max", "type_": "type", "name_": "name"}}], "parallelAxis": null, "series": [{"type": "scatter", "name": "0", "colorBy": "series", "z": 2, "xAxisIndex": 0, "yAxisIndex": 0, "legendHoverLink": true, "stackStrategy": "samesign", "cursor": "pointer", "clip": true, "emphasis": {"focus": "none"}, "seriesLayoutBy": "column", "data": [[-0.42577929156507216, -0.9048270524660198], [-0.8763066800438636, 0.4817536741017152], [0.7289686274214119, -0.6845471059286883], [0.0627905195293133, 0.9980267284282716], [-0.7289686274214117, 0.6845471059286885], [0.18738131458572452, 0.9822872507286887], [-0.9685831611286311, -0.24868988716485502], [0.9297764858882513, 0.368124552684678], [0.42577929156507266, 0.9048270524660196], [0.4257792915650726, -0.9048270524660196], [-0.8090169943749473, 0.5877852522924732], [-0.8090169943749472, -0.5877852522924734], [0.30901699437494745, 0.9510565162951535], [-0.18738131458572482, 0.9822872507286886], [-0.9921147013144779, -0.12533323356430429], [-0.9685831611286311, 0.24868988716485482], [-0.9921147013144779, 0.1253332335643041], [0.9921147013144779, 0.12533323356430426], [0.5358267949789965, 0.8443279255020151], [0.9921147013144779, -0.1253332335643038], [-0.30901699437494756, -0.9510565162951535], [0.63742398974869, -0.770513242775789], [0.06279051952931372, -0.9980267284282716], [-0.5358267949789963, -0.8443279255020153], [0.30901699437494723, -0.9510565162951536], [0.8763066800438636, 0.4817536741017153], [0.9685831611286311, 0.2486898871648548], [0.5358267949789968, -0.844327925502015], [1.0, 0.0], [-0.6374239897486895, -0.7705132427757894], [-0.5358267949789969, 0.844327925502015], [-0.18738131458572463, -0.9822872507286887], [-0.4257792915650727, 0.9048270524660195], [-0.0627905195293134, 0.9980267284282716], [0.6374239897486896, 0.7705132427757893], [-1.0, -3.216245299353273e-16], [-0.9297764858882512, -0.3681245526846783], [0.9685831611286312, -0.2486898871648545], [0.9297764858882515, -0.36812455268467786], [-0.9297764858882515, 0.36812455268467775], [-0.30901699437494756, 0.9510565162951535], [0.18738131458572513, -0.9822872507286886], [0.8090169943749478, -0.5877852522924726], [0.8763066800438636, -0.4817536741017153], [-0.7289686274214116, -0.6845471059286887], [0.7289686274214116, 0.6845471059286887], [-0.6374239897486897, 0.7705132427757893], [-0.8763066800438636, -0.4817536741017154], [-0.06279051952931321, -0.9980267284282716], [0.8090169943749475, 0.5877852522924731]], "animation": true, "animationThreshold": 2000, "animationDuration": 1000, "animationEasing": "cubicOut", "animationDurationUpdate": 300, "animationEasingUpdate": "cubicOut", "color": "", "coordinateSystem": "cartesian2d", "symbol": "circle", "symbolSize": 10, "symbolOffset": [0, 0], "large": true, "largeThreshold": 500, "progressive": 400, "progressiveThreshold": 3000, "data_dict": {}, "is_text": false, "ignore_axis": false}, {"type": "scatter", "name": "1", "colorBy": "series", "z": 2, "xAxisIndex": 0, "yAxisIndex": 0, "legendHoverLink": true, "stackStrategy": "samesign", "cursor": "pointer", "clip": true, "emphasis": {"focus": "none"}, "seriesLayoutBy": "column", "data": [[0.3406234332520581, -0.7238616419728157], [-0.6472135954999579, 0.4702282018339786], [0.14990505166857962, 0.785829800582951], [0.7936917610515823, 0.1002665868514434], [0.5831749019371293, 0.547637684742951], [0.7936917610515823, -0.10026658685144303], [-0.24721359549995806, 0.7608452130361228], [-0.743821188710601, -0.29449964214774266], [-0.42866143598319706, -0.6754623404016122], [-0.7748665289029049, 0.19895190973188387], [0.05023241562345098, -0.7984213827426173], [0.42866143598319745, -0.675462340401612], [0.5099391917989518, 0.6164105942206315], [-0.3406234332520582, 0.7238616419728157], [0.8, 0.0], [0.6472135954999583, -0.47022820183397807], [0.774866528902905, -0.1989519097318836], [-0.5099391917989519, 0.6164105942206315], [0.2472135954999578, -0.760845213036123], [-0.7936917610515823, -0.10026658685144343], [-0.7748665289029049, -0.19895190973188404], [-0.4286614359831975, 0.675462340401612], [0.647213595499958, 0.4702282018339785], [0.5831749019371295, -0.5476376847429506], [-0.24721359549995806, -0.7608452130361228], [0.14990505166858012, -0.7858298005829509], [0.7438211887106012, -0.2944996421477423], [-0.7936917610515823, 0.10026658685144328], [-0.8, -2.572996239482619e-16], [-0.7010453440350909, -0.3854029392813723], [-0.1499050516685797, -0.785829800582951], [-0.14990505166857987, 0.7858298005829509], [0.7748665289029049, 0.19895190973188384], [-0.5831749019371294, 0.5476376847429508], [-0.7010453440350909, 0.3854029392813722], [0.4286614359831973, 0.6754623404016121], [-0.05023241562345057, -0.7984213827426173], [-0.34062343325205774, -0.7238616419728159], [0.7438211887106011, 0.2944996421477424], [-0.5099391917989516, -0.6164105942206315], [-0.7438211887106012, 0.2944996421477422], [0.05023241562345065, 0.7984213827426173], [0.7010453440350909, 0.38540293928137226], [0.24721359549995797, 0.7608452130361228], [0.7010453440350909, -0.38540293928137226], [-0.5831749019371293, -0.547637684742951], [-0.050232415623450724, 0.7984213827426173], [-0.6472135954999578, -0.47022820183397873], [0.3406234332520581, 0.7238616419728157], [0.509939191798952, -0.6164105942206313]], "animation": true, "animationThreshold": 2000, "animationDuration": 1000, "animationEasing": "cubicOut", "animationDurationUpdate": 300, "animationEasingUpdate": "cubicOut", "color": "", "coordinateSystem": "cartesian2d", "symbol": "circle", "symbolSize": 10, "symbolOffset": [0, 0], "large": true, "largeThreshold": 500, "progressive": 400, "progressiveThreshold": 3000, "data_dict": {}, "is_text": false, "ignore_axis": false}], "visualMap": null, "toolbox": {"show": true, "orient": "horizontal", "itemSize": 15, "itemGap": 8, "showTitle": true, "feature": {"dataZoom": {}, "saveAsImage": {}}, "z": 2, "left": "auto", "top": "auto", "right": "1%", "bottom": "auto", "width": "auto", "height": "auto", "popup": true, "changed_name_key": {"id_": "id"}}, "tooltip": {"show": true, "trigger": "item", "axisPointer": {"show": true, "type": "line"}, "showContent": true, "triggerOn": "mousemove|click", "hideDelay": 100, "enterable": true, "renderMode": "html", "transitionDuration": 0.4, "borderColor": "#333", "padding": 5, "order": "seriesAsc"}, "dataZoom": null, "event": null, "graphic": null, "radar": null, "figsize": {"height": 600, "width": 800}, "color": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"], "controler_data": null, "save_img": false, "port": "5004"};function setInnerHTML(elm, html) {\n  elm.innerHTML = html;\n  \n  Array.from(elm.querySelectorAll("script"))\n    .forEach( oldScriptEl => {\n      const newScriptEl = document.createElement("script");\n      \n      Array.from(oldScriptEl.attributes).forEach( attr => {\n        newScriptEl.setAttribute(attr.name, attr.value) \n      });\n      \n      const scriptText = document.createTextNode(oldScriptEl.innerHTML);\n      newScriptEl.appendChild(scriptText);\n      \n      oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);\n  });\n};\nfunction support_scientific_notation(option) {\n  if (Array.isArray(option[\'yAxis\'])) {\n    for (var tar_ind = 0; tar_ind < option[\'yAxis\'].length; tar_ind++) {\n      if (option[\'yAxis\'][tar_ind][\'type\'] === \'value\') {\n        option[\'yAxis\'][tar_ind][\'axisLabel\'][\'formatter\'] = function(val) {\n          const superscripts = [\'⁰\', \'¹\', \'²\', \'³\', \'⁴\', \'⁵\', \'⁶\', \'⁷\', \'⁸\', \'⁹\',\'¹⁰\',\n                    \'¹¹\', \'¹²\', \'¹³\', \'¹⁴\', \'¹⁵\', \'¹⁶\', \'¹⁷\', \'¹⁸\', \'¹⁹\',\'²⁰\',\n                    \'²¹\', \'²²\', \'²³\', \'²⁴\', \'²⁵\', \'²⁶\', \'²⁷\', \'²⁸\', \'²⁹\'];\n          function toSuperscript(val) {\n            if (val.toString().length > 6) {\n              val = Number(val).toExponential().toString();\n              if (val.includes(\'-\')) {\n                val = val.split(\'-\');\n                var val0 = val[0];\n                var val1 = superscripts[val[1]];\n                return val0 + \'⁻\' + val1\n              }\n              else if (val.includes(\'+\')) {\n                val = val.split(\'+\');\n                var val0 = val[0];\n                var val1 = superscripts[val[1]];\n                return val0 + \'⁺\' + val1\n              }\n            }\n            else {\n              return val\n            }\n          }\n          return toSuperscript(val)\n        }\n      }\n    }\n  }\n  else {\n    if (option[\'yAxis\'][\'type\'] === \'value\') {\n      option[\'yAxis\'][\'axisLabel\'][\'formatter\'] = function(val) {\n        const superscripts = [\'⁰\', \'¹\', \'²\', \'³\', \'⁴\', \'⁵\', \'⁶\', \'⁷\', \'⁸\', \'⁹\',\'¹⁰\',\n                \'¹¹\', \'¹²\', \'¹³\', \'¹⁴\', \'¹⁵\', \'¹⁶\', \'¹⁷\', \'¹⁸\', \'¹⁹\',\'²⁰\',\n                \'²¹\', \'²²\', \'²³\', \'²⁴\', \'²⁵\', \'²⁶\', \'²⁷\', \'²⁸\', \'²⁹\'];\n        function toSuperscript(val) {\n          if (val.toString().length > 6) {\n            val = Number(val).toExponential().toString();\n            if (val.includes(\'-\')) {\n              val = val.split(\'-\');\n              var val0 = val[0];\n              var val1 = superscripts[val[1]];\n              return val0 + \'⁻\' + val1\n            }\n            else if (val.includes(\'+\')) {\n              val = val.split(\'+\');\n              var val0 = val[0];\n              var val1 = superscripts[val[1]];\n              return val0 + \'⁺\' + val1\n            }\n          }\n          else {\n            return val\n          }\n        }\n        return toSuperscript(val)\n      }\n    }\n  };\n  return option;\n};\n\nfunction custom_scatter_size(option) {\n  \n  for (var ind = 0; ind < option[\'series\'].length; ind++) {\n    if (option[\'series\'][ind][\'symbolSize\'] === \'array_size\') {\n      var ind_ = option[\'series\'][ind][\'data_dict\'][\'size\']\n      option[\'series\'][ind][\'symbolSize\'] = function (data) {return data[ind_];}\n    }\n  }\n  return option;\n  \n};\n\nfunction show_scatter_label(option) {\n  \n  for (var ind = 0; ind < option[\'series\'].length; ind++) {\n    if (option[\'series\'][ind][\'label\'] === \'show_label\') {\n      var ind_ = option[\'series\'][ind][\'data_dict\'][\'label\']\n      option[\'series\'][ind][\'label\'] = {\n        show: true,\n        formatter: function (params) {return params.data[ind_]; }\n      }\n    }\n  }\n  return option;\n};\n\nfunction custom_axis_label(option) {\n  if (Array.isArray(option[\'xAxis\'])) {\n    for (var ind = 0; ind < option[\'xAxis\'].length; ind++) {\n      if (option[\'xAxis\'][ind][\'axisLabel\'][\'formatter_func\']) {\n        var f = new Function(option[\'xAxis\'][ind][\'axisLabel\'][\'formatter_func\'].arguments,\n                             option[\'xAxis\'][ind][\'axisLabel\'][\'formatter_func\'].body)\n        option[\'xAxis\'][ind][\'axisLabel\'][\'formatter\'] = f\n      }\n    }\n  }\n  else {\n    if (option[\'xAxis\'][\'axisLabel\'][\'formatter_func\']) {\n      var f = new Function(option[\'xAxis\'][\'axisLabel\'][\'formatter_func\'].arguments,\n                           option[\'xAxis\'][\'axisLabel\'][\'formatter_func\'].body)\n      option[\'xAxis\'][\'axisLabel\'][\'formatter\'] = f\n    }\n  }\n  if (Array.isArray(option[\'yAxis\'])) {\n    for (var ind = 0; ind < option[\'yAxis\'].length; ind++) {\n      if (option[\'yAxis\'][ind][\'axisLabel\'][\'formatter_func\']) {\n        var f = new Function(option[\'yAxis\'][ind][\'axisLabel\'][\'formatter_func\'].arguments,\n                             option[\'yAxis\'][ind][\'axisLabel\'][\'formatter_func\'].body)\n        option[\'yAxis\'][ind][\'axisLabel\'][\'formatter\'] = f\n      }\n    }\n  }\n  else {\n    if (option[\'yAxis\'][\'axisLabel\'][\'formatter_func\']) {\n      var f = new Function(option[\'yAxis\'][\'axisLabel\'][\'formatter_func\'].arguments,\n                           option[\'yAxis\'][\'axisLabel\'][\'formatter_func\'].body)\n      option[\'yAxis\'][\'axisLabel\'][\'formatter\'] = f\n    }\n  }\n  return option;\n}\n\nfunction custom_tooltip(option, dimension=2, formatter=true) {\n\n  if (dimension === 2) {\n    var xaxis_key = \'xAxis\'\n    var yaxis_key = \'yAxis\'\n  }\n\n  else if (dimension === 3) {\n    var xaxis_key = \'xAxis3D\'\n    var yaxis_key = \'yAxis3D\'\n    var zaxis_key = \'zAxis3D\'\n  }\n\n  if (option[\'radar\']) {\n    var radar_names = []\n    for (var ind_ = 0; ind_ < option[\'radar\'][\'indicator\'].length; ind_++) {\n      radar_names.push(option[\'radar\'][\'indicator\'][ind_][\'name\']) \n    }\n  }\n  \n  \n  if (option[xaxis_key][\'name\'] !== null && option[xaxis_key][\'name\'] !== \'\' && Array.isArray(option[xaxis_key])!==true) {\n    var xaxis_name = option[xaxis_key][\'name\'];\n  }\n  else {\n    var xaxis_name = \'X\';\n  }\n\n  if (option[yaxis_key][\'name\'] !== null && option[yaxis_key][\'name\'] !== \'\'&& Array.isArray(option[xaxis_key])!==true) {\n    var yaxis_name = option[yaxis_key][\'name\'];\n  }\n  else {\n    var yaxis_name = \'Y\';\n  }\n\n  if (typeof zaxis_key !== \'undefined\') {\n    if (option[zaxis_key][\'name\'] !== \'\'&& Array.isArray(option[xaxis_key])!==true) {\n      var zaxis_name = option[zaxis_key][\'name\'];\n    }\n    else {\n      var zaxis_name = \'\';\n    }\n  }\n  \n  if (option[\'tooltip\']) {\n    if (option[\'tooltip\'][\'precision\']) {\n      var precision = option[\'tooltip\'][\'precision\']\n      option[\'tooltip\'][\'valueFormatter\'] = (value) => Number(value).toFixed(precision)\n    }\n\n    for (var ind_ = 0; ind_ < option[\'series\'].length; ind_++) {\n      if (option[\'series\'][ind_][\'tooltip\']) {\n        if (option[\'series\'][ind_][\'tooltip\'][\'precision\']) {\n          var precision = option[\'series\'][ind_][\'tooltip\'][\'precision\']\n          const fix = precision_ => value => value.toFixed(precision_),\n          fix_p = fix(precision);\n          option[\'series\'][ind_][\'tooltip\'][\'valueFormatter\'] = function (value) {\n            return fix_p(value)\n          } \n        }\n      }\n    }\n\n    if (formatter) {\n      option[\'tooltip\'][\'formatter\'] = function(params) {\n        if (params.seriesName.includes(\'series\')) {\n          var series_name = \'\'\n        }\n        \n        else {\n          var series_name = params.seriesName + \'<br>\'\n        }\n    \n        if (params.seriesType === \'scatter\') {\n          formatter = series_name\n              + xaxis_name + \': \'+ Math.round(params.value[0] * 100) / 100\n              +\'<br>\' + yaxis_name + \': \' + Math.round(params.value[1] * 100) / 100\n        }\n    \n        else if (params.seriesType === \'scatter3D\') {\n          formatter = series_name\n              + xaxis_name + \': \'+ Math.round(params.value[0] * 100) / 100\n              +\'<br>\' + yaxis_name + \': \' + Math.round(params.value[1] * 100) / 100\n              +\'<br>\' + zaxis_name + \': \' + Math.round(params.value[2] * 100) / 100\n        }\n        \n        else if (params.seriesType === \'radar\') {\n          formatter = params.name  + \'<br>\';\n          for (var ind_ = 0; ind_ < option[\'radar\'][\'indicator\'].length; ind_++) {\n            if (ind_ !== option[\'radar\'][\'indicator\'].length - 1) {\n              formatter += radar_names[ind_] + \': \' + Math.round(params.value[ind_] * 100) / 100 + \'<br>\'\n            }\n            else {\n              formatter += radar_names[ind_] + \': \' + Math.round(params.value[ind_] * 100) / 100\n            }\n          }\n        }\n      return formatter;\n      } \n    }\n  }\n  return option;\n};\n\nfunction support_brush_event(option) {\n  if (option[\'event\'][\'type_\'] === \'brushselected\') {\n    if (option[\'link_id\'] === null) {\n      var link_id = option[\'echarts_id\'];\n    }\n    else {\n      var link_id = option[\'link_id\'];\n    }\n    var dom = document.getElementById(link_id);\n    var bind_chart = echarts.init(dom, null, {\n        renderer: \'canvas\',\n        useDirtyRect: false\n    });\n    var last_selected = [];\n    bind_chart.on(option[\'event\'][\'type_\'], (params) => {\n      var brushed = [];\n      var brushComponent = params.batch[0];\n      for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {\n        var rawIndices = brushComponent.selected[sIdx].dataIndex;\n        brushed.push(rawIndices);\n      }\n      var brushed_all = brushed[0];\n\n      if (JSON.stringify(last_selected) !== JSON.stringify(brushed_all)) {\n\n        // Update memory\n        let testRequest = new Request(\'http://localhost:\' + option[\'port\'] +\'/function/js_call_python_function\', {\n          method: \'post\',\n          headers: {\n              \'Content-Type\': \'application/json;charset=utf-8;\',\n              \'Access-Control-Allow-Origin\':\'*\',\n              \'Access-Control-Allow-Credentials\': \'true\',\n              \'Access-Control-Allow-Methods\':\'POST,PATCH,OPTIONS\'\n          },\n          body: JSON.stringify({\'js_func_input\':{\'selected\': brushed_all},\n                                \'event_id\': option[\'event\'][\'event_id\']})\n        });\n        var dom_dict = {}\n        fetch(testRequest).then(response => {\n          var result = response.json();\n          result.then(res => {\n            dom_dict[res[\'link_id\']] = document.getElementById(res[\'link_id\']);\n            setInnerHTML(dom_dict[res[\'link_id\']], res[\'html\']);\n          });\n        });\n        last_selected = brushed_all;\n      }\n                            \n    // bind_chart.setOption(option);\n    })\n  }\n  return option;\n};\n\nfunction support_click_event(option) {\n  if (option[\'event\'][\'type_\'] === \'click\') {\n    if (option[\'link_id\'] === null) {\n      var link_id = option[\'echarts_id\'];\n    }\n    else {\n      var link_id = option[\'link_id\'];\n    }\n    var dom = document.getElementById(link_id);\n    var bind_chart = echarts.init(dom, null, {\n        renderer: \'canvas\',\n        useDirtyRect: false\n    });\n\n    if (option[\'series\'][0][\'orient\'] === \'vertical\') {\n      var value_idx = 0\n    }\n    else {\n      var value_idx = 1\n    }\n    \n\n    bind_chart.on(option[\'event\'][\'type_\'], (params) => {\n      if (option[\'event\'][\'task\'] === \'singleselect\') {\n        for (var ind_2 = 0; ind_2 < option[\'series\'][0][\'data\'].length; ind_2++) {\n          if (option[\'series\'][0][\'data\'][ind_2][\'itemStyle\'][\'color\'] !== \'#1f77b4\') {\n            option[\'series\'][0][\'data\'][ind_2][\'itemStyle\'][\'color\'] = \'#1f77b4\';\n          }\n        }\n        var idx = option[\'series\'][0][\'x_value\'].indexOf(params.value[value_idx])\n        option[\'series\'][0][\'data\'][idx][\'itemStyle\'][\'color\'] = \'#ff7f0e\';\n\n        var selected = params.value[value_idx];\n      }\n      else {\n        console.log(params);\n      }\n      \n      let testRequest = new Request(\'http://localhost:\' + option[\'port\'] +\'/function/js_call_python_function\', {\n        method: \'post\',\n        headers: {\n          \'Content-Type\': \'application/json;charset=utf-8;\',\n          \'Access-Control-Allow-Origin\':\'*\',\n          \'Access-Control-Allow-Credentials\': \'true\',\n          \'Access-Control-Allow-Methods\':\'POST,PATCH,OPTIONS\'\n        },\n        body: JSON.stringify({\'js_func_input\':{\'selected\': selected},\n                              \'event_id\': option[\'event\'][\'event_id\']})\n      });\n      var dom_dict = {}\n      fetch(testRequest).then(response => {\n        var result = response.json();\n        result.then(res => {\n          dom_dict[res[\'link_id\']] = document.getElementById(res[\'link_id\']);\n          setInnerHTML(dom_dict[res[\'link_id\']], res[\'html\']);\n        });\n      });\n      bind_chart.setOption(option);\n    });\n  }\n  return option;\n};function add_controler(option) {\n\n  var div_id = option[\'controler_data\'][\'div_id\'];\n  var schema = option[\'controler_data\'][\'schema\'];\n  var configParameters = option[\'controler_data\'][\'config\'];\n  var folder = option[\'controler_data\'][\'folder\'];\n  var label = option[\'controler_data\'][\'label\'];\n  var url = \'http://localhost:\'.concat(option[\'port\']);\n  \n  var DEFAULT_PALETTE = [\'#FF1F5B\', \'#00CD6C\', \'#009ADE\', \'#AF58BA\', \'#FFC61E\',\n  \'#F28522\', \'#A0B1BA\', \'#A6761D\']\n\n  var fieldIndices = schema.reduce(function (obj, item) {\n    obj[item.name] = item.index;\n    return obj;\n  }, {});\n\n  app.config = {};\n  for (var ind = 0; ind < Object.keys(configParameters).length; ind++) {\n    var attribute_name = Object.keys(configParameters)[ind];\n    app.config[attribute_name] = configParameters[attribute_name][\'default\']\n  }\n  \n  var data;\n  async function data_update() {\n\n    //if (labels.length == 1) {\n    //  labels = labels[0]\n    //}\n\n    var content = {\'sample_method\': app.config.Method,\n                   \'sample_max_size\': app.config.MaxNum,\n                   \'label\': label};\n    \n    \n    let testRequest = new Request(url + \'/function/get_sampled_data\', {\n      method: \'post\',\n      headers: {\n        \'Content-Type\': \'application/json;charset=utf-8;\',\n        \'Access-Control-Allow-Origin\':\'http://127.0.0.1:8888\',\n        \'Access-Control-Allow-Credentials\': \'true\',\n        \'Access-Control-Allow-Methods\':\'POST,PATCH,OPTIONS\'\n      },\n      body: JSON.stringify(content)\n    });\n    await fetch(testRequest).then(async response => {\n      let result = await response.json();\n      data = result[\'sampled_data\'];\n    });\n\n    series = []\n    for (var ind = 0; ind < data.length; ind++) {\n      series.push({\n        dimensions: [app.config.xAxis3D, app.config.yAxis3D, app.config.yAxis3D],\n        itemStyle: {opacity: app.config.opacity},\n        // symbol: app.config.symbol,\n        symbolSize: app.config.symbolSize,\n        color: DEFAULT_PALETTE[ind],\n        data: data[ind].map(function (item, idx) {\n          return [\n            item[fieldIndices[app.config.xAxis3D]],\n            item[fieldIndices[app.config.yAxis3D]],\n            item[fieldIndices[app.config.zAxis3D]],\n            idx\n          ];\n        })\n      });\n    }\n\n    myChart.setOption({\n      xAxis3D: {\n        name: app.config.xAxis3D\n      },\n      yAxis3D: {\n        name: app.config.yAxis3D\n      },\n      zAxis3D: {\n        name: app.config.zAxis3D\n      },\n      series: series\n    });\n  };\n\n  app.config[\'onDataChange\'] = data_update\n  data_update()\n\n  \n  app.config[\'onChange\'] = function () {\n\n    series = []\n    for (var ind = 0; ind < data.length; ind++) {\n      series.push({\n        dimensions: [app.config.xAxis3D, app.config.yAxis3D, app.config.yAxis3D],\n        // symbol: app.config.symbol,\n        itemStyle: {opacity: app.config.opacity},\n        symbolSize: app.config.symbolSize,\n        color: DEFAULT_PALETTE[ind],\n        data: data[ind].map(function (item, idx) {\n          return [\n            item[fieldIndices[app.config.xAxis3D]],\n            item[fieldIndices[app.config.yAxis3D]],\n            item[fieldIndices[app.config.zAxis3D]],\n            idx\n          ];\n        })\n      });\n    };\n  \n    myChart.setOption({\n      xAxis3D: {\n        name: app.config.xAxis3D\n      },\n      yAxis3D: {\n        name: app.config.yAxis3D\n      },\n      zAxis3D: {\n        name: app.config.zAxis3D\n      },\n      series: series\n    });\n  };\n  \n  app.configParameters = configParameters;\n  if (div_id !== null) {\n    var datgui = new dat.GUI({ name: \'settings\', autoPlace: false, width: \'25%\', closeOnTop: true});\n  }\n  else {\n    var datgui = new dat.GUI({ name: \'settings\', autoPlace: true, width: \'25%\', closeOnTop: true});\n  }\n\n  var folder_dict = {\'\': datgui}; \n  for (folder_name of Object.keys(folder)){\n    folder_dict[folder_name] = datgui.addFolder(folder_name)\n    folder_dict[folder_name].open()\n  }\n\n\tlet dom_dat_outer = document.getElementsByClassName(\'dg ac\');\n  let dom_dat = document.getElementsByClassName(\'dg main a\');\n\t// let pos = dom.getBoundingClientRect();\n\tdom_dat_outer[0].style.top = \'5%\';\n\tdom_dat[0].style.width = \'25%\';\n  \n\t//dom_dat[0].style.left = pos.left + \'px\';\n\n  for (let key of Object.keys(app.configParameters)) {\n    const param = app.configParameters[key]\n\n    if (param.folder == \'Sampler\') {\n      if ("min" in param) {\n        folder_dict[param.folder].add(app.config, key).min(param.min).max(param.max).step(1).name(param.display_name).onChange(app.config.onDataChange);\n      } else if ("options" in param) {\n        folder_dict[param.folder].add(app.config, key, param.options).name(param.display_name).onChange(app.config.onDataChange);\n      }\n    }\n\n    else if (key === \'opacity\') {\n      folder_dict[param.folder].add(app.config, key).min(param.min).max(param.max).step(0.1).name(param.display_name).onChange(app.config.onChange);\n    }\n\n    else if (param.folder === \'hide\') {\n      continue\n    }\n\n    else {\n      if ("min" in param) {\n        folder_dict[param.folder].add(app.config, key).min(param.min).max(param.max).step(1).name(param.display_name).onChange(app.config.onChange);\n      } else if ("options" in param) {\n        folder_dict[param.folder].add(app.config, key, param.options).name(param.display_name).onChange(app.config.onChange);\n      }\n    }\n  }\n\n  if (div_id !== null) {\n    const containerEl = document.getElementById(div_id)\n    containerEl.appendChild(gui.domElement);\n  }\n  \n  return datgui;\n};option = support_scientific_notation(option=option);option = custom_tooltip(option=option, dimension=2, formatter=true);option = custom_scatter_size(option=option);option = show_scatter_label(option=option);option = custom_axis_label(option=option);\n\n            if (option && typeof option === \'object\') {\n                myChart.setOption(option);\n                }\n\n            window.addEventListener(\'resize\', myChart.resize);\n        <\\/script>\n        </body>\n        </html>\n    <style>\n.dg.main.taller-than-window .close-button {\n    border-top: 1px solid #ddd;\n}\n\n.dg.main .close-button {\n    background-color: #e8e8e8;\n}\n \n.dg.main .close-button:hover {\n    background-color: #ddd;\n}\n\n.dg {\n    color: #555;\n    text-shadow: none !important;\n}\n\n.dg.main::-webkit-scrollbar {\n    background: #fafafa;\n}\n\n.dg.main::-webkit-scrollbar-thumb {\n    background: #bbb;\n}\n \n.dg li:not(.folder) {\n    background: #fafafa;\n    border-bottom: 1px solid #ddd;\n}\n \n.dg li.save-row .button {\n    text-shadow: none !important;\n}\n\n.dg li.title {\n    background: #e8e8e8 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;\n}\n\n.dg .cr.function:hover,.dg .cr.boolean:hover {\n    background: #fff;\n}\n \n.dg .c input[type=text] {\n    background: #e9e9e9;\n}\n \n.dg .c input[type=text]:hover {\n    background: #eee;\n}\n \n.dg .c input[type=text]:focus {\n    background: #eee;\n    color: #555;\n}\n \n.dg .c .slider {\n    background: #e9e9e9;\n}\n\n.dg .c .slider:hover {\n    background: #eee;\n}<\\/style>`);option = support_scientific_notation(option=option);option = custom_tooltip(option=option, dimension=2, formatter=true);option = custom_scatter_size(option=option);option = show_scatter_label(option=option);option = custom_axis_label(option=option);\n\n            if (option && typeof option === \'object\') {\n                myChart.setOption(option);\n                }\n\n            var resizeObserver = new ResizeObserver((entries) => {\n                myChart.resize();\n            });\n            resizeObserver.observe(dom);\n\n        </script>\n        </body>\n        </html>\n    '
'''
from IPython.display import HTML, display
display(HTML(script))

This works well in 5.x and 7.x

For plot appearance, you may need to change the div id to your iframe div id. And if you have any other js package example instead of echarts that works you can also send to me let mt try.

@RRosio
Copy link
Collaborator

RRosio commented May 21, 2024

Thank you for your reply @CnBDM-Su. In trying the snippet of code that you provided, I see the same error you mentioned when opening this issue: echarts is not defined. I see this in both Notebook 6.5.7 and 7.1.1. From the code snippet your provided, it looks like you are trying to output an entire HTML document which is not intended to work in Notebook. You can maybe try wrapping this snippet in an iframe to see if that resolves your errors? (thanks @krassowski !)

When I try an example, like the following, I do not see any errors:

from IPython.display import display, HTML
js = "<script>alert('alert')</script>"
display(HTML(js))

@RRosio RRosio closed this as completed May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug status:Needs Info status:Needs Triage Applied to issues that need triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@RRosio @CnBDM-Su @JasonWeill