Create dropdown for relationship labels

src/components/CellTree/CellCluster/index.tsx

@@ -7,6 +7,7 @@ import styles from './CellCluster.module.css'
 import Collapsible from '../../common/Collapsible'
 import CollapsibleCell from '../CollapsibleCell'
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import SelectPlus from '../../common/SelectPlus'
 
 export interface CellClusterProps {
   node: IMargoNotebookParentNode
@@ -51,24 +52,51 @@ export default function CellCluster(props: CellClusterProps) {
             icon={faChevronRight}
             collapsedLabel={`Child Cells (${props.node.children.length.toString()})`}
           >
-            {props.node.children.map((node, idx) => (
-              <CollapsibleCell
-                handleToggleCellType={() => props.handleToggleCellType(node)}
-                handleMoveCellUp={() => {
-                  props.handleMoveCellUp(node)
-                }}
-                handleMoveCellDown={() => {
-                  props.handleMoveCellDown(node)
-                }}
-                label={`${node.relationshipToParent}: ${node.parentNode.id}`}
-                handleAddCell={() => {
-                  props.handleAddChildCell(props.node)
-                }}
-                node={node}
-                key={idx}
-                handleDeleteCell={() => props.handleDeleteCell(node)}
-              />
-            ))}
+            {props.node.children.map((node, idx) => {
+              const relTypes: Array<string> = Array.from(
+                new Set([node.relationshipToParent, 'tests', 'documents'])
+              )
+
+              return (
+                <CollapsibleCell
+                  controls={
+                    <SelectPlus
+                      title="relationship"
+                      selectedIndex={0}
+                      addItem={(rel: string) => {
+                        // TODO - sanitize input and set value
+                        console.log(
+                          "You've changed the parent relationship to",
+                          (node.relationshipToParent = rel)
+                        )
+                        // TODO - This is a pretty quick hack. Should add a
+                        // proper callback on Editor to handle this or
+                        // add a general force refresh/update model kind of thing
+                        // that allows these kind of arbitrary model hacks to
+                        // force a re-render
+                        props.handleToggleCellType(node)
+                        props.handleToggleCellType(node)
+                      }}
+                      items={relTypes}
+                    />
+                  }
+                  handleToggleCellType={() => props.handleToggleCellType(node)}
+                  handleMoveCellUp={() => {
+                    props.handleMoveCellUp(node)
+                  }}
+                  handleMoveCellDown={() => {
+                    props.handleMoveCellDown(node)
+                  }}
+                  label={`${node.relationshipToParent}: ${node.parentNode.id}`}
+                  handleAddCell={() => {
+                    props.handleAddChildCell(props.node)
+                  }}
+                  node={node}
+                  key={idx}
+                  handleDeleteCell={() => props.handleDeleteCell(node)}
+                />
+              )
+            })}
           </Collapsible>
         ) : null}
       </div>

src/components/CellTree/CellWrapper/CellWrapper.module.css

@@ -31,4 +31,5 @@
     padding-bottom: 3px;
     border-bottom: 5px solid #ddd;
     margin-bottom: 5px;
+    font-size: 9px;
 }

src/components/CellTree/CellWrapper/index.tsx

