query more of the text fields in markdown and make figure component by interim17 · Pull Request #37 · AllenCell/idea-board

interim17 · 2026-02-06T03:16:59Z

Update:
In response to @jessicasyu nicely stress testing the figures data entry, I pushed up a few changes

variable type imageLink and imageFile for figures
custom widget url-image for imageLink
- this gets us a string entry with a preview and removes the button to add a local file
-slightly overkill? but fun to add a custom widget and this seemed like a pain: https://www.gatsbyjs.com/docs/how-to/images-and-media/preprocessing-external-images/

Problem

Advances #7

querying the various fields in the markdown that we weren't rendering yet: preliminary findings, next steps, authors, publication
build a very basic component as a container for figures, can expand on this later

Not a polished design, but it's easier to picture the final result if add better placeholders, and actually query and render the data. Then we can design around something more reasonable.

ing-system.url/ticket-number)

netlify · 2026-02-06T03:17:05Z

✅ Deploy Preview for project-idea-board ready!

Name	Link
🔨 Latest commit	`1c19637`
🔍 Latest deploy log	https://app.netlify.com/projects/project-idea-board/deploys/69ab6bd517cd7e0008d7196b
😎 Deploy Preview	https://deploy-preview-37--project-idea-board.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

This PR enhances the idea post template by querying and rendering additional markdown frontmatter fields that were previously not displayed, including authors, publication info, preliminary findings with figures, and next steps. A new Figure component was created to display images with captions.

Changes:

Added type definitions for PreliminaryFindings and Figure to support the new data structures
Created a FigureComponent to render images with captions in a styled card container
Updated the idea post template to display authors, publication, preliminary findings with figures, and next steps as a formatted list

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/types/index.ts	Added type exports for PreliminaryFindings and Figure
src/templates/idea-post.tsx	Integrated new fields into template, added Figure rendering, and updated GraphQL query
src/style/figure.module.css	Added styling for figure container and captions with responsive design
src/pages/ideas/dev-example.md	Reformatted markdown structure and updated example content
src/components/Figure.tsx	Created new component to render figures with GatsbyImage and captions
gatsby-node.js	Added schema definitions and resolvers for new frontmatter fields

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/types/index.ts

+export type IdeasForTags = Queries.AllIdeasForTagsQuery["allMarkdownRemark"]["edges"];
+
+export type PreliminaryFindings = NonNullable<IdeaFrontmatter["preliminaryFindings"]>;
+export type Figure = NonNullable<IdeaFrontmatter["preliminaryFindings"]>["figures"][number]


src/components/Figure.tsx

gatsby-node.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…eature/more-queries

…stom url widget

…eature/more-queries

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/templates/idea-post.tsx

 import React from "react";
 import { Helmet } from "react-helmet-async";
 import { graphql, Link, PageProps } from "gatsby";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";


src/templates/idea-post.tsx

+                        {hasFigures &&
+                            preliminaryFindings.figures.map((figure) => {
+                                return (
+                                    <FigureComponent
+                                        figure={figure}
+                                    />
+                                );
+                            })}


src/templates/idea-post.tsx

                {nextSteps && (
                    <div className={section}>
-                        <h2 className={sectionTitle}>Suggested next steps:</h2>
-                        {nextSteps}
+                        <h4 className={sectionTitle}>Suggested next steps:</h4>
+                        <ul>
+                            {nextSteps.map((step: string, index: number) => (
+                                <li key={index}>{step}</li>
+                            ))}
+                        </ul>
                    </div>
                )}


interim17 · 2026-02-09T23:24:59Z

gatsby-node.js

+            preliminaryFindings: {
+                resolve: (source) => {
+                    const raw = source.preliminaryFindings;
+                    if (!raw || typeof raw !== "object") {
+                        return {
+                            summary: "",
+                            figures: [],
+                        };
+                    }
+                    return {
+                        summary: stringWithDefault(raw.summary, ""),
+                        figures: resolveToArray(raw.figures),
+                    };
+                },
+            },


Handled this slightly differently

gatsby-node.js

+        type ImgWithCaption @dontInfer {
+            type: String!
+            url: String
+            file: File @fileByRelativePath
+            caption: String
+        }


src/templates/idea-post.tsx

+                        caption
+                    }
+                }
+                publication


src/components/Figure.tsx

…dea-board into feature/more-queries

interim17 · 2026-02-09T23:32:29Z

static/admin/config.yml

