Collections page UI

frontend/i18n/en/collections.json

@@ -0,0 +1,11 @@
+{
+  "collectionsPage": {
+    "title": "Collections",
+    "intro": "Useful, awesome, and interesting plugins curated by the napari community.",
+    "protocols": "<bold>Protocols</bold> show how to use a set of plugins to complete an image analysis workflow",
+    "toolkits": "<bold>Toolkits</bold> are great for getting started within a research domain",
+    "assortments": "<bold>Assortments</bold> are connected by a central theme",
+    "createCollection": "Create a new collection",
+    "fetchError": "Server Error: Unable to get collections"
+  }
+}

frontend/i18n/en/common.json

@@ -1,6 +1,7 @@
 {
   "about": "About",
   "close": "Close",
+  "collections": "Collections",
   "contact": "Contact",
   "cziOss": "Chan Zuckerberg Initiative EOSS Program",
   "download": "Download",
@@ -17,6 +18,7 @@
   "napariMainWebsite": "napari main website",
   "napariPlausible": "napari.dev analytics dashboard",
   "plausiblePrivacy": "Plausible.io Privacy Policy",
+  "plugins": "Plugins",
   "privacy": "Privacy",
 
   "ariaLabels": {

frontend/i18n/en/pageTitles.json

@@ -2,6 +2,7 @@
   "base": "napari hub",
   "home": "$t(base) | search",
   "preview": "preview",
+  "collections": "$t(base) | collections",
   "plugin": {
     "base": "$t(base) | plugins",
     "loading": "loading",

frontend/mock-server.js

@@ -4,10 +4,11 @@ if (process.env.MOCK_SERVER === 'false') {
 }
 
 const express = require('express');
-const { set } = require('lodash');
+const { set, pick } = require('lodash');
 
 const napariPlugin = require('./src/fixtures/plugin.json');
 const pluginIndex = require('./src/fixtures/index.json');
+const collections = require('./src/fixtures/collections.json');
 
 const app = express();
 
@@ -37,4 +38,18 @@ app.get('/plugins/:name', async (req, res) => {
   }
 });
 
+app.get('/collections', async (_, res) => {
+  res.json(
+    collections.map((collection) =>
+      pick(collection, [
+        'title',
+        'cover_image',
+        'summary',
+        'curator',
+        'symbol',
+      ]),
+    ),
+  );
+});
+
 app.listen(8081, () => console.log('Started mock API server'));

frontend/next.config.js

@@ -31,7 +31,11 @@ const previewOptions = isPreview
         };
       },
     }
