temp

Author: benfdking

js/packages/quary-extension-ui/src/App.tsx

@@ -16,6 +16,7 @@ import { ErrorView } from '@ui/views/ErrorView'
 import { ExecuteSQLView } from '@ui/views/ExecuteSQL'
 import { ImportSourcesView } from '@ui/views/ImportSourcesView'
 import { ChartEditorView } from '@ui/views/ChartEditorView'
+import { DashboardEditorView } from '@ui/views/DashboardEditorView'
 
 function App() {
   const [view] = useGlobalState()
@@ -111,9 +112,7 @@ function App() {
       return <ChartEditorView data={view.data} />
     }
     case 'dashboardEditor': {
-      return (
-        <div>Dashboard editor {JSON.stringify(view.data.dashboardFile)} </div>
-      )
+      return <DashboardEditorView response={view.data.dashboardFile} />
     }
     default:
       return <div>Invalid view type {JSON.stringify(view)}</div>

js/packages/quary-extension-ui/src/components/Dashboard/Dashboard.tsx

@@ -1,34 +1,42 @@
-import { Layout, Responsive, WidthProvider } from 'react-grid-layout'
+import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout'
 import _ from 'lodash'
 import { EventHandler, Component, SyntheticEvent } from 'react'
+import './react-grid-layout.css'
+import { DashboardItem } from '@quary/proto/quary/service/v1/dashboard_file'
 
 interface Props {
   className: string
   cols: Record<string, number>
-  onLayoutChange: Function
+  onLayoutChange: (currentLayout: Layout[], allLayouts: Layouts) => void
   rowHeight: number
+  dashboardItems: ItemWithInfo[]
+}
+
+export type ItemWithInfo = {
+  item: DashboardItem
+  sql: string
 }
 
 interface State {
+  // TODO Need to constrain this string
   currentBreakpoint: string
   compactType: CompactType
   mounted: boolean
   resizeHandles: string[]
-  layouts: Record<string, Layout>
+  layouts: Layouts
 }
 
 export type CompactType = 'horizontal' | 'vertical'
 
 const availableHandles = ['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne']
 
-const ResponsiveReactGridLayout = WidthProvider(Responsive)
-
 export default class Dashboard extends Component<Props, State> {
   static defaultProps: Props = {
     className: 'layout',
     rowHeight: 30,
     onLayoutChange() {},
     cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+    dashboardItems: [],
   }
 
   state: State = {
@@ -44,25 +52,17 @@ export default class Dashboard extends Component<Props, State> {
   }
 
   generateDOM(): React.ReactNodeArray {
-    return _.map(this.state.layouts.lg, function (l, i) {
+    return this.state.layouts.lg.map((l, i) => {
       return (
-        <div key={i} className={l.static ? 'static' : ''}>
-          {l.static ? (
-            <span
-              className="text"
-              title="This item is static and cannot be removed or resized."
-            >
-              Static - {i}
-            </span>
-          ) : (
-            <span className="text">{i}</span>
-          )}
+        <div key={i}>
+          <span className="text">{i}</span>
+            <span className="text">{l.sql}</span>
         </div>
       )
     })
   }
 
-  onBreakpointChange: (Breakpoint) => void = (breakpoint) => {
+  onBreakpointChange: (breakpoint: string) => void = (breakpoint) => {
     this.setState({
       currentBreakpoint: breakpoint,
     })
@@ -74,7 +74,7 @@ export default class Dashboard extends Component<Props, State> {
       oldCompactType === 'horizontal'
         ? 'vertical'
         : oldCompactType === 'vertical'
-          ? null
+          ? 'vertical'
           : 'horizontal'
     this.setState({ compactType })
   }
@@ -88,13 +88,14 @@ export default class Dashboard extends Component<Props, State> {
     })
   }
 
-  onLayoutChange = (layout, layouts) => {
-    this.props.onLayoutChange(layout, layouts)
+  onLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {
+    this.props.onLayoutChange(currentLayout, allLayouts)
   }
 
   onNewLayout: EventHandler<SyntheticEvent> = () => {
+    const layout = generateLayoutFromDashboardItems(this.props.dashboardItems)
     this.setState({
-      layouts: { lg: generateLayout(this.state.resizeHandles) },
+      layouts: { lg: layout },
     })
   }
 
@@ -137,24 +138,58 @@ export default class Dashboard extends Component<Props, State> {
           useCSSTransforms={this.state.mounted}
           compactType={this.state.compactType}
           preventCollision={!this.state.compactType}
+          /* eslint-disable-next-line react/no-children-prop */
           children={this.generateDOM()}
         />
       </div>
     )
   }
 }
 
-function generateLayout(resizeHandles) {
-  return _.map(_.range(0, 25), function (item, i) {
+const ResponsiveReactGridLayout = WidthProvider(Responsive)
+
+function generateLayout(resizeHandles: string[]): Array<{
+  x: number
+  y: number
+  w: number
+  h: number
+  i: string
+  resizeHandles: string[]
+}> {
+  return _.map(_.range(0, 25), function (_, i) {
     const y = Math.ceil(Math.random() * 4) + 1
     return {
       x: Math.round(Math.random() * 5) * 2,
       y: Math.floor(i / 6) * y,
       w: 2,
       h: y,
       i: i.toString(),
-      static: Math.random() < 0.05,
       resizeHandles,
     }
   })
 }
+
+function generateLayoutFromDashboardItems(
+  dashboardItems: ItemWithInfo[],
+): Array<{
+  x: number
+  y: number
+  w: number
+  h: number
+  i: string
+  resizeHandles: string[]
+  sql: string
+}> {
+  console.log(dashboardItems)
+  return dashboardItems.map(({ item, sql }, i) => {
+    return {
+      x: item.topLeftX,
+      y: item.topLeftY,
+      w: item.width,
+      h: item.height,
+      i: i.toString(),
+      resizeHandles: ['se'],
+      sql,
+    }
+  })
+}

js/packages/quary-extension-ui/src/components/Dashboard/react-grid-layout.css

@@ -0,0 +1,119 @@
+.react-grid-layout {
+    position: relative;
+    transition: height 200ms ease;
+}
+.react-grid-item {
+    transition: all 200ms ease;
+    transition-property: left, top, width, height;
+}
+.react-grid-item img {
+    pointer-events: none;
+    user-select: none;
+}
+.react-grid-item.cssTransforms {
+    transition-property: transform, width, height;
+}
+.react-grid-item.resizing {
+    transition: none;
+    z-index: 1;
+    will-change: width, height;
+}
+
+.react-grid-item.react-draggable-dragging {
+    transition: none;
+    z-index: 3;
+    will-change: transform;
+}
+
+.react-grid-item.dropping {
+    visibility: hidden;
+}
+
+.react-grid-item.react-grid-placeholder {
+    background: red;
+    opacity: 0.2;
+    transition-duration: 100ms;
+    z-index: 2;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+.react-grid-item.react-grid-placeholder.placeholder-resizing {
+    transition: none;
+}
+
+.react-grid-item > .react-resizable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+    content: "";
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 5px;
+    height: 5px;
+    border-right: 2px solid rgba(0, 0, 0, 0.4);
+    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+}
+
+.react-resizable-hide > .react-resizable-handle {
+    display: none;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+    bottom: 0;
+    left: 0;
+    cursor: sw-resize;
+    transform: rotate(90deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+    top: 0;
+    left: 0;
+    cursor: nw-resize;
+    transform: rotate(180deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+    top: 0;
+    right: 0;
+    cursor: ne-resize;
+    transform: rotate(270deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+    top: 50%;
+    margin-top: -10px;
+    cursor: ew-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+    left: 0;
+    transform: rotate(135deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+    right: 0;
+    transform: rotate(315deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+    left: 50%;
+    margin-left: -10px;
+    cursor: ns-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+    top: 0;
+    transform: rotate(225deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+    bottom: 0;
+    transform: rotate(45deg);
+}

js/packages/quary-extension-ui/src/views/DashboardEditorView.tsx

@@ -0,0 +1,13 @@
+import { ReturnDashboardWithSqlResponse } from '@quary/proto/quary/service/v1/wasm_rust_rpc_calls'
+import Dashboard from '@ui/components/Dashboard/Dashboard'
+
+interface Props {
+  response: ReturnDashboardWithSqlResponse
+}
+
+export const DashboardEditorView: React.FC<Props> = ({ response }) => (
+    <div>
+      <div>{JSON.stringify(response)}</div>
+      <Dashboard dashboardItems={response.dashboard?.items} />
+    </div>
+  )

js/packages/quary-extension/src/web/autoCompleteProvider.ts

@@ -1,7 +1,10 @@
 import * as vscode from 'vscode'
-import { isErr, Ok } from '@shared/result'
 import { DefinitionProvider, Uri } from 'vscode'
-import { ListAssetsResponse_Asset_AssetType } from '@quary/proto/quary/service/v1/wasm_rust_rpc_calls'
+import { isErr, Ok } from '@shared/result'
+import {
+  ListAssetsRequest_AssetsToSkip,
+  ListAssetsResponse_Asset_AssetType,
+} from '@quary/proto/quary/service/v1/wasm_rust_rpc_calls'
 import { getServices, preInitSetup } from './services'
 
 // SQL Autocomplete Provider
@@ -27,9 +30,7 @@ export const sqlAutocompleteProvider = (
       }
       const assets = await services.rust.list_assets({
         projectRoot: details.value.projectRoot,
-        assetsToSkip: {
-          charts: true,
-        },
+        assetsToSkip: ListAssetsRequest_AssetsToSkip.ASSETS_TO_SKIP_CHARTS_AND_DASHBOARDS,
       })
       if (isErr(assets)) {
         return assets
@@ -106,32 +107,28 @@ export const sqlDefinitionProvider = (
       return []
     }
 
-    const locations = entries.value.definitions.map((location) => {
+    return entries.value.definitions.map((location) => {
       const start = new vscode.Position(
-        location.range!.start!.line,
-        location.range!.start!.character,
+          location.range!.start!.line,
+          location.range!.start!.character,
       )
       const end = new vscode.Position(
-        location.range!.end!.line,
-        location.range!.end!.character,
+          location.range!.end!.line,
+          location.range!.end!.character,
       )
       const range = new vscode.Range(start, end)
-
       const targetUri = Uri.joinPath(
-        entries.value.projectRoot,
-        location.targetFile,
+          entries.value.projectRoot,
+          location.targetFile,
       )
-
       return {
         originSelectionRange: range,
         targetUri,
         targetRange: new vscode.Range(
-          new vscode.Position(0, 0),
-          new vscode.Position(0, 0),
+            new vscode.Position(0, 0),
+            new vscode.Position(0, 0),
         ),
       }
     })
-
-    return locations
   },
 })