+                            types:
+                                [
+                                    {
+                                        label: "Image link",
+                                        name: "imageLink",
+                                        widget: "object",
+                                        fields: [
+                                                {
+                                                    label: "Figure URL",
+                                                    name: "url",
+                                                    widget: "url-image",
+                                                    hint: "Enter a valid image URL to see a preview",
+                                                },
+                                                {
+                                                    label: "Caption",
+                                                    name: "caption",
+                                                    widget: "string",
+                                                    required: false,
+                                                },
+                                            ],
+                                    },
+                                    {
+                                        label: "Image file",
+                                        name: "imageFile",
+                                        widget: "object",
+                                        fields: [
+                                                {
+                                                    label: "Figure",
+                                                    name: "file",
+                                                    widget: "image",
+                                                    choose_url: false,
+                                                },
+                                                {
+                                                    label: "Caption",
+                                                    name: "caption",
+                                                    widget: "string",
+                                                    required: false,
+                                                },
+                                            ],
+                                    },
+                                ],


The default image widget is nice in the admin page, but a bit of pain when it comes time to query and use a remote URL for an image (like the one Jess added). This sets us up to use our custom url-image widget and preview.

interim17 · 2026-02-09T23:34:09Z

src/cms/widgets/UrlImageWidget.js

+import React from "react";
+
+// Custom widget for URL-only image input with preview
+export const UrlImageControl = ({ value, onChange, forID, classNameWrapper }) => {
+    return React.createElement(
+        "div",
+        { className: classNameWrapper },
+        React.createElement("input", {
+            id: forID,
+            type: "text",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: "https://example.com/image.png",
+            style: { width: "100%" },
+        }),
+        value &&
+            React.createElement("img", {
+                src: value,
+                alt: "Preview",
+                style: { display: "block", marginTop: "12px", maxWidth: "100%", maxHeight: "200px" },
+            })
+    );
+};
+
+export const UrlImagePreview = ({ value }) =>
+    value ? React.createElement("img", { src: value, alt: "Preview" }) : null;


Custom widget and preview for the CMS.

Essentially all this is is a "string" widget and a preview so that we can get the functionality of an "image" widget without the button that gives the option to load in a local file.

That way when we query by type we know easily which one we are dealing with. The suggested workaround from gatsby seemed like a pain, especially given that we are not storing figures directly on a markdown node:
https://www.gatsbyjs.com/docs/how-to/images-and-media/preprocessing-external-images/

…eature/more-queries

jessicasyu · 2026-02-20T22:25:27Z

@interim17 Not sure if just me, but the images are displaying diagonally for me on the dev example:

meganrm · 2026-02-23T23:51:40Z

