Rip out canvases from the toc.

src/components/WindowSideBarCanvasPanel.js

@@ -4,9 +4,11 @@ import classNames from 'classnames';
 import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
 import FilledInput from '@material-ui/core/FilledInput';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
+import Button from '@material-ui/core/Button';
 import Select from '@material-ui/core/Select';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
@@ -89,10 +91,31 @@ export class WindowSideBarCanvasPanel extends Component {
 
     return (
       structures.map(canvasOrRange => (
+        canvasOrRange.getRanges().length === 0
+          ? (
+            <ListItem
+              component="li"
+              key={canvasOrRange.id}
+              button
+              className={classes.button}
+              onClick={
+                () => {
+                  setCanvas(
+                    windowId,
+                    canvases.find(e => e.id === canvasOrRange.getCanvasIds()[0]).index,
+                  );
+                }
+              }
+            >
+              <ListItemText primary={canvasOrRange.getLabel().map(label => label.value)[0]} />
+            </ListItem>
+          )
+          : (
             <ExpansionPanel
               defaultExpanded={defaultExpanded}
               key={canvasOrRange.id}
               elevation={0}
+              component="li"
               square
             >
               <ExpansionPanelSummary style={{ backgroundColor: '#eee' }}>
@@ -109,36 +132,9 @@ export class WindowSideBarCanvasPanel extends Component {
                       </List>
                     )
                 }
-            <List>
-              {
-                canvasOrRange.getCanvasIds().map((canvasId) => {
-                  const canvas = canvases.find(e => e.id === canvasId);
-                  if (!canvas) return <></>;
-
-                  const onClick = () => { setCanvas(windowId, canvas.index); }; // eslint-disable-line require-jsdoc, max-len
-
-                  return (
-                    <ListItem
-                      key={canvas.id}
-                      alignItems="flex-start"
-                      onClick={onClick}
-                      button
-                      component="li"
-                      disableGutters
-                    >
-                      <Typography
-                        className={classNames(classes.label)}
-                        variant="body2"
-                      >
-                        {canvas.getLabel().map(label => label.value)[0]}
-                      </Typography>
-                    </ListItem>
-                  );
-                })
-              }
-            </List>
               </ExpansionPanelDetails>
             </ExpansionPanel>
+          )
       ))
     );
   }
@@ -158,8 +154,6 @@ export class WindowSideBarCanvasPanel extends Component {
         return this.renderToc(structures, true);
       default:
         return (
-          <List>
-            {
           canvasesIdAndLabel.map((canvas, canvasIndex) => {
             const onClick = () => { setCanvas(windowId, canvasIndex); }; // eslint-disable-line require-jsdoc, max-len
 
@@ -176,8 +170,6 @@ export class WindowSideBarCanvasPanel extends Component {
               </ListItem>
             );
           })
-            }
-          </List>
         );
     }
   }
@@ -215,7 +207,9 @@ export class WindowSideBarCanvasPanel extends Component {
           </FormControl>
           )}
       >
+        <List>
           { this.renderList() }
+        </List>
       </CompanionWindow>
     );
   }

src/containers/WindowSideBarCanvasPanel.js

@@ -36,6 +36,11 @@ const styles = theme => ({
   label: {
     paddingLeft: theme.spacing.unit,
   },
+  button: {
+    ...theme.typography.body2,
+    textTransform: 'none',
+    textAlign: 'left',
+  },
 });
 
 const enhance = compose(