Difficulty combining JS Module with IDOM in panel

So for a project that i’m working on, i need to use IDOM inside panel with some existing JS code. I tried to make a little test project based on the IDOM documentation . What i have tried to do is adapt the code in the “import javascript bundles” example so that I can take the IDOM component and run it inside the panel.pane.IDOM function. I have 2 scripts: 1 containing JS code and 1 containing the python code

from pathlib import Path

import idom
import panel as pn
pn.extension()


@idom.component
def chart():
    # we use this to make writing our React code a bit easier
    pn.pane.IDOM.install("htm")

    path_to_source_file = Path(__file__).parent / "JSTestFile"
    ssc = idom.Module("JSTestFile", source_file=path_to_source_file)

    return lambda: ssc.SuperSimpleChart(
                {
                    "data": [
                        {"x": 1, "y": 2},
                        {"x": 2, "y": 4},
                        {"x": 3, "y": 7},
                        {"x": 4, "y": 3},
                        {"x": 5, "y": 5},
                      {"x": 6, "y": 9},                        {"x": 7, "y": 6},
                    ],
                    "height": 300,
                    "width": 500,
                    "color": "royalblue",
                    "lineWidth": 4,
                    "axisColor": "silver",
                }
            )


c = pn.pane.IDOM(chart)
c.servable()
import React from "./react.js";
import htm from "./htm.js";

const html = htm.bind(React.createElement);

export function SuperSimpleChart(props) {
  const data = props.data;
  const lastDataIndex = data.length - 1;

  const options = {
    height: props.height || 100,
    width: props.width || 100,
    color: props.color || "blue",
    lineWidth: props.lineWidth || 2,
    axisColor: props.axisColor || "black",
  };

  const xData = data.map((point) => point.x);
  const yData = data.map((point) => point.y);

  const domain = {
    xMin: Math.min(...xData),
    xMax: Math.max(...xData),
    yMin: Math.min(...yData),
    yMax: Math.max(...yData),
  };

  return html`<svg
    width="${options.width}px"
    height="${options.height}px"
    viewBox="0 0 ${options.width} ${options.height}"
  >
    ${makePath(props, domain, data, options)} ${makeAxis(props, options)}
  </svg>`;
}

function makePath(props, domain, data, options) {
  const { xMin, xMax, yMin, yMax } = domain;
  const { width, height } = options;
  const getSvgX = (x) => ((x - xMin) / (xMax - xMin)) * width;
  const getSvgY = (y) => height - ((y - yMin) / (yMax - yMin)) * height;

  let pathD = "M " + getSvgX(data[0].x) + " " + getSvgY(data[0].y) + " ";
  pathD += data.map((point, i) => {
    return "L " + getSvgX(point.x) + " " + getSvgY(point.y) + " ";
  });

  return html`<path
    d="${pathD}"
    style=${{
      stroke: options.color,
      strokeWidth: options.lineWidth,
      fill: "none",
    }}
  />`;
}

function makeAxis(props, options) {
  return html`<g>
    <line
      x1="0"
      y1=${options.height}
      x2=${options.width}
      y2=${options.height}
      style=${{ stroke: options.axisColor, strokeWidth: options.lineWidth * 2 }}
    />
    <line
      x1="0"
      y1="0"
      x2="0"
      y2=${options.height}
      style=${{ stroke: options.axisColor, strokeWidth: options.lineWidth * 2 }}
    />
  </g>`;
}

Note that the JS code is exactly the same as the example code in the IDOM documentation
When i try out this code, I get the following log in my console:


:
Does anyone know how i can resolve this issue?

1 Like

Hi @sebaztiano. Maybe Phillipp is working on a fix. See Fix IDOM build dir path by philippjfr · Pull Request #2168 · holoviz/panel (github.com)