Add a conda installer selector widget

[travishathaway]

Description

We would like to have a widget on the website for people to use to figure out which conda installer is right for them. Here are just a few ways to install conda:

• Anaconda installer
• Miniconda installer
• Miniforge installer
• Mambaforge installer
• Micromamba installer
• More?

Prerequisites

• Knowledge of HTML/CSS
• Knowledge of React JS

Tasks

• Conduct a complete survey of all the ways that you install conda/mamba (most should be listed above already; let's make sure we haven't forgotten anything)
• Propose a list of conda/mamba installers to include in the selection widget (post that list here and get approval from the conda dot org maintainers; come find us in our Matrix chat)
• Create the widget; this will involve coding something in React JS
• Create a pull request and get approval

Good to know ☝️

There will most likely be a little back-and-forth on the design. It's okay to begin prototyping something before we know all the installers we want to include.

[bupd]

I would like to contribute

[jaimergp]

Inspiration: https://pytorch.org/get-started/locally/

[travishathaway]

@bupd,

Are you still interested in contributing this feature? If so, I can assign this issue to you. I just updated the description of the issue to be a little more clear.

Let me know if you are still interested or have any questions.

[travishathaway]

All,

I have marked this as a https://github.com/conda-incubator/conda-dot-org/labels/good%20first%20issue in case anyone else would like to work on it. @bupd will have priority because he/she asked first. If he/she does not want to work on this issue, I will assign it to the second person who comments.

[Shreyas-SAS]

@travishathaway if @bupd is not available, I can work on this issue. Please assign it to me in that case. Thanks.

[bhavukkalra]

@Shreyas-SAS @travishathaway Any progress on this?
I see that this issue isn't assigned yet. Do let me know, If someone gets assigned to this.
Maybe we can collaborate on it!

[travishathaway]

@Shreyas-SAS,

You've already been assigned to another issue. To more fairly distribute our good first issues, I will be assigning this to @bhavukkalra instead.

@bupd, I'm going assume you're no longer interested given it's been a couple of days since I messaged you.

[Shreyas-SAS]

@travishathaway yeah, it's fine. I will also start my work on the other issue in an hour or so. Thanks.

[bhavukkalra]

Survey currently under review by the community [No additions have been made, other than the installer options already listed in the original issue]. These are the installations -

Anaconda - https://docs.anaconda.com/free/anaconda/install/index.html
MiniConda - https://docs.conda.io/en/latest/miniconda.html
MiniForge - https://github.com/conda-forge/miniforge
mambaforge - https://github.com/conda-forge/miniforge#mambaforge
micromamba - https://mamba.readthedocs.io/en/latest/installation.html#micromamba

[bhavukkalra]

Just wanted to update on the status of this issue.

• Working on summarizing the inputs gathered from the matrix chat
• Replicating the UI experience of https://pytorch.org/get-started/locally/, with custom fields (Will share a sample here).

[bhavukkalra]

Summary -

These are the different installation ways that are being considered for addition

