问:
Popover - not able to select contents
I've updated my code as the manual select of the popover mostly working.

The issue is after writing the popover manually, I still cannot select the contents of the popover.

I've tried changing the container from body to div, even ul and li.  I've also noticed changing the attributes of the popover do not "seem" to take effect.

Any help would be appreciated.

window.addEventListener("load", () => {
                // (A) LOOP THOUGH ALL SUB-ITEMS
                for (let i of document.querySelectorAll(".collapse ul, .collapse ol")) {
                    // (B) CREATE A
TEXT

                        let toggle = document.createElement("div");
                        toggle.innerHTML = i.previousSibling.innerHTML;
                        toggle.id = i.previousSibling.id;
                        var messageId = toggle.id;
                        var popData = $('.popper-content-' + messageId).html();
                        toggle.className = "popper toggle";
                        toggle.onclick = () => { toggle.classList.toggle("show") };
                    // (C) REPLACE THE "TITLE TEXT" WITH THE
 TOGGLE
                        i.parentElement.removeChild(i.previousSibling);
                        i.parentElement.insertBefore(toggle, i);
                }
            });
            // hover over version 2
            $(document).ready(function () {
                $(".popper").on('mouseenter', function () {
                    var messageId = this.id;
                    $("#" + messageId).popover({
                        html: true,
                        title: this.innerHTML,
                        container: 'div',
                        trigger:'manual',
                        placement: 'right',
                        animation: false,
                        content: function () {
                            var popData = $('.popper-content-' + messageId).html();
                            return formatPopover(popData, messageId);
                        }
                    }).popover('show');
                    $(".popper").on("mouseleave", function () {
                            $("#" + messageId).popover('hide');
                        });
                }).on("mouseleave", function() {
                    var _this = this;
                    setTimeout(function() {
                        if (!$(".popover:hover").length) {
                            $(_this).popover("hide");
                        }
                    }, 200);
                });
            });
            function formatPopover(popData, empID) {
                const dtlArray = popData.split(":");
                const hrcyArray = dtlArray[21].split(",");
                var hrcy = '';
                for (let i = 0; i < hrcyArray.length; i++) {
                    if (i == 0) {
                        hrcy += hrcyArray[i] + '
';
                    } else {
                        hrcy += '                     ' + hrcyArray[i] + '
';
                    }
                }
                var content = ['
',
                    '
```<b>ID:                  </b>' + empID + '```
',
                    '
```<b>Name:                </b>' + dtlArray[0] + ' ' + dtlArray[1] + '```
',
                    '
```<b>Dept:                </b>' + dtlArray[19] + '```
',
                    '
```<b>Email:               </b>' + dtlArray[15] + '```
',
                    '
```<b>Job Level:           </b>' + dtlArray[6] + '```
',
                    '
```<b>Position Descr:      </b>' + dtlArray[7] + '```
',
                    '
```<b>Position Category:   </b>' + dtlArray[8] + '```
',
                    '
```<b>Shift:               </b>' + dtlArray[5] + '```
',
                    '
```<b>Status:              </b>' + dtlArray[18] + '```
',
                    '
```<b>Location:            </b>' + dtlArray[4] + '```
',
                    '
```<b>Location Description:</b>' + dtlArray[14] + '```
',
                    '
```<b>WorkAddress:         </b>' + dtlArray[9] + '```
',
                    '
```<b>Hierarchy Level:     </b>' + dtlArray[20] + '```
',
                    '
```<b>Hierarchy:           </b>' + hrcy + '```
',
                    '
',].join('');
                return content;
            }
            function expandAll() {
                const nodeList = document.querySelectorAll(".toggle");
                for (let i = 0; i < nodeList.length; i++) {
                    nodeList[i].classList.remove("show");
                    nodeList[i].classList.add("show");
                }
            };
            function collapseAll() {
                const nodeList = document.querySelectorAll(".toggle");
                for (let i = 0; i < nodeList.length; i++) {
                    nodeList[i].classList.remove("show");
                }
            };```
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* (A) CONTAINER */
.collapse, .collapse ul, .collapse ol {
list-style-type: none;
padding-left: 10px;
}
/* (B) LIST ITEMS */
.collapse li {padding-top: 10px;padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
}
/* (C) TOGGLE */
.toggle {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.toggle::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEz0lEQVQ4EQHEBDv7Af39/QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAD///8AAAAAAAD6/vn//wABAQAAAAD//wAAAAAAAAABAQD//wAAAAAAAAABAQAGAgcAAAAAAAABAQEEAAAAAAAA0O7LkdeF8frvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAYScCp7LhE0AAAAAf39/f///2fHV+z46QgDCQQCBAAAAP8AAAEAAAAAAAAAAP8AAAEAAAAAAAAAAPv+/Pn+9xYIGJc4qAEBAQQAAAD9//3v+e0AAQGfPLAGAgcAAAAAAAAAAAD/AP8BAAEAAAAAAAAAAAAAAAD5/vhawkju+ez9//0EAQQCAAAAAAAAAAEAAQAABQIGAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAABgIHAf8BAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8A/3rOanrOawAA/wAAAAAAAAAAAAAA/wABAAAAAAAAAAAAAAQAAAAAAAAAAAAA/wABAAAAAAAAAAAAAAD+//7c89kBAAD+//8CAQEAAAAAAAAAAAEAAAAAAAAAAAAAAAAEAAAAAAAAAP8AAAEA/wAAAQAA/wD//P77/f/8AP8AAAAA+v75AwEDBAIFAQABAAAAAAAAAP8AAAAAAAAABAAAAAAA/wABAAD/AAAAAP8A/3fMaN702wAAAP///gABAFzDSwAAACMNJokzmP///wD/AAACAAAAAAAAAAQAAAAAAAEAAAAAAAAAAAABAAEGAwcCAAIAAQD9AP4A/wACAQIAAQAGAgf/AP8BAQEAAQAAAAAAAAAAAAAEAAAAAAAAAP8AAP8AAAAAAAAAhDGSAAAA/f/9WMFGAQEAqEC6AgACAAAAAAAA/wD/AAAAAAAAAAAAAAAAAgAAAAAA/wAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAABAAD/AAAAAAAAAAAAAP8A/wAAAAD/AAAAAAAAAAQAAAAAAAEAAQAA/wAAAAAAAAAAAAAAAAADAQMrEC8BAAECAQIAAAAAAAAAAAABAAAA/wAAAgAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgDCOAAAAAAAAAAAAAAAAAAAAAAABAAEAAAAAAAAAAAAABAAAAAAAAAD/AP///+z46gkECgEAAAAAAQAAAP///wEBAAAAAP8AAAAAAAEAAPX89P8A/wAAAAEAAAAAAAQAAAADAQMYCRrl9+Jox1cAAAAAAQAAAAAA/wAAAAAAAQAA/wAAAAAAAAAAAQAAAAAA/wAZChwCAQMAAAACAAAAAAAAaCh0FwgaAwEEAwIEAwEEAwAEAwIEAwIEAwEEAwEEAwIEAwIEAwAEAwEEGQocaCd0AAAAAAAAAf39/f///wAAAAAAAP3//QAAAAD//wABAQAAAAAAAAAA/wAAAQAAAAAAAAAAAAAAAAMBAwAAAAAAAAEBAQH9/f0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADtlLW7Sqk25AAAAABJRU5ErkJggg==');
padding-top: 10px;
padding-right: 10px;
/*position:absolute;
opacity: 0.3;
top: 2px;
left: 0px;*/
width: 24vw;
height: 24vh;
}
.toggle.show::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEz0lEQVQ4EQHEBDv7Af7+/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAA//8A+voAAAAAAAAAAAAAAQAA/wAAAAAAAAAAAAAAAQAA/wAAAAAABgYAAQEAAAAAAAAEAAAAAAAAANLPAJeQ//HxAQAAAAAAAAAA/wAAAQAAAAAAAAAAAAAAAAAAAAAA/wAAAQ8QAGpxAC0vAAAAAf7+/gAAAABvZv/r6gEICQAEBAAAAP8A/wEAAAAAAQAAAAAA/wAAAQAAAP8A/wH8/AD5+QAVFgCQmQAAAAQAAAAA/f0A7+4BAQEAmKEABgYAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAA+fkAYlgA7u0A/f0AAwMCAAAAAAAAAAAAAAEBAAUFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYG/wAAAAABAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAAIAAAAAAP8AAAD//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAQEAAAAAAAAAAAAEAAAAAAAB/wAAAQEAAAAAAAAAAP//APz7AAAAAAAAAAAAAAAAAAAAAAQFAAEBAAAAAP8A////AQAAAAAABAAAAAAAAAEAAAAAAAAAAAD//wB9dQDg3gAAAAAAAAAAAAAAAAAAAAAhIwCCigAAAf8A/wEAAQAAAAAAAAQAAAAAAP8AAAAAAAAAAAAAAAAABgcAAQIAAAAAAQAAAAAA/wAAAQAABgYAAQAA/wABAAEAAQAAAAAAAAAEAAAAAAAAAAAAAP//AAAAAAEBAH6FAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAEAAP8AAAAAAAAAAgAAAAAAAQAAAAABAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wD//wAA/wAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAQEAAAAAAAACAAAAAAAAAAAA//8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEBAAAAAAAAAAAABAAAAAAAAAAAAAEA/wDt6wAJCgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD29gD//wD/AAAAAAAAAAQAAAAAAwMAFxkA5uQAb2cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGBkAAwMAAAACAAAAAAAAAGNpABYY/wMDAAMDAAMDAAMDAAMDAAMDAAMDAAMDAAMDAAMDAAMDAAMDABcZAGRqAAAAAAAAAf7+/gAAAAAAAAAAAAD9/QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAwAAAAAAAAAAAAH+/v4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAahWkhVLr4jwAAAABJRU5ErkJggg==');
/*position:absolute;
opacity: 0.3;
top: 0px;
left: 0px;*/
width: 24vw;
height: 24vh;
}
/* (D) SHOW/HIDE */
.collapse ul, .collapse ol {
display: none;
}
.toggle.show + ul, .toggle.show + ol {
display: block;
}
.detail-list {
list-style-type: none;
}
html {
font-size: 16px;
font-family: sans-serif;
line-height: 1.1;
background-color: white;
}
main {
display: flex;
/*justify-content: space-around;*/
}
.page {
display: block;
padding: 1rem;
margin: 1rem;
background-color: #dedede;
}
.d-none {
display: none !important;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.popover {
position: static; /* Position is absolute by default, default will hover the popup */
/* position: absolute;  Position is absolute by default, default will hover the popup */
/*position: static;  */
top: 0;
left: 0 /* rtl:ignore */;
z-index: 1070;
display: block;
max-width: 500px;
font-family: var(--bs-font-sans-serif);
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
}
.popover-header:empty {
display: none;
}
.popover-header {
padding: 0.5rem 1rem;
margin-bottom: 0;
font-size: 1rem;
background-color: #f0f0f0;
border-bottom: 1px solid #d8d8d8;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.popover-body {
padding: 1rem 1rem;
color: #212529;
}
.popover .popover-arrow {
position: absolute;
display: block;
width: 1rem;
height: 0.5rem;
}
.popover .popover-arrow::before, .popover .popover-arrow::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid;
}
.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
bottom: calc(-0.5rem - 1px);
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
bottom: 0;
border-width: 0.5rem 0.5rem 0;
border-top-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
bottom: 1px;
border-width: 0.5rem 0.5rem 0;
border-top-color: #fff;
}
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
left: calc(-0.5rem - 1px);
width: 0.5rem;
height: 1rem;
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
left: 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
left: 1px;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: #fff;
}
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
top: calc(-0.5rem - 1px);
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
top: 0;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
top: 1px;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: #fff;
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
position: absolute;top: 0;left: 50%;display: block;width: 1rem;margin-left: -0.5rem;content: "";border-bottom: 1px solid #f0f0f0;
}
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
right: calc(-0.5rem - 1px);width: 0.5rem;height: 1rem;
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
right: 0;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
right: 1px;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: #fff;
}</code>```

Froedtert Org Chart

<button onclick="expandAll()">Expand All</button>  <button onclick="collapseAll()">Collapse All</button>

3 : Joe Brown : EXE : Administration
Joe:Brown:1.000000:3662:WP400:1:EXEC:VP/FH IT STRAT SVC & BUS APPS:LEADERSHIP:N74 W12501 OAKWOOD LN:MENOMONEE FALLS:WI:53051:US:WOODLAND PRIME 400:Joe.Brown@acme.com:EXE:VP/FH IT STRAT SVC & BUS APPS:A1:Administration:3:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523

4 : Amor Winkler : DIR : It - Executive Management
Amor:Winkler:1.000000:4041:WP400:1:FCH:DIR BUSINESS APPLICATIONS:IT:N74 W12501 OAKWOOD LN:MENOMONEE FALLS:WI:53051:US:WOODLAND PRIME 400:Amor.Winkler@acme.com:DIR:DIR BUSINESS APPLICATIONS:A1:It - Executive Management:4:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466

5 : Art Doe : MGR : It - Business Applcatns
Art:Doe:1.000000:2457:WP400:1:FCH:MGR BUSINESS APPLICATIONS:LEADERSHIP:N74 W12501 OAKWOOD LN:MENOMONEE FALLS:WI:53051:US:WOODLAND PRIME 400:Art.Doe@acme.com:MGR:MGR BUSINESS APPLICATIONS:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Art Doe|400124071

6 : Meno Nebula : PRE : It - Business Applcatns
Meno:Nebula:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:MENOMONEE FALLS:WI:53051:US:WOODLAND PRIME 400:Meno.Nebula@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Art Doe|400124071,6|Meno Nebula|300109092

6 : Nat Gorzak : PRE : It - Business Applcatns
Nat:Gorzak:1.000000:3584:WP400:1:FCH:SYSTEMS ANALYST II:IT:N74 W12501 OAKWOOD LN:MENOMONEE FALLS:WI:53051:US:WOODLAND PRIME 400:Nat.Gorzak@acme.com:PRE:SYSTEMS ANALYST II:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Art Doe|400124071,6|Nat Gorzak|400118640

5 : Brian Baymore : PRE : It - Business Applcatns
Brian:Baymore:1.000000:3563:WP400:1:FCH:SOFTWARE DEVELOPER II:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:brian.Baymore@acme.com:PRE:SOFTWARE DEVELOPER II:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Brian Baymore|400130807

5 : Kris Henly : PRE : It - Business Applcatns
Kris:Henly:1.000000:2164:WP400:1:FCH:APPLICATION ARCHITECT III SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Kris.Henly@acme.com:PRE:APPLICATION ARCHITECT III SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Kris Henly|400111853

5 : Hephram Elkmanb : MGR : It - Business Applcatns
Hephram:Elkmanb:1.000000:2457:WP400:1:FCH:MGR BUSINESS APPLICATIONS:LEADERSHIP:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Hephram.Elkmanb@acme.com:MGR:MGR BUSINESS APPLICATIONS:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485

6 : Arielle Mermaid : PRE : It - Business Applcatns
Arielle:Mermaid:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:arielle.Mermaid@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485,6|Arielle Mermaid|400126395

6 : Cole Mclellan : PRE : It - Business Applcatns
Cole:Mclellan:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Cole.mclellan@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485,6|Cole Mclellan|400119728

6 : Kris Molson : PRE : It - Business Applcatns
Kris:Molson:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Chris.Molson@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485,6|Kris Molson|300108041

6 : Joe Limbo : PRE : It - Business Applcatns
Joe:Limbo:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Joe.Limbo@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485,6|Joe Limbo|400122170

6 : James Brown : PRE : It - Business Applcatns
James:Brown:1.000000:3584:WP400:1:FCH:SYSTEMS ANALYST II:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:James.brown2@acme.com:PRE:SYSTEMS ANALYST II:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485,6|James Brown|300109054

5 : Joe Norbutize : PRE : It - Business Applcatns
Joe:Norbutize:1.000000:3564:WP400:1:FCH:SOFTWARE DEVELOPER II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Joe.Norbutize@acme.com:PRE:SOFTWARE DEVELOPER II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Joe Norbutize|400102790

5 : Jim Brown : PRE : It - Business Applcatns
Jim:Brown:1.000000:3564:WP400:1:FCH:SOFTWARE DEVELOPER II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Jim.brown@acme.com:PRE:SOFTWARE DEVELOPER II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Jim Brown|400125279

5 : Keith Lafeyette : PRE : It - Business Applcatns
Keith:Lafeyette:1.000000:3564:WP400:1:FCH:SOFTWARE DEVELOPER II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:keith.Lafeyette@acme.com:PRE:SOFTWARE DEVELOPER II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Keith Lafeyette|400118547

5 : Jamie Hackett : PRE : It - Business Applcatns
Jamie:Hackett:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Jamie.Hackett@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Jamie Hackett|400105764

5 : Nancy CharBroil : PRE : It - Business Applcatns
Nancy:CharBroil:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Nancy.CharBroil@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Nancy CharBroil|300109293

5 : Setti Ramasamy : PRE : It - Business Applcatns
Setti:Ramasamy:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Setti.ramasamy@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Setti Ramasamy|400130987

5 : Pamela Pampam : MGR : It - Business Applcatns
Pamela:Pampam:1.000000:2457:WP400:1:FCH:MGR BUSINESS APPLICATIONS:LEADERSHIP:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Pamela.Pampam@acme.com:MGR:MGR BUSINESS APPLICATIONS:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652

6 : Amy Virtualview : PRE : It - Business Applcatns
Amy:Virtualview:1.000000:3575:WP400:1:FCH:APPLICATION ANALYST I SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Amy.Virtualview@acme.com:PRE:APPLICATION ANALYST I SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Amy Virtualview|400105631

6 : Red Red : PRE : It - Business Applcatns
Red:Red:1.000000:3584:WP400:1:FCH:SYSTEMS ANALYST II:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Red.Red@acme.com:PRE:SYSTEMS ANALYST II:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Red Red|300100148

6 : Cobra Ford : PRE : It - Business Applcatns
Cobra:Ford:1.000000:3584:WP400:1:FCH:SYSTEMS ANALYST II:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Cobra.ford@acme.com:PRE:SYSTEMS ANALYST II:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Cobra Ford|400130546

6 : Elizabeth Crunchthis : PRE : It - Business Applcatns
Elizabeth:Crunchthis:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:elizabeth.Crunchthis@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Elizabeth Crunchthis|400112248

6 : Jesse James : PRE : It - Business Applcatns
Jesse:James:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYWHERE:HI:00001:US:ALUMINALAND PRIME 400:Jesse.James@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Jesse James|400105093

6 : Strawberry Fields : PRE : It - Business Applcatns
Strawberry:Fields:1.000000:3583:WP400:1:FCH:SYSTEMS ANALYST II ASSOC:IT:N74 W12501 OAKWOOD LN:ANYWHERE:HI:00001:US:ALUMINALAND PRIME 400:Strawberry.fields@acme.com:PRE:SYSTEMS ANALYST II ASSOC:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Strawberry Fields|400110809

5 : Patrick McGuinness : PRE : It - Business Applcatns
Patrick:McGuinness:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYWHERE:HI:00001:US:ALUMINALAND PRIME 400:patrick.McGuinness@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Patrick McGuinness|400123122

5 : Randall Cobb : PRE : It - Business Applcatns
Randall:Cobb:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYWHERE:HI:00001:US:ALUMINALAND PRIME 400:Randall.Cobb@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Randall Cobb|21475

5 : Ed Cando : PRE : It - Business Applcatns
Ed:Cando:1.000000:3564:WP400:1:FCH:SOFTWARE DEVELOPER II SR:IT:N74 W12501 OAKWOOD LN:ANYWHERE:HI:00001:US:ALUMINALAND PRIME 400:Ed.Cando@acme.com:PRE:SOFTWARE DEVELOPER II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Ed Cando|400121787

```

Title: Popover - not able to select contents

Body:
I've updated my code as the manual select of the popover mostly working.

The issue is after writing the popover manually, I still cannot select the contents of the popover.

I've tried changing the container from body to div, even ul and li.  I've also noticed changing the attributes of the popover do not "seem" to take effect.

Any help would be appreciated.

window.addEventListener("load", () => {
                // (A) LOOP THOUGH ALL SUB-ITEMS
                for (let i of document.querySelectorAll(".collapse ul, .collapse ol")) {
                    // (B) CREATE A
TEXT

                        let toggle = document.createElement("div");
                        toggle.innerHTML = i.previousSibling.innerHTML;
                        toggle.id = i.previousSibling.id;
                        var messageId = toggle.id;
                        var popData = $('.popper-content-' + messageId).html();
                        toggle.className = "popper toggle";
                        toggle.onclick = () => { toggle.classList.toggle("show") };
                    // (C) REPLACE THE "TITLE TEXT" WITH THE
 TOGGLE
                        i.parentElement.removeChild(i.previousSibling);
                        i.parentElement.insertBefore(toggle, i);
                }
            });
            // hover over version 2
            $(document).ready(function () {
                $(".popper").on('mouseenter', function () {
                    var messageId = this.id;
                    $("#" + messageId).popover({
                        html: true,
                        title: this.innerHTML,
                        container: 'div',
                        trigger:'manual',
                        placement: 'right',
                        animation: false,
                        content: function () {
                            var popData = $('.popper-content-' + messageId).html();
                            return formatPopover(popData, messageId);
                        }
                    }).popover('show');
                    $(".popper").on("mouseleave", function () {
                            $("#" + messageId).popover('hide');
                        });
                }).on("mouseleave", function() {
                    var _this = this;
                    setTimeout(function() {
                        if (!$(".popover:hover").length) {
                            $(_this).popover("hide");
                        }
                    }, 200);
                });
            });
            function formatPopover(popData, empID) {
                const dtlArray = popData.split(":");
                const hrcyArray = dtlArray[21].split(",");
                var hrcy = '';
                for (let i = 0; i < hrcyArray.length; i++) {
                    if (i == 0) {
                        hrcy += hrcyArray[i] + '
';
                    } else {
                        hrcy += '                     ' + hrcyArray[i] + '
';
                    }
                }
                var content = ['
',
                    '

ID:                  ' + empID + '

',
                    '

Name:                ' + dtlArray[0] + ' ' + dtlArray[1] + '

',
                    '

Dept:                ' + dtlArray[19] + '

',
                    '

Email:               ' + dtlArray[15] + '

',
                    '

Job Level:           ' + dtlArray[6] + '

',
                    '

Position Descr:      ' + dtlArray[7] + '

',
                    '

Position Category:   ' + dtlArray[8] + '

',
                    '

Shift:               ' + dtlArray[5] + '

',
                    '

Status:              ' + dtlArray[18] + '

',
                    '

Location:            ' + dtlArray[4] + '

',
                    '

Location Description:' + dtlArray[14] + '

',
                    '

WorkAddress:         ' + dtlArray[9] + '

',
                    '

Hierarchy Level:     ' + dtlArray[20] + '

',
                    '

Hierarchy:           ' + hrcy + '

',
                    '
',].join('');
                return content;
            }
            function expandAll() {
                const nodeList = document.querySelectorAll(".toggle");
                for (let i = 0; i < nodeList.length; i++) {
                    nodeList[i].classList.remove("show");
                    nodeList[i].classList.add("show");
                }
            };
            function collapseAll() {
                const nodeList = document.querySelectorAll(".toggle");
                for (let i = 0; i < nodeList.length; i++) {
                    nodeList[i].classList.remove("show");
                }
            };

/* (A) CONTAINER */
.collapse, .collapse ul, .collapse ol {
list-style-type: none;
padding-left: 10px;
}
/* (B) LIST ITEMS */
.collapse li {padding-top: 10px;padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
}
/* (C) TOGGLE */
.toggle {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.toggle::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEz0lEQVQ4EQHEBDv7Af39/QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAD///8AAAAAAAD6/vn//wABAQAAAAD//wAAAAAAAAABAQD//wAAAAAAAAABAQAGAgcAAAAAAAABAQEEAAAAAAAA0O7LkdeF8frvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAYScCp7LhE0AAAAAf39/f///2fHV+z46QgDCQQCBAAAAP8AAAEAAAAAAAAAAP8AAAEAAAAAAAAAAPv+/Pn+9xYIGJc4qAEBAQQAAAD9//3v+e0AAQGfPLAGAgcAAAAAAAAAAAD/AP8BAAEAAAAAAAAAAAAAAAD5/vhawkju+ez9//0EAQQCAAAAAAAAAAEAAQAABQIGAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAABgIHAf8BAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8A/3rOanrOawAA/wAAAAAAAAAAAAAA/wABAAAAAAAAAAAAAAQAAAAAAAAAAAAA/wABAAAAAAAAAAAAAAD+//7c89kBAAD+//8CAQEAAAAAAAAAAAEAAAAAAAAAAAAAAAAEAAAAAAAAAP8AAAEA/wAAAQAA/wD//P77/f/8AP8AAAAA+v75AwEDBAIFAQABAAAAAAAAAP8AAAAAAAAABAAAAAAA/wABAAD/AAAAAP8A/3fMaN702wAAAP///gABAFzDSwAAACMNJokzmP///wD/AAACAAAAAAAAAAQAAAAAAAEAAAAAAAAAAAABAAEGAwcCAAIAAQD9AP4A/wACAQIAAQAGAgf/AP8BAQEAAQAAAAAAAAAAAAAEAAAAAAAAAP8AAP8AAAAAAAAAhDGSAAAA/f/9WMFGAQEAqEC6AgACAAAAAAAA/wD/AAAAAAAAAAAAAAAAAgAAAAAA/wAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAABAAD/AAAAAAAAAAAAAP8A/wAAAAD/AAAAAAAAAAQAAAAAAAEAAQAA/wAAAAAAAAAAAAAAAAADAQMrEC8BAAECAQIAAAAAAAAAAAABAAAA/wAAAgAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgDCOAAAAAAAAAAAAAAAAAAAAAAABAAEAAAAAAAAAAAAABAAAAAAAAAD/AP///+z46gkECgEAAAAAAQAAAP///wEBAAAAAP8AAAAAAAEAAPX89P8A/wAAAAEAAAAAAAQAAAADAQMYCRrl9+Jox1cAAAAAAQAAAAAA/wAAAAAAAQAA/wAAAAAAAAAAAQAAAAAA/wAZChwCAQMAAAACAAAAAAAAaCh0FwgaAwEEAwIEAwEEAwAEAwIEAwIEAwEEAwEEAwIEAwIEAwAEAwEEGQocaCd0AAAAAAAAAf39/f///wAAAAAAAP3//QAAAAD//wABAQAAAAAAAAAA/wAAAQAAAAAAAAAAAAAAAAMBAwAAAAAAAAEBAQH9/f0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADtlLW7Sqk25AAAAABJRU5ErkJggg==');
padding-top: 10px;
padding-right: 10px;
/*position:absolute;
opacity: 0.3;
top: 2px;
left: 0px;*/
width: 24vw;
height: 24vh;
}
.toggle.show::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEz0lEQVQ4EQHEBDv7Af7+/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAA//8A+voAAAAAAAAAAAAAAQAA/wAAAAAAAAAAAAAAAQAA/wAAAAAABgYAAQEAAAAAAAAEAAAAAAAAANLPAJeQ//HxAQAAAAAAAAAA/wAAAQAAAAAAAAAAAAAAAAAAAAAA/wAAAQ8QAGpxAC0vAAAAAf7+/gAAAABvZv/r6gEICQAEBAAAAP8A/wEAAAAAAQAAAAAA/wAAAQAAAP8A/wH8/AD5+QAVFgCQmQAAAAQAAAAA/f0A7+4BAQEAmKEABgYAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAA+fkAYlgA7u0A/f0AAwMCAAAAAAAAAAAAAAEBAAUFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYG/wAAAAABAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAAIAAAAAAP8AAAD//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAQEAAAAAAAAAAAAEAAAAAAAB/wAAAQEAAAAAAAAAAP//APz7AAAAAAAAAAAAAAAAAAAAAAQFAAEBAAAAAP8A////AQAAAAAABAAAAAAAAAEAAAAAAAAAAAD//wB9dQDg3gAAAAAAAAAAAAAAAAAAAAAhIwCCigAAAf8A/wEAAQAAAAAAAAQAAAAAAP8AAAAAAAAAAAAAAAAABgcAAQIAAAAAAQAAAAAA/wAAAQAABgYAAQAA/wABAAEAAQAAAAAAAAAEAAAAAAAAAAAAAP//AAAAAAEBAH6FAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAEAAP8AAAAAAAAAAgAAAAAAAQAAAAABAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wD//wAA/wAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAQEAAAAAAAACAAAAAAAAAAAA//8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEBAAAAAAAAAAAABAAAAAAAAAAAAAEA/wDt6wAJCgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD29gD//wD/AAAAAAAAAAQAAAAAAwMAFxkA5uQAb2cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGBkAAwMAAAACAAAAAAAAAGNpABYY/wMDAAMDAAMDAAMDAAMDAAMDAAMDAAMDAAMDAAMDAAMDAAMDABcZAGRqAAAAAAAAAf7+/gAAAAAAAAAAAAD9/QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAwAAAAAAAAAAAAH+/v4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAahWkhVLr4jwAAAABJRU5ErkJggg==');
/*position:absolute;
opacity: 0.3;
top: 0px;
left: 0px;*/
width: 24vw;
height: 24vh;
}
/* (D) SHOW/HIDE */
.collapse ul, .collapse ol {
display: none;
}
.toggle.show + ul, .toggle.show + ol {
display: block;
}
.detail-list {
list-style-type: none;
}
html {
font-size: 16px;
font-family: sans-serif;
line-height: 1.1;
background-color: white;
}
main {
display: flex;
/*justify-content: space-around;*/
}
.page {
display: block;
padding: 1rem;
margin: 1rem;
background-color: #dedede;
}
.d-none {
display: none !important;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.popover {
position: static; /* Position is absolute by default, default will hover the popup */
/* position: absolute;  Position is absolute by default, default will hover the popup */
/*position: static;  */
top: 0;
left: 0 /* rtl:ignore */;
z-index: 1070;
display: block;
max-width: 500px;
font-family: var(--bs-font-sans-serif);
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
}
.popover-header:empty {
display: none;
}
.popover-header {
padding: 0.5rem 1rem;
margin-bottom: 0;
font-size: 1rem;
background-color: #f0f0f0;
border-bottom: 1px solid #d8d8d8;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.popover-body {
padding: 1rem 1rem;
color: #212529;
}
.popover .popover-arrow {
position: absolute;
display: block;
width: 1rem;
height: 0.5rem;
}
.popover .popover-arrow::before, .popover .popover-arrow::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid;
}
.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
bottom: calc(-0.5rem - 1px);
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
bottom: 0;
border-width: 0.5rem 0.5rem 0;
border-top-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
bottom: 1px;
border-width: 0.5rem 0.5rem 0;
border-top-color: #fff;
}
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
left: calc(-0.5rem - 1px);
width: 0.5rem;
height: 1rem;
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
left: 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
left: 1px;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: #fff;
}
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
top: calc(-0.5rem - 1px);
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
top: 0;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
top: 1px;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: #fff;
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
position: absolute;top: 0;left: 50%;display: block;width: 1rem;margin-left: -0.5rem;content: "";border-bottom: 1px solid #f0f0f0;
}
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
right: calc(-0.5rem - 1px);width: 0.5rem;height: 1rem;
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
right: 0;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
right: 1px;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: #fff;
}

Froedtert Org Chart

<button onclick="expandAll()">Expand All</button>  <button onclick="collapseAll()">Collapse All</button>

3 : Joe Brown : EXE : Administration
Joe:Brown:1.000000:3662:WP400:1:EXEC:VP/FH IT STRAT SVC & BUS APPS:LEADERSHIP:N74 W12501 OAKWOOD LN:MENOMONEE FALLS:WI:53051:US:WOODLAND PRIME 400:Joe.Brown@acme.com:EXE:VP/FH IT STRAT SVC & BUS APPS:A1:Administration:3:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523

4 : Amor Winkler : DIR : It - Executive Management
Amor:Winkler:1.000000:4041:WP400:1:FCH:DIR BUSINESS APPLICATIONS:IT:N74 W12501 OAKWOOD LN:MENOMONEE FALLS:WI:53051:US:WOODLAND PRIME 400:Amor.Winkler@acme.com:DIR:DIR BUSINESS APPLICATIONS:A1:It - Executive Management:4:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466

5 : Art Doe : MGR : It - Business Applcatns
Art:Doe:1.000000:2457:WP400:1:FCH:MGR BUSINESS APPLICATIONS:LEADERSHIP:N74 W12501 OAKWOOD LN:MENOMONEE FALLS:WI:53051:US:WOODLAND PRIME 400:Art.Doe@acme.com:MGR:MGR BUSINESS APPLICATIONS:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Art Doe|400124071

6 : Meno Nebula : PRE : It - Business Applcatns
Meno:Nebula:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:MENOMONEE FALLS:WI:53051:US:WOODLAND PRIME 400:Meno.Nebula@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Art Doe|400124071,6|Meno Nebula|300109092

6 : Nat Gorzak : PRE : It - Business Applcatns
Nat:Gorzak:1.000000:3584:WP400:1:FCH:SYSTEMS ANALYST II:IT:N74 W12501 OAKWOOD LN:MENOMONEE FALLS:WI:53051:US:WOODLAND PRIME 400:Nat.Gorzak@acme.com:PRE:SYSTEMS ANALYST II:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Art Doe|400124071,6|Nat Gorzak|400118640

5 : Brian Baymore : PRE : It - Business Applcatns
Brian:Baymore:1.000000:3563:WP400:1:FCH:SOFTWARE DEVELOPER II:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:brian.Baymore@acme.com:PRE:SOFTWARE DEVELOPER II:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Brian Baymore|400130807

5 : Kris Henly : PRE : It - Business Applcatns
Kris:Henly:1.000000:2164:WP400:1:FCH:APPLICATION ARCHITECT III SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Kris.Henly@acme.com:PRE:APPLICATION ARCHITECT III SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Kris Henly|400111853

5 : Hephram Elkmanb : MGR : It - Business Applcatns
Hephram:Elkmanb:1.000000:2457:WP400:1:FCH:MGR BUSINESS APPLICATIONS:LEADERSHIP:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Hephram.Elkmanb@acme.com:MGR:MGR BUSINESS APPLICATIONS:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485

6 : Arielle Mermaid : PRE : It - Business Applcatns
Arielle:Mermaid:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:arielle.Mermaid@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485,6|Arielle Mermaid|400126395

6 : Cole Mclellan : PRE : It - Business Applcatns
Cole:Mclellan:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Cole.mclellan@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485,6|Cole Mclellan|400119728

6 : Kris Molson : PRE : It - Business Applcatns
Kris:Molson:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Chris.Molson@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485,6|Kris Molson|300108041

6 : Joe Limbo : PRE : It - Business Applcatns
Joe:Limbo:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Joe.Limbo@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485,6|Joe Limbo|400122170

6 : James Brown : PRE : It - Business Applcatns
James:Brown:1.000000:3584:WP400:1:FCH:SYSTEMS ANALYST II:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:James.brown2@acme.com:PRE:SYSTEMS ANALYST II:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Hephram Elkmanb|400122485,6|James Brown|300109054

5 : Joe Norbutize : PRE : It - Business Applcatns
Joe:Norbutize:1.000000:3564:WP400:1:FCH:SOFTWARE DEVELOPER II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Joe.Norbutize@acme.com:PRE:SOFTWARE DEVELOPER II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Joe Norbutize|400102790

5 : Jim Brown : PRE : It - Business Applcatns
Jim:Brown:1.000000:3564:WP400:1:FCH:SOFTWARE DEVELOPER II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Jim.brown@acme.com:PRE:SOFTWARE DEVELOPER II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Jim Brown|400125279

5 : Keith Lafeyette : PRE : It - Business Applcatns
Keith:Lafeyette:1.000000:3564:WP400:1:FCH:SOFTWARE DEVELOPER II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:keith.Lafeyette@acme.com:PRE:SOFTWARE DEVELOPER II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Keith Lafeyette|400118547

5 : Jamie Hackett : PRE : It - Business Applcatns
Jamie:Hackett:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Jamie.Hackett@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Jamie Hackett|400105764

5 : Nancy CharBroil : PRE : It - Business Applcatns
Nancy:CharBroil:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Nancy.CharBroil@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Nancy CharBroil|300109293

5 : Setti Ramasamy : PRE : It - Business Applcatns
Setti:Ramasamy:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Setti.ramasamy@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Setti Ramasamy|400130987

5 : Pamela Pampam : MGR : It - Business Applcatns
Pamela:Pampam:1.000000:2457:WP400:1:FCH:MGR BUSINESS APPLICATIONS:LEADERSHIP:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Pamela.Pampam@acme.com:MGR:MGR BUSINESS APPLICATIONS:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652

6 : Amy Virtualview : PRE : It - Business Applcatns
Amy:Virtualview:1.000000:3575:WP400:1:FCH:APPLICATION ANALYST I SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Amy.Virtualview@acme.com:PRE:APPLICATION ANALYST I SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Amy Virtualview|400105631

6 : Red Red : PRE : It - Business Applcatns
Red:Red:1.000000:3584:WP400:1:FCH:SYSTEMS ANALYST II:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Red.Red@acme.com:PRE:SYSTEMS ANALYST II:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Red Red|300100148

6 : Cobra Ford : PRE : It - Business Applcatns
Cobra:Ford:1.000000:3584:WP400:1:FCH:SYSTEMS ANALYST II:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:Cobra.ford@acme.com:PRE:SYSTEMS ANALYST II:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Cobra Ford|400130546

6 : Elizabeth Crunchthis : PRE : It - Business Applcatns
Elizabeth:Crunchthis:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYTIME:HI:00001:US:ALUMINALAND PRIME 400:elizabeth.Crunchthis@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Elizabeth Crunchthis|400112248

6 : Jesse James : PRE : It - Business Applcatns
Jesse:James:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYWHERE:HI:00001:US:ALUMINALAND PRIME 400:Jesse.James@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Jesse James|400105093

6 : Strawberry Fields : PRE : It - Business Applcatns
Strawberry:Fields:1.000000:3583:WP400:1:FCH:SYSTEMS ANALYST II ASSOC:IT:N74 W12501 OAKWOOD LN:ANYWHERE:HI:00001:US:ALUMINALAND PRIME 400:Strawberry.fields@acme.com:PRE:SYSTEMS ANALYST II ASSOC:A1:It - Business Applcatns:6:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Pamela Pampam|53652,6|Strawberry Fields|400110809

5 : Patrick McGuinness : PRE : It - Business Applcatns
Patrick:McGuinness:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYWHERE:HI:00001:US:ALUMINALAND PRIME 400:patrick.McGuinness@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Patrick McGuinness|400123122

5 : Randall Cobb : PRE : It - Business Applcatns
Randall:Cobb:1.000000:3585:WP400:1:FCH:SYSTEMS ANALYST II SR:IT:N74 W12501 OAKWOOD LN:ANYWHERE:HI:00001:US:ALUMINALAND PRIME 400:Randall.Cobb@acme.com:PRE:SYSTEMS ANALYST II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Randall Cobb|21475

5 : Ed Cando : PRE : It - Business Applcatns
Ed:Cando:1.000000:3564:WP400:1:FCH:SOFTWARE DEVELOPER II SR:IT:N74 W12501 OAKWOOD LN:ANYWHERE:HI:00001:US:ALUMINALAND PRIME 400:Ed.Cando@acme.com:PRE:SOFTWARE DEVELOPER II SR:A1:It - Business Applcatns:5:0|Kate Doe|400100866,1|James Kirk|400103466,2|Simon Says|400124923,3|Joe Brown|400127523,4|Amor Winkler|400107466,5|Ed Cando|400121787


来源: stackexchange

问:
How do I 'getElementById' from a module in JavaScript?
I am using Visual Studio Code with Live Preview/Live Server.

I have a text area in my HTML file, and I'm trying to get its contents in my JS file with 'getElementById'. It works fine in Preview as long as the

```
```test.mjs
var sample = document.getElementById("sample_text");
```

This doesn't work in the console or in the Preview extensions.

FYI I also have a button in the HTML file and a function in the JS file that changes "Hello" to something else when you click the button, but they don't seem to be the problem that I'm encountering.

If I remove all references to modules, i.e. by removing 'type="module"' from the  tag and changing '.mjs' to '.js', then it does work in Preview but I still get the error in the console. I'm reading that the problem may have something to do with Node.js not accepting 'getElementById', but the problem really seems to begin once I add modules into the code. I'm also reading that the issue might lie with how I'm previewing the code on the server-side and not browser side, but in that case I can't find any info on how to preview on the browser side. Please help if you can.

ContentLicense: CC BY-SA 4.0

Body:
I am using Visual Studio Code with Live Preview/Live Server.

I have a text area in my HTML file, and I'm trying to get its contents in my JS file with 'getElementById'. It works fine in Preview as long as the

test.mjs
var sample = document.getElementById("sample_text");

This doesn't work in the console or in the Preview extensions.

FYI I also have a button in the HTML file and a function in the JS file that changes "Hello" to something else when you click the button, but they don't seem to be the problem that I'm encountering.

If I remove all references to modules, i.e. by removing 'type="module"' from the  tag and changing '.mjs' to '.js', then it does work in Preview but I still get the error in the console. I'm reading that the problem may have something to do with Node.js not accepting 'getElementById', but the problem really seems to begin once I add modules into the code. I'm also reading that the issue might lie with how I'm previewing the code on the server-side and not browser side, but in that case I can't find any info on how to preview on the browser side. Please help if you can.


问:
Capture google meet transcript
Can we capture live captions or transcripts without affecting other element sizes/position from a google meet meeting?

I tried using a MutationObserver on the captions block node, but the caveat is that when my extension triggers the captions, it takes up a bunch of screen space, which I don't want it to take.

Setting the captions block node  display as none and opacity to 0 has been tried too.

PS - I am not asking for other chrome extensions which are doing this; I am asking how they are doing it!

Title: Capture google meet transcript


问:
select the row with max values grouped by other rows
I have a table like this

Name
Project Name
Version deployed
Deployment date

John
Car
1.9.8
2022-09-23

John
Car
2.2.4
2022-10-15

John
Car
2.2.5-beta3
2022-10-14

John
Plane
4.9.345
2020-03-12

John
Plane
6.7.89
2022-05-05

Jack
Plane
6.7.89
2022-05-05

Jack
Plane
6.5
2022-05-07

Jack
Dog
4.6.6
2022-08-23

Jack
Plane
6.7.89
2022-05-05

...

And I would like to have a SQL query that selects ONE line grouped by Name, Project Name and that contains the last deployed version with its deployment date (and possibly other columns not displayed here) and in the example outputs then

Name
Project Name
Version deployed
Deployment date

John
Car
2.2.4
2022-10-15

John
Plane
6.7.89
2022-05-05

Jack
Plane
6.5
2022-05-07

Jack
Dog
4.6.6
2022-08-23

...

What I tried already different answers from this website, but the ones I found either group on one element or do not provide the other columns.

EDIT:

The Question that this has been marked as duplicate of, asks exactly what I mentioned last: when grouping on one column.
The answers there do not explain how to extend themselves to grouping by multiple columns.

The answer provided by @YuriLevinsky in the comments here, on the other hand, solves exactly what I wanted.


问:
Unable to redirect uri after cas authentication with WSO2 provider using asp.net core authorization
[enter image description here][1]I am trying to authenticate my .net core application using cas with Wso2 identity provider although the autentication is succesful but on redirect uri i am getting webpage not found error with cas ticket not able to figure out  what is the issue  any guidance would be helpful

```<code>builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
.AddCookie(options =>
{
    options.LoginPath = "/Login";

    options.Events.OnSigningOut = context =>
    {
        var redirectContext = new RedirectContext<CookieAuthenticationOptions>(
            context.HttpContext,
            context.Scheme,
            context.Options,
            context.Properties,
            "/"
        );
        if (builder.Configuration.GetValue("Authentication:CAS:SingleSignOut", false))
        {
        // Single Sign-Out
            var casUrl = new Uri(builder.Configuration["Authentication:CAS:ServerUrlBase"]);
            var links = context.HttpContext.RequestServices.GetRequiredService<LinkGenerator>();
            var serviceUrl = context.Properties.RedirectUri ?? links.GetUriByPage(context.HttpContext, "/Index");

            redirectContext.RedirectUri = UriHelper.BuildAbsolute(
                casUrl.Scheme,
                new HostString(casUrl.Host, casUrl.Port),
                casUrl.LocalPath, "/logout",
                QueryString.Create("service", serviceUrl!));
        }

        context.Options.Events.RedirectToLogout(redirectContext);
        return Task.CompletedTask;
    };
})
      .AddCAS(o =>
       {
           o.CasServerUrlBase = builder.Configuration["Authentication:CAS:ServerUrlBase"];   // Set in `appsettings.json` file.
           o.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
           o.CasValidationUrl = "/";
       });

</code>```

Login controller

```<code>[HttpGet("login")]
        public IActionResult Login(string returnUrl)
        {
           // var props = new AuthenticationProperties { RedirectUri = "/" };

            return Challenge(new AuthenticationProperties { RedirectUri = returnUrl }, "CAS");

           // return Redirect("http://localhost:5095/");
        }

</code>```
```<code>
[Web Response](https://i.stack.imgur.com/1LFOP.png)

  [1]: https://i.stack.imgur.com/v3fKm.png
</code>```

Body:
[enter image description here][1]I am trying to authenticate my .net core application using cas with Wso2 identity provider although the autentication is succesful but on redirect uri i am getting webpage not found error with cas ticket not able to figure out  what is the issue  any guidance would be helpful

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
.AddCookie(options =>
{
    options.LoginPath = "/Login";

    options.Events.OnSigningOut = context =>
    {
        var redirectContext = new RedirectContext<CookieAuthenticationOptions>(
            context.HttpContext,
            context.Scheme,
            context.Options,
            context.Properties,
            "/"
        );
        if (builder.Configuration.GetValue("Authentication:CAS:SingleSignOut", false))
        {
        // Single Sign-Out
            var casUrl = new Uri(builder.Configuration["Authentication:CAS:ServerUrlBase"]);
            var links = context.HttpContext.RequestServices.GetRequiredService<LinkGenerator>();
            var serviceUrl = context.Properties.RedirectUri ?? links.GetUriByPage(context.HttpContext, "/Index");

            redirectContext.RedirectUri = UriHelper.BuildAbsolute(
                casUrl.Scheme,
                new HostString(casUrl.Host, casUrl.Port),
                casUrl.LocalPath, "/logout",
                QueryString.Create("service", serviceUrl!));
        }

        context.Options.Events.RedirectToLogout(redirectContext);
        return Task.CompletedTask;
    };
})
      .AddCAS(o =>
       {
           o.CasServerUrlBase = builder.Configuration["Authentication:CAS:ServerUrlBase"];   // Set in `appsettings.json` file.
           o.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
           o.CasValidationUrl = "/";
       });

Login controller

[HttpGet("login")]
        public IActionResult Login(string returnUrl)
        {
           // var props = new AuthenticationProperties { RedirectUri = "/" };

            return Challenge(new AuthenticationProperties { RedirectUri = returnUrl }, "CAS");

           // return Redirect("http://localhost:5095/");
        }

[Web Response](https://i.stack.imgur.com/1LFOP.png)

  [1]: https://i.stack.imgur.com/v3fKm.png


问:
Why is VBA in Excel asking for a Macro when I press run or F5?
I'm new to VBA. Below is a code to check for new files in a folder and return new files.

SubCheck_for_new2()

  Dim vaFileName As Variant, lCnt As Long
  Const MyDir As String = "C:\Users\carolyntomasine\OneDrive - Li & Fung\Supply Chain Analyst\Item Setup Approvals"
  Const strMrk As String = "AL"

  With Application.FileSearch
    .NewSearch
    .LookIn = MyDir
    .SearchSubFolders = True
    .FileType = msoFileTypeOfficeFiles
    If .Execute > 0 Then
      lCnt = 0
      For Each vaFileName In .FoundFiles
        If Right(Left(vaFileName, Len(vaFileName) - 4), 2) <> strMrk Then
          lCnt = lCnt + 1
          Sheet1.Cells(lCnt, 1).Value = vaFileName
        End If
      Next
      If lCnt = 0 Then MsgBox "There were no new Office files found."
    Else
      MsgBox "There were no Office files found."
    End If
  End With
End Sub
```

However, when I press. run, it prompts me for Macro name. May I know why? And what is the solution?

Body:
I'm new to VBA. Below is a code to check for new files in a folder and return new files.

SubCheck_for_new2()

  Dim vaFileName As Variant, lCnt As Long
  Const MyDir As String = "C:\Users\carolyntomasine\OneDrive - Li & Fung\Supply Chain Analyst\Item Setup Approvals"
  Const strMrk As String = "AL"

  With Application.FileSearch
    .NewSearch
    .LookIn = MyDir
    .SearchSubFolders = True
    .FileType = msoFileTypeOfficeFiles
    If .Execute > 0 Then
      lCnt = 0
      For Each vaFileName In .FoundFiles
        If Right(Left(vaFileName, Len(vaFileName) - 4), 2) <> strMrk Then
          lCnt = lCnt + 1
          Sheet1.Cells(lCnt, 1).Value = vaFileName
        End If
      Next
      If lCnt = 0 Then MsgBox "There were no new Office files found."
    Else
      MsgBox "There were no Office files found."
    End If
  End With
End Sub

However, when I press. run, it prompts me for Macro name. May I know why? And what is the solution?


问:
How to remove unnecessary Bootstrap 5 components to keep CSS smaller?
I am trying to use Bootstrap 5 in my website template. However, I only need the 12 grid system and Navbars. I do't need other components such as buttons, accordions etc.

Is there any way to download or build a Bootstrap 5 CSS with only selected components to keep my stylesheet smaller and less cluttered?

I tried web based SASS compiler from a website called https://bootstrap.build
but I couldn't find any option to remove unnecessary components


问:
How do I fix the error: "A RenderFlex overflowed by 71 pixels on the right." and make the columns fit the screen in Flutter
Currently in my flutter app I get this error after adding a new column in the DataTable: "A RenderFlex overflowed by 71 pixels on the right."
How can I correct this so that the columns adapt to the screen size?

```<code> // For CircularProgressIndicator.
  bool visible = false;
  String? dropdownValue = 'Hoy';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.black87,
        leading: BackButton(
          color: Colors.white,
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => HomePage(0, 0)));
          },
        ),
        title: new Text("Planilla de horarios"),
      ),
      body: (!visible)
          ? Container(
              color: Colors.white,
              height: MediaQuery.of(context).size.height,
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Container(
                      color: Colors.grey,
                      child: Row(children: <Widget>[
                        FutureBuilder<String>(
                            future: globals.SharedPreferencesHelper
                                .getDataFilterDebt(),
                            builder: (context, snapshot) {
                              if (snapshot.hasData) {
                                return Expanded(
                                  child: Row(
                                    children: <Widget>[
                                      Expanded(
                                        flex: 2,
                                        child: DropdownButton<String>(
                                          value: dropdownValue,
                                          icon: Icon(Icons.arrow_downward),
                                          iconSize: 24,
                                          iconEnabledColor: Colors.white,
                                          elevation: 16,
                                          style: TextStyle(color: Colors.black),
                                          underline: Container(
                                            height: 0,
                                            color: Colors.black,
                                          ),
                                          onChanged: (String? newValue) {
                                            setState(() {
                                              dropdownValue = newValue;
                                            });
                                          },
                                          items: <String>['Hoy', 'Mañana']
                                              .map<DropdownMenuItem<String>>(
                                                  (String value) {
                                            return DropdownMenuItem<String>(
                                              value: value,
                                              child: Text(value),
                                            );
                                          }).toList(),
                                        ),
                                      ),
                                      Container(
                                        margin:
                                            const EdgeInsets.only(right: 10.0),
                                        color: Colors.grey,
                                        child: new Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: <Widget>[
                                              FlatButton(
                                                child: Text("Buscar"),
                                                color: Color(0xFF1F1F1F),
                                                textColor: Colors.white,
                                                padding: EdgeInsets.only(
                                                    left: 2,
                                                    right: 2,
                                                    top: 2,
                                                    bottom: 2),
                                                shape: RoundedRectangleBorder(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            5)),
                                                onPressed: () {
                                                  obtenerDetallesTecnicasImplantes(
                                                      dropdownValue.toString());

                                                  setState(() {});
                                                },
                                              ),
                                            ]),
                                      ),
                                    ],
                                  ),
                                );
                              } else if (snapshot.hasError) {
                                return Image.asset("images/fundo_login.jpg");
                              } else {
                                return Container(
                                  margin: EdgeInsets.only(top: 18),
                                  child: Row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget>[
                                      Visibility(
                                          child: Container(
                                        margin: EdgeInsets.only(bottom: 17.5),
                                        child: CircularProgressIndicator(
                                          valueColor:
                                              AlwaysStoppedAnimation<Color>(
                                                  Colors.black),
                                        ),
                                        height: 20,
                                        width: 20,
                                      )),
                                    ],
                                  ),
                                );
                              }
                            }),
                      ]),
                    ),
                    DataTable(
                      columns: [
                        DataColumn(label: Text('Hora')),
                        DataColumn(label: Text('Sector')),
                        DataColumn(label: Text('Agente')),
                        DataColumn(label: Text('Agente de cobertura')),
                      ],
                      rows:
                          scheduleList // Loops through dataColumnText, each iteration assigning the value to element
                              .map(
                                ((element) => DataRow(
                                      cells: <DataCell>[
                                        DataCell(Text(element![
                                            "ingreso"])), //Extracting from Map element the value
                                        DataCell(
                                            Text(element["sector_nombre"])),
                                        DataCell(Text(element["apellidos"] +
                                            " " +
                                            element["nombres"])),
                                       DataCell(Text(element["agente_cobertura_det"])),
                                      ],
                                    )),
                              )
                              .toList(),
                    ),
                  ],
                ),
              ),
            )
          : pageLoadingView(),
    );
  }

  Widget pageLoadingView() {
    return Container(
      margin: EdgeInsets.only(top: 300),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Visibility(
              visible: visible,
              child: Container(
                  margin: EdgeInsets.only(bottom: 30),
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
                  ))),
        ],
      ),
    );
  }

  Color hexToColor(String code) {
    return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
  }
}

