[WIP] Moved from cellTools to side panel

Untitled.ipynb

@@ -7,18 +7,18 @@
    "outputs": [
     {
      "ename": "ModuleNotFoundError",
-     "evalue": "No module named 'asdasd'",
+     "evalue": "No module named 'asdasdasd'",
      "output_type": "error",
      "traceback": [
-      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
-      "\u001b[0;31mModuleNotFoundError\u001b[0m                       Traceback (most recent call last)",
-      "\u001b[0;32m<ipython-input-1-7ad967ca1c65>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0;32mimport\u001b[0m \u001b[0masdasd\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m",
-      "\u001b[0;31mModuleNotFoundError\u001b[0m: No module named 'asdasd'"
+      "\u001b[0;31m------------------------------------\u001b[0m",
+      "\u001b[0;31mModuleNotFoundError\u001b[0mTraceback (most recent call last)",
+      "\u001b[0;32m<ipython-input-1-1d4ffe1b4dbd>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0;32mimport\u001b[0m \u001b[0masdasdasd\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m",
+      "\u001b[0;31mModuleNotFoundError\u001b[0m: No module named 'asdasdasd'"
      ]
     }
    ],
    "source": [
-    "import asdasd"
+    "import asdasdasd"
    ]
   },
   {
@@ -52,9 +52,9 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Go Bears (Python 3.7)",
+   "display_name": "Python (myenv)",
    "language": "python",
-   "name": "python-3.7"
+   "name": "myenv"
   },
   "language_info": {
    "codemirror_mode": {
@@ -66,7 +66,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.4"
+   "version": "3.7.3"
   }
  },
  "nbformat": 4,

Untitled1.ipynb

