scilens 0.1.0__py3-none-any.whl

scilens/report/templates/js_com_page.js

@@ -0,0 +1,199 @@
+((w_1, undef) => {
+
+  // ***************************************************************************
+  // ***************************************************************************
+  // parameters
+  // ***************************************************************************
+  // ***************************************************************************
+
+  const parameters=[
+    {
+      id: 'page_mode',
+      label: 'Display Mode', 
+      is_user: {{ 'true' if meta.config.parameter_page_mode.is_user_preference else 'false' }},
+      values: ['onepage', 'tabs'],
+      action: "actions.render_page()",
+      default: '{{ meta.config.parameter_page_mode.default_value}}',
+    },{
+      id: 'open_file_in',
+      label: 'Open File in',
+      is_user: {{ 'true' if meta.config.parameter_open_file_in.is_user_preference else 'false' }},
+      values: ['browser', 'vscode'],
+      default: '{{ meta.config.parameter_open_file_in.default_value}}',
+    },{
+      id: 'js_lib',
+      label: 'Chart Lib',
+      is_user: false,
+      values: ['plotly', 'echarts'],
+      default: 'plotly',
+      // action: load_curves(),
+    },
+  ];
+
+  function build_parameters() {
+    const div = dom.get("parameters");
+
+    const out = dom.tree_o(
+      null,
+      {out:"root", tag:"form", attrs: {name:"parameters"}, children: parameters.map((p) => {
+        return (p.is_user) ? {tag:"fieldset", style:"display: inline-block;", children: [
+          {tag:"legend", html: p.label},
+          {tag:"div", children: p.values.map((value) => {
+            return {tag:"div", children: [
+              {tag:"input", attrs: {type:"radio", name: p.id, id: p.id+"_"+value, value: value, onclick: p.action}},
+              {tag:"label", attrs: {for: p.id+"_"+value}, html:value},
+            ]}
+          })}
+        ]} : null
+      })}
+    );
+    
+    dom.get("section_parameters_form").appendChild(out.root);
+    // default values
+    parameters.forEach((p) => { if (p.is_user) { dom.get(p.id+"_"+p.default).checked=true; }});    
+  };
+
+  function get_parameter(id) {
+    for (const p of parameters) {
+      if (p.id == id) { return (p.is_user) ? dom.getRadio("parameters", id) : p.default; }
+    }
+  };
+
+  // ***************************************************************************
+  // ***************************************************************************
+  // action
+  // ***************************************************************************
+  // ***************************************************************************
+  function openNewTab(text) {
+    const blob = new Blob([text], {type: 'text/plain'});
+    const url = URL.createObjectURL(blob);
+    window.open(url, '_blank');
+  }
+  function open_file(route) {
+    const arr = window.location.pathname.split('/');
+    arr.pop();
+    const root = arr.join('/');
+    const url = root + '/' +  route;
+    const open_file_in = get_parameter("open_file_in");
+    switch (open_file_in) {
+      case "browser": window.open(url, '_blank'); break;
+      case "vscode":  window.open('vscode://file' + url, '_blank'); break;
+    }
+  };
+
+  // const BUTTON_CLASSES = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded";
+  const BUTTON_CLASSES = "text-xs rounded-lg";
+
+  const action = {
+    init: function() {
+      const elts = document.body.getElementsByTagName("action");
+      for (const eAction of elts) {
+        dom.tree(
+          eAction,
+          {
+            out:"child",
+            tag:"button",
+            attrs: {type:"button", class:BUTTON_CLASSES},
+            html: eAction.dataset.label,
+            click: function() { action.action(eAction); },
+          },
+          eAction
+        );
+        if (eAction.dataset.command=="toogle") this.toogleUpdate(eAction);
+      }
+    },
+    action: function(eAction) {
+      const command = eAction.dataset.command;
+      const args = eAction.dataset.args;
+      if (command === "toogle") {
+        const inf = this.toogleGetInfo(eAction);
+        dom.toogle(inf.eTarget);
+        this.toogleUpdate(eAction);
+      } else if (command === "open_file") {
+        open_file(args);
+      }
+    },
+    toogleGetInfo: function(eAction) {
+      const x = dom.get(eAction.dataset.args);
+      return { eTarget: x, isHidden: (x.style.display === "none")};
+    },
+    toogleUpdate: function(eAction) {
+      const inf = this.toogleGetInfo(eAction);
+      eAction.child.innerHTML = inf.isHidden ? "Show" : "Hide";
+    },
+  };
+  // ***************************************************************************
+
+  const NB_FILES = {{ data.files|length }};
+  const NB_SECTIONS = NB_FILES+1;
+
+  w_1.actions = {
+    toogle: function(id) {
+      const x = dom.get(id);
+      x.style.display = (x.style.display === "none") ? "" : "none";
+    },
+    open_file: function(route) {
+      const arr = window.location.pathname.split('/');
+      arr.pop();arr.pop();
+      const root = arr.join('/');
+      const url = root + '/' +  route;
+      const open_file_in = get_parameter("open_file_in");
+      switch (open_file_in) {
+        case "browser": window.open(url, '_blank'); break;
+        case "vscode":  window.open('vscode://file' + url, '_blank'); break;
+      }
+    },
+    see_details: function(index) {
+      const page_mode = get_parameter("page_mode");
+      switch (page_mode) {
+        case "onepage":
+          location.hash = "#section_" + index;
+          break;
+        case "tabs":
+          // tabs active
+          var children =  dom.get("tabs").children;
+          for (i = 0; i < children.length; i++) { children[i].className = children[i].className.replace(" active", "") }
+          children[parseInt(index)].className += " active";
+          // display section
+          for (i = 0; i < NB_SECTIONS; i++) { 
+            const section = dom.get("section_"+i);
+            if (section) section.style.display = "none"; 
+          }
+          dom.get("section_"+index).style.display = "";
+          break;
+      }
+    },
+    click_tab: function(event, index) {      
+      this.see_details(index)
+    },
+    get_parameter: function(id) {
+      return get_parameter(id);
+    },
+    render_page: function() {
+      // by default all sections are hidden
+      const page_mode = get_parameter("page_mode");
+      // tabs
+      dom.get("tabs").style.display = page_mode == "tabs" ? "" : "none";
+      // sections
+      switch (page_mode) {
+        case "onepage":          
+          for (i = 0; i < NB_SECTIONS; i++) {
+            const sec = dom.get("section_"+i);
+            if (sec) sec.style.display = "";
+          }
+          window.scrollTo(0,0);
+          break;
+        case "tabs":
+          this.see_details(0);
+          window.scrollTo(0,0);
+          break;
+      }
+    },
+    init_page: function() {
+      console.log(parameters)
+      build_parameters();
+      action.init();
+      this.render_page();
+    },
+  }
+})(window);