</code>```

Currently in my flutter app I get this error after adding a new column in the DataTable.................

Body:
Currently in my flutter app I get this error after adding a new column in the DataTable: "A RenderFlex overflowed by 71 pixels on the right."
How can I correct this so that the columns adapt to the screen size?

 // For CircularProgressIndicator.
  bool visible = false;
  String? dropdownValue = 'Hoy';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.black87,
        leading: BackButton(
          color: Colors.white,
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => HomePage(0, 0)));
          },
        ),
        title: new Text("Planilla de horarios"),
      ),
      body: (!visible)
          ? Container(
              color: Colors.white,
              height: MediaQuery.of(context).size.height,
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Container(
                      color: Colors.grey,
                      child: Row(children: <Widget>[
                        FutureBuilder<String>(
                            future: globals.SharedPreferencesHelper
                                .getDataFilterDebt(),
                            builder: (context, snapshot) {
                              if (snapshot.hasData) {
                                return Expanded(
                                  child: Row(
                                    children: <Widget>[
                                      Expanded(
                                        flex: 2,
                                        child: DropdownButton<String>(
                                          value: dropdownValue,
                                          icon: Icon(Icons.arrow_downward),
                                          iconSize: 24,
                                          iconEnabledColor: Colors.white,
                                          elevation: 16,
                                          style: TextStyle(color: Colors.black),
                                          underline: Container(
                                            height: 0,
                                            color: Colors.black,
                                          ),
                                          onChanged: (String? newValue) {
                                            setState(() {
                                              dropdownValue = newValue;
                                            });
                                          },
                                          items: <String>['Hoy', 'Mañana']
                                              .map<DropdownMenuItem<String>>(
                                                  (String value) {
                                            return DropdownMenuItem<String>(
                                              value: value,
                                              child: Text(value),
                                            );
                                          }).toList(),
                                        ),
                                      ),
                                      Container(
                                        margin:
                                            const EdgeInsets.only(right: 10.0),
                                        color: Colors.grey,
                                        child: new Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: <Widget>[
                                              FlatButton(
                                                child: Text("Buscar"),
                                                color: Color(0xFF1F1F1F),
                                                textColor: Colors.white,
                                                padding: EdgeInsets.only(
                                                    left: 2,
                                                    right: 2,
                                                    top: 2,
                                                    bottom: 2),
                                                shape: RoundedRectangleBorder(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            5)),
                                                onPressed: () {
                                                  obtenerDetallesTecnicasImplantes(
                                                      dropdownValue.toString());

                                                  setState(() {});
                                                },
                                              ),
                                            ]),
                                      ),
                                    ],
                                  ),
                                );
                              } else if (snapshot.hasError) {
                                return Image.asset("images/fundo_login.jpg");
                              } else {
                                return Container(
                                  margin: EdgeInsets.only(top: 18),
                                  child: Row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget>[
                                      Visibility(
                                          child: Container(
                                        margin: EdgeInsets.only(bottom: 17.5),
                                        child: CircularProgressIndicator(
                                          valueColor:
                                              AlwaysStoppedAnimation<Color>(
                                                  Colors.black),
                                        ),
                                        height: 20,
                                        width: 20,
                                      )),
                                    ],
                                  ),
                                );
                              }
                            }),
                      ]),
                    ),
                    DataTable(
                      columns: [
                        DataColumn(label: Text('Hora')),
                        DataColumn(label: Text('Sector')),
                        DataColumn(label: Text('Agente')),
                        DataColumn(label: Text('Agente de cobertura')),
                      ],
                      rows:
                          scheduleList // Loops through dataColumnText, each iteration assigning the value to element
                              .map(
                                ((element) => DataRow(
                                      cells: <DataCell>[
                                        DataCell(Text(element![
                                            "ingreso"])), //Extracting from Map element the value
                                        DataCell(
                                            Text(element["sector_nombre"])),
                                        DataCell(Text(element["apellidos"] +
                                            " " +
                                            element["nombres"])),
                                       DataCell(Text(element["agente_cobertura_det"])),
                                      ],
                                    )),
                              )
                              .toList(),
                    ),
                  ],
                ),
              ),
            )
          : pageLoadingView(),
    );
  }

  Widget pageLoadingView() {
    return Container(
      margin: EdgeInsets.only(top: 300),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Visibility(
              visible: visible,
              child: Container(
                  margin: EdgeInsets.only(bottom: 30),
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
                  ))),
        ],
      ),
    );
  }

  Color hexToColor(String code) {
    return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
  }
}

Currently in my flutter app I get this error after adding a new column in the DataTable.................


问:
Reduced TPS using AWS API Gateway
We are conducting several performance tests in our integration environment. Our integration is depicted like this:

AWS API Gateway -> AWS App Load Balancer -> AWS ECS (docker) x 3 (using AutoScaling)

Our initial results show:

TPS = 198, 95% Response Time = 442 ms, Requests = 61790 during 5 minutes performance tests.

When we skip the API Gateway and send all the load to the Application Load Balancer we got:

TPS = 901, 95% Response Time = 433 ms, Requests = 280399 during 5 minutes performance tests.

We have disabled the throttling option in the API Gateway but there's no difference. How can I configure the AWS API Gateway in order to achieve more TPS?

Next you can find CFN code that uses Lambda instead of AWS ECS but suffers from the same TPS issue:

deploy.sh

```<code>#!/bin/bash