@@ -0,0 +1,6 @@
+{
+ "cells": [],
+ "metadata": {},
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@jupyterlab/application": "^1.0.2",
     "@jupyterlab/notebook": "^1.0.2",
+    "@material-ui/core": "^4.5.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-inspector": "^3.0.2",

src/Dropdown.tsx

@@ -1,37 +1,18 @@
-import React, { useState } from 'react';
-
-import Async from 'react-select';
+import React from 'react';
 
 import StyleClasses from './style';
-
 const PackageBarStyleClasses = StyleClasses.PackageBarStyleClasses;
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
 
-const customStyles = {
-  option: (provided: JSON, state: JSON) => ({
-    ...provided,
-    backgroundColor: 'transparent',
-    color: 'var(--jp-ui-font-color1)',
-    fontSize: 'var(--jp-ui-font-size1)',
-    wordWrap: 'break-word',
-  }),
-  menu: () => ({
-    border: 'none',
-    borderRadius: 'var(--jp-border-radius)',
-    boxShadow: 'inset 0 0 3px var(--jp-border-width) var(--jp-input-active-box-shadow-color)',
-    marginTop: 40,
-    position: 'relative',
-    backgroundColor: 'var(--jp-ui-inverse-font-color0)',
-  }),
-  control: () => ({
-    height: 0,
-    width: 0,
-  }),
-  container: (provided: JSON, state: JSON) => ({
-    ...provided,
-    position: 'initial',
-  })
+const compStyle = {
+  border: 'none',
+  borderRadius: 'var(--jp-border-radius)',
+  boxShadow: 'inset 0 0 3px var(--jp-border-width) var(--jp-input-active-box-shadow-color)',
+  backgroundColor: 'var(--jp-ui-inverse-font-color0)',
+  maxHeight: 200, 
+  overflow: 'auto'
 }
-
 interface DropdownProps {
   stdOut: Array<string>;
 }
@@ -40,29 +21,21 @@ interface DropdownProps {
   * Render a toggleable dropdown of stdout logs from the installation process.
   */
 export function Dropdown(props: DropdownProps) {
-  const [isVisible, setIsVisible] = useState(false);
-  function toggleVisibility() { 
-    setIsVisible(!isVisible);
-  }
+  const [expanded, setExpanded] = React.useState(false);
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
   return (
     <div>
       <button className={PackageBarStyleClasses.logsButton} 
-        onClick={() => toggleVisibility()}>
-        See logs
-      </button>
-      <Async
-        key={JSON.stringify(props.stdOut)}
-        options={props.stdOut}
-        defaultValue={{ label: '', value: '' }}
-        maxMenuHeight={100}
-        isOptionDisabled={() => true}
-        styles={customStyles}
-        isClearable={false}
-        backspaceRemovesValue={false}
-        isSearchable={false}
-        components={{ DropdownIndicator: null }}
-        menuIsOpen={isVisible}
-      />
+          onClick={handleExpandClick}
+        >See logs
+        </button>
+      <Card style={{boxShadow: 'none'}}>
+        {expanded && <CardContent style={compStyle}>
+          {props.stdOut.map(e => <p style={{wordBreak: 'break-word', fontSize: 10, padding: '4px 0px'}}>{Object.values(e)[0].toString()}</p>)}
+        </CardContent>}
+    </Card>
     </div>
   );
 }

src/Logs.tsx

@@ -0,0 +1,63 @@
+import { each } from '@phosphor/algorithm';
+
+import { VDomRenderer } from '@jupyterlab/apputils';
+
+import * as React from 'react';
+
+import { KernelSpyModel, ThreadIterator } from './Model';
+
+import { PackageInstaller } from './PackageInstaller';
+
+import '../style/index.css';
+
+/**
+  * Return a PackageSearcher aware of the uninstalled package to process.
+  */
+function Message(props: any) {
+  const parsedPackage = props.message.content.evalue.split("'")[1];
+  const { ename } = props.message.content;
+  return (
+    <PackageInstaller 
+      kernelId={props.kernelId} 
+      kernelName={props.kernelName} 
+      uninstalledPackage={parsedPackage} 
+      moduleError={ename == "ModuleNotFoundError"} 
+      nb={null}
+    />
+  );
+}
+
+/**
+  * Render a PackageSearcher that responds to the current state of errorModule.
+  */
+export class MessageLogView extends VDomRenderer<KernelSpyModel> {
+  constructor(model: KernelSpyModel, kernelId: string, kernelName: string){
+    super();
+    this.model = model;
+    this.kernelId = kernelId;
+    this.kernelName = kernelName;
+  }
+  protected render(): React.ReactElement<any> {
+    const model = this.model!;
+    let errorMessage: React.ReactElement<any>;
+    let threads = new ThreadIterator(model.tree, this.collapsed);
+
+    each(threads, ({args, hasChildren}) => {
+      let { msg_type } = args.msg.header;
+      if (msg_type == "error") {
+        console.log("ERROR OCCURED");
+        errorMessage = Message({ 
+          message: args.msg, 
+          kernelName: this.kernelName, 
+          kernelId: this.kernelId, 
+          moduleError: null
+        });
+      }
+    });
+    return errorMessage;
+  }
+  protected collapsed: {[key: string]: boolean} = {};
+  protected kernelId: string;
+  protected kernelName: string;
+}
+

src/Model.ts

@@ -18,8 +18,8 @@ export type MessageThread = {
 function isHeader(candidate: {[key: string]: undefined} | KernelMessage.IHeader): candidate is KernelMessage.IHeader {
   return candidate.msg_id !== undefined;
 }
-export
-class ThreadIterator implements IIterator<ThreadIterator.IElement> {
+
+export class ThreadIterator implements IIterator<ThreadIterator.IElement> {
   constructor(threads: MessageThread[], collapsed: {[key: string]: boolean}) {
     this._threads = threads;
     this._collapsed = collapsed;
@@ -39,14 +39,12 @@ class ThreadIterator implements IIterator<ThreadIterator.IElement> {
       }
       this._child = null;
     }
-    // Move to next thread
     ++this._index;
     if (this._index >= this._threads.length) {
       return undefined;
     }
     const entry = this._threads[this._index];
     if (entry.children.length > 0 && !this._collapsed[entry.args.msg.header.msg_id]) {
-      // Iterate over children after this
       this._child = new ThreadIterator(entry.children, this._collapsed);
     }
     return {args: entry.args, hasChildren: entry.children.length > 0};
@@ -63,15 +61,12 @@ class ThreadIterator implements IIterator<ThreadIterator.IElement> {
 
   private _index: number;
   private _child: ThreadIterator | null;
-
   private _threads: MessageThread[];
   private _collapsed: {[key: string]: boolean};
 }
 
-export
-namespace ThreadIterator {
-  export
-  interface IElement {
+export namespace ThreadIterator {
+  export interface IElement {
     args: Kernel.IAnyMessageArgs;
     hasChildren: boolean;
   }
@@ -80,8 +75,7 @@ namespace ThreadIterator {
 /**
  * Construct a model that monitors kernel messages.
  */
-export
-class KernelSpyModel extends VDomModel {
+export class KernelSpyModel extends VDomModel {
   constructor(kernel: Kernel.IKernel) {
     super();
     this._kernel = kernel;
@@ -126,15 +120,13 @@ class KernelSpyModel extends VDomModel {
   getThread(msgId: string, ancestors=true): MessageThread {
     const args = this._messages[msgId];
     if (ancestors) {
-      // Work up to root, then work downwards
       let root = args;
       let candidate;
       while (candidate = this._findParent(root)) {
         root = candidate;
       }
       return this.getThread(root.msg.header.msg_id, false);
     }
-
     const childMessages = this._childLUT[msgId] || [];
     let childThreads = childMessages.map((childId) => {
       return this.getThread(childId, false);
@@ -167,11 +159,8 @@ class KernelSpyModel extends VDomModel {
     }
     return null;
   }
-
   private _log: Kernel.IAnyMessageArgs[] = [];
-
   private _kernel: Kernel.IKernel;
-
   private _messages: {[key: string]: Kernel.IAnyMessageArgs} = {};
   private _childLUT: {[key: string]: string[]} = {};
   private _roots: string[] = [];