selector.html

<style>
    /* install options selector */
    /* new selector */

    .selector {
        width: 100%;
    }

    .selector-bg {
        background-color: #9943ff;
        padding: 1rem;
        border-radius: 5px;
    }

    .selector .options-section {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .selector .options-section-specific {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 97%;
        margin: 0 auto;
    }

    .selector .options .option-label {
        color: white;
        width: 6em;
        text-transform: uppercase;
        font-weight: 600;
        margin-top: 0.6em;
        margin-right: 0.6em;
        text-align: right;
    }

    .selector .options .option {
        background: #e3e3e3;
        color: #3c3c3c;
        flex: 1 1;
        margin: 0.2em;
        padding: 0.3em;
        cursor: pointer;
        line-height: 1.5em;
        box-shadow: 2px 2px 2px rgba(10, 10, 10, 0.4);
        border-radius: 2px;
    }

    .selector .options .option:hover,
    .selector .options .option.active:hover,
    .cmd-button:hover {
        background: #ffb500;
        box-shadow: 1px 1px 0px rgba(10, 10, 10, 0.7);
        -webkit-transition: background-color 0.3s ease-in-out;
        -moz-transition: background-color 0.3s ease-in-out;
        -o-transition: background-color 0.3s ease-in-out;
        transition: background-color 0.3s ease-in-out;
        transition: box-shadow 0.1s ease-in-out;
    }

    .selector .options .option:active,
    .selector .options .option.active:active,
    .cmd-button:active {
        color: #9943ff;
    }

    .selector .options .note code {
        background: #e3e3e3;
        color: #000000;
        padding: 0.08em 0.15em;
        border-radius: 4px;
    }

    .selector .options .option-blank {
        color: white;
        flex: 1 1;
        margin: 0.2em;
        padding: 0.3em;
        line-height: 1.5em;
    }

    .selector .options .option-blank span {
        margin: auto;
    }

    .selector .options .note .option-blank {
        padding: 0 1em;
        text-align: center;
    }

    .selector .options .option-notice {
        color: #e0e0e0;
        flex: 1 1;
        margin: 0.2em;
        padding: 0.3em;
        line-height: 1.5em;
        background: #424242;
    }

    .selector .options .option-notice span {
        margin: auto;
    }

    .selector .options .option-notice a {
        font-weight: bold;
    }

    i.fa-up-6 {
        position: relative;
        top: -6px;
    }

    i.fa-down-6 {
        position: relative;
        top: 6px;
    }

    .selector .options .option .svg-inline--fa {
        margin-top: 0.2em;
        padding-left: 0.3em;
    }

    .selector .options .active {
        background: #36c9dd;
        font-weight: 600;
        color: #424242;
    }

    .selector .options .active.advanced {
        background: #ffb500;
        font-weight: 600;
        color: #424242;
    }

    .selector .options .disabled,
    .selector .options .perm-disabled {
        background: #a785e7 !important;
        color: #706880;
        cursor: not-allowed;
    }

    .cmd {
        display: flex;
        margin-top: 2rem;
    }

    .cmd-label {
        color: white;
        width: 6em;
        text-transform: uppercase;
        font-weight: 600;
        margin-top: 1rem;
        margin-right: 0.6em;
        vertical-align: top;
        text-align: right
    }

    .cmd-box {
        cursor: text;
        overflow: auto;
        width: calc(100% - 6em);
        border-radius: 4px;
    }

    .cmd-button {
        background: #e3e3e3;
        border-radius: 0.3rem;
        color: #3c3c3c;
        flex: 1 1;
        margin: 0.5em;
        padding: 0.6em;
        cursor: pointer;
        line-height: 1.5em;
        box-shadow: 2px 2px 2px rgb(10 10 10 / 40%);
    }

    .hidden {
        display: none;
    }

    .noselect,
    div.option {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently supported by Chrome and Opera */

    }

    .selector-buttons {
        text-align: center;
        margin-top: 1em;
    }

    .selector-buttons a {
        margin: 0 1em;
    }

    .selector .context {
        display: none;
    }

    .selector .option.active .fas {
        color: #3c3c3c;
    }

    .option-note {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
</style>

<script defer src="https://unpkg.com/alpinejs@3.10.2/dist/cdn.min.js"></script>

<section class="selector-bg">
    <div class="container-padding" x-data="rapids_selector">
        <div class="selector">
            <div class="options">
                <div class="options-section">
                    <div class="option-label">Release</div>
                    <template x-for="release in releases">
                        <div x-on:click="(e) => releaseClickHandler(e, release)"
                            x-bind:class="{'active': release === active_release, 'disabled': disableUnsupportedRelease(release)}"
                            class="option" x-text="getReleaseText(release)">
                        </div>
                    </template>
                </div>
                <div class="options-section">
                    <div class="option-label">Method</div>
                    <template x-for="method in methods">
                        <div x-on:click="(e) => methodClickHandler(e, method)"
                            x-bind:class="{'active': method === active_method, 'disabled': disableUnsupportedMethod(method)}"
                            class="option" x-html="getMethodHTML(method)">
                        </div>
                    </template>
                </div>
                <div class="options-section" x-show="active_method === 'Conda'">
                    <div class="option-label">ENV. CUDA</div>
                    <template x-for="version in conda_cuda_vers">
                        <div x-on:click="(e) => condaCUDAClickHandler(e, version)"
                            x-bind:class="{'active': version === active_conda_cuda_ver, 'disabled': disableUnsupportedCuda(version)}"
                            class="option" x-text="'CUDA ' + getCondaVersionSupport(version)['label']"></div>
                    </template>
                </div>
                <div class="options-section" x-show="active_method === 'pip'">
                    <div class="option-label">System CUDA</div>
                    <template x-for="version in pip_cuda_vers">
                        <div x-on:click="(e) => pipCUDAClickHandler(e, version)"
                            x-bind:class="{'active': version === active_pip_cuda_ver}" class="option"
                            x-text="'CUDA ' + version"></div>
                    </template>
                </div>
                <div class="options-section" x-show="active_method === 'Docker'">
                    <div class="option-label">Image CUDA</div>
                    <template x-for="version in docker_cuda_vers">
                        <div x-on:click="(e) => dockerCUDAClickHandler(e, version)"
                            x-bind:class="{'active': version === active_docker_cuda_ver, 'disabled': disableUnsupportedDockerCuda(version)}"
                            class="option" x-text="'CUDA ' + version"></div>
                    </template>
                </div>
                <div class="options-section" x-show="active_method !== 'pip'">
                    <div class="option-label">Python</div>
                    <template x-for="version in python_vers">
                        <div x-on:click="(e) => pythonClickHandler(e, version)"
                            x-bind:class="{'active': version === active_python_ver, 'disabled': disableUnsupportedPython(version)}"
                            class="option" x-text="'Python ' + version"></div>
                    </template>
                </div>
                <div class="conda-options-container" x-show="active_method === 'Conda'">
                    <div class="options-section">
                        <div class="option-label">RAPIDS Packages</div>
                        <template x-for="package in packages">
                            <div x-on:click="(e) => packagesClickHandler(e, package)"
                                x-bind:class="{'active': active_packages.includes(package), 'disabled': disableUnsupportedPackage(package)}"
                                class="option" x-html="getPackageHTML(package)">
                            </div>
                        </template>
                    </div>
                    <div class="options-section-specific" x-show="active_packages != 'Standard'">
                        <div class="option-label"><!-- Second row of packages --></div>
                        <template x-for="package in additional_rapids_packages">
                            <div x-on:click="(e) => packagesClickHandler(e, package)"
                                x-bind:class="{'active': active_packages.includes(package), 'disabled': disableUnsupportedPackage(package)}"
                                class="option" x-text="package"></div>
                        </template>
                    </div>
                    <div class="options-section">
                        <div class="option-label">Additional Packages</div>
                        <template x-for="package in additional_packages">
                            <div x-on:click="(e) => additionalPackagesClickHandler(e, package)"
                                x-bind:class="{'active': active_additional_packages.includes(package)}" class="option"
                                x-text="package"></div>
                        </template>
                    </div>
                </div>
                <div class="pip-options-container" x-show="active_method === 'pip'">
                    <div class="options-section">
                        <div class="option-label">Packages</div>
                        <template x-for="package in packages">
                            <div x-on:click="(e) => packagesClickHandler(e, package)"
                                x-bind:class="{'active': active_packages.includes(package)}" class="option"
                                x-html="getPackageHTML(package)">
                            </div>
                        </template>
                    </div>
                    <div class="options-section-specific" x-show="active_packages != 'Standard'">
                        <div class="option-label"><!-- Second row of packages --></div>
                        <template x-for="package in additional_pip_packages">
                            <div x-on:click="(e) => packagesClickHandler(e, package)"
                                x-bind:class="{'active': active_packages.includes(package)}" class="option"
                                x-text="package"></div>
                        </template>
                    </div>
                </div>
                <div class="docker-options-container" x-show="active_method === 'Docker'">
                    <div class="options-section">
                        <div class="option-label">Image Location</div>
                        <template x-for="loc in img_loc">
                            <div x-on:click="(e) => imgLocClickHandler(e, loc)"
                                x-bind:class="{'active': loc === active_img_loc, 'disabled': disableUnsupportedImgLoc(loc)}"
                                class="option" x-html="getImgLoc(loc)">
                            </div>
                        </template>
                    </div>
                    <div class="options-section">
                        <div class="option-label">Image Type</div>
                        <template x-for="type in img_types">
                            <div x-on:click="(e) => imgTypeClickHandler(e, type)"
                                x-bind:class="{'active': type === active_img_type, 'disabled': disableUnsupportedImgType(type)}"
                                class="option" x-text="type"></div>
                        </template>
                    </div>
                </div>
                <div class="note" x-show="getNoteHtml()">
                    <div class="option-label"></div>
                    <div class="option-blank">
                        <div class="option-note-container" x-html="getNoteHtml()"></div>
                    </div>
                </div>
            </div>
            <div class="cmd">
                <div class="cmd-label">Command</div>
                <div class="cmd-box">
                    <pre
                        class="highlight"><code><span x-ref="cmd" x-html="getCmdHtml" x-on:mouseup.once="copyToGA"></span></code></pre>
                </div>
            </div>
        </div>
        <div class="selector-buttons">
            <a class="cmd-button" x-on:click="copyToClipboard">COPY COMMAND <i class="fas fa-clipboard"></i></a>
        </div>
    </div>
</section>

<script type="text/javascript">

    document.addEventListener('alpine:init', () => {
        Alpine.data('rapids_selector', () => ({
            // default values
            active_python_ver: "3.12",
            active_conda_cuda_ver: "12",
            active_pip_cuda_ver: "12",
            active_docker_cuda_ver: "12.8",
            active_method: "Conda",
            active_release: "Stable",
            active_img_type: "Base",
            active_img_loc: "NGC",
            active_packages: ["Standard"],
            active_additional_packages: [],

            // all possible values
            python_vers: ["3.10", "3.11", "3.12"],
            python_vers_stable: ["3.10", "3.11", "3.12"],
            python_vers_nightly: ["3.10", "3.11", "3.12"],
            conda_cuda_vers: ["11", "12"],
            pip_cuda_vers: ["11.4 - 11.8", "12"],
            docker_cuda_vers: ["11.8", "12.0", "12.8"],
            docker_cuda_vers_stable: ["11.8", "12.0", "12.8"],
            docker_cuda_vers_nightly: ["11.8", "12.0", "12.8"],
            methods: ["Conda", "pip", "Docker"],
            releases: ["Stable", "Nightly"],
            img_loc: ["NGC", "Docker Hub"],
            img_types: ["Base", "Notebooks"],
            packages: ["Standard", "Choose Specific Packages"],
            additional_pip_packages: ["cuDF", "dask-cuDF", "cuML", "cuGraph/nx-cugraph", "cuSpatial/cuProj", "cuxfilter", "cuCIM", "RAFT", "cuVS"],
            additional_rapids_packages: ["cuDF", "cuML", "cuGraph", "cuSpatial/cuProj", "cuxfilter", "cuCIM", "RAFT", "cuVS"],
            additional_packages: ["Graphistry", "JupyterLab", "NetworkX + nx-cugraph", "Plotly Dash", "PyTorch", "TensorFlow", "Xarray-Spatial"],
            note_prefix: "<i class='fas fa-info-circle text-blue'></i>",
            rapids_meta_pkgs: ["cuDF", "cuML", "cuGraph", "nx-cugraph", "cuSpatial", "cuProj", "cuxfilter", "cuCIM", "RAFT", "cuVS"],
            getStableVersion() {
                return "{{ site.data.releases.stable.version }}";
            },
            getNightlyVersion() {
                return "{{ site.data.releases.nightly.version }}";
            },
            getMethodHTML(method) {
                var icon_class = "box-open fas";
                if (method.includes("Docker")) icon_class = "regular fa-container-storage";
                return method + "&nbsp;<i class='fa-" + icon_class + "'></i>";
            },
            getPackageHTML(pkg) {

                if (pkg === "Standard") {
                    return pkg + "&nbsp;<i class='fas fa-check-square'></i>";
                }

                return pkg;
            },
            getReleaseText(release) {
                var version = this.getStableVersion();
                if (release.includes("Nightly")) version = this.getNightlyVersion() + "a";
                return release + " " + "(" + version + ")";
            },
            highlightCmd(str) {
                return "<span class='nb'>" + str + "</span>"
            },
            highlightFlag(str) {
                return "<span class='nt'>" + str + "</span>"
            },
            highlightPkgOrImg(str) {
                return "<span class='nv'>" + str + "</span>"
            },
            highlightCondaPkg(pkg) {
                var channel_pkg_separator = "::";
                var pkg_components = pkg.split(channel_pkg_separator);
                if (pkg_components.length === 1) {
                    return this.highlightPkgOrImg(pkg);
                }
                return pkg_components[0] + channel_pkg_separator + this.highlightPkgOrImg(pkg_components[1]);
            },
            getCondaVersionSupport(version) {
                var cuda_version_info = {
                    "Stable": {
                        "11": ["11.4", "11.8"],
                        "12": ["12.0", "12.8"]
                    },
                    "Nightly": {
                        "11": ["11.4", "11.8"],
                        "12": ["12.0", "12.8"]
                    }
                };
                var bounds = cuda_version_info[this.active_release][version];
                var lower_bound = bounds[0];
                var upper_bound = bounds[1];
                return {
                    "label": lower_bound + " - " + upper_bound,
                    "pinning": ">=" + lower_bound + ",<=" + upper_bound
                };
            },
            getAdditionalPkgName(pkg) {
                // used to pin the version of nx-cugraph for conda install
                var rapids_version = this.active_release === "Stable" ? this.getStableVersion() : this.getNightlyVersion();
                var pkg_names = {
                    "NetworkX + nx-cugraph": `networkx nx-cugraph=${rapids_version}`,
                    "Plotly Dash": "dash",
                    "PyTorch": "'pytorch=*=*cuda*'"
                }
                return (pkg_names[pkg] || pkg).toLowerCase();
            },
            getCondaCmdHtml() {
                var rapids_version = this.active_release === "Stable" ? this.getStableVersion() : this.getNightlyVersion();
                var rapids_channel = this.active_release === "Stable" ? "rapidsai" : "rapidsai-nightly";
                var python_version = this.active_python_ver;
                var cuda_version_pinning = this.getCondaVersionSupport(this.active_conda_cuda_ver)["pinning"];
                var py_cuda_pkgs = [this.highlightPkgOrImg("python") + "=" + python_version, "'" + this.highlightPkgOrImg("cuda-version") + cuda_version_pinning + "'"].join(" ");
                var conda_channels = [rapids_channel, "conda-forge", "nvidia"]
                    .map(ch => "-" + this.highlightFlag("c") + " " + ch + " ")
                    .join("");
                var indentation = "    ";

                // sort active_packages to appear in the same order as the additional_rapids_packages list
                this.active_packages.sort((a, b) => this.additional_rapids_packages.indexOf(a) - this.additional_rapids_packages.indexOf(b));
                var pkgs = this.active_packages;

                if (this.active_packages.length + this.active_additional_packages.length === 1 && this.active_packages[0] === "Choose Specific Packages") {
                    return "Select at least one package.";
                }

                if (this.active_packages.length === 1 && this.active_packages[0] === "Standard") {
                    pkgs = ["rapids"];
                }

                if (pkgs.includes("cuSpatial/cuProj")) {
                    pkgs = pkgs.filter(pkg => pkg !== "cuSpatial/cuProj");
                    pkgs.push("cuSpatial");
                    pkgs.push("cuProj");
                }
                if (pkgs.includes("RAFT")) {
                    pkgs = pkgs.filter(pkg => pkg !== "RAFT");
                    pkgs.push("pylibraft");
                    pkgs.push("raft-dask");
                }
                if (pkgs.includes("cuVS")) {
                    pkgs = pkgs.filter(pkg => pkg !== "cuVS");
                    pkgs.push("cuvs");
                }


                var pkgs_vers = pkgs.filter(pkg => pkg !== "Choose Specific Packages").map(pkg => this.highlightPkgOrImg(pkg) + "=" + rapids_version + " ").join("").toLowerCase();
                var all_pkgs = pkgs_vers + py_cuda_pkgs;

                var conda_create_ln = this.highlightCmd('conda') + " create " + this.highlightFlag("-n") + " rapids-" + rapids_version + " " + conda_channels;
                var pkgs_ln = indentation + all_pkgs;
                var add_pkgs_ln = "";

                if (this.active_additional_packages.length) {
                    add_pkgs_ln = indentation + this.active_additional_packages
                        .map(pkg => this.highlightCondaPkg(this.getAdditionalPkgName(pkg)))
                        .join(" ");
                }

                var lines = [
                    conda_create_ln,
                    pkgs_ln,
                    add_pkgs_ln
                ].filter(Boolean).join(" \\\n");

                return lines;
            },
            removeLeadingZeros(version) {
                return version.split(".").map(Number).join(".");
            },
            getpipCmdHtml() {
                var pip_install = `${this.highlightCmd("pip")} install`;
                var cuda_suffix = "-cu12";
                var indentation = "    ";

                if (this.active_pip_cuda_ver.startsWith("11")) {
                    cuda_suffix = "-cu11";
                }

                // Change index depending on stable vs nightly for pip
                // Also add versioning commands for nightly installs so that --pre is unnecessary
                // This has duplicate code, but makes for easier edits in the future
                if (this.active_release === "Stable") {
                    index_url = `--${this.highlightFlag("extra-index-url")}=https://pypi.nvidia.com`;
                    var version = this.removeLeadingZeros("{{ site.data.releases.stable.version }}");
                    cuda_suffix = cuda_suffix + `==${version}.*`;
                    var libraryToPkg = (pkg) => {
                        pkg = pkg.toLowerCase();
                        if (pkg === "cuspatial/cuproj") return ["cuspatial" + cuda_suffix, "cuproj" + cuda_suffix];
                        if (pkg === "raft") return ["pylibraft" + cuda_suffix, "raft-dask" + cuda_suffix];
                        if (pkg === "cuvs") return ["cuvs" + cuda_suffix];
                        if (pkg === "cugraph/nx-cugraph") return ["cugraph" + cuda_suffix, "nx-cugraph" + cuda_suffix];
                        return [pkg + cuda_suffix];
                    }
                }
                else {
                    index_url = `--${this.highlightFlag("extra-index-url")}=https://pypi.anaconda.org/rapidsai-wheels-nightly/simple`;
                    var version = this.removeLeadingZeros("{{ site.data.releases.nightly.version }}")
                    cuda_suffix = cuda_suffix + `>=${version}.0a0,<=${version}`;
                    var libraryToPkg = (pkg) => {
                        pkg = pkg.toLowerCase();
                        if (pkg === "cuspatial/cuproj") return ["cuspatial" + cuda_suffix, "cuproj" + cuda_suffix];
                        if (pkg === "raft") return ["pylibraft" + cuda_suffix, "raft-dask" + cuda_suffix];
                        if (pkg === "cuvs") return ["cuvs" + cuda_suffix, "pylibraft" + cuda_suffix];
                        if (pkg === "cugraph/nx-cugraph") return ["cugraph" + cuda_suffix, "nx-cugraph" + cuda_suffix];
                        return [pkg + cuda_suffix];
                    }
                }

                if (this.active_packages.length === 1 && this.active_packages[0] === "Choose Specific Packages") {
                    return "Select at least one package.";
                } else if (this.active_packages[0] === 'Standard') {
                    var pkgs = this.additional_pip_packages.flatMap(libraryToPkg);
                    var additional_pip_commands = libraryToPkg("nx-cugraph");
                    pkgs = pkgs.concat(additional_pip_commands);
                } else {
                    // sort active_packages to appear in the same order as the additional_pip_packages list
                    this.active_packages.sort((a, b) => this.additional_pip_packages.indexOf(a) - this.additional_pip_packages.indexOf(b));
                    var pkgs = this.active_packages
                        .filter(pkg => pkg !== "Choose Specific Packages")
                        .flatMap(libraryToPkg);
                }

                // pkgs.length == 2 because it includes the "Choose Specific Packages" option
                if (this.active_release === "Nightly" && !(pkgs.length === 2 && pkgs[0] === "cucim")) {
                    pkgs.push(["dask-cuda" + cuda_suffix.slice(5)])
                }

                // Make sure all packages (and version selectors) are quoted
                pkgs = pkgs.flatMap(pkg => '"' + pkg + '"');

                // For every n packages add a new line with a "\" character
                // We need i += n + 1 since the splice adds a new element to the array
                if (this.active_release === "Stable") {
                    packages_per_line = 3;
                }
                else {
                    packages_per_line = 2;
                }
                for (var i = packages_per_line; i < pkgs.length; i += packages_per_line + 1) {
                    pkgs.splice(i, 0, "\\\n" + indentation.slice(0, -1));
                }

                return [pip_install, index_url, pkgs.flatMap(pkg => this.highlightPkgOrImg(pkg)).join(" ")]
                    .filter(Boolean)
                    .join(" \\\n" + indentation)
            },
            getDockerCmdHtml() {
                var hasNotebooks = this.active_img_type === "Notebooks";
                var isNightly = this.active_release === "Nightly";
                var imgLoc = "";
                if (this.active_img_loc === "NGC") imgLoc = "nvcr.io/nvidia/";
                var imgVariant = "Base";
                if (this.active_img_type === "Notebooks") imgVariant = this.active_img_type;

                var portOptions = (hasNotebooks ? ["8888:8888", "8787:8787", "8786:8786"] : [])
                    .map(opt => this.highlightFlag("-p") + " " + opt + " ").join("");

                var imgRepo = [
                    imgLoc + "rapidsai/" + imgVariant,
                ].filter(Boolean).join("-");

                var imgTag = [
                    (isNightly ? this.getNightlyVersion() + "a" : this.getStableVersion()),
                    "cuda" + this.active_docker_cuda_ver,
                    "py" + this.active_python_ver
                ].join("-");

                var fullImg = (this.highlightPkgOrImg(imgRepo) + ":" + imgTag).toLowerCase();

                var indent = "    ";
                var cmd = this.highlightCmd("docker") + " run --" + this.highlightFlag("gpus") + " all --" + this.highlightFlag("pull") + " always --" + this.highlightFlag("rm") + " -" + this.highlightFlag("it") + " \\\n" +
                    indent + "--" + this.highlightFlag("shm-size") + "=1g --" + this.highlightFlag("ulimit") + " memlock=-1 --" + this.highlightFlag("ulimit") + " stack=67108864" + " \\\n" +
                    (portOptions ? indent + portOptions + "\\\n" : "") +
                    indent + fullImg;
                return cmd;
            },
            getImgLoc(loc) {
                if (loc === "NGC") return 'NGC (Stable Only) <i class="fa-regular fa-share-nodes"></i>';
                if (loc === "Docker Hub") return 'Docker Hub (Stable and Nightly) <i class="fa-docker fab"></i>';
                return loc;
            },
            getDockerNotes() {
                var notes = [];
                if (this.active_docker_cuda_ver.startsWith("12") && this.active_release === "Stable") {
                    var pkgs_html = this.rapids_meta_pkgs.map(pkg => "<code>" + pkg + "</code>").join(", ");
                    notes = [...notes]
                } else {
                    var pkgs_html = this.rapids_meta_pkgs.map(pkg => "<code>" + pkg + "</code>").join(", ");
                }

                notes = [...notes, "The selected image contains the following packages:<br>" + pkgs_html];
                return notes.map(note => this.note_prefix + " " + note);

            },
            getCondaNotes() {
                var notes = [];
                notes = [...notes, "RAPIDS currently doesn't support <code>channel_priority: strict</code>; use <code>channel_priority: flexible</code> instead"];
                if (this.active_packages.length === 1 && this.active_packages[0] === "Standard") {
                    var pkgs_html = this.rapids_meta_pkgs.map(pkg => "<code>" + pkg + "</code>").join(", ");
                    notes = [...notes, "The <code>Standard</code> selection contains the following packages:<br>" + pkgs_html];
                }

                if (this.active_additional_packages.length) {
                    notes = [...notes, "Third-party packages are not tested."];

                    if (this.active_additional_packages.includes("TensorFlow")) {
                        notes = [...notes, "TensorFlow requires CUDA 12."];
                    }
                }

                return notes.map(note => this.note_prefix + " " + note);
            },
            getpipNotes() {
                var notes = [];
                var install_location_notes = "RAPIDS pip packages are hosted by NVIDIA<br>"
                var version_string = this.getSupportedPythonVersions().map((v) => `<code>${v}</code>`).join(", ")
                notes = [...notes, install_location_notes,
                    `pip installation supports the following Python versions: ${version_string}.<br>`];

                return notes.map(note => this.note_prefix + " " + note);
            },
            getNoteHtml() {
                var notes = [];

                if (this.active_method === "Docker") {
                    notes.push(...this.getDockerNotes());
                }

                if (this.active_method === "Conda") {
                    notes.push(...this.getCondaNotes());
                }

                if (this.active_method === "pip") {
                    notes.push(...this.getpipNotes());
                }

                return notes.map(note => `<div class="option-note">${note}</div>`).join("");
            },
            getCmdHtml() {
                if (this.active_method === "Docker")
                    return this.getDockerCmdHtml();
                if (this.active_method === "Conda")
                    return this.getCondaCmdHtml();
                if (this.active_method === "pip")
                    return this.getpipCmdHtml();
                return "Not implemented yet!";
            },
            getSupportedPythonVersions() {
                if (this.active_release === "Stable") {
                    return this.python_vers_stable;
                }
                return this.python_vers_nightly;
            },
            getSupportedDockerCudaVersions() {
                if (this.active_release === "Stable") {
                    return this.docker_cuda_vers_stable;
                }
                return this.docker_cuda_vers_nightly;
            },
            disableUnsupportedRelease(release) {
                var isDisabled = false;
                if (this.active_img_loc === "NGC" && this.active_method === "Docker" && release === "Nightly") isDisabled = true;
                return isDisabled;
            },
            disableUnsupportedCuda(cuda_version) {
                var isDisabled = false;
                if (this.active_additional_packages.includes("TensorFlow") && (!cuda_version.startsWith("12"))) isDisabled = true;
                return isDisabled;
            },
            disableUnsupportedPython(python_version) {
                var isDisabled = !this.getSupportedPythonVersions().includes(python_version)
                return isDisabled;
            },
            disableUnsupportedDockerCuda(cuda_version) {
                var isDisabled = !this.getSupportedDockerCudaVersions().includes(cuda_version)
                return isDisabled;
            },
            disableUnsupportedImgType(type) {
                var isDisabled = false;
                return isDisabled;
            },
            disableUnsupportedImgLoc(loc) {
                var isDisabled = false;
                if (this.active_release === "Nightly" && loc === "NGC") isDisabled = true;
                return isDisabled;
            },
            disableUnsupportedMethod(method) {
                var isDisabled = false;
                return isDisabled;
            },
            disableUnsupportedPackage(package) {
                var isDisabled = false;
                return isDisabled;
            },
            isDisabled(e) {
                return e.classList.contains("disabled");
            },
            releaseClickHandler(e, release) {
                if (this.isDisabled(e.target)) return;
                this.active_release = release;

                /*
                    It's possible that the active Python version prior to someone changing releases
                    isn't supported by whatever release was chosen in the selector.

                    This handles that case, updating to the newest Python version supported by the chosen release.
                */
               var supported_python_versions = this.getSupportedPythonVersions();
               if (!supported_python_versions.includes(this.active_python_ver)) {
                   this.active_python_ver = supported_python_versions[supported_python_versions.length - 1];
               }

               /*
                   If the selected release doesn't support the selected Docker
                   CUDA version, update Docker CUDA version to the newest
                   supported by the selected release.
               */
               var supported_docker_cuda_versions = this.getSupportedDockerCudaVersions();
               if (!supported_docker_cuda_versions.includes(this.active_docker_cuda_ver)) {
                   this.active_docker_cuda_ver = supported_docker_cuda_versions[supported_docker_cuda_versions.length - 1];
               }
            },
            imgTypeClickHandler(e, type) {
                if (this.isDisabled(e.target)) return;
                this.active_img_type = type;
            },
            condaCUDAClickHandler(e, version) {
                if (this.isDisabled(e.target)) return;
                this.active_conda_cuda_ver = version;
            },
            pipCUDAClickHandler(e, version) {
                if (this.isDisabled(e.target)) return;
                this.active_pip_cuda_ver = version;
            },
            dockerCUDAClickHandler(e, version) {
                if (this.isDisabled(e.target)) return;
                this.active_docker_cuda_ver = version;
            },
            pythonClickHandler(e, version) {
                if (this.isDisabled(e.target)) return;
                this.active_python_ver = version;
            },
            methodClickHandler(e, method) {
                if (this.isDisabled(e.target)) return;
                if (method !== "Docker") {
                    this.active_img_type = "Base";
                }
                if (method !== "Conda") {
                    this.active_additional_packages = [];
                }
                if (method === 'Conda') {
                    this.active_packages = ['Standard'];
                }
                if (method === "pip") {
                    this.active_pip_cuda_ver = '12';
                }
                if (method === "Docker") {
                    if (this.active_release === 'Nightly') {
                        this.active_img_loc = 'Docker Hub';
                    }
                }
                this.active_method = method;
            },
            imgLocClickHandler(e, loc) {
                if (this.isDisabled(e.target)) return;

                if (loc === "NGC" && this.active_release !== "Stable") this.active_release = "Stable";

                this.active_img_loc = loc;
            },
            /**
            * Determines which packages are selected. "Standard" can only be
            * selected individually. All other packages can be selected together.
            **/
            packagesClickHandler(e, package) {
                if (this.isDisabled(e.target)) return;
                if (package === "Standard") {
                    this.active_packages = [package];
                    return;
                }

                if (package === "Choose Specific Packages") {
                    if (this.active_packages[0] === "Standard" && this.active_packages.length === 1) {
                        this.active_packages = [package, "cuDF"];
                        return;
                    } else {
                        return;
                    }
                }

                this.active_packages = this.active_packages.filter(el => el !== "Standard");

                if (this.active_packages.includes(package)) {
                    if (this.active_packages.length === 1) return;
                    this.active_packages = this.active_packages.filter(el => el !== package);
                    return;
                }
                this.active_packages = [...this.active_packages, package];
            },
            additionalPackagesClickHandler(e, package) {
                if (this.isDisabled(e.target)) return;
                if (this.active_additional_packages.includes(package)) {
                    this.active_additional_packages = this.active_additional_packages.filter(el => el !== package);
                    return;
                }
                this.active_additional_packages = [...this.active_additional_packages, package];
                if (this.active_additional_packages.includes("TensorFlow") && this.active_conda_cuda_ver !== "12") this.active_conda_cuda_ver = "12";
            },
            copyToClipboard() {
                let range = document.createRange();
                range.selectNode(this.$refs.cmd);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
                let text = window.getSelection().toString()
                document.execCommand("copy");
                window.getSelection().removeAllRanges();

                /** checks number of installs from copy command vs downloads **/
                gtag('event', 'copyClick', {
                    'button': 'CopyCommand',
                    'install_copy_cmd': text
                });
            },
            copyToGA() {
                let range = document.createRange();
                range.selectNode(this.$refs.cmd);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
                let text = window.getSelection().toString()
                document.execCommand("copy");
                window.getSelection().removeAllRanges();

                /** checks number of installs from copy vs downloads **/
                /** Note mouse-up event is only sent once **/
                gtag('event', 'copyMouseUp', {
                    'button': 'CopyCommand',
                    'install_copy_cmd': text
                });
            }
        }))
    })
</script>