Merge pull request #10 from Quansight/namespaces

commit for all recent work updating cards.

Author: anirrudh

.gitignore

@@ -5,3 +5,4 @@ lib
 labextension
 tsconfig.tsbuildinfo
 yarn.lock
+.DS_Store

package.json

@@ -54,6 +54,7 @@
     "@rjsf/core": "^2.4.2",
     "@types/lodash": "^4.14.168",
     "bootstrap": "^4.6.0",
+    "framer-motion": "^4.0.3",
     "lodash": "^4.17.21",
     "react-ace": "^9.3.0",
     "react-bootstrap": "^1.5.2",

src/components/cardgrid.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Form from "@rjsf/bootstrap-4";
+import Card from "react-bootstrap/Card";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import { iPyCardSchema } from "../ipyschema";
+import { motion } from "framer-motion";
+
+const CardGrid = (props: any): JSX.Element => {
+  const { cardPayload, handleSubmit } = props;
+
+  const cardWidget = (props: any) => {
+    return (
+      <Row className="pl-2 pr-2">
+        {cardPayload.map((ipyinfo: any) => (
+          <Col key={ipyinfo.kernel_name}>
+            <motion.div className="pt-3 pb-3" whileHover={{ scale: 1.1 }}>
+              <a
+                style={{ cursor: "pointer" }}
+                onClick={() => handleSubmit(ipyinfo.kernel_name)}
+              >
+                <Card
+                  style={{
+                    width: "18rem",
+                    height: "12rem",
+                  }}
+                >
+                  <Card.Body>
+                    <Card.Title>Jupyter: {ipyinfo.jupyter_name}</Card.Title>
+                    <Card.Title>Kernel: {ipyinfo.kernel_name}</Card.Title>
+                  </Card.Body>
+                </Card>
+              </a>
+            </motion.div>
+          </Col>
+        ))}
+      </Row>
+    );
+  };
+
+  const uiSchema = {
+    "ui:ArrayFieldTemplate": cardWidget,
+  };
+
+  return (
+    <div>
+      <Form schema={iPyCardSchema} uiSchema={uiSchema} children={" "} />
+    </div>
+  );
+};
+
+export default CardGrid;

src/components/ipyform.tsx

@@ -0,0 +1,29 @@
+//import React from "react";
+//import { JSONSchema7 } from "json-schema";
+//import Form from "@rjsf/bootstrap-4";
+//import Card from "react-bootstrap/Card";
+//import { motion } from "framer-motion";
+//
+//const iPyArgumentControl = (props: any): JSX.Element => {
+//  return (
+//    <div>
+//      <h1> Hello </h1>
+//    </div>
+//  );
+//};
+//
+//const iPyEnvironmentControl = (props: any): JSX.Element => {
+//  return (
+//    <div>
+//      <p>{JSON.stringify(props)}</p>
+//    </div>
+//  );
+//};
+//
+//export const iPyForm = (props: any): JSX.Element => {
+//  return (
+//    <div>
+//      <p> {JSON.stringify(props)} </p>
+//    </div>
+//  );
+//};

src/index.ts

@@ -7,7 +7,7 @@ import { MainAreaWidget } from "@jupyterlab/apputils";
 
 import { ILauncher } from "@jupyterlab/launcher";
 
-import { CounterWidget } from "./widget";
+import { iPyKernelWidget } from "./widget";
 /*
  * The command IDs used by the react-widget plugin.
  */
@@ -31,8 +31,8 @@ const extension: JupyterFrontEndPlugin<void> = {
       label: "ksmm",
       icon: (args) => (args["isPalette"] ? null : null),
       execute: () => {
-        const content = new CounterWidget();
-        const widget = new MainAreaWidget<CounterWidget>({ content });
+        const content = new iPyKernelWidget();
+        const widget = new MainAreaWidget<iPyKernelWidget>({ content });
         widget.title.label = "ksmm";
         app.shell.add(widget, "main");
       },

src/ipyschema.ts

@@ -0,0 +1,52 @@
+/*
+ * This file is a special file that houses
+ * the schema definitions for this entire application.
+ *
+ * rjsf is used effectively throughout the application for many purposes,
+ * and then can be edited for form edits.
+ */
+import { JSONSchema7 } from "json-schema";
+
+/*
+ * The following schema complies to iPython Kernel
+ * Standards. When making changes, note that the UI
+ * is also subject to change based on the types.
+ */
+export const iPySchema: JSONSchema7 = {
+  title: "ipykernel mm",
+  type: "object",
+  properties: {
+    argv: { type: "array", items: { type: "string" } },
+    env: { type: "object" },
+    display_name: { type: "string" },
+    language: { type: "string" },
+    interrupt_mode: { type: "string" },
+    metadata: { type: "object" },
+  },
+  required: [
+    "argv",
+    "display_name",
+    "env",
+    "interrupt_mode",
+    "language",
+    "metadata",
+  ],
+};
+
+/*
+ * This is the schema for the display cards rendered for
+ * each kernel. It can be obtained by using the generation
+ * function. When called on the ipyschema object, the function
+ * returns a ipyCardSchema.
+ */
+export const iPyCardSchema: JSONSchema7 = {
+  title: "iPyKernel Manager",
+  type: "array",
+  items: {
+    type: "object",
+    properties: {
+      kernel_name: { type: "string" },
+      jupyter_name: { type: "string" },
+    },
+  },
+};