fix(notebooks): fix UI bugs in notebook

libs/components/package.json

@@ -41,10 +41,10 @@
       "import": "./button.mjs",
       "require": "./button.js"
     },
-    "./cell": {
-      "types": "./cell/cell.d.ts",
-      "import": "./cell.mjs",
-      "require": "./cell.js"
+    "./notebook-cell": {
+      "types": "./notebook-cell/notebook-cell.d.ts",
+      "import": "./notebook-cell.mjs",
+      "require": "./notebook-cell.js"
     },
     "./checkbox": {
       "types": "./checkbox/checkbox.d.ts",

libs/components/src/index.ts

@@ -3,7 +3,7 @@ export * from './alert/alert';
 export * from './app-shell/app-shell';
 export * from './badge/badge';
 export * from './button/button';
-export * from './cell/cell';
+export * from './notebook-cell/notebook-cell';
 export * from './checkbox/checkbox';
 export * from './card/card';
 export * from './chips/chip';

libs/components/src/cell/cell.scss → libs/components/src/notebook-cell/notebook-cell.scss

@@ -27,28 +27,29 @@ cv-code-editor {
 .selectionIndicator {
   background-color: var(--cv-theme-primary);
   border-radius: 2px;
+  cursor: move;
   margin-top: 2px;
   visibility: hidden;
   min-width: 8px;
 }
 
 .timesExecuted {
   color: var(--cv-theme-outline-variant);
+  cursor: move;
   display: inline-flex;
   font-family: var(--mdc-typography-body2-font-family);
   font-size: var(--mdc-typography-body2-font-size);
+  height: 100%;
   justify-content: end;
   line-height: var(--mdc-typography-body2-line-height);
-  padding: 0 0.75rem;
-  min-width: 8%;
-  max-width: 8%;
+  text-wrap: nowrap;
 
   .executionCount {
     box-sizing: border-box;
     display: inline-block;
-    max-width: 70%;
-    padding: 0 2px;
+    max-width: 32px;
     overflow: hidden;
+    padding: 0 2px;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -85,18 +86,21 @@ cv-code-editor {
 }
 
 .cellCodeWrapper {
-  align-items: flex-start;
+  align-items: start;
   display: flex;
-  justify-content: space-between;
-  width: calc(100% - 8px);
+  gap: 0.75rem;
+  justify-content: end;
+  width: calc(100% - 2rem);
 }
 
 .cellOutputWrapper {
-  max-width: 90%;
-  min-width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 92%;
+  min-width: 92%;
 }
 
 .output {
-  margin: 0.75rem 0.25rem 0.5rem;
   max-width: 100%;
 }

libs/components/src/notebook-cell/notebook-cell.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentNotebookCell } from './notebook-cell';
+
+describe('Notebook cell', () => {
+  it('should work', () => {
+    expect(new CovalentNotebookCell()).toBeDefined();
+  });
+});

libs/components/src/cell/cell.stories.js → libs/components/src/notebook-cell/notebook-cell.stories.js

@@ -1,7 +1,7 @@
-import './cell';
+import './notebook-cell';
 
 export default {
-  title: 'Components/Cell',
+  title: 'Components/Notebook Cell',
   args: {
     code: '',
     index: 0,
@@ -23,10 +23,10 @@ const Template = ({
   timesExecuted,
 }) => {
   return `<div style="width: 800px; ">
-            <cv-cell code="${code}" index="${index}" language="${language}" timesExecuted="${timesExecuted}" ${
+            <cv-notebook-cell code="${code}" index="${index}" language="${language}" timesExecuted="${timesExecuted}" ${
     showEditor ? 'showEditor' : ''
   } ${selected ? 'selected' : ''} ${loading ? 'loading' : ''}
-  ></cv-cell>
+  ></cv-notebook-cell>
           </div>`;
 };
 

libs/components/src/cell/cell.ts → libs/components/src/notebook-cell/notebook-cell.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import styles from './cell.scss?inline';
+import styles from './notebook-cell.scss?inline';
 import { classMap } from 'lit/directives/class-map.js';
 
 import '../code-editor/code-editor';
@@ -10,16 +10,16 @@ import '../typography/typography';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'cv-cell': CovalentCell;
+    'cv-notebook-cell': CovalentNotebookCell;
   }
 }
 
 enum CvCellEvents {
   RUN_CODE = 'cell-run-code',
 }
 
-@customElement('cv-cell')
-export class CovalentCell extends LitElement {
+@customElement('cv-notebook-cell')
+export class CovalentNotebookCell extends LitElement {
   /**
    * The index of the cell in a notebook
    */
@@ -137,7 +137,7 @@ export class CovalentCell extends LitElement {
           >${this.code}</cv-code-snippet
         >`;
 
-    const output = html`<slot name="error"></slot>
+    const output = html` <div class="errors"><slot name="error"></slot></div>
       <cv-typography class="output" scale="body1">
         <slot name="output"></slot>
         <slot name="input"></slot>
@@ -152,12 +152,13 @@ export class CovalentCell extends LitElement {
 
   renderExecutionCount() {
     let executionCount = html`&nbsp;`;
-    if (this.showEditor) {
-      if (this.loading) {
-        executionCount = html`<span class="loading">*</span>`;
-      } else if (this.timesExecuted) {
-        executionCount = html`${this.timesExecuted}`;
-      }
+    if (this.language === 'markdown') {
+      return executionCount;
+    }
+    if (this.loading) {
+      executionCount = html`<span class="loading">*</span>`;
+    } else {
+      executionCount = html`${this.timesExecuted || ' '}`;
     }
     return html`[<span class="executionCount">${executionCount}</span>] :`;
   }
@@ -170,14 +171,18 @@ export class CovalentCell extends LitElement {
     };
     return html`
       <div class="${classMap(classes)}">
-        <span class="selectionIndicator"></span>
+        <span class="selectionIndicator" draggable="true"></span>
         <div class="cellCodeWrapper">
-          <span class="timesExecuted">${this.renderExecutionCount()}</span>
-          <div class="cellOutputWrapper">${this.renderEditor()}</div>
+          <span class="timesExecuted" draggable="true"
+            >${this.renderExecutionCount()}</span
+          >
+          <div class="cellOutputWrapper" draggable="false">
+            ${this.renderEditor()}
+          </div>
         </div>
       </div>
     `;
   }
 }
 
-export default CovalentCell;
+export default CovalentNotebookCell;

libs/components/src/notebook/notebook.scss

@@ -2,9 +2,7 @@
   --cv-notebook-height: 100%;
   --cv-notebook-width: 100%;
 
-  cv-cell {
-    cursor: move;
-
+  cv-notebook-cell {
     &.dragged {
       transform: translate3d(0, 0, 0);
     }
@@ -16,10 +14,6 @@
 }
 
 .error {
-  background-color: var(--cv-theme-negative-8);
-  border: 1px solid var(--cv-theme-negative-24);
-  box-sizing: border-box;
-  color: var(--cv-theme-on-negative-container-20);
   margin: 0.75rem 1px;
   padding: 0 0.25rem;
 }