# Bug: Cannot collapse cells without active code

**URL:** <https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266>\
**Category:** Feedback\
**Created:** [August 15, 2019, 7:04pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266 "2019-08-15T19:04:18Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 15, 2019, 7:04pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/1 "2019-08-15T19:04:18Z")

</div>

- If a cell contains nothing but comments (e.g. because the whole cell body has been wrapped in a `/* */` comment), the cell no longer collapses, and the pin icon is missing.
- Pinning/unpinning via the keyboard shortcut increases the revision count, but has no visible effect.

Steps to reproduce:

1. Create a new notebook
2. Add a cell and insert the following content:

```auto
// Comment line 1
// Comment line 2

```

Workaround: Append or prepend a JS value (e.g. `""`) to the comment block.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 15, 2019, 11:06pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/2 "2019-08-15T23:06:13Z")

</div>

This is the intended behavior.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 16, 2019, 7:58am UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/3 "2019-08-16T07:58:33Z")

</div>

May I ask why?

My use case is to uncomment large chunks of code that would otherwise report as error, and that I want to get out of the way. With the current behavior I need to apply above workaround.

If the only reason is that the cell would produce no output and thus be almost invisible, perhaps a better solution would be to have it produce `undefined`, which can be picked up and displayed by the Inspector?

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 16, 2019, 3:13pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/4 "2019-08-16T15:13:44Z")

</div>

When you create a new cell, it’s in the same state as a cell with no code in it (not counting comments and whitespace as code); we know the output will always be `undefined`. We’d rather show new cells like this:

 ![03%20AM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/9/9410c4da6ec77090c2b26d1c44ea2e1a24b0ba16.png)  
than like this:

 ![57%20AM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/a572be77c56014a123bcacbb222e7964a3ae77da.png)  
We could special-case new cells as “not yet evaluated”, and have the `undefined` output appear when you first shift-return. But this doesn’t work with multiplayer editing because the new cell appears immediately (and is evaluated) upon creation on other editors’ windows, too.

We have a couple of related, competing improvements planned.

First, we’re considering deferring saving a new cell until you commit some code to it, rather than saving it (empty) immediately upon creation. This would avoid the problem of the empty cell with `undefined` output appearing with multiplayer, and perhaps then we would only hide the cell output when a cell is not yet evaluated, not when it’s empty.

Second, we’d like to synchronize cell evaluations independently of edits so that we can synchronize and potentially save edits in realtime (per key stroke) with collaborative editing. This isn’t trivial because it will mean that the output of a cell can be “stale” (reflecting an older version of code), even when you aren’t the person who edited the code. We need to design that state carefully. And we’d then want the empty cell appearing immediately upon creation, so that we can see a remote editor typing into the new cell.

I hope it’s clear there are a lot of subtle considerations in play here.

If you don’t mind me asking, why do you want the error to “get out of the way”? Why is showing `undefined` better than showing the error message? Are you essentially keeping track of which cells need fixing when something is broken, and using commenting to focus on one broken cell at a time? Something we could do, potentially, is to offer a “disabled” state for cells, where we don’t run the code. Then you wouldn’t have to comment out all the code to prevent it from running.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 16, 2019, 3:24pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/5 "2019-08-16T15:24:31Z")

</div>

