Dans la nouvelle interface utilisateur (UI), nous avons été confrontés à un défi commun : permettre aux utilisateurs de sélectionner un grand nombre de fichiers et d'effectuer une action de groupe sur ces éléments. La première chose qui nous est venue à l’esprit a été d’afficher tous les fichiers avec une case à cocher à côté de chacun. Cela s'est avéré problématique pour trois raisons : 1) le chargement initial des données pour plus de 100,000 2 éléments peut prendre beaucoup de temps, 100,000) le rendu du DOM pour plus de 3 100,000 éléments peut potentiellement faire planter un navigateur, et XNUMX) l'option "Sélectionner/Désélectionner tout". » ou commander une liste de plus de XNUMX XNUMX articles peut être une expérience extrêmement lente.

Tout d’abord, nous avons recherché une solution existante dans une application fréquemment utilisée et avons constaté que Gmail rencontrait un problème similaire, sauf avec les e-mails. Dans l'application Gmail, vous ne pouvez pas « Tout sélectionner » dans votre boîte de réception, mais une fois que vous avez affiné la liste des e-mails à l'aide d'un filtre et sélectionné toutes les conversations sur la page, vous recevez cette notification :

Cliquer sur « Sélectionner toutes les conversations correspondant à cette recherche » sélectionnerait chaque e-mail filtré par le mot-clé de recherche, mais si vous essayiez de désélectionner un e-mail dans la liste, la bascule Tout sélectionner serait désactivée. Autrement dit, effectuer une action sur tous les éléments qui correspondent au filtre, à l'exception de quelques-uns, n'est pas possible dans l'interface utilisateur de Gmail. Dans de tels cas, vous devrez configurer votre filtre avec soin pour inclure uniquement les e-mails pour lesquels vous souhaitez effectuer une action de groupe.

Ce que Gmail a fait était certainement mieux que de potentiellement planter un navigateur, mais cela ne répondrait pas aux besoins de nos utilisateurs. Sur la plateforme Rescale, les gens voulaient en fait supprimer ou télécharger tous leurs fichiers à l'exception de quelques-uns. Nous avons donc imaginé ce que nous appelons un règle d'inclusion/exclusion, et voici comment cela fonctionne.

Lorsqu'un utilisateur visite la page de résultats pour la première fois, il ne voit que les 10 premiers fichiers (sauf indication contraire). La liste est paginée côté serveur, de sorte que le navigateur ne connaît que les 10 fichiers à la fois.

Si l'utilisateur commence à sélectionner des fichiers à l'aide d'une case à cocher, les fichiers sélectionnés seront inclus dans le jeu d'inclusion.

Mais ce qui est différent ici, c'est l'option « Tout sélectionner N des dossiers". Si l'utilisateur clique sur ce bouton, le jeu d'inclusion est vidé et l'indicateur de sélection de tous les fichiers est défini sur true. Et à partir de ce moment, les fichiers que l’utilisateur désélectionne seront placés dans un ensemble d’exclusions.

Enfin, lorsque l'utilisateur effectue une action de groupe, Redimensionner envoyer au serveur soit un ensemble d'inclusion, soit un ensemble d'exclusions à utiliser pour l'action.

Comme les utilisateurs ont demandé par le passé une meilleure façon de gérer leurs fichiers de sortie, nous avons travaillé pour rendre la nouvelle interface utilisateur plus utile, en particulier pour ceux qui exécutent des simulations générant un grand nombre de fichiers.