From 5339541b81b1216c60333bd070c40556eb175d4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Gessler?=
 <36667834+gessfred@users.noreply.github.com>
Date: Sat, 20 Jan 2024 15:35:10 +0000
Subject: [PATCH] Handle notebook creation

---
 app/src/App.jsx                       |   4 +-
 app/src/components/DataSourceGrid.jsx |   8 +-
 app/src/pages/Home.jsx                |   4 +-
 app/src/pages/Notebook.jsx            | 149 ++++++++++++++++++++++++--
 4 files changed, 147 insertions(+), 18 deletions(-)

diff --git a/app/src/App.jsx b/app/src/App.jsx
index d900df0..27e8b90 100644
--- a/app/src/App.jsx
+++ b/app/src/App.jsx
@@ -241,7 +241,7 @@ function App() {
         <Home 
           show={state.pageid === 'main'} 
           api={api}
-          createWorksheet={(ds) => setStateProperty({pageid: 'worksheet', datasource: ds})}
+          createNotebook={(ds) => setStateProperty({pageid: 'notebook', datasource: ds})}
           onOpenFile={(file) => {
             console.log('open',file)
             setState(prev => Object.assign({}, prev, file, {pageid: Object.keys(file)[0]}))
@@ -254,7 +254,7 @@ function App() {
         />
         <Notebook 
             api={api} 
-            datasource={"postgresql"} 
+            datasource={state.datasource} 
             show={state.pageid === 'notebook'} 
             data={state.notebook} />
       </Layout>
diff --git a/app/src/components/DataSourceGrid.jsx b/app/src/components/DataSourceGrid.jsx
index 6cb8041..0165690 100644
--- a/app/src/components/DataSourceGrid.jsx
+++ b/app/src/components/DataSourceGrid.jsx
@@ -20,7 +20,7 @@ function parseConnectionString(connectionString) {
   return Object.fromEntries(connectionString?.split(' ').map(kv => kv.split('=')))
 }
 
-function DatasourceCard({ds, createWorksheet, editDataSource}) {
+function DatasourceCard({ds, createNotebook, editDataSource}) {
   const connection = parseConnectionString(ds.connection_string)
   return (
     <li key={ds} className="col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
@@ -41,7 +41,7 @@ function DatasourceCard({ds, createWorksheet, editDataSource}) {
           <div className="flex w-0 flex-1">
             <button
               className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900"
-              onClick={() => createWorksheet(ds)}
+              onClick={() => createNotebook(ds)}
             >
               <CodeBracketIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
               Notebook
@@ -62,11 +62,11 @@ function DatasourceCard({ds, createWorksheet, editDataSource}) {
   )
 }
 
-export default function DataSourceGrid({datasources, createWorksheet, editDataSource}) {
+export default function DataSourceGrid({datasources, createNotebook, editDataSource}) {
 
   return (
     <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-      {(datasources || []).map((ds) => <DatasourceCard ds={ds} createWorksheet={createWorksheet} editDataSource={editDataSource} />)}
+      {(datasources || []).map((ds) => <DatasourceCard ds={ds} createNotebook={createNotebook} editDataSource={editDataSource} />)}
     </ul>
   )
 }
diff --git a/app/src/pages/Home.jsx b/app/src/pages/Home.jsx
index bc88bfe..88a4353 100644
--- a/app/src/pages/Home.jsx
+++ b/app/src/pages/Home.jsx
@@ -29,7 +29,7 @@ const user = {
     return classes.filter(Boolean).join(' ')
   }
   
-  export default function Home({show, api, createWorksheet,  onOpenFile}) {
+  export default function Home({show, api, createNotebook,  onOpenFile}) {
     const [state, setState] = useState({notebooks: [], datasources: [], showConnectionEditor: false, worksheets: []})
     const setStateProperty = values => setState(p => Object.assign({}, p, values))
     useEffect(() => {
@@ -57,7 +57,7 @@ const user = {
               <div className='grid'>
                 <DataSourceGrid  
                   datasources={state.datasources} 
-                  createWorksheet={createWorksheet}
+                  createNotebook={createNotebook}
                 />
               </div>
               <button
diff --git a/app/src/pages/Notebook.jsx b/app/src/pages/Notebook.jsx
index f634512..5d89e36 100644
--- a/app/src/pages/Notebook.jsx
+++ b/app/src/pages/Notebook.jsx
@@ -1,8 +1,19 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, Fragment } from 'react'
 import uniqid from 'uniqid'
 import { CodeEditor } from '../components/Code'
 import Table from '../components/Table'
 
+import {
+  BriefcaseIcon,
+  CalendarIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CurrencyDollarIcon,
+  LinkIcon,
+  MapPinIcon,
+  PencilIcon,
+} from '@heroicons/react/20/solid'
+import { Menu, Transition } from '@headlessui/react'
 function execSql(api, query, datasource, onSuccess, onError) {
   console.log(query, datasource, {"query": query, datasource_id: datasource})
   api.post('/query', {"query": query, datasource_id: datasource}, {
@@ -48,6 +59,116 @@ function QueryEditorKeyHandler(tabs, ctrlEnterHandler) {
   }
 }
 
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export function NotebookHeader({addCell, onPublish}) {
+  return (
+    <div className="lg:flex lg:items-center lg:justify-between">
+      <div className="min-w-0 flex-1">
+        <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+          Notebook
+        </h2>
+        <div className="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
+          <div className="mt-2 flex items-center text-sm text-gray-500">
+            <BriefcaseIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
+            Full-time
+          </div>
+          <div className="mt-2 flex items-center text-sm text-gray-500">
+            <MapPinIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
+            Remote
+          </div>
+          <div className="mt-2 flex items-center text-sm text-gray-500">
+            <CurrencyDollarIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
+            $120k &ndash; $140k
+          </div>
+          <div className="mt-2 flex items-center text-sm text-gray-500">
+            <CalendarIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
+            Closing on January 9, 2020
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex lg:ml-4 lg:mt-0">
+        <span className="hidden sm:block">
+          <button
+            type="button"
+            className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+          >
+            <PencilIcon className="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
+            Edit
+          </button>
+        </span>
+
+        <span className="ml-3 hidden sm:block">
+          <button
+            type="button"
+            className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            onClick={addCell}
+          >
+            <LinkIcon className="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
+            Cell
+          </button>
+        </span>
+
+        <span className="sm:ml-3">
+          <button
+            type="button"
+            className="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            onClick={onPublish}
+          >
+            <CheckIcon className="-ml-0.5 mr-1.5 h-5 w-5" aria-hidden="true" />
+            Publish
+          </button>
+        </span>
+
+        {/* Dropdown */}
+        <Menu as="div" className="relative ml-3 sm:hidden">
+          <Menu.Button className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:ring-gray-400">
+            More
+            <ChevronDownIcon className="-mr-1 ml-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute right-0 z-10 -mr-1 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+              <Menu.Item>
+                {({ active }) => (
+                  <a
+                    href="#"
+                    className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
+                  >
+                    Edit
+                  </a>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <a
+                    href="#"
+                    className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
+                  >
+                    View
+                  </a>
+                )}
+              </Menu.Item>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      </div>
+    </div>
+  )
+}
+
+
 function NotebookToolbar({data, newCell, saveNotebook, metadata, setData}) {
   return (
     <div className='notebook-toolbar-container'>
@@ -117,9 +238,9 @@ function NotebookCellToolbar({cell, run, isComputing, setStyle}) {
 
 function NotebookCell({api, datasource, setQuery, setResult, setStyle, cell, onCtrlEnter}) {
   const [state, setState] = useState({isComputing: false}) 
-  console.log(cell, state)
+  console.log('NotebookCell', cell, state, datasource)
   const onQueryResult = res => {
-    console.log("RECEIVED result")
+    console.log("RECEIVED result", res)
     setResult(res)
     setState({isComputing: false})
   }
@@ -129,6 +250,7 @@ function NotebookCell({api, datasource, setQuery, setResult, setStyle, cell, onC
         code={cell.query} 
         setCode={setQuery}
         onCtrlEnter={() => {
+          console.log(cell.query)
           execSql(api, cell.query, datasource, onQueryResult, onQueryResult)
           setState({isComputing: true})
         }}
@@ -149,11 +271,14 @@ function NotebookCell({api, datasource, setQuery, setResult, setStyle, cell, onC
         columns={cell.result.columns} 
         rows={cell.result.rows}
       />}
-      {cell.result.error && <span>{cell.result && cell.result.error}</span>}
+      {cell.result.error && <span>{JSON.stringify(cell?.result?.error)}</span>}
     </div>
   )
 }
+/*
 
+        
+*/ 
 
 export function Notebook({api, datasource, show, data}) {
   const [state, setState] = useState({cells: {}})
@@ -180,15 +305,19 @@ export function Notebook({api, datasource, show, data}) {
     }})}))
   }
   useEffect(() => {
-    if(data && data.cells) {
-      console.log(Object.fromEntries(data.cells.map(cell => [cell.id, cell])))
-      setState(Object.assign({}, data, {cells: Object.fromEntries(data.cells.map(cell => [cell.id, cell]))}))
-    }
-      
-  }, [data])
+    console.log('datasource', datasource)
+      setState(Object.assign({}, data, {datasource_id: datasource?.datasource_id, cells: Object.fromEntries((data?.cells || []).map(cell => [cell.id, cell]))}))
+  }, [data, datasource])
+  console.log('state@Notebook', state)
   if(!show) return <span />
   return (
     <div>
+      <NotebookHeader 
+        addCell={addCell}
+        onPublish={() => {
+          api.userdata.notebooks.write(Object.assign({}, state, {cells: Object.values(state.cells)}))
+        }}
+      />
       {false && <NotebookToolbar 
         newCell={addCell}
         metadata={{datasource: datasource}}