-  : {};
+  : {
+      images: {
+        domains: ['raw.githubusercontent.com', 'github.com'],
+      },
+    };
 
 if (isPreview) {
   console.log('Building preview page for plugin file', PREVIEW);

frontend/scripts/create-collection-data.mjs

@@ -0,0 +1,132 @@
+/**
+ * This script is used for generating the collection fixture data in a
+ * reproducible way.
+ */
+
+import { sample } from 'lodash-es';
+import fs from 'fs';
+import path from 'path';
+
+const titles = [
+  'Time-saving segmentation plugins',
+  'Allen Cell Institute’s plugins',
+  'ABRF biology workflow',
+  'Point-detection plugins',
+  'The most essential readers and writers for biologists',
+  'Neuro-pathway detection',
+  'The best sample datasets for cell biology',
+  'napari themes',
+  'Segmentify any cell type',
+  'Contrast-enhancing plugins for microscopy analysis',
+  'Segmentify anything you can imagine',
+  'Feature detection plugins',
+];
+
+const summaries = [
+  'Hand-picked plugins to help you segment your cells ever so efficiently.',
+  'All plugins made public by the Allen Cell Institute; primarily aimed at cell biologists.',
+  'Plugins filling the gap in the ABRF workflow in napari.',
+  'The most accurate point-detection plugins for napari; list actively updated.',
+  "Open and save to most any file format you'll need as a biologist in napari with this list.",
+  'napari plugins specifically for neurobiologists looking to detect neural pathways.',
+  'Sample datasets with several pre-identified features to test workflows against.',
+  "Every plugin capable of changing napari's theme, from fonts to colors.",
+  'From plant cells to paramecia, these plugins have you and your obscure cell types covered',
+  'Reduce noise and enhance signal; some included plugins also de-blur impressively.',
+  'From pumpkins to penguins to jelly beans in jars, let the ML do the counting for you!',
+  'Just a few favorite featurization plugins from the community.',
+];
+
+const curatorNames = [
+  'Vivien Donovan',
+  'Quigley Schoolcraft',
+  'Moab Luminoso',
+  'Kinshasa Kosette Mickelthwait-Venkatesh',
+  'Fritz Curiel',
+  'Zed Wexler',
+  'Faisal Farooq',
+  'Brigitta Fleet',
+  'Guster Talltooth',
+  'Via Levine',
+  'Alfredo Angelopolous',
+  'Greggor Golightly',
+];
+
+const curatorInstitutions = [
+  'Imaging Scientist, Cell Core Research Facility',
+  'Machine Learning Engineer, Allen Cell Institute',
+  'Imaging Research Scientist, Association of Biomolecular Resource Facilities',
+  'Research Biologist, Low Anchor Center for Human Disease and Study',
+  'Cell Innovation Expert, University of Catania',
+  'Research Biologist, Cardiff College of Microbiology',
+  'Cell Disease Specialist, University of Washington Medical Center',
+  'Chan Zuckerberg Initiative',
+  'Orinda Medical Center Fellow, Orinda Medical Center',
+  'Imaging Specialist, Hobie Swingle Institute for Cell Science',
+  'Research Scientist, ML for the Cell',
+  'Cell Innovation Scientist, Carpati Institution',
+];
+
+const curatorTitles = [
+  'Head Research Engineer',
+  'Product Manager',
+  'Software Engineer',
+  'Imaging Scientist',
+];
+
+const images = [
+  'national-cancer-institute-4zA4w-dr5WM-unsplash.jpg',
+  'national-cancer-institute-J28Nn-CDbII-unsplash.jpg',
+  'national-cancer-institute-LnvCEXQwC-o-unsplash.jpg',
+  'national-cancer-institute-NbZQYileaOI-unsplash.jpg',
+  'national-cancer-institute-TX9pU27p6D0-unsplash.jpg',
+  'national-cancer-institute-W2OVh2w2Kpo-unsplash.jpg',
+  'national-cancer-institute-dMZC6hdobnk-unsplash.jpg',
+  'national-cancer-institute-evhLgfOjU5Y-unsplash.jpg',
+  'national-cancer-institute-irmUWEcjIz4-unsplash.jpg',
+  'national-cancer-institute-lsxKuARrQXI-unsplash.jpg',
+  'national-cancer-institute-mbL91Lg56zc-unsplash.jpg',
+  'national-cancer-institute-rvDeUG7YV64-unsplash.jpg',
+];
+
+const data = {
+  title: '',
+  updated_date: '2022-05-30',
+  summary: '',
+  cover_image: '',
+  curator: {
+    name: '',
+    title: '',
+    affiliation: {
+      institution: '',
+      website: 'https://example.com',
+    },
+  },
+};
+
+const result = [];
+
+for (let i = 0; i < titles.length; i += 1) {
+  const coverImage = `https://raw.githubusercontent.com/chanzuckerberg/napari-hub-collections/main/images/${images[i]}`;
+
+  result.push({
+    ...data,
+    title: titles[i],
+    symbol: titles[i].toLowerCase().replaceAll(' ', '-').replaceAll('’', ''),
+    summary: summaries[i],
+    cover_image: coverImage,
+    curator: {
+      ...data.curator,
+      name: curatorNames[i],
+      title: sample(curatorTitles),
+      affiliation: {
+        ...data.curator.affiliation,
+        institution: curatorInstitutions[i],
+      },
+    },
+  });
+}
+
+const rootDir = path.resolve(new URL(import.meta.url).pathname, '../..');
+const indexFile = path.resolve(rootDir, 'src/fixtures/collections.json');
+fs.writeFileSync(indexFile, JSON.stringify(result, null, 2));

frontend/src/components/AppBar/__snapshots__/AppBar.test.tsx.snap

@@ -26,15 +26,15 @@ exports[`<AppBar /> should match snapshot 1`] = `
         >
           <a
             class="ml-6"
-            href="/about"
+            href="/"
           >
-            About
+            Plugins
           </a>
           <a
             class="ml-6"
-            href="/faq"
+            href="/collections"
           >
-            FAQ
+            Collections
           </a>
         </div>
       </nav>

frontend/src/components/AppBar/useAppBarLinks.ts

@@ -1,7 +1,13 @@
 import { useLinks } from '@/hooks/useLinks';
+import { useIsFeatureFlagEnabled } from '@/utils/featureFlags';
 
 export function useAppBarLinks() {
   const links = useLinks();
+  const isCollectionsEnabled = useIsFeatureFlagEnabled('collections');
+
+  if (isCollectionsEnabled) {
+    return [links.PLUGINS, links.COLLECTIONS];
+  }
 
   return [links.ABOUT, links.FAQ];
 }

frontend/src/components/CollectionsPage/CollectionCard.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+
+import { Link } from '@/components/Link';
+import { CollectionIndexData } from '@/types/collections';
+
+interface Props {
+  collection: CollectionIndexData;
+}
+
+/**
+ * Shared line height class names for text.
+ * TODO Extract this to design system
+ */
+const LINE_HEIGHT_CLASS_NAME = 'leading-[150%] screen-495:leading-[125%]';
+
+/**
+ * Renders an image, title, summary, and curator for a collection on the
+ * collection home page.
+ */
+export function CollectionCard({ collection }: Props) {
+  return (
+    <Link
+      className="hover:bg-napari-hover-gray focus:bg-napari-hover-gray"
+      href={`/collections/${collection.symbol}`}
+    >
+      <div className="relative w-full h-[50px] screen-495:h-[100px]">
+        <Image
+          className="object-cover"
+          src={collection.cover_image}
+          alt={`${collection.title} cover image`}
+          layout="fill"
+        />
+      </div>
+
+      <h2
+        className={clsx(
+          'my-[10px] screen-495:my-[20px]',
+          'font-semibold text-[11px] screen-495:text-[17px]',
+          LINE_HEIGHT_CLASS_NAME,
+        )}
+      >
+        {collection.title}
+      </h2>
+      <p className="text-[11px] screen-495:text-[14px] leading-[150%]">
+        {collection.summary}
+      </p>
+
+      <p
+        className={clsx(
+          'space-x-1 mt-[10px] screen-495:mt-[20px]',
+          'text-[9px] screen-495:text-[11px]',
+          LINE_HEIGHT_CLASS_NAME,
+        )}
+      >
+        <span className="font-semibold">{collection.curator.name}</span>
+        <span>{collection.curator.affiliation.institution}</span>
+      </p>
+    </Link>
+  );
+}