# How to get a cell’s name?

**URL:** https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246
**Category:** Help
**Created:** [September 25, 2018, 10:40am UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246 "2018-09-25T10:40:55Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [September 25, 2018, 10:40am UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/1 "2018-09-25T10:40:55Z")

</div>

How can I get a cell’s name?

E.g. to create some generic documentation, I’d like call a function with a cell reference as argument and then generate some `md` that includes the cell’s name.

```
hiThere = ({width: 10, height: 10, description: "Hello world."})

function describe(cell) {
  return md`Cell *${cell.constructor.name}*’s description is “${cell.description }”`;
}

describe(hiThere)

```

Cell _Object_’s description is “Hello world.”

---

<div class="post-metadata">

### Author: ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)
#### Post date: [September 25, 2018, 11:24am UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/2 "2018-09-25T11:24:51Z")

</div>

Martien,

You can probably import and inspect notebook nodes (cells) via oficial observable runtime js library that is used for embeds, etc. (see: [https://beta.observablehq.com/@jashkenas/downloading-and-embedding-notebooks](https://beta.observablehq.com/@jashkenas/downloading-and-embedding-notebooks)):

> **[observablehq/runtime](https://github.com/observablehq/runtime)**
>
> The Observable dataflow runtime. Contribute to observablehq/runtime development by creating an account on GitHub.

Also, this is not officially supported, but recently I put together notebooks.js notebook that shows you how to use observable api directly for getting user bio, notebooks info, and notebook cells. see Getting Notebook Info and #notebookNodes section here:

> **[Notebooks Visualizer](https://observablehq.com/@randomfractals/notebooks)**
>
> This notebook uses actual https://api.observablehq.com to display user stats, collections, and notebooks info User Info share a link to your user info and notebooks stats: @ @ data from https://api.observablehq.com/user/@ : codes about... @ Notebooks...

Every notebook on observable is stored/returned in this json format:

 ![obesrvable-notebook-info](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/3/360f3d6a9bb9c89ef538a9b9b5ed86418ddafa0c.png)

Even though nodes don’t break cell names and code blocks into separate properties, I think you can easily parse out named cells names from the code node value by index of = and ( for functions 🙂

Do you intend to have this notebook documentation system outside of the hosted notebook itself? If so that might help.

I am curious how you auto-generate cell’s description. Are you thinking along the lines of creating spec. js for each notebook you create?

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [September 25, 2018, 2:27pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/3 "2018-09-25T14:27:57Z")

</div>

Thanks Taras! Will look into it.

---

<div class="post-metadata">

### Author: ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)
#### Post date: [September 25, 2018, 2:32pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/4 "2018-09-25T14:32:21Z")

</div>

I can add a short snippet to my noteboosk.js for namedCells and functions extract from notebook nodes value.

still wondering how you intend to use it? outside of observable as a custom js script similar to how we do unit tests with spec.js but for docs?

very good question and idea! I never thought of notebook cell docs. def. worth considering adding to some form of observable runtime in the future.

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [September 25, 2018, 2:41pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/5 "2018-09-25T14:41:47Z")

</div>

Initial use is very simple. Instead of saying:

```
howToImport(ccbysablock, "ccbysablock")

```

I want to say:

```
howToImport(ccbysablock)

```

Where `ccbysablock` is an object. `howToImport()` then simply outputs the string:

```
import {ccbysablock} from "@martien/creative-commons-logos" (108:36 (3:1))

```

`ccbysablock` look like this:

```
 ccbysablock = ({
   width: 108,
   height: 36,
   xml: `…`
 })

```

So it gets the object’s name and its dimensions from the object itself.

This makes it easier to have code self-describe. Meta-doc, if you will.

Have a look at [Martien » Creative Commons Logos](https://beta.observablehq.com/@martien/creative-commons-logos) for how I now use it.

---

<div class="post-metadata">

### Author: ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)
#### Post date: [September 25, 2018, 2:46pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/6 "2018-09-25T14:46:05Z")

</div>

so you just want named cells and functions with params and default values. can be easily done.

not sure if I’d call it a proper js generated doc, but probably could be a good start as a template to doc named cells, objects, functions and params.

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [September 25, 2018, 2:47pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/7 "2018-09-25T14:47:25Z")

</div>

Even less than that. I just want to pass an object to a function, where that function can get the name of the object passed. That’s it.

Maybe the subject is confusing and should have said “How to get an object’s name?”

---

<div class="post-metadata">

### Author: ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)
#### Post date: [September 25, 2018, 3:00pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/8 "2018-09-25T15:00:29Z")

</div>

you are trying to solution this and it’s confusing.

what is it you’d like to accomplish with that notebook?

are you creating logos for others to export logo svg with proper sizing to be used elsewhere?

or you are planning to add creative coomons logos in diff. sizes for others to import from your notebook?

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [September 25, 2018, 3:18pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/9 "2018-09-25T15:18:36Z")

</div>

Sorry to be unclear and confusing. Forget about the logos.

Maybe it helps to say what I do **not** want:

> I do **not** want to type in an object’s name twice, once as the object, and once as its string.

If you look at:

```
function howToImport(logo, logoName) {
  let d = gcd(logo.width, logo.height);
  return md`\`import {${logoName}} from "@martien/creative-commons-logos"
(${logo.width}:${logo.height} (${logo.width / d}:${logo.height / d}))\``;
}

```

I now call:

```
howToImport(ccbysastrip, "ccbysastrip")

```

I want to call:

```
howToImport(ccbysastrip)

```

and have `howToImport` figure out the name of the parameter it is called with.

Does this make things clearer for you?

---

<div class="post-metadata">

### Author: ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)
#### Post date: [September 25, 2018, 3:34pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/10 "2018-09-25T15:34:37Z")

</div>

🙂

1. I would suggest you name your creative commons logo cells for deep linking:

mylogo = banner(ccbysastrip)

then you can link to them directly:

> **[Creative Commons Logos](https://observablehq.com/@martien/creative-commons-logos)**
>
> Free Cultural Works BY SA Assistants ƒ banner(logo) creates a canvas and paints a logo using the full available width. ƒ howToImport({logo}) generates a string showing you how to import the logo in your notebook. Logos The Official logo for the...

1. then I would recommend you add save as png or svg below each logo:

add this to your notebook:

import {rasterize, serialize} from ‘@mbostock/saving-svg’

then this code snippet below each logo svg:

```auto
html`
${DOM.download(await rasterize(mylogo), 'logo.png', "Download as PNG")}
${DOM.download(await serialize(mylogo), `logo.svg`, "Download as SVG")}
`

```

1. then others can import your logos by name too from your logos notebook. try:

```auto
import {mylogo} from '[yournotebook]'

```

all bases covered?

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [September 25, 2018, 3:39pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/11 "2018-09-25T15:39:11Z")

</div>

Sorry, that is not what I need. I don’t need png or svg to download. I’m just a guy who exhausts himself in laziness and want Greyhound to do the driving. If I type in the name of an object, there must be some way to get that name (as a string), right?

Never mind. It works for now, so yes, we’re done.

Thanks very much for your effort and brain cycles.

---

<div class="post-metadata">

### Author: ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)
#### Post date: [September 25, 2018, 5:32pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/12 "2018-09-25T17:32:28Z")

</div>

How about the following? I hacked this together from [this SO answer](https://stackoverflow.com/a/19329402/) which explains how it works:

```auto
function howToImport2(logoDict) {
  function getVariableName(unknownVariable) {
    return Object.keys(unknownVariable)[0];
  };
  const logo = logoDict[getVariableName(logoDict)];
  let d = gcd(logo.width, logo.height);
  return md`\`import {${getVariableName(logoDict)}} from "@martien/creative-commons-logos"
(${logo.width}:${logo.height} (${logo.width / d}:${logo.height / d}))\``;
}

```

To use `howtoimport2`, note that you have to do the slightly odd thing of wrapping the argument in curly braces like this:

```auto
howToImport2({ccbysablock})

```

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [September 26, 2018, 2:08pm UTC](https://talk.observablehq.com/t/how-to-get-a-cell-s-name/1246/13 "2018-09-26T14:08:47Z")

</div>

Wonderful! Works like a charm and exactly what I need.

Thanks @bgchen