scilens/report/templates/js_com_palette.js

@@ -0,0 +1,7 @@
+((w_1, undef) => {
+    const a = ['#845ec2','#d65db1','#ff6f91','#ff9671','#ffc75f','#f9f871'];
+    w_1.palette = {
+        get: function(n) { return a[n % a.length]; },
+        get1: function(n) { return this.get(n-1); },
+    };
+})(window);

scilens/report/templates/js_curvemgr.js

@@ -0,0 +1,319 @@
+// dependances: utils_dom.js, chartlibs.js
+//
+// global_curves = {
+//     test: [
+//         {
+//             curves: [
+//                 {
+//                     title: "Curve 1",
+//                     short_title: "C1",
+//                     series: [[1,2],[2,3],[3,4],[4,5],[5,6]],
+//                 },
+//                 {
+//                     title: "Curve 2",
+//                     short_title: "C2",
+//                     series: [[1,3],[2,4],[3,5],[4,6],[5,7]],
+//                 },
+//             ],
+//             charts: [
+//                 {
+//                     title: "Chart 1",
+//                     xaxis: "X",
+//                     yaxis: "Y",
+//                     curves: [0,1],
+//                 },
+//                 {
+//                     title: "Chart 2",
+//                     xaxis: "X",
+//                     yaxis: "Y",
+//                     curves: [0],
+//                 },
+//             ],
+//         },
+//     ],
+//     reference: [
+//         {
+//             curves: [
+//                 ...
+//
+//
+
+((w_1, undef) => {
+
+// 
+const ERROR_LABEL = "*"
+// button gen
+
+const BUTTON_CLASSES = "text-xs rounded-lg mx-1 my-1";
+const BUTTON_CLASSES_ACTIVE = "text-xs rounded-lg mx-1 my-1 bg-slate-500 text-white";
+
+const BUTTON_CLASSES_ERR = "text-xs rounded-lg mx-1 my-1 bg-red-400";
+const BUTTON_CLASSES_ERR_ACTIVE = "text-xs rounded-lg mx-1 my-1 bg-red-600 text-white";
+
+// button selcect
+
+const SEL_BUTTON_CLASSES = "text-xs rounded-lg mx-1 my-1";
+const SEL_BUTTON_CLASSES_ACTIVE = "text-xs rounded-lg mx-1 my-1 bg-slate-500 text-white";
+
+
+const CONFIG = {
+  display_on_load: false,
+  init_width: 600,
+  init_height: 400,
+}
+
+
+const curve_add_chart = function(element_parent, data, zoom) {
+  zoom = zoom || 1;
+  //
+  const width  = CONFIG.init_width * zoom;
+  const height = CONFIG.init_height * zoom;
+  //
+  // create div
+  const div = document.createElement('div');
+  div.style.cssText = "width: "+width+"; height: "+height+"px;";
+  div.className = "m-1 shadow-lg";
+  element_parent.appendChild(div);
+  // chart
+  chartlibs.plotly.add(
+    div,
+    { title: data.title, xaxis: data.xaxis , yaxis: data.yaxis },
+    data.series.map((item) => {return {
+      name:   item.name,
+      color:  item.color,
+      x_data: item.data.map((e) => e[0]),
+      y_data: item.data.map((e) => e[1]),
+    }}),
+  )
+};
+
+
+const standalone = function() {
+  const curve = global_curves.test[0].curves[0];
+  curve_add_chart(document.body, {
+    title: "title",
+    xaxis: "xaxis",
+    yaxis: "yaxis",
+    series : [
+      {
+        name:  curve.short_title,
+        data:  curve.series,
+        color: null,
+      },
+    ]
+  });
+};
+
+const INIT_DISPLAY = false ;
+
+
+const CurvesChart = function(blockIndex, chartIndex) {
+  this.curve_block = new CurvesBlock(blockIndex);
+  this.blockIndex = blockIndex;
+  this.chartIndex = chartIndex;
+  this.chart = global_curves.test[blockIndex].charts[chartIndex];
+  this.curves = {
+    test:      global_curves.test[blockIndex],
+    reference: global_curves.reference[blockIndex],
+  }
+}
+CurvesChart.prototype = {
+  getDomToogleInit: function() {
+    const blockIndex = this.blockIndex;
+    const chartIndex = this.chartIndex;
+    const has_error = this.chart.comparison && this.chart.comparison.curves_nb_with_error;
+    const children = [{
+      tag:"button", 
+      attrs: {id: `chart_toogle_${blockIndex}_${chartIndex}`, type:"button", class: BUTTON_CLASSES },
+      html: this.chart.title + (has_error ? " " + ERROR_LABEL : ""),
+      click: function() { CurvesChart.toogle(blockIndex,chartIndex); },
+    }];
+    // if (this.chart.comparison) {
+    //   if (this.chart.comparison.curves_nb_with_error) {
+    //     // children.push({tag:"span", attrs: { class:"text-xs ERROR"}, html: `${this.chart.comparison.curves_nb_with_error} curves with errors`});
+    //     // children.push({tag:"span", attrs: { class:"text-xs ERROR"}, html: "*errors"});
+    //   }
+    // }
+    return {tag:"span",  attrs:{class: has_error ? "error_container" : "" }, children: children};
+  },
+  // state : true = visible, false = hidden
+  toogle: function(force_state) {
+    const blockIndex = this.blockIndex;
+    const chartIndex = this.chartIndex;
+    const b =  dom.get(`chart_toogle_${blockIndex}_${chartIndex}`);
+    const current_isHidden = (b.className == BUTTON_CLASSES);
+    const target_state = (force_state != undef) ? force_state : current_isHidden;
+    // update button
+    b.className = (target_state)?BUTTON_CLASSES_ACTIVE:BUTTON_CLASSES;
+    // update curves
+    const id = `chart_container_${blockIndex}_${chartIndex}`;
+    // remove if hidden
+    if (!target_state && !current_isHidden) { dom.get(id).remove(); }
+    if (target_state && current_isHidden) {
+      const chart = this.chart;
+      const eContainer = dom.get(`curves_${parseInt(blockIndex)}`);
+      let comparison = ""
+      if (this.chart.comparison && this.chart.comparison.curves_nb_with_error) {
+        comparison = `${this.chart.comparison.curves_nb_with_error} curve(s) with errors`;
+        for (let i = 0; i < this.chart.curves.length; i++) {
+          const curve = this.curves["test"].curves[this.chart.curves[i]]
+          comparison += ` - ${curve.title}: ${curve.comparison_error}`
+        }
+      }
+      const out = dom.tree_o(
+        eContainer,
+        {tag:"div", attrs: {id:id}, children: [
+          {tag:"div", style:"margin:10px 0px;", children: [
+            {tag:"strong", html: chart.title},
+            {tag:"button", attrs: { type:"button", class:BUTTON_CLASSES}, html: "Remove",
+              click: function() { CurvesChart.toogle(blockIndex,chartIndex); },
+            },
+            {tag:"span", attrs: {class:"ERROR"}, html: comparison},
+          ]},
+          {out:"row_1", tag:"div", style:"display: flex;flex-wrap: wrap;"},
+          {out:"row_2", tag:"div", style:"display: flex;flex-wrap: wrap;"},
+        ]},
+      );
+      // display test and reference
+      const labels = { test: "Test", reference: "Reference" }
+      for (type in labels) {
+        
+        const series = []
+
+        chart.curves.forEach(curve_index => {
+          const curve = this.curves[type].curves[curve_index]
+          series.push({
+            name:  curve.short_title,
+            data:  curve.series,
+            color: null,
+          })
+        });        
+        const data = {
+          title: chart.title + " [" + labels[type] + "]",
+          xaxis: chart.xaxis,
+          yaxis: chart.yaxis,
+          series : series,
+        }
+        curve_add_chart(out.row_1, data, this.curve_block.zoom);
+
+      }
+      // display each curve test vs reference
+      for (index_curve in chart.curves) {
+        real_index = chart.curves[index_curve]
+
+        const series = [
+          {
+            name:  "Test",
+            data:  this.curves["test"].curves[real_index].series,
+            color: '#1982c4',
+          },
+          {
+            name:  "Reference",
+            data:  this.curves["reference"].curves[real_index].series,
+            color: '#6a4c93',
+          },
+        ]
+        const data = {
+          title: this.curves["test"].curves[real_index].title + " [Test vs Reference]",
+          xaxis: chart.xaxis,
+          yaxis: chart.yaxis,
+          series : series,
+        }
+        curve_add_chart((chart.curves.length > 1) ? out.row_2 : out.row_1, data, this.curve_block.zoom);
+      }
+    }
+  },
+}
+CurvesChart.toogle = function(blockIndex, chartIndex, force_state) {
+  (new CurvesChart(blockIndex, chartIndex)).toogle(force_state);
+};
+
+
+const CurvesBlock = function(blockIndex) {
+  this.blockIndex = blockIndex;
+  this.charts = global_curves.test[blockIndex].charts; // ASSUMPTION test and reference have same charts
+  this.eContainer = dom.get(`curves_${parseInt(blockIndex)}`); // ASSUMPTION always exists
+  this.zoom = this.eContainer.dataset.zoom || 1;
+}
+CurvesBlock.prototype = {
+  toogleCharts: function(force_state) {
+    const blockIndex = this.blockIndex
+    this.charts.forEach((chart, chartIndex) => {
+      CurvesChart.toogle(blockIndex, chartIndex, force_state);
+    });    
+  },
+  resize: function(direction) {
+    const mult = (1 + direction * 0.1);
+    this.eContainer.dataset.zoom = this.zoom * mult;
+    const curves = dom.qc(this.eContainer, ".js-plotly-plot");
+    curves.forEach((e) => {
+      const w = parseFloat(e.style.width) * mult;
+      const h = parseFloat(e.style.height) * mult;
+      e.style.width = w + "px";
+      e.style.height = h + "px";
+      Plotly.relayout(e, { width: w, height: h } );
+    });
+  },
+  init: function() {
+    const blockIndex = this.blockIndex
+    const charts     = this.charts; 
+    // buttons (global and per chart)
+    dom.tree(
+      this.eContainer,
+      {tag:"div", attrs: {id: `curvemgr_block_${blockIndex}`} , children:[
+        {tag:"div", children: [
+          {tag:"strong", html: "All"},
+          {tag:"button", attrs: { type:"button", class:BUTTON_CLASSES}, html: "Show",   click: function() { CurvesBlock.toogle(blockIndex, true); }},
+          {tag:"button", attrs: { type:"button", class:BUTTON_CLASSES}, html: "Remove", click: function() { CurvesBlock.toogle(blockIndex, false); }},
+          {tag:"strong", html: "Size"},
+          {tag:"button", attrs: { type:"button", class:BUTTON_CLASSES}, html: "Increase", click: function() { CurvesBlock.resize(blockIndex, 1); }},
+          {tag:"button", attrs: { type:"button", class:BUTTON_CLASSES}, html: "Decrease", click: function() { CurvesBlock.resize(blockIndex, -1); }},
+        ]},
+        {tag:"div", children: charts.map((chart, chartIndex) => {
+          const cc = new CurvesChart(blockIndex, chartIndex);
+          return cc.getDomToogleInit();
+        })}
+      ]}
+    );
+    // load
+    if (CONFIG.display_on_load) {
+      charts.forEach((chart, chartIndex) => {
+        CurvesChart.toogle(blockIndex, chartIndex);
+      });
+    }
+  },
+};
+// 
+// Static Methods
+CurvesBlock.toogle = function(blockIndex, force_state) {
+  (new CurvesBlock(blockIndex)).toogleCharts(force_state);
+};
+CurvesBlock.resize = function(blockIndex, direction) {
+  (new CurvesBlock(blockIndex)).resize(direction);
+};
+
+
+// ***************************************************************************
+// ***************************************************************************
+// CURVE MANAGER
+// ***************************************************************************
+// ***************************************************************************
+
+w_1.curvemgr = {
+  init_group_curves: function() {
+    for (const i in global_curves.test) {
+      if (global_curves.test[i]) {
+        const cb = new CurvesBlock(i);
+        cb.init();
+      }
+    }
+  },
+  init(config) {
+    for (const k in CONFIG) {
+      if (config[k] != undef) {CONFIG[k] = config[k];}
+    }
+    this.init_group_curves();
+  }
+};
+
+})(window);

