feat: add a preview of the incriminated code during mouse over

[tony-go]

Hi @fraxken 👋

Very happy to submit you this pull request related the issue #48 ^^

I think we should consider the fact that each request to UNPKG should be cached. I'm not really opinionated about the way to do it. This is why I prefer to ask you first. I could propose something anyway.

A little preview:

[tony-go]

Seems better now ^^

[fraxken]

I guess the best is to cache the innerText and not the whole code (to avoid consuming more memory than required).

async function fetchCodeLine(event, url, location, cache) {
    const [target] = event.srcElement.getElementsByClassName('tooltip');
    if (cache.has(url)) {
        target.innerText = cache.get(url);

        return;
    }

    target.innerText = "Loading ...";
    const code = await fetch(url).then((response) => response.text());

    target.innerText = code.length ? getLineFromFile(code, location) : "Line not found ...";
    cache.set(url, target.innerText);
}

[fraxken]

Using the url for cache doesn't work because it will return the same result for multiple warnings on the same file. So we have to generate a kind of unique id for each table line and handle the cache with it.

A simple code like this will do the job:

const lineId = Math.random().toString(36).slice(2);

[tony-go]

Yeah.

My first idea was to cache the file if there are multiple errors on the same file. If I understand properly we should favor the memory size consuming over the network consuming. It's pretty obvious in fact ^^

I'll update this ^^

[tony-go]

I guess the best is to cache the innerText and not the whole code (to avoid consuming more memory than required).

async function fetchCodeLine(event, url, location, cache) {
    const [target] = event.srcElement.getElementsByClassName('tooltip');
    if (cache.has(url)) {
        target.innerText = cache.get(url);

        return;
    }

    target.innerText = "Loading ...";
    const code = await fetch(url).then((response) => response.text());

    target.innerText = code.length ? getLineFromFile(code, location) : "Line not found ...";
    cache.set(url, target.innerText);
}

The sequence of instructions is more logical like this ^^ Thanks

[fraxken]

Hi, sorry for the delay (too much work to handle recently).

I also think it could be cool to enhance the way the code is written. Could you please update it like this ?:

Before errorCell was mixed with positionCell which make no sense. Also the tooltip can be created and append at the same time.

[tony-go]

Hi @fraxken

Happy to read your feedback.

Let me know about the tooltip position. Feel free to challenge me on this part.

✋ A little question: Should we keep somewhere interface definitions (like kind)?

👋

[tony-go]

Hi @fraxken 👋

Following our previous discussion, I updated the behavior of the tooltip modal. We have now to click on the position cell to display the modal and click outside of the modal to close it.

This commit, it's more about validating the behavior and the code than a final version. I prefer to be sure we agree on this before investing too much in detail. You'll see, it miss:

• An icon, or a hover title to explain to users what they'll find id they click there.
• A style for the tooltip text (which inherited from position cell in the previous version)

Let me know ^^