> [@mbostock](#):
>
> We could special-case new cells as “not yet evaluated”, and have the `undefined` output appear when you first shift-return.

Wouldn’t it suffice to check if the cell has content, as opposed to executable code?

> [@mbostock](#):
>
> I hope it’s clear there are a lot of subtle considerations in play here.

Absolutely. The only consideration that I had taken into account was the unexpected change in cell behavior.

> [@mbostock](#):
>
> If you don’t mind me asking, why do you want the error to “get out of the way”? Why is showing `undefined` better than showing the error message?

In this particular instance the cell contained broken code that resulted in a syntax error. I wanted to hide the error so that I could focus on other cells first, but scrolling past the cell I had to mentally “filter” the error message every time. `undefined` on the other hand is less visually intrusive and can be ignored more easily.  
For me personally an `undefined` output also equals “todo”, as I almost never have cells that return it.

> [@mbostock](#):
>
> Something we could do, potentially, is to offer a “disabled” state for cells, where we don’t run the code.

This would be preferable to commenting the code. If I’m not mistaken someone else had also requested this in another topic.

---

<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:** [August 16, 2019, 3:44pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/6 "2019-08-16T15:44:36Z")

</div>

The “disabled” state would be useful. Recently I accidentally evaluated a cell that stole the focus in an infinite loop so I wasn’t able to click in the source to comment it out. I ended up deleting the cell from the cell menu (I also could have fixed it in safe mode, of course).

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 16, 2019, 3:45pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/7 "2019-08-16T15:45:24Z")

</div>

> [@mootari](#):
>
> Wouldn’t it suffice to check if the cell has content, has opposed to executable code?

Sure, and I think we might have even done this at first, but then it felt weird that a cell with just a space in it behaved differently than an empty cell. It was a slippery slope from there to using the parser. 🙂

I’ve filed a feature request for disabling cells.

---

<div class="post-metadata">

**Author:** ![j-f1](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/j-f1/32/368_2.png) [@j-f1](https://talk.observablehq.com/u/j-f1)\
**Post date:** [August 16, 2019, 10:06pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/8 "2019-08-16T22:06:52Z")

</div>

Here’s an alternate heuristic:

```auto
code.trim() === ""

```

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [August 18, 2019, 8:37am UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/9 "2019-08-18T08:37:38Z")

</div>

Instead of commenting out the cell, let me recommend as a workaround just putting a syntax error at the top. e.g. turn:

```auto
foo = { ... }

```

into

```auto
x foo = { ... }

```

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 18, 2019, 9:12am UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/10 "2019-08-18T09:12:45Z")

</div>

> [@jrus](#):
>
> Instead of commenting out the cell, let me recommend as a workaround just putting a syntax error at the top

The cell already contained syntax errors. The point was to get rid of the error message. 😉

By the way, there’s a simple pattern to “toggle” comment blocks. Wrap code in:

```javascript
/**/
const foo = bar
/**/

```

Remove the first asterisk to comment the whole section:

```javascript
/*/
const foo = bar
/**/

```

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [August 18, 2019, 3:24pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/11 "2019-08-18T15:24:39Z")

</div>

> [@mootari](#):
>
> By the way, there’s a simple pattern to “toggle” comment blocks. Wrap code in:

This version is a pain. Instead select all and press command-slash.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 18, 2019, 3:53pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/12 "2019-08-18T15:53:26Z")

</div>

> [@jrus](#):
>
> This version is a pain.

How so?

> [@jrus](#):
>
> Instead select all and press command-slash.

That doesn’t work with a german keyboard layout.

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [August 18, 2019, 4:04pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/13 "2019-08-18T16:04:26Z")

</div>

My condolences. Trying to write code on many European keyboard layouts is ~~pretty horrendous~~ unpleasant, since programming languages were designed with something more or less like the US layout in mind (I know several European programmers who use US-ANSI keyboards for that reason).

I would recommend looking into your operating system’s facilities for key remapping. 🙂

[For anyone who uses a Mac, let me recommend buying hardware with the Japanese keyboard and remapping the keys to match your preferences; the Japanese keyboard has two useful additional thumb keys.]

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 18, 2019, 4:20pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/14 "2019-08-18T16:20:39Z")

</div>

> [@jrus](#):
>
> Trying to write code on many European keyboard layouts is pretty horrendous

No worries, I can write code perfectly fine (unless it’s a Windows layout or, worse, the Spectre x360 with its switched keys). And while I’m almost sure that you were joking, I’d rather write a desktop client for Observable than remap my keys. 😉

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [August 18, 2019, 5:34pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/15 "2019-08-18T17:34:09Z")

</div>

No, not joking. You don’t need to completely replace the keyboard layout, just give yourself an easier way to type the most common ASCII symbols used in code.

If I search the web for “german keyboard programming” most of the first page of search results are Germans talking about trying to learn the US layout because QWERTZ is so unpleasant for coding.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 18, 2019, 6:05pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/16 "2019-08-18T18:05:39Z")

</div>

> [@jrus](#):
>
> because QWERTZ is so unpleasant for coding

That may be true for the Windows layout, but Apple did a decent job with the Mac layout.

> [@jrus](#):
>
> You don’t need to completely replace the keyboard layout, just give yourself an easier way to type the most common ASCII symbols used in code.

That’s really not a practical advice:

- For starters, please stop believing that one can’t productively write code on a German keyboard.
- Secondly, remapping only works if you never touch another computer again. It’s annoying enough to mentally switch between Mac and Windows. If I’d also have to remember different virtual layouts, I’d probably just stop programming instead.
- Lastly, recommending someone to remap their keys is almost _never_ a valid solution. It’s a last resort if a piece of software is unsupported or you end up with a stubborn software author and no alternatives. And even then you’d tailor the mapping to a particular application. But Observable is a web app, and changes would apply to all web pages.

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [August 18, 2019, 6:55pm UTC](https://talk.observablehq.com/t/bug-cannot-collapse-cells-without-active-code/2266/17 "2019-08-18T18:55:06Z")

</div>

Do whatever works for you. Personally I am glad to be able to re-map my keyboard in a way that helps me better access the symbols and actions I need, and would recommend other people try doing the same, as it can make using the computer more enjoyable and efficient. I believe this advice to be eminently “practical”.

But if you prefer to stick to a stock European keyboard layout nobody is going to stop you.

* * *

But anyway, for those on keyboard layouts with an accessible slash key, let me recommend command-slash as a way to comment out selected blocks of code. This was a [TextMate](https://macromates.com/) shortcut that was copied by the TextMate clone Sublime Text, worked its way through other derivative editors, and now has been adopted in Observable’s editor view. As a long-time TextMate user I find it very convenient.

For people who don’t have and don’t want to have an accessible slash key, I don’t know what to tell you. I guess petition the developers here to make the keyboard shortcuts more customizable so you can use something more accessible than command-slash.
