datacube: cleanup post finos#3886

.changeset/brown-monkeys-reflect.md

@@ -0,0 +1,9 @@
+---
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-application-data-cube': patch
+'@finos/legend-application-studio': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-data-cube': patch
+'@finos/legend-shared': patch
+'@finos/legend-graph': patch
+---

.changeset/early-socks-enjoy.md

@@ -3,5 +3,3 @@
 '@finos/legend-data-cube': patch
 '@finos/legend-shared': patch
 ---
-
-DataCube: Add CSV File as one of the data cube source

packages/legend-application-data-cube/src/components/builder/LegendDataCubeBuilder.tsx

@@ -38,7 +38,7 @@ import {
 import { useEffect } from 'react';
 import { LegendDataCubeSettingStorageKey } from '../../__lib__/LegendDataCubeSetting.js';
 import type { LegendDataCubeBuilderStore } from '../../stores/builder/LegendDataCubeBuilderStore.js';
-import { CSVFileDataCubeSource } from '../../stores/model/CSVFileDataCubeSource.js';
+import { LocalFileDataCubeSource } from '../../stores/model/LocalFileDataCubeSource.js';
 
 const LegendDataCubeBuilderHeader = observer(() => {
   const store = useLegendDataCubeBuilderStore();
@@ -60,7 +60,8 @@ const LegendDataCubeBuilderHeader = observer(() => {
         className="ml-1.5"
         disabled={
           !store.builder?.dataCube ||
-          store.builder.source instanceof CSVFileDataCubeSource
+          /* TODO: @gs-gunjan we should allow saving DataCube using CSV file source */
+          store.builder.source instanceof LocalFileDataCubeSource
         }
         onClick={() => store.saverDisplay.open()}
       >

packages/legend-application-data-cube/src/components/builder/LegendDataCubeCreator.tsx

@@ -18,6 +18,7 @@ import { observer } from 'mobx-react-lite';
 import { LegendDataCubeSourceBuilderType } from '../../stores/builder/source/LegendDataCubeSourceBuilderState.js';
 import { useDropdownMenu } from '@finos/legend-art';
 import {
+  FormBadge_WIP,
   FormButton,
   FormDropdownMenu,
   FormDropdownMenuItem,
@@ -28,14 +29,18 @@ import { LegendQueryDataCubeSourceBuilder } from './source/LegendQueryDataCubeSo
 import { AdhocQueryDataCubeSourceBuilder } from './source/AdhocQueryDataCubeSourceBuilder.js';
 import { AdhocQueryDataCubeSourceBuilderState } from '../../stores/builder/source/AdhocQueryDataCubeSourceBuilderState.js';
 import { useLegendDataCubeBuilderStore } from './LegendDataCubeBuilderStoreProvider.js';
-import { CSVFileDataCubeSourceBuilderState } from '../../stores/builder/source/CSVFileDataCubeSourceBuilderState.js';
-import { CSVFileDataCubeSourceBuilder } from './source/CSVFileDataCubeSourceBuilder.js';
+import { LocalFileDataCubeSourceBuilderState } from '../../stores/builder/source/LocalFileDataCubeSourceBuilderState.js';
+import { LocalFileDataCubeSourceBuilder } from './source/LocalFileDataCubeSourceBuilder.js';
 
 export const LegendDataCubeCreator = observer(() => {
   const store = useLegendDataCubeBuilderStore();
   const state = store.creator;
   const sourceBuilder = state.sourceBuilder;
   const selectedSourceType = sourceBuilder.label;
+  const WIPSourceTypes = [
+    LegendDataCubeSourceBuilderType.ADHOC_QUERY,
+    LegendDataCubeSourceBuilderType.LOCAL_FILE,
+  ];
   const [
     openSourceTypeDropdown,
     closeSourceTypeDropdown,
@@ -46,9 +51,9 @@ export const LegendDataCubeCreator = observer(() => {
   return (
     <>
       <div className="h-[calc(100%_-_40px)] w-full px-2 pt-2">
-        <div className="h-full w-full overflow-auto border border-neutral-300 bg-white">
-          <div className="h-full w-full select-none p-2">
-            <div className="flex h-6 w-full items-center">
+        <div className="h-full w-full border border-neutral-300 bg-white">
+          <div className="h-full w-full select-none">
+            <div className="flex h-10 w-full items-center p-2">
               <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
                 Choose Source Type:
               </div>
@@ -57,13 +62,18 @@ export const LegendDataCubeCreator = observer(() => {
                 onClick={openSourceTypeDropdown}
                 open={sourceTypeDropdownPropsOpen}
               >
-                {selectedSourceType}
+                <div className="flex items-center">
+                  {selectedSourceType}
+                  {WIPSourceTypes.includes(selectedSourceType) && (
+                    <FormBadge_WIP />
+                  )}
+                </div>
               </FormDropdownMenuTrigger>
               <FormDropdownMenu className="w-80" {...sourceTypeDropdownProps}>
                 {[
                   LegendDataCubeSourceBuilderType.LEGEND_QUERY,
                   LegendDataCubeSourceBuilderType.ADHOC_QUERY,
-                  LegendDataCubeSourceBuilderType.CSV_FILE_QUERY,
+                  LegendDataCubeSourceBuilderType.LOCAL_FILE,
                 ].map((type) => (
                   <FormDropdownMenuItem
                     key={type}
@@ -74,12 +84,13 @@ export const LegendDataCubeCreator = observer(() => {
                     autoFocus={type === selectedSourceType}
                   >
                     {type}
+                    {WIPSourceTypes.includes(type) && <FormBadge_WIP />}
                   </FormDropdownMenuItem>
                 ))}
               </FormDropdownMenu>
             </div>
-            <div className="-ml-2 mb-2 mt-2 h-[1px] w-[calc(100%_+_16px)] bg-neutral-200" />
-            <div className="h-[calc(100%_-_40px)] w-full">
+            <div className="ml-2 h-[1px] w-[calc(100%_-_16px)] bg-neutral-200" />
+            <div className="h-[calc(100%_-_41px)] w-full overflow-auto">
               {sourceBuilder instanceof
                 LegendQueryDataCubeSourceBuilderState && (
                 <LegendQueryDataCubeSourceBuilder
@@ -92,8 +103,8 @@ export const LegendDataCubeCreator = observer(() => {
                   sourceBuilder={sourceBuilder}
                 />
               )}
-              {sourceBuilder instanceof CSVFileDataCubeSourceBuilderState && (
-                <CSVFileDataCubeSourceBuilder sourceBuilder={sourceBuilder} />
+              {sourceBuilder instanceof LocalFileDataCubeSourceBuilderState && (
+                <LocalFileDataCubeSourceBuilder sourceBuilder={sourceBuilder} />
               )}
             </div>
           </div>

packages/legend-application-data-cube/src/components/builder/LegendDataCubeLoader.tsx

@@ -106,7 +106,7 @@ const LegendDataCubeSearcher = observer(() => {
 
   return (
     <div className="h-full">
-      <div className="p-1.5">
+      <div className="p-2">
         <div className="relative flex h-6 w-full items-center justify-between">
           <FormTextInput
             ref={searchInputRef}
@@ -136,7 +136,7 @@ const LegendDataCubeSearcher = observer(() => {
         <div className="mt-1 flex h-6 w-full items-center">
           <div className="flex w-[calc(100%_-_128px)] items-center">
             <div className="w-10 text-sm">Filters:</div>
-            <div className="flex h-6 w-[calc(100%_-_40px)] overflow-x-auto">
+            <div className="flex h-5 w-[calc(100%_-_40px)] overflow-x-auto">
               <FormCheckbox
                 label="Mine Only"
                 checked={state.showCurrentUserResultsOnly}
@@ -172,11 +172,11 @@ const LegendDataCubeSearcher = observer(() => {
         </div>
       </div>
       <div className="mx-1.5 mb-1 h-[1px] bg-neutral-200" />
-      <div className="h-[calc(100%_-_71px)]">
+      <div className="h-[calc(100%_-_75px)]">
         <div className="h-full overflow-y-auto">
           {state.searchState.hasCompleted && (
             <>
-              <div className="mb-1 flex h-5 w-full items-center px-1.5 text-sm text-neutral-600">
+              <div className="mb-1 flex h-5 w-full items-center px-2 text-sm text-neutral-600">
                 {state.showingDefaultResults ? (
                   `Refine your search to get better matches`
                 ) : searchResults.length >=
@@ -196,7 +196,7 @@ const LegendDataCubeSearcher = observer(() => {
                 .slice(0, DATA_CUBE_LOADER_TYPEAHEAD_SEARCH_LIMIT)
                 .map((result, idx) => (
                   <div
-                    className="mx-1.5 mb-0.5 flex h-[42px] w-[calc(100%_-_12px)] cursor-pointer border border-neutral-200 bg-neutral-100 hover:bg-neutral-200"
+                    className="mx-2 mb-0.5 flex h-[42px] w-[calc(100%_-_16px)] cursor-pointer border border-neutral-200 bg-neutral-100 hover:bg-neutral-200"
                     key={result.id}
                     title="Click to choose DataCube"
                     onClick={() => state.setSelectedResult(result)}
@@ -262,7 +262,7 @@ export const LegendDataCubeLoader = observer(() => {
           {!selectedResult ? (
             <LegendDataCubeSearcher />
           ) : (
-            <div className="h-full w-full p-1.5">
+            <div className="h-full w-full p-2">
               <div className="relative mb-0.5 flex h-[42px] w-full border border-neutral-200 bg-neutral-100">
                 <div className="w-full">
                   <div className="h-6 w-4/5 overflow-hidden text-ellipsis whitespace-nowrap px-1.5 leading-6">
@@ -306,7 +306,7 @@ export const LegendDataCubeLoader = observer(() => {
                 </div>
               </div>
 
-              <div className="mt-1.5 flex justify-between">
+              <div className="mt-2 flex justify-between">
                 <FormButton
                   className="flex items-center pl-1"
                   onClick={() => state.setSelectedResult(undefined)}

packages/legend-application-data-cube/src/components/builder/source/AdhocQueryDataCubeSourceBuilder.tsx

@@ -16,14 +16,13 @@
 
 import { observer } from 'mobx-react-lite';
 import type { AdhocQueryDataCubeSourceBuilderState } from '../../../stores/builder/source/AdhocQueryDataCubeSourceBuilderState.js';
-import { FormBadge_WIP } from '@finos/legend-data-cube';
 
 export const AdhocQueryDataCubeSourceBuilder = observer(
   (props: { sourceBuilder: AdhocQueryDataCubeSourceBuilderState }) => {
     return (
-      <div className="flex h-full w-full">
+      <div className="flex h-full w-full p-2">
         <div className="flex h-6 items-center text-neutral-500">
-          This is a work-in-progress. <FormBadge_WIP />
+          This is a work-in-progress.
         </div>
       </div>
     );

packages/legend-application-data-cube/src/components/builder/source/LegendQueryDataCubeSourceBuilder.tsx

@@ -107,7 +107,7 @@ const LegendQuerySearcher = observer((props: { state: QueryLoaderState }) => {
 
   return (
     <div className="h-full">
-      <div className="p-1.5">
+      <div className="p-2">
         <div className="relative flex h-6 w-full items-center justify-between">
           <FormTextInput
             ref={searchInputRef}
@@ -137,7 +137,7 @@ const LegendQuerySearcher = observer((props: { state: QueryLoaderState }) => {
         <div className="mt-1 flex h-6 w-full items-center">
           <div className="flex w-[calc(100%_-_128px)] items-center">
             <div className="w-10 text-sm">Filters:</div>
-            <div className="flex h-6 w-[calc(100%_-_40px)] overflow-x-auto">
+            <div className="flex h-5 w-[calc(100%_-_40px)] overflow-x-auto">
               <FormCheckbox
                 label="Mine Only"
                 checked={isMineOnly}
@@ -174,11 +174,11 @@ const LegendQuerySearcher = observer((props: { state: QueryLoaderState }) => {
         </div>
       </div>
       <div className="mx-1.5 mb-1 h-[1px] bg-neutral-200" />
-      <div className="h-[calc(100%_-_71px)]">
+      <div className="h-[calc(100%_-_75px)]">
         <div className="h-full overflow-y-auto">
           {state.searchQueriesState.hasCompleted && (
             <>
-              <div className="mb-1 flex h-5 w-full items-center px-1.5 text-sm text-neutral-600">
+              <div className="mb-1 flex h-5 w-full items-center px-2 text-sm text-neutral-600">
                 {state.showingDefaultQueries ? (
                   (state.generateDefaultQueriesSummaryText?.(searchResults) ??
                   `Refine your search to get better matches`)
@@ -199,7 +199,7 @@ const LegendQuerySearcher = observer((props: { state: QueryLoaderState }) => {
                 .slice(0, QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT)
                 .map((query, idx) => (
                   <div
-                    className="mx-1.5 mb-0.5 flex h-[42px] w-[calc(100%_-_12px)] cursor-pointer border border-neutral-200 bg-neutral-100 hover:bg-neutral-200"
+                    className="mx-2 mb-0.5 flex h-[42px] w-[calc(100%_-_16px)] cursor-pointer border border-neutral-200 bg-neutral-100 hover:bg-neutral-200"
                     key={query.id}
                     title="Click to choose query"
                     onClick={() => state.loadQuery(query)}
@@ -261,7 +261,7 @@ export const LegendQueryDataCubeSourceBuilder = observer(
       return <LegendQuerySearcher state={sourceBuilder.queryLoader} />;
     }
     return (
-      <div className="h-full">
+      <div className="h-full w-full p-2">
         <div className="relative mb-0.5 flex h-[60px] w-full border border-neutral-200 bg-neutral-100">
           <div className="w-full">
             <div className="h-6 w-4/5 overflow-hidden text-ellipsis whitespace-nowrap px-1.5 leading-6">
@@ -309,7 +309,7 @@ export const LegendQueryDataCubeSourceBuilder = observer(
           </div>
         </div>
         {sourceBuilder.queryCode !== undefined && (
-          <div className="mt-1.5 h-40 w-full">
+          <div className="mt-2 h-40 w-full">
             <FormCodeEditor
               value={sourceBuilder.queryCode}
               title="Query Code"
@@ -320,7 +320,7 @@ export const LegendQueryDataCubeSourceBuilder = observer(
           </div>
         )}
         <FormButton
-          className="mt-1.5 flex items-center pl-1"
+          className="mt-2 flex items-center pl-1"
           onClick={() => sourceBuilder.unsetQuery()}
         >
           <DataCubeIcon.ChevronLeft className="mr-0.5" />