@@ -11,6 +11,7 @@ export interface CellWrapperProps {
   node: IMargoNotebookNode
   handleDelete: () => void
   handleToggleCellType: () => void
+  controls?: JSX.Element
 }
 
 /**
@@ -22,6 +23,7 @@ const CellWrapper: React.FunctionComponent<CellWrapperProps> = (props) => {
   return (
     <div className={styles.CellWrapper}>
       <div className={styles.CellControlBar}>
+        {props.controls}
         <Button
           onClick={handleDelete}
           icon={

src/components/CellTree/CollapsibleCell/index.tsx

@@ -19,6 +19,7 @@ export interface CollapsibleCellProps {
   handleMoveCellUp: () => void
   handleMoveCellDown: () => void
   handleToggleCellType: () => void
+  controls?: JSX.Element
   label: string
 }
 
@@ -27,7 +28,7 @@ export interface CollapsibleCellProps {
  * @param props
  */
 const CollapsibleCell: React.FunctionComponent<CollapsibleCellProps> = (
-  props: CollapsibleCellProps
+  props
 ) => {
   const {
     node,
@@ -67,6 +68,7 @@ const CollapsibleCell: React.FunctionComponent<CollapsibleCellProps> = (
             </div>
             <div className={styles.CellFlexContainer}>
               <CellWrapper
+                controls={props.controls}
                 handleToggleCellType={handleToggleCellType}
                 handleDelete={handleDeleteCell}
                 node={node}

src/components/common/ControlBar/ControlBar.module.css

@@ -1,4 +1,5 @@
 .ControlBar {
+    font-size: 12;
     /* width: 100%;
     display: flex; 
     justify-content: right; */

src/components/common/SelectPlus/SelectPlus.module.css

@@ -0,0 +1,82 @@
+.SelectPlusGroup{
+    display: flex;
+}
+
+.SelectPlusGroup .Title{
+    font-weight: 900;
+    padding-right: 2px;
+
+    display: flex;
+    justify-content: right;
+    align-items: center;
+
+    color: #555;
+}
+
+.SelectPlusWrapper{
+    position: relative;
+    width: 60px;
+    height: 14px;
+    overflow: hidden;
+    transition: unset;
+}
+
+.SelectPlusWrapper:hover{
+    height: unset;
+    overflow: unset;
+}
+
+.SelectPlus{
+    cursor: pointer;
+    position: absolute;
+    background-color: white;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 200;
+    transition: all 0.5s ease-out;
+}
+
+.SelectPlus:hover .SelectPlusItem {
+    border: 1px solid gray;
+    border-bottom-width: 0px;
+    border-top-width: 0px;
+}
+
+.SelectPlus:hover .SelectPlusItem:first-child {
+    border-top-width: 1px;
+}
+
+.SelectPlus:hover .SelectPlusItem:last-child {
+    border-bottom-width: 1px;
+}
+
+.SelectPlusItem {
+    padding: 3px;
+    user-select: none;
+    border: 1px solid transparent;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+.SelectPlusItem:hover{
+    color: hotpink;
+    border-color: #eee;
+
+    white-space: unset;
+
+}
+
+.SelectPlusItem.ButtonContainer:hover{
+    background-color: unset;
+}
+
+.CenterButton{
+    text-align: center;
+    margin: 0;
+}
+
+.CenterButton:hover{
+    background-color: white;
+}

src/components/common/SelectPlus/index.tsx

@@ -0,0 +1,63 @@
+import {
+  faCircle,
+  faDotCircle,
+  faPen,
+  faPlus,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+import styles from './SelectPlus.module.css'
+
+interface SelectPlusItemProps {
+  onClick: () => void
+}
+
+const SelectPlusItem: React.FunctionComponent<SelectPlusItemProps> = (
+  props
+) => {
+  const { onClick } = props
+  return (
+    <div onClick={onClick} className={styles.SelectPlusItem}>
+      {props.children}
+    </div>
+  )
+}
+
+export interface SelectPlusProps {
+  title?: string
+  items: Array<string>
+  selectedIndex: number
+  addItem: (newItem: string) => void
+}
+
+export default function SelectPlus(props: SelectPlusProps) {
+  const { items, addItem, selectedIndex, title } = props
+
+  const promptForNewValue = () => {
+    const newRel = prompt(title, items[selectedIndex])
+    if (newRel === null) {
+      return
+    }
+
+    addItem(newRel)
+  }
+  return (
+    <div className={styles.SelectPlusGroup}>
+      <div className={styles.Title}>{title ? title + ':' : null}</div>
+      <div className={styles.SelectPlusWrapper}>
+        <div className={styles.SelectPlus}>
+          {items.map((item: string, idx: number) => {
+            return (
+              <SelectPlusItem onClick={() => addItem(item)} key={idx}>
+                {item}
+              </SelectPlusItem>
+            )
+          })}
+          <SelectPlusItem onClick={promptForNewValue}>
+            <FontAwesomeIcon icon={faPen} /> new
+          </SelectPlusItem>
+        </div>
+      </div>
+    </div>
+  )
+}