set -ex

AWS_REGION="us-east-1"

CLOUD_FORMATION_STACK_NAME="APILowTPSTest"
CLOUD_FORMATION_TEMPLATE_FILE="service.yaml"
CLOUD_FORMATION_CAPABILITIES="CAPABILITY_NAMED_IAM"

aws --region "${AWS_REGION}" cloudformation deploy \
    --template-file "${CLOUD_FORMATION_TEMPLATE_FILE}" \
    --stack-name "${CLOUD_FORMATION_STACK_NAME}" \
    --capabilities "${CLOUD_FORMATION_CAPABILITIES}" \
    --no-fail-on-empty-changeset \
    --tags \
        Name="${CLOUD_FORMATION_STACK_NAME}-Stack" \
    --parameter-overrides \
        EnvironmentName="${CLOUD_FORMATION_STACK_NAME}" \
        LambdaFunctionName="API-Tps-Mock-Test"
</code>```

service.yaml

```<code>AWSTemplateFormatVersion: 2010-09-09
Description: >
  This template deploys a simple environment using an API Gateway and a Lambda Function for Performances tests purposes

Parameters:

  EnvironmentName:
    Description: Environment Name (Used to name some resources)
    Type: String

  LambdaFunctionName:
    Description: Lambda function that works as mock
    Type: String