Anaconda
MiniConda
MiniForge
mambaforge
micromamba
condacolab (Only for Google Colab)
ensureconda
brew
nuget (Couldn't find the website for this)
scoop (Can install mamba forge using scoop)

Below is a sample widget
Inspiration from - https://pytorch.org/get-started/locally/

---

Additon to be made - "the Python versions for which the different installers are available (Anaconda and Miniconda offer several, but Miniforge and Mambaforge only one; and this info doesn't really apply to micromamba), and the operating systems / architectures."

I believe we can address this by just listing out Python version available alongside the version selected from the widget.
Or should we make a separate selection just for this?

Example -

Sample Prototype

TODO

• Rendering the sample output command based on the widgets selected above, which should be done soon

Few Questions -

• Does the below the implementation looks good? Do let me know if there are any new tabs that could be added
• Do we have a standardized color palette for the website? So that I could make the [Tabs] look in sync with the website

[bhavukkalra]

Here is the Final first draft widget Interaction

Code - https://github.com/bhavukkalra/react-samples

[travishathaway]

Hi @bhavukkalra,

This looks like a good first attempt. Are you able to link to a live preview anywhere?

[bhavukkalra]

Sure @travishathaway , Here it is - https://bhavukkalra.github.io/react-samples/

I created a separate route for this.

[travishathaway]

@bhavukkalra,

One thing that should be addressed is that on hover the cursor needs to turn into a pointer just like it does when you hover over links in your browser.

I also think that the colors on the left column should be muted like they are on the PyTorch selection matrix. I don't like the stark contrast between the green and the red. The red should be a green and the green should go away.

Speaking of colors, you should also consider choosing colors that fit the theme for the website. You can find those colors here: https://conda.org/style-guide#color-palette

[jaimergp]

I think we still need the Python implementation (CPython, PyPy) and version(3.8-3.11?) selector (for some combinations only), and the architecture(s) (linux-64, linux-aarch64, linux-ppc64le, osx-64, osx-arm64, win-64...).

[jaimergp]

One more reference, the rapids.ai page:

• https://docs.rapids.ai/install#selector
• Source: https://github.com/pytorch/pytorch.github.io/blob/site/assets/quick-start-module.js

[bhavukkalra]

One more reference, the rapids.ai page:

• https://docs.rapids.ai/install#selector
• Source: https://github.com/pytorch/pytorch.github.io/blob/site/assets/quick-start-module.js

This is actually quiet helpful. Implementing this straight in code could be quiet a task with all the slider logic that needs to be made.
@jaimergp What do you suggest? Should we make a final design first, like in figma or something, as that could give us a guiding direction.

As once that is finalized, I believe It won't take long to convert that into code. (As we can use the above as a template)

[jaimergp]

If it's easier for you to do it in Figma, go ahead!

[Avik-creator]

Can I contribute to this?

[tnabtaf]

Hi @Avik-creator, I think this effort stalled. If you would be interested in working on it, then I encourage you to work on it, and make it your own!

[travishathaway]

@Avik-creator, I added you as co-assignee. Let us know if you need clarification or help.

[Avik-creator]

Sure sorry for the very late reply and @travishathaway the issue is still not completed right?

[travishathaway]

@Avik-creator,

The issue is still available to work on.

[Avik-creator]

Ok thanks

[Avik-creator]

@travishathaway can we make it like this?

[travishathaway]

@Avik-creator,

No. The selection of a conda installer depends on at least two variables:

1. Operating system
2. Installer type (e.g. Miniforge, Miniconda or Anaconda)

So, it needs to reflect those.

[Avik-creator]

@travishathaway Ok, so the UI is not the problem right? I will add those then

[Avik-creator]

Deployed URL of the Prototype: https://guileless-salmiakki-3e2ec6.netlify.app

Github URL: https://github.com/Avik-creator/conda-forge

@travishathaway please check it once, if possible if you wanted it like this or not, then will do the integration in the main site

[travishathaway]

Thanks @Avik-creator,

This is looking good so far, but I am still not sure exactly where on the website we are going to put this.

@jaimergp, do you have any thoughts or opinions on this?

[Avik-creator]

I guess what we can do is to have a install button in the home page and then create a pop up modal containing this?

@travishathaway

[travishathaway]

I guess what we can do is to have a install button in the home page and then create a pop up modal containing this?

@travishathaway

Yes, that is one possibility. If it's not too difficult to implement, it would be really nice to see a pull request with this implemented. Each pull request generates a hosted preview of the website we can examine.

If you need more certainty before working on a such a thing, hold off for now and let me talk with some of the other project maintainers to make sure this is really something we would like to have on the website.

[Avik-creator]

Sure then will make a pr with this being implemented. You can check it there once.

[jaimergp]

We'll also need the architecture of the operating system:

• Linux x64, aarch64, ppc64le
• macOS x64, ARM64
• Windows x64, (and soon ARM64)

And it would be nice to have the selector inform about the default channel (mostly defaults or conda-forge).

Then we need a way to include micromamba and pixi in the matrix because they are self-contained tools in a way.

[jaimergp]

I am still not sure exactly where on the website we are going to put this.

It should be in a page where we discuss the different ways of getting started with the conda packaging ecosystem. "Choose your conda package manager" would be the section where this widget allows an easy way to choose what they user might want.

[Avik-creator]

@jaimergp @travishathaway Something like this? The URL's might be broken for some I should say, for the installation modal.

https://guileless-salmiakki-3e2ec6.netlify.app

Just a suggestion, rather than making it hardcoded in the Frontend, we can get it through an API (if there is any) then we can make it dynamic.

And Happy Diwali Everyone

[jaimergp]

That's a super solid start! Love it! Do you think you can make it work with our Docusaurus site? It should be more or less straight forward with React (but I haven't seen the code behind your widget, so ymmv). Once there's a PR opened in this repo we can provide more specific feedback (e.g. wording or dropdown order).

[Avik-creator]

I think we could do it. I was using tailwind css but let me just do it using plain css and make it good enough. Could you please share the picture of the place where we should place it in the website so that I could start working on it. @travishathaway @jaimergp

Thank you in advance. Should I place it here?

[jaimergp]

You can create a new page under Learn: learn/installers.mdx or something. Docusaurus uses its own framework "Infima" so there are some components you can reuse (but it's not as full featured as others). Check https://docusaurus.io/docs/styling-layout#global-styles.

[Avik-creator]

@travishathaway @jaimergp Created the PR. Please check it once, do let me know If I need to change somethings.