Add notebook style options

app/src/components/contextual/ChartOptions.jsx

@@ -0,0 +1,73 @@
+import { Fragment } from 'react'
+import { Popover, Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import {
+  ArrowPathIcon,
+  ChartPieIcon,
+  CursorArrowRaysIcon,
+  DocumentChartBarIcon,
+  FingerPrintIcon,
+  SquaresPlusIcon,
+} from '@heroicons/react/24/outline'
+
+const solutions = [
+  { name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#', icon: ChartPieIcon },
+  {
+    name: 'Integrations',
+    description: 'Connect with third-party tools and find out expectations',
+    href: '#',
+    icon: SquaresPlusIcon,
+  },
+  {
+    name: 'Engagement',
+    description: 'Speak directly to your customers with our engagement tool',
+    href: '#',
+    icon: CursorArrowRaysIcon,
+  },
+  { name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', icon: ArrowPathIcon },
+  { name: 'Security', description: "Your customers' data will be safe and secure", href: '#', icon: FingerPrintIcon },
+  {
+    name: 'Reports',
+    description: 'Edit, manage and create newly informed decisions',
+    href: '#',
+    icon: DocumentChartBarIcon,
+  },
+]
+
+export default function ChartOptions({children, name}) {
+  return (
+    <Popover className="relative">
+      <Popover.Button className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+        <span>{name}</span>
+        <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
+      </Popover.Button>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4">
+          <div className="w-screen max-w-fit flex-auto overflow-hidden rounded-3xl bg-white text-sm leading-6 shadow-lg ring-1 ring-gray-900/5 lg:max-w-3xl">
+            <div className="grid grid-cols-1 gap-x-1 gap-y-1 p-4 lg:grid-cols-2">
+              {children}
+            </div>
+            <div className="bg-gray-50 px-8 py-6">
+              <div className="flex items-center gap-x-3">
+                <h3 className="text-sm font-semibold leading-6 text-gray-900">Enterprise</h3>
+                <p className="rounded-full bg-indigo-600/10 px-2.5 py-1.5 text-xs font-semibold text-indigo-600">New</p>
+              </div>
+              <p className="mt-2 text-sm leading-6 text-gray-600">
+                Empower your entire team with even more advanced tools.
+              </p>
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  )
+}

app/src/pages/Notebook.jsx

@@ -17,6 +17,7 @@ import {
 import { Menu, Transition } from '@headlessui/react'
 import Dropdown from '../components/Dropdown'
 import Chart from '../components/Chart'
+import ChartOptions from '../components/contextual/ChartOptions'
 function execSql(api, query, datasource, onSuccess, onError) {
   console.log(query, datasource, {"query": query, datasource_id: datasource})
   api.post('/query', {"query": query, datasource_id: datasource}, {
@@ -177,7 +178,8 @@ export function NotebookHeader({datasource, datasources, addCell, onPublish}) {
 }
 
 
-function NotebookCellStatusBar({isComputing, setVisualizationStyle}) {
+function NotebookCellStatusBar({isComputing, columns, setVisualizationStyle}) {
+  const cols = columns || []
   const progressVisibility = isComputing ? '' : ' invisible '
   return (
     <div className='bg-slate-50 flex items-center rounded-lg px-4 py-2 justify-between'>
@@ -189,17 +191,34 @@ function NotebookCellStatusBar({isComputing, setVisualizationStyle}) {
           0.3s
         </span>
       </div>
-      <div className='basis-1/4'>
-        <Dropdown 
-          selected={null}
-          setSelected={(s) => setVisualizationStyle({type: s.id})}
-          items={[{id: 'table', name: 'Table'}, {id: 'line', name: 'Line'}]}
-        /> 
+      <div className='flex-grow flex items-center'>
+        <div className='basis-1/3'>
+          <Dropdown 
+            selected={null}
+            setSelected={(s) => setVisualizationStyle({type: s.id})}
+            items={[{id: 'table', name: 'Table'}, {id: 'bar', name: 'Bar'}]}
+          /> 
+        </div>
+        <div className='basis-2/3'>
+          <ChartOptions name="Options">
+            <div>
+              <Dropdown name="X axis" items={cols.map(c => ({id: c, name: c}))} />
+            </div>
+            <div>
+              <Dropdown name="Y axis" items={cols.map(c => ({id: c, name: c}))} />
+            </div>
+          </ChartOptions>
+        </div>
       </div>
     </div>
   )
 }
 
+/*
+
+            
+*/
+
 function CellContainer({children}) {
   return (
     <div className="mx-auto max-w-7xl px-8 sm:px-6 lg:px-8 py-12 shadow-lg rounded-lg">
@@ -235,12 +254,14 @@ function NotebookCell({api, datasource, setQuery, setResult, setStyle, cell, onR
       <NotebookCellStatusBar 
         isComputing={state.isComputing}
         setVisualizationStyle={setStyle}
+        columns={cell?.result?.columns}
+        setStyleOptions={() => {}}
       />
       {cell.result.columns && ((cell.style && cell.style.type === 'table' )) && <Table 
         columns={cell.result.columns} 
         rows={cell.result.rows}
       />}
-      {cell.result.columns && ((cell.style && cell.style.type === 'line' )) && <Chart 
+      {cell.result.columns && ((cell.style && cell.style.type === 'bar' )) && <Chart 
         data={chartData.reverse()}
       />}
       {cell.result.error && <span>{JSON.stringify(cell?.result?.error)}</span>}