scilens/report/templates/style.css

@@ -0,0 +1,144 @@
+*:not(code):not(pre):not(td):not(th) {
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+  font-family-monospace: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+}
+h1, h2, h3 {
+border-bottom: 1px solid #eee;
+padding-bottom: 10px;
+}
+form { margin:0; padding:0;}
+h4 {
+margin-bottom: 0px;
+}
+table {
+border-collapse: collapse;
+}
+table, th, td {
+border: 1px solid #aaa;
+font-size:0.8rem;
+padding:1px 4px;
+font-family: monospace;
+white-space: nowrap;
+}
+
+fieldset {
+border-radius: 5px;
+color:#999999;
+font-size:0.9rem;
+border: 1px #999999 solid;
+}
+
+.inset {
+border-style: inset;
+
+border-width: 1px;
+padding:15px;
+
+background-color: #fafafa;
+}
+
+
+.ERROR    { background-color:#c52a0f20;color:#c52a0f; }
+.WARNING  { background-color:#bcbc0620;color:#bcbc06; }
+.SUCCESS  { background-color:#16840020;color:#168400; }
+.test-bg-80 { background-color:#{{ meta.config.compare_color_test }}80; }
+.test-bg-50 { background-color:#{{ meta.config.compare_color_test }}50; }
+.test-bg-20 { background-color:#{{ meta.config.compare_color_test }}20; }
+.refe-bg-80 { background-color:#{{ meta.config.compare_color_reference }}80; }
+.refe-bg-50 { background-color:#{{ meta.config.compare_color_reference }}50; }
+.refe-bg-20 { background-color:#{{ meta.config.compare_color_reference }}20; }
+th {
+background-color:#eee;color:#333;
+}
+.number {
+text-align: right;
+}
+.center {
+text-align: center;
+}
+a, a:link, a:visited, a:hover, a:active { color: #666; }
+.muted { font-size: 0.9rem; color:#999; }
+.footer {text-align: center;  padding:40px;}
+
+.img_reader {
+max-width: 600px;
+max-height: 400px;
+}
+
+.tabs {
+  display: table;
+  width: 100%;
+}
+.tabs .tab, .tabs .tabend {
+  display: table-cell;
+  border: 1px solid transparent;
+  border-bottom: 1px solid #ccc;
+}
+.tabs .tab {
+  width: 1px;
+  padding:10px 15px;
+  border-radius: 8px 8px 0 0;
+  margin-left: 10px;
+  color: #777;
+}
+.tabs .tab:hover {
+  background-color: #eee;
+  cursor: pointer;
+}
+.tabs .tab.active {
+  border: 1px solid #ccc;
+  border-bottom: 1px solid transparent;
+  color: inherit;
+}
+/* tailwind like */
+button {border: 0;user-select: none; /* Standard syntax */ cursor: pointer;}
+
+.text-white { color: rgb(255 255 255); }
+
+.text-xs { font-size: .75rem; line-height: 1rem; }
+
+.p-1 { padding: .25rem; }
+.p-2 { padding: .5rem;  }
+.p-3 { padding: .75rem; }
+
+.py-1 { padding-bottom: .25rem; padding-top: .25rem; }
+.py-2 { padding-bottom: .5rem;  padding-top: .5rem; }
+.py-3 { padding-bottom: .75rem; padding-top: .75rem; }
+
+.px-1 { padding-left: .25rem; padding-right: .25rem; }
+.px-2 { padding-left: .5rem;  padding-right: .5rem; }
+.px-3 { padding-left: .75rem; padding-right: .75rem; }
+
+.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
+.my-1	{ margin-top: 0.25rem; margin-bottom: 0.25rem; }
+
+.m-1 { margin: .25rem; }
+.m-2 { margin: .5rem; }
+.m-3 { margin: .5rem; }
+.m-4 { margin: 1rem; }
+
+.rounded-lg { border-radius: .5rem; }
+
+.bg-blue-700  { background-color: rgb(26 86 219); }
+.bg-slate-400	{ background-color: rgb(148 163 184); }
+.bg-slate-500	{ background-color: rgb(100 116 139); }
+.bg-slate-600 { background-color: rgb(71 85 105); }
+.bg-red-400	  { background-color: #fca5a5; }
+.bg-red-500	  { background-color: #ef4444; }
+.bg-red-600	  { background-color: #dc2626; }
+
+.error_container button { background-color: #ef4444; }
+
+
+.hover\:bg-blue-800:hover { background-color: rgb(30 66 159); }
+
+
+.shadow-sm	  { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
+.shadow	      { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
+.shadow-md	  { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
+.shadow-lg	  { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
+.shadow-xl	  { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
+.shadow-2xl	  { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
+.shadow-inner	{ box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }
+.shadow-none	{ box-shadow: 0 0 #0000; }
+