HTML Export - Search bar

[eduardobbs]

I will leave my contribution in case anyone needs a search bar on the HTML export. The tree will automatically expand the Views that meet the keyword.

Result:

Code:

appendSearchBar();
document.querySelector('#search-button').addEventListener('click', searchInViews);
document.querySelector('#tree-search').onkeyup = (e) => {
    if (e.key !== 'Enter' && e.keyCode !== 13)
        return;
    else
        searchInViews();
};

function appendSearchBar() {
    let newSearchDiv = document.createElement("div");
    newSearchDiv.innerHTML = `
            <input type="search" title="Search in Views only" id="tree-search" placeholder="search"
                tooltip="asd" name="q" tabindex="0" />
            <button id="search-button">ok</button>
            <br />
            `;

    document.querySelector('.root-panel-body').prepend(newSearchDiv);
}

function searchInViews() {
    const filter = $('#tree-search').val();

    listItems = $('li');
    listItems.hide();
    listItems.find(' > span > i').addClass('glyphicon-triangle-right').removeClass('glyphicon-triangle-bottom');

    if (filter.length === 0) {
        $('ul.tree > li').show();
        return;
    }

    let viewsList = $('ul.tree > li:nth-child(2)');

    // Case sensitive search
    //viewsList.find(`li:contains("${filter}")`).show();

    // Case insensitive search
    let foundItems = viewsList.find("li").filter(function () {
        let reg = new RegExp(filter, "ig");
        return reg.test($(this).text());
    });

    foundItems.show();
    foundItems.parent("ul").parent("li").find("> span > i").addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-right');

    viewsList.show(400);
    viewsList.find(' > span > i').addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-right');
}

[Phillipus]

Hi, thanks for sharing. One question - does this work in the internal browser? Tools - Preview HTML Report.

[eduardobbs]

No, I have just tested it, and it doesn't. The way I was using it was through my Chrome browser after it gets included via my CI pipeline. I was not giving attention to the internal browser and nor did I know that it is possible to change the report template, instead of appending it through CI scripting. Now that I've realized that, I tried on the internal browser and found out that it has some incompatible JS with the internal browser, such as not supporting arrow functions, backtick literals, and the prepend() function call. What is the internal browser processor? It's probably not ES6 compatible and has other limitations too. Since I have already identified the incompatibilities, I've managed to get it working now, but there's still a bug.

[eduardobbs]

The bug is that the tree is not clickable anymore, I will try to find what's happening tomorrow.

[Phillipus]

The internal browser is IE11 on Windows, Safari on Mac, and not sure on Linux.

If a feature is added to the HTML report then it has to either work in the Preview HTML report feature or we remove the Preview HTML report feature.

[eduardobbs]

Everything is harder with IE11 Do you know if it's possible to use Edge instead for Windows? Anyway, I've got the search bar working now.

First add the code below to the root of model.js, and then call appendSearchBar() inside $(document).ready (preferably at the end, since that's how I tested it), please.

function appendSearchBar() {
    let newSearchDiv = '<div><input type="search" title="Search in Views only" id="tree-search" placeholder="search" tooltip="asd" name="q" tabindex="0" /> <button id="search-button">ok</button> <br /></div>';

    $('.root-panel-body').prepend(newSearchDiv);

    document.querySelector('#search-button').addEventListener('click', searchInViews);
    document.querySelector('#tree-search').onkeyup = function(e) {
        if (e.key !== 'Enter' && e.keyCode !== 13)
            return;
        else
            searchInViews();
    };
}

function searchInViews() {
    const filter = $('#tree-search').val();

    listItems = $('li');
    listItems.hide();
    listItems.find(' > span > i').addClass('glyphicon-triangle-right').removeClass('glyphicon-triangle-bottom');

    if (filter.length === 0) {
        $('ul.tree > li').show();
        return;
    }

    let viewsList = $('ul.tree > li:nth-child(2)');

    // Case insensitive search
    let foundItems = viewsList.find("li").filter(function () {
        let reg = new RegExp(filter, "ig");
        return reg.test($(this).text());
    });

    foundItems.show();
    foundItems.parent("ul").parent("li").find("> span > i").addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-right');

    viewsList.show(400);
    viewsList.find(' > span > i').addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-right');
}

[Phillipus]

Do you know if it's possible to use Edge instead for Windows?

There was an initiative to use Chromium in Eclipse as the embedded browser[1]. I spent many days of trial and error and frustration (the standard Eclipse development process, btw) testing it. It was buggy and horrible. I believe that initiative has been abandoned for now for various reasons.[2]

There seems to be an initiative to support Edge as the internal browser[3] but a quick rummage through the Eclipse issues shows that it's not ready yet.

The problem we have with the internal browser and the HTML report preview in Archi is really the Windows IE11 implementation. On Mac, and I think Linux, the internal browsers are modern.

Options:

1. Don't make nay changes to the HTML report
2. Only use IE11 compatible JS
3. Implement modern JS stuff in the report template but remove the HTML Report Preview feature completely
4. But (3) is not fair for Mac/Linux users where it will work. So remove it for Windows users only?

[1] https://bugs.eclipse.org/bugs/show_bug.cgi?id=405031 [2] https://bugs.eclipse.org/bugs/show_bug.cgi?id=565508 [3] https://bugs.eclipse.org/bugs/show_bug.cgi?id=538991

[Phillipus]

Everything is harder with IE11 Do you know if it's possible to use Edge instead for Windows? Anyway, I've got the search bar working now.

Since Archi 4.9 Edge can be used as the internal browser on Windows 10 and 11. It can be set in Archi's general preferences, but you have to ensure that the WebView2 Runtime is installed. This is sometimes installed by default on Windows 11 and a new install of Windows 10.