Resources:

  LambdaIAMRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: 2012-10-17
        Statement:
          - Action:
              - sts:AssumeRole
            Effect: Allow
            Principal:
              Service:
                - lambda.amazonaws.com
      Policies:
        - PolicyDocument:
            Version: 2012-10-17
            Statement:
              - Action:
                  - logs:CreateLogGroup
                  - logs:CreateLogStream
                  - logs:PutLogEvents
                Effect: Allow
                Resource:
                  - !Sub arn:aws:logs:${AWS::Region}:${AWS::AccountId}:log-group:/aws/lambda/${LambdaFunctionName}:*
          PolicyName: lambda

  LambdaFunction:
    Type: AWS::Lambda::Function
    Properties:
      Description: Authorization Lambda Function for NCR
      FunctionName: !Ref LambdaFunctionName
      Handler: index.handler
      MemorySize: 128
      Timeout: 3
      Role: !GetAtt LambdaIAMRole.Arn
      Runtime: nodejs14.x
      Code:
        ZipFile: |
          exports.handler = (event, context) => {
              return new Promise((resolve) => resolve({
                  isBase64Encoded: false,
                  body: JSON.stringify({ Result: "All Good!" }),
                  statusCode: 200,
              }));
          }

  ApiGateway:
      Type: AWS::ApiGateway::RestApi
      Properties:
        Name: !Join [ "-", [ !Ref EnvironmentName, "API" ] ]
        Description: !Join [ "-", [ !Ref EnvironmentName, "API Gateway deployed to test TPS" ] ]
        EndpointConfiguration:
          Types:
            - REGIONAL
        Tags:
          - Key: Name
            Value: !Join [ "-", [ "API", !Ref EnvironmentName ] ]

  ApiLambdaPermission:
    Type: AWS::Lambda::Permission
    Properties:
      FunctionName: !Ref LambdaFunction
      Action: lambda:InvokeFunction
      Principal: apigateway.amazonaws.com
      SourceArn:
        !Join
          - ''
          - - 'arn:aws:execute-api:'
            - !Ref AWS::Region
            - ':'
            - !Ref AWS::AccountId
            - ':'
            - !Ref ApiGateway
            - '/*/*/*'

  SubRootResource:
    Type: 'AWS::ApiGateway::Resource'
    Properties:
      RestApiId: !Ref ApiGateway
      ParentId: !GetAtt ApiGateway.RootResourceId
      PathPart: "v1"

  SingleRequestResource:
    Type: 'AWS::ApiGateway::Resource'
    Properties:
      RestApiId: !Ref ApiGateway
      ParentId: !Ref SubRootResource
      PathPart: "test"

  ApiGatewaySingleRequestMethod:
    Type: AWS::ApiGateway::Method
    Properties:
      ResourceId: !Ref SingleRequestResource
      RestApiId: !Ref ApiGateway
      AuthorizationType: "NONE"
      HttpMethod: "POST"
      Integration:
        Type: AWS_PROXY
        IntegrationHttpMethod: "POST"
        Uri: !Sub
          - 'arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${lambdaArn}/invocations'
          - lambdaArn: !GetAtt "LambdaFunction.Arn"

  ApiGatewayDeployment:
    Type: AWS::ApiGateway::Deployment
    DependsOn:
      - ApiGatewaySingleRequestMethod
    Properties:
      RestApiId: !Ref ApiGateway

  APIStage:
    Type: AWS::ApiGateway::Stage
    Properties:
      DeploymentId: !Ref ApiGatewayDeployment
      MethodSettings:
        - HttpMethod: '*'
          LoggingLevel: INFO
          ResourcePath: /*
          DataTraceEnabled: true
      RestApiId: !Ref ApiGateway
      StageName: 'dev'
</code>```

Title: Reduced TPS using AWS API Gateway

Body:
We are conducting several performance tests in our integration environment. Our integration is depicted like this:

AWS API Gateway -> AWS App Load Balancer -> AWS ECS (docker) x 3 (using AutoScaling)

Our initial results show:

TPS = 198, 95% Response Time = 442 ms, Requests = 61790 during 5 minutes performance tests.

When we skip the API Gateway and send all the load to the Application Load Balancer we got:

TPS = 901, 95% Response Time = 433 ms, Requests = 280399 during 5 minutes performance tests.

We have disabled the throttling option in the API Gateway but there's no difference. How can I configure the AWS API Gateway in order to achieve more TPS?

Next you can find CFN code that uses Lambda instead of AWS ECS but suffers from the same TPS issue:

deploy.sh

#!/bin/bash

set -ex

AWS_REGION="us-east-1"

CLOUD_FORMATION_STACK_NAME="APILowTPSTest"
CLOUD_FORMATION_TEMPLATE_FILE="service.yaml"
CLOUD_FORMATION_CAPABILITIES="CAPABILITY_NAMED_IAM"

aws --region "${AWS_REGION}" cloudformation deploy \
    --template-file "${CLOUD_FORMATION_TEMPLATE_FILE}" \
    --stack-name "${CLOUD_FORMATION_STACK_NAME}" \
    --capabilities "${CLOUD_FORMATION_CAPABILITIES}" \
    --no-fail-on-empty-changeset \
    --tags \
        Name="${CLOUD_FORMATION_STACK_NAME}-Stack" \
    --parameter-overrides \
        EnvironmentName="${CLOUD_FORMATION_STACK_NAME}" \
        LambdaFunctionName="API-Tps-Mock-Test"

service.yaml

AWSTemplateFormatVersion: 2010-09-09
Description: >
  This template deploys a simple environment using an API Gateway and a Lambda Function for Performances tests purposes

Parameters:

  EnvironmentName:
    Description: Environment Name (Used to name some resources)
    Type: String

  LambdaFunctionName:
    Description: Lambda function that works as mock
    Type: String

Resources:

  LambdaIAMRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: 2012-10-17
        Statement:
          - Action:
              - sts:AssumeRole
            Effect: Allow
            Principal:
              Service:
                - lambda.amazonaws.com
      Policies:
        - PolicyDocument:
            Version: 2012-10-17
            Statement:
              - Action:
                  - logs:CreateLogGroup
                  - logs:CreateLogStream
                  - logs:PutLogEvents
                Effect: Allow
                Resource:
                  - !Sub arn:aws:logs:${AWS::Region}:${AWS::AccountId}:log-group:/aws/lambda/${LambdaFunctionName}:*
          PolicyName: lambda

  LambdaFunction:
    Type: AWS::Lambda::Function
    Properties:
      Description: Authorization Lambda Function for NCR
      FunctionName: !Ref LambdaFunctionName
      Handler: index.handler
      MemorySize: 128
      Timeout: 3
      Role: !GetAtt LambdaIAMRole.Arn
      Runtime: nodejs14.x
      Code:
        ZipFile: |
          exports.handler = (event, context) => {
              return new Promise((resolve) => resolve({
                  isBase64Encoded: false,
                  body: JSON.stringify({ Result: "All Good!" }),
                  statusCode: 200,
              }));
          }

  ApiGateway:
      Type: AWS::ApiGateway::RestApi
      Properties:
        Name: !Join [ "-", [ !Ref EnvironmentName, "API" ] ]
        Description: !Join [ "-", [ !Ref EnvironmentName, "API Gateway deployed to test TPS" ] ]
        EndpointConfiguration:
          Types:
            - REGIONAL
        Tags:
          - Key: Name
            Value: !Join [ "-", [ "API", !Ref EnvironmentName ] ]

  ApiLambdaPermission:
    Type: AWS::Lambda::Permission
    Properties:
      FunctionName: !Ref LambdaFunction
      Action: lambda:InvokeFunction
      Principal: apigateway.amazonaws.com
      SourceArn:
        !Join
          - ''
          - - 'arn:aws:execute-api:'
            - !Ref AWS::Region
            - ':'
            - !Ref AWS::AccountId
            - ':'
            - !Ref ApiGateway
            - '/*/*/*'

  SubRootResource:
    Type: 'AWS::ApiGateway::Resource'
    Properties:
      RestApiId: !Ref ApiGateway
      ParentId: !GetAtt ApiGateway.RootResourceId
      PathPart: "v1"

  SingleRequestResource:
    Type: 'AWS::ApiGateway::Resource'
    Properties:
      RestApiId: !Ref ApiGateway
      ParentId: !Ref SubRootResource
      PathPart: "test"

  ApiGatewaySingleRequestMethod:
    Type: AWS::ApiGateway::Method
    Properties:
      ResourceId: !Ref SingleRequestResource
      RestApiId: !Ref ApiGateway
      AuthorizationType: "NONE"
      HttpMethod: "POST"
      Integration:
        Type: AWS_PROXY
        IntegrationHttpMethod: "POST"
        Uri: !Sub
          - 'arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${lambdaArn}/invocations'
          - lambdaArn: !GetAtt "LambdaFunction.Arn"

  ApiGatewayDeployment:
    Type: AWS::ApiGateway::Deployment
    DependsOn:
      - ApiGatewaySingleRequestMethod
    Properties:
      RestApiId: !Ref ApiGateway

  APIStage:
    Type: AWS::ApiGateway::Stage
    Properties:
      DeploymentId: !Ref ApiGatewayDeployment
      MethodSettings:
        - HttpMethod: '*'
          LoggingLevel: INFO
          ResourcePath: /*
          DataTraceEnabled: true
      RestApiId: !Ref ApiGateway
      StageName: 'dev'


问:
What would cause an ASP.NET API to throw a 500 error then return 401 errors for every request after that until the app pool is recycled?
We have an ASP.NET (.NET Framework 4.7.2) that has been working fine for the past several months. We installed this at a new customer and have come across this strange issue that I can't seem to solve.

For some reason, during normal API calls, we receive a 500.0 response that takes 17 seconds to complete. After this happens every request that is sent receives a 401.0 response that takes 5 seconds to complete, even though the authorization has not changed. Everything that was previously working no longer works. The only fix is to recycle the application pool, which seems to clear the issue and service is restored.

No error is ever recorded. The event logs show nothing, IIS logs only show the 500 and subsequent 401.0 responses, and application logs don't report any kind of exception. It just simply shuts down.

Our API uses anonymous authentication. Windows authentication was turned on, so we disabled it. We found somewhere else that this error can sometimes be caused by anon authentication being set to a specific user, so we changed that to application pool identity. This was a newer version of our API, so we rolled it back to one at a different client that was not having these issues and the error persists.

I'm beyond out of ideas. We can't figure out what is going on.

This API is running on a Win2016 Server, IIS 10, latest updates. It has been rebooted several times as well.


问:
I'm getting this error "at TCPConnectWrap.afterConnect [as oncomplete]" when creating a docker image from a nestjs Project
Im trying to make a Docker file to deploy a Nestjs API. The Api has a connection to a PostgresDB and when i make the DockerFile, i'm getting this error at TCPConnectWrap.afterConnect [as oncomplete]

Here is my DockerFile

```<code># Base image
FROM node:18

# Create app directory
WORKDIR /usr/src/app

# A wildcard is used to ensure both package.json AND package-lock.json are copied
COPY package*.json ./

# Install app dependencies
RUN yarn install

# Bundle app source
COPY . .

# Creates a "dist" folder with the production build
RUN yarn run build

# Start the server using the production build
CMD [ "node", "dist/main.js" ]

</code>```

Here is an Image of the error enter image description here

I've tried to add Environment Variable, but the error still remaining

Body:
Im trying to make a Docker file to deploy a Nestjs API. The Api has a connection to a PostgresDB and when i make the DockerFile, i'm getting this error at TCPConnectWrap.afterConnect [as oncomplete]

Here is my DockerFile

# Base image
FROM node:18

# Create app directory
WORKDIR /usr/src/app

# A wildcard is used to ensure both package.json AND package-lock.json are copied
COPY package*.json ./

# Install app dependencies
RUN yarn install

# Bundle app source
COPY . .

# Creates a "dist" folder with the production build
RUN yarn run build

# Start the server using the production build
CMD [ "node", "dist/main.js" ]

Here is an Image of the error enter image description here

I've tried to add Environment Variable, but the error still remaining


问:
Python - get into all python dropdowns
I have a code that does the following.

Enter the website

Log in

Click on a link

Click on a date

and select an item from the dropdown.

I wanted him to do this search in the first dropdown option that would be:

wait.until(EC.visibility_of_element_located((By.XPATH, '//*[@id="ctl00_ctl00_Content_Content_ddlVagasTerminalEmpresa"]/option[1]'))).click()

And add it to my csv file and then do it in option 2 and option 3. How to do this?
Below is my code

```<code>from bs4 import BeautifulSoup
from selenium.webdriver.common.by import By
from selenium.webdriver.firefox import options
from selenium.webdriver.firefox.options import Options
from selenium.webdriver.support.ui import Select
import pandas as pd
import json
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from time import sleep

options = Options()
options.headless = False

dia = '{:0>2}'.format(input("Qual o dia do agendamento ? = "))

navegador = webdriver.Firefox(options = options)

wait = WebDriverWait(navegador, 30)

link = 'https://extranet.ecopatio.com.br/'
navegador.get(url = link)

inicio_str_dia = "a[title='"
final_str_dia = " de dezembro']"
diadoagenda = (inicio_str_dia+dia+final_str_dia)

wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_txtLogin"))).send_keys('*********')
wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_txtSenha"))).send_keys('*********')
wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_btnEnviar"))).click()
wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_TreeView2t8"))).click()
wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, diadoagenda))).click()
wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_ddlVagasTerminalEmpresa"))).click()
wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_ddlVagasTerminalEmpresa"))).click()
wait.until(EC.visibility_of_element_located((By.XPATH, '//*[@id="ctl00_ctl00_Content_Content_ddlVagasTerminalEmpresa"]/option[3]'))).click()
wait.until(EC.presence_of_element_located((By.XPATH, '//*[@id="divScroll"]')))
sleep(3)
teste = navegador.find_element(By.XPATH, '//*[@id="divScroll"]').get_attribute('innerHTML')

soup = BeautifulSoup(teste, "html.parser")

Vagas = soup.find_all(title="Vaga disponível.")

temp=[]
for i in Vagas:
    on_click = i.get('onclick')
    temp.append(on_click)

texto = str(temp)

b = {'amp;': '', 'Cadastro': 'https://extranet.ecopatio.com.br/agendamento/Cadastro'}

for x,y in b.items():
    texto = texto.replace(x, y)

achado2 = texto.split('\'')[1::6]

#achado2_series = pd.Series(achado2)
df = pd.DataFrame(achado2)

df.to_csv('testa.csv', mode='a', header=False, index=False)```

```

Title: Python - get into all python dropdowns

Body:
I have a code that does the following.

Enter the website

Log in

Click on a link

Click on a date

and select an item from the dropdown.

I wanted him to do this search in the first dropdown option that would be:

wait.until(EC.visibility_of_element_located((By.XPATH, '//*[@id="ctl00_ctl00_Content_Content_ddlVagasTerminalEmpresa"]/option[1]'))).click()

And add it to my csv file and then do it in option 2 and option 3. How to do this?
Below is my code

from bs4 import BeautifulSoup
from selenium.webdriver.common.by import By
from selenium.webdriver.firefox import options
from selenium.webdriver.firefox.options import Options
from selenium.webdriver.support.ui import Select
import pandas as pd
import json
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from time import sleep

options = Options()
options.headless = False

dia = '{:0>2}'.format(input("Qual o dia do agendamento ? = "))

navegador = webdriver.Firefox(options = options)

wait = WebDriverWait(navegador, 30)

link = 'https://extranet.ecopatio.com.br/'
navegador.get(url = link)

inicio_str_dia = "a[title='"
final_str_dia = " de dezembro']"
diadoagenda = (inicio_str_dia+dia+final_str_dia)

wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_txtLogin"))).send_keys('*********')
wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_txtSenha"))).send_keys('*********')
wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_btnEnviar"))).click()
wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_TreeView2t8"))).click()
wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, diadoagenda))).click()
wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_ddlVagasTerminalEmpresa"))).click()
wait.until(EC.element_to_be_clickable((By.ID, "ctl00_ctl00_Content_Content_ddlVagasTerminalEmpresa"))).click()
wait.until(EC.visibility_of_element_located((By.XPATH, '//*[@id="ctl00_ctl00_Content_Content_ddlVagasTerminalEmpresa"]/option[3]'))).click()
wait.until(EC.presence_of_element_located((By.XPATH, '//*[@id="divScroll"]')))
sleep(3)
teste = navegador.find_element(By.XPATH, '//*[@id="divScroll"]').get_attribute('innerHTML')

soup = BeautifulSoup(teste, "html.parser")

Vagas = soup.find_all(title="Vaga disponível.")

temp=[]
for i in Vagas:
    on_click = i.get('onclick')
    temp.append(on_click)

texto = str(temp)

b = {'amp;': '', 'Cadastro': 'https://extranet.ecopatio.com.br/agendamento/Cadastro'}

for x,y in b.items():
    texto = texto.replace(x, y)

achado2 = texto.split('\'')[1::6]

#achado2_series = pd.Series(achado2)
df = pd.DataFrame(achado2)

df.to_csv('testa.csv', mode='a', header=False, index=False)```