Question: update cell component to edit cell metadata

[jgwerner]

In your opinion, what would be the best way to update the existing nteract cell component or to create a new component that allows the user to update the cell's metadata (afaik such a component doesn't exist, let's call it CellMetadata). The use-case is so certain users can manipulate the cell's metadata required by another service to implement additional logic. ("Certain" in this context is a user role, such as "Content Manager").

For example, consider the cell metadata below, where <my_custom_key> represents an identifier for a service that is using the cell's metadata to implement additional logic within the notebook. This primary key could have sub-keys such as schema_version, cell_locked, etc.

{
    "cells": [
        {
            "cell_type": "markdown",
            "metadata": {
                "<my_custom_key>": {
                    ...
                }
            },
            "source": ["an example cell\n"]
        },
        ... more cells ...
    ],
    ... other notebook information ...
}

With a hypothetical cell metadata component (let's call it CellMetadata component) the user could update the cell's properties directly in the Notebook's interface.

It seems that the papermill project somewhat accomplishes this task, but is limited to adding the parameters tag as a key within the tags key.

[captainsafia]

We don't have a React component that presents a UI for updating the cell's metadata. You can update the metadata of the cell in the notebook using the SetInCell action as done here.

It's definitely possible to implement a React component that displays a UI and interacts with the SetInCell action to update the cells metadata. It should be a new component in the stateful-components package with a profile that looks roughly like this.

interface ComponentProps {
  contentRef: ContentRef;
  id: CellId;
}

class CellMetadata extends React.Component {
  render() {
      return <input className="cell-metadata" />;
  }
}

const mapStateToProps = () => {
  // Get metadata of CellId here
}

const mapDispatchToProps = () => ({
  setInCell: () => {}
});

export connect(mapStateToProps, mapDispatchToProps)(CellMetadata)

[jgwerner]

This is exactly the information we needed. Thank you for taking the time to write an answer with so much detail!