gatsby-node.js

        Shared frontmatter fields for idea posts (and other markdown).
        """
        type Frontmatter {
+            authors: [String!]!


what does the "!" do?

It means not nullable.

So in this case authors type is authors: string[]; and we get an error if markdown doesn't provide it, or a resolver doesn't handle providing a default.

Default gatsby inference would type this as authors: (string | null)[] | null;

…eature/more-queries

interim17 · 2026-02-25T21:14:01Z

src/cms/widgets/UrlImageWidget.js

+import React from "react";
+
+// Custom widget for URL-only image input with preview
+export const UrlImageControl = ({
+    value,
+    onChange,
+    forID,
+    classNameWrapper,
+}) => {
+    return React.createElement(
+        "div",
+        { className: classNameWrapper },
+        React.createElement("input", {
+            id: forID,
+            type: "text",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: "https://example.com/image.png",
+            style: { width: "100%" },
+        }),
+        value &&
+            React.createElement("img", {
+                src: value,
+                alt: "Preview",
+                style: {
+                    display: "block",
+                    marginTop: "12px",
+                    maxWidth: "100%",
+                    maxHeight: "200px",
+                },
+            }),
+    );
+};
+
+export const UrlImagePreview = ({ value }) =>
+    value ? React.createElement("img", { src: value, alt: "Preview" }) : null;


Will consider refactoring this to use the pattern in #49 when that gets merged.

interim17 · 2026-02-25T21:19:21Z

@interim17 Not sure if just me, but the images are displaying diagonally for me on the dev example:

Deferring the long term design choice here, but wrapped it in a flex box for now.

meganrm · 2026-03-03T18:11:56Z

@interim17 can you add the String @md formatting to the widgets that Jess included links in (and make sure they are markdown widgets?)

…eature/more-queries

interim17 · 2026-03-05T20:59:14Z

@Megan making those widgets into markdown widgets is easy, will do.

After trying to add String @md I remembered how we arrived at the pattern in cell-catalog and I have thoughts.

That typing is made available by a plugin: https://www.npmjs.com/package/gatsby-transformer-remark-frontmatter?activeTab=versions
Which is limited to use on the top-level frontmatter and adds a nested field to a query:

introduction
vs
introduction {
    html
}

The plugin converts that html to markdown we can use. I dislike the restriction of using that type only in top-level front matter which is a pattern I kind of want to move away from (dumping all possible fields on all possible markdown files into a single frontmatter type). It also adds a nested nullable field which brings complexity with it.

Another way to handle it is to use a markdown widget, leave the schema type as a raw string, and then render it with something like react-markdown. This is a little more client-side heavy and less SSG/"gatsbyish" but react-markdown is well supported and flexible. The upside here is the library is featured and it keeps our schema/queries more flexible and more simple. Downside here is that the react markdown components need to be configured to get styling just right.

I am leaning towards the second option although I think there are good arguments for both. In either case implementing this feels out of scope for this PR?
I made an issue: #65

interim17 · 2026-03-07T00:03:46Z

@meganrm as requested I added the react-markdown approach to everywhere that renders something from a markdown widget

CustomReactMarkdown makes thing DRY by applying one override that removes default margins on <p> tags

This PR is officially TOO BIG, let's merge it soon and we can keep cleaning up the idea page in subsequent PRs.

@jessicasyu are you willing to rubber stamp this?

jessicasyu

Mostly over my head, but the images are rendering as expected and the various fields are showing up in the deploy preview!

Looks like the markdown rendering in the resource description is still a little wonky, but that can be fixed later?

query more of the text fields in markdown and make figure component

d7d2e3b

interim17 requested a review from Copilot February 6, 2026 03:17

Copilot AI reviewed Feb 6, 2026

View reviewed changes

interim17 and others added 7 commits February 5, 2026 19:23

Update gatsby-node.js

3020193

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

remove key and index from figure component

4f4bcf2

add resolver for next steps

d3f201e

tighten up preliminaryFindings resolver

85faacf

Merge branch 'main' of https://github.com/AllenCell/idea-board into f…

d733efa

…eature/more-queries

fix remote url issues in figures with variable types component and cu…

15ccd2a

…stom url widget

Merge branch 'main' of https://github.com/AllenCell/idea-board into f…

e6d8928

…eature/more-queries

interim17 requested a review from Copilot February 9, 2026 23:15

Copilot AI reviewed Feb 9, 2026

View reviewed changes

interim17 added 4 commits February 9, 2026 15:18

use caption as alt in GatsbyImage

3705b6f

more robust check for preliminary findings

bd20be7

more robust check for preliminary findings

ad0b157

Merge branch 'feature/more-queries' of https://github.com/AllenCell/i…

fbe727f

…dea-board into feature/more-queries

interim17 commented Feb 9, 2026

View reviewed changes

restore title field

18ca6a5

interim17 requested review from jessicasyu and meganrm February 10, 2026 00:06

interim17 added 2 commits February 9, 2026 16:17

Merge branch 'main' of https://github.com/AllenCell/idea-board into f…

dae1df4

…eature/more-queries

scale image inside container

397a360

meganrm reviewed Feb 23, 2026

View reviewed changes

interim17 added 3 commits February 25, 2026 12:31

Merge branch 'main' of https://github.com/AllenCell/idea-board into f…

2cbb8c4

…eature/more-queries

add types to gql file

55c3bb1

lint and format

7107fa3

interim17 commented Feb 25, 2026

View reviewed changes

wrap figures in a flexbox

6b5c910

interim17 requested a review from meganrm February 25, 2026 22:24

interim17 added 2 commits March 4, 2026 17:16

Merge branch 'main' of https://github.com/AllenCell/idea-board into f…

0d68755

…eature/more-queries

change text to markdown widgets

0748fae

use react markdown to render strings that come from markdwon cms widgets

cfed495

remove duplicate idea post template

1c19637

meganrm approved these changes Mar 7, 2026

View reviewed changes

jessicasyu approved these changes Mar 7, 2026

View reviewed changes

Conversation

interim17 commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Uh oh!

netlify bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for project-idea-board ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

interim17 Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

interim17 Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

jessicasyu commented Feb 20, 2026

Uh oh!

meganrm Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 commented Feb 25, 2026

Uh oh!

meganrm commented Mar 3, 2026

Uh oh!

interim17 commented Mar 5, 2026

Uh oh!

interim17 commented Mar 7, 2026

Uh oh!

jessicasyu left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

interim17 commented Feb 6, 2026 •

edited

Loading

netlify bot commented Feb 6, 2026 •

edited

Loading