adjust visualizations block for new layout

briefercloud · Feb 5, 2025 · 24b9718 · 24b9718
1 parent 14ed8ee
commit 24b9718
Show file tree

Hide file tree

Showing 5 changed files with 271 additions and 215 deletions.
diff --git a/apps/web/src/components/HeaderSelect.tsx b/apps/web/src/components/HeaderSelect.tsx
@@ -40,12 +40,14 @@ export default function HeaderSelect(props: Props) {
   return (
     <Listbox value={value} onChange={onChange} disabled={disabled}>
       {({ open }) => (
-        <div className="min-w-[200px] relative overflow-visible font-normal">
+        <div className="h-full w-56 max-w-56 relative overflow-visible font-normal">
           <Listbox.Button
             as="div"
-            className="bg-white cursor-default h-6 relative w-full rounded-md pl-2 pr-10 text-left text-gray-500 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-200 sm:text-xs flex items-center"
+            className="h-full relative w-full rounded-tr-md pl-3 pr-10 text-left text-gray-500 sm:text-xs flex items-center bg-gray-50 hover:bg-gray-100 cursor-pointer"
           >
-            <span className="block truncate">{selectedOptionContent}</span>
+            <div className="flex gap-x-3 items-center font-mono overflow-hidden">
+              <span className="block truncate">{selectedOptionContent}</span>
+            </div>
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
               <ChevronUpDownIcon
                 className="h-3 w-3 text-gray-400"
@@ -63,22 +65,22 @@ export default function HeaderSelect(props: Props) {
           >
             <Listbox.Options
               as="div"
-              className="absolute z-10 max-h-60 w-full overflow-auto rounded-sm bg-white pt-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-xs"
+              className="mt-[1px] absolute z-10 max-h-60 w-full overflow-auto bg-white text-base shadow-lg ring-1 ring-gray-200 focus:outline-none sm:text-xs w-[calc(100%-1px)]"
             >
               {options.map((option) => (
                 <Listbox.Option
                   key={option.value}
                   as="div"
                   className={({ active }) =>
                     clsx(
-                      active ? 'bg-primary-200' : '',
-                      'relative select-none py-1.5 pl-3 pr-9 text-gray-900 hover:cursor-pointer'
+                      active ? 'bg-blue-50' : '',
+                      'relative select-none pl-3 pr-9 text-gray-900 hover:cursor-pointer py-3'
                     )
                   }
                   value={option.value}
                 >
                   {({ selected, active }) => (
-                    <>
+                    <div className="flex gap-x-3 items-center font-mono overflow-hidden">
                       <span
                         className={clsx(
                           selected ? 'font-semibold' : 'font-normal',
@@ -101,14 +103,14 @@ export default function HeaderSelect(props: Props) {
                           />
                         </span>
                       ) : null}
-                    </>
+                    </div>
                   )}
                 </Listbox.Option>
               ))}
               {props.onAdd && (
                 <button
                   onClick={props.onAdd}
-                  className="flex items-center w-full text-left mt-1 py-2 pl-3 pr-9 text-gray-900 border-t border-gray-200 hover:bg-primary-200 space-x-1"
+                  className="flex items-center w-full text-left mt-1 py-2 pl-3 pr-9 text-gray-900 border-t border-gray-200 hover:bg-blue-50 space-x-1 h-10"
                 >
                   <PlusIcon className="h-3 w-3" aria-hidden="true" />
                   <span>{props.onAddLabel ?? ''}</span>

diff --git a/apps/web/src/components/v2Editor/PlusButton.tsx b/apps/web/src/components/v2Editor/PlusButton.tsx
@@ -127,6 +127,9 @@ function BlockList(props: BlockListProps) {
   const onAddPython = useCallback(() => {
     props.onAddBlock(BlockType.Python)
   }, [props.onAddBlock])
+  const onAddVisualizationV1 = useCallback(() => {
+    props.onAddBlock(BlockType.Visualization)
+  }, [props.onAddBlock, ff])
   const onAddVisualization = useCallback(() => {
     props.onAddBlock(
       ff.visualizationsV2 ? BlockType.VisualizationV2 : BlockType.Visualization
@@ -172,6 +175,12 @@ function BlockList(props: BlockListProps) {
           onAdd={onAddPython}
           text="Python"
         />
+        <BlockSuggestion
+          id="add-block-visualization-v1"
+          icon={<ChartBarIcon className="w-4 h-4" />}
+          onAdd={onAddVisualizationV1}
+          text="Visualization V1"
+        />
         <BlockSuggestion
           id="add-block-visualization"
           icon={<ChartBarIcon className="w-4 h-4" />}

diff --git a/apps/web/src/components/v2Editor/customBlocks/sql/HeaderSelect.tsx b/apps/web/src/components/v2Editor/customBlocks/sql/HeaderSelect.tsx
@@ -113,9 +113,7 @@ export default function HeaderSelect(props: Props) {
           >
             <Listbox.Options
               as="div"
-              className="mt-[1px] absolute z-10 max-h-60 w-full overflow-aut
-o bg-white text-base shadow-lg ring-1 ring-gray-200 focus:outline-none sm:tex
-t-xs w-[calc(100%-1px)]"
+              className="mt-[1px] absolute z-10 max-h-60 w-full overflow-auto bg-white text-base shadow-lg ring-1 ring-gray-200 focus:outline-none sm:text-xs w-[calc(100%-1px)]"
             >
               {options
                 .slice(0, options.length - 1)

diff --git a/apps/web/src/components/v2Editor/customBlocks/visualization/index.tsx b/apps/web/src/components/v2Editor/customBlocks/visualization/index.tsx
@@ -14,7 +14,7 @@ import {
   YBlock,
 } from '@briefer/editor'
 import { ApiDocument } from '@briefer/database'
-import { FunnelIcon } from '@heroicons/react/24/outline'
+import { ChartPieIcon, FunnelIcon } from '@heroicons/react/24/solid'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import HeaderSelect from '@/components/HeaderSelect'
 import clsx from 'clsx'
@@ -595,44 +595,55 @@ function VisualizationBlock(props: Props) {
 
   return (
     <div
+      className="relative group/block"
       onClick={onClickWithin}
-      className={clsx(
-        'relative group/block bg-white printable-block h-full rounded-md border',
-        props.isBlockHiddenInPublished && 'border-dashed',
-        props.hasMultipleTabs ? 'rounded-tl-none' : 'rounded-tl-md',
-        props.isCursorWithin ? 'border-blue-400 shadow-sm' : 'border-gray-200'
-      )}
       data-block-id={blockId}
     >
-      <div className="h-full">
-        <div className="py-3">
+      <div
+        className={clsx(
+          'rounded-md border',
+          props.isBlockHiddenInPublished && 'border-dashed',
+          props.hasMultipleTabs ? 'rounded-tl-none' : 'rounded-tl-md',
+
+          props.isCursorWithin ? 'border-blue-400 shadow-sm' : 'border-gray-200'
+        )}
+      >
+        <div
+          className={clsx(
+            'rounded-md',
+            props.hasMultipleTabs ? 'rounded-tl-none' : ''
+          )}
+        >
           <div
-            className="flex items-center justify-between px-3 pr-3 gap-x-2 h-[1.6rem] font-sans"
+            className="border-b border-gray-200 bg-gray-50 rounded-t-md"
             ref={(d) => {
               props.dragPreview?.(d)
             }}
           >
-            <div className="flex gap-x-4 h-full w-full">
-              <input
-                type="text"
-                disabled={!props.isEditable}
-                className={clsx(
-                  'font-sans bg-transparent pl-1 ring-gray-200 focus:ring-gray-400 block w-full rounded-md border-0 text-gray-500 disabled:ring-0 hover:ring-1 focus:ring-1 ring-inset placeholder:text-gray-400 focus:ring-inset h-full py-0 text-xs h-full'
-                )}
-                placeholder="Visualization"
-                value={title}
-                onChange={onChangeTitle}
-              />
-              <div className="print:hidden flex gap-x-2 min-h-3 text-xs">
+            <div className="flex items-center justify-between px-3 pr-0 gap-x-4 font-sans h-12 divide-x divide-gray-200">
+              <div className="select-none text-gray-300 text-xs flex items-center w-full h-full gap-x-1.5">
+                <ChartPieIcon className="h-4 w-4 text-gray-400" />
+                <input
+                  type="text"
+                  className={clsx(
+                    'text-sm font-sans font-medium pl-1 ring-gray-200 focus:ring-gray-400 block w-full rounded-md border-0 text-gray-800 hover:ring-1 focus:ring-1 ring-inset focus:ring-inset placeholder:text-gray-400 focus:ring-inset py-0 disabled:ring-0 h-2/3 bg-transparent focus:bg-white'
+                  )}
+                  placeholder="Visualization (click to add a title)"
+                  value={title}
+                  onChange={onChangeTitle}
+                  disabled={!props.isEditable}
+                />
+              </div>
+              <div className="print:hidden flex items-center gap-x-0 group-focus/block:opacity-100 h-full divide-x divide-gray-200">
                 <button
                   className={clsx(
-                    'font-sans flex items-center gap-x-1.5 text-gray-400 h-6 px-3 border border-gray-200 rounded-md whitespace-nowrap disabled:bg-white hover:bg-gray-100 disabled:cursor-not-allowed',
+                    'font-sans text-xs flex items-center gap-x-1.5 text-gray-400 px-2.5 whitespace-nowrap disabled:bg-white hover:bg-gray-100 disabled:cursor-not-allowed h-full min-w-[124px]',
                     props.isPublicMode ? 'hidden' : 'inline-block'
                   )}
                   onClick={onAddFilter}
                   disabled={!props.isEditable}
                 >
-                  <FunnelIcon className="h-3 w-3" />
+                  <FunnelIcon className="h-4 w-4 text-gray-400" />
                   <span>Add filter</span>
                 </button>
                 <HeaderSelect
@@ -675,7 +686,7 @@ function VisualizationBlock(props: Props) {
             />
           ))}
         </div>
-        <div className="h-[496px] border-t border-gray-200 flex items-center">
+        <div className="h-[600px] border-t border-gray-200 flex items-center">
           <VisualizationControls
             isHidden={controlsHidden || !props.isEditable}
             dataframe={dataframe}
@@ -722,7 +733,6 @@ function VisualizationBlock(props: Props) {
           />
         </div>
       </div>
-
       <div
         className={clsx(
           'absolute transition-opacity opacity-0 group-hover/block:opacity-100 right-0 translate-x-full pl-1.5 top-0 flex flex-col gap-y-1',