@finos/legend-application-data-cube 0.2.8 → 0.3.0

package/lib/stores/model/LocalFileDataCubeSource.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { DataCubeSource } from '@finos/legend-data-cube';
+import { type V1_PureModelContextData } from '@finos/legend-graph';
+import { SerializationFactory, type PlainObject } from '@finos/legend-shared';
+export declare const LOCAL_FILE_QUERY_DATA_CUBE_SOURCE_TYPE = "localFile";
+export declare enum LocalFileDataCubeSourceFormat {
+    CSV = "csv"
+}
+export declare class LocalFileDataCubeSource extends DataCubeSource {
+    model: PlainObject<V1_PureModelContextData>;
+    runtime: string;
+    db: string;
+    schema: string;
+    table: string;
+    count: number;
+    fileName: string;
+    fileFormat: LocalFileDataCubeSourceFormat;
+}
+export declare class RawLocalFileQueryDataCubeSource {
+    model: PlainObject<V1_PureModelContextData>;
+    runtime: string;
+    db: string;
+    schema: string;
+    table: string;
+    count: number;
+    fileName: string;
+    fileFormat: LocalFileDataCubeSourceFormat;
+    static readonly serialization: SerializationFactory<RawLocalFileQueryDataCubeSource>;
+}
+//# sourceMappingURL=LocalFileDataCubeSource.d.ts.map

package/lib/stores/model/LocalFileDataCubeSource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalFileDataCubeSource.d.ts","sourceRoot":"","sources":["../../../src/stores/model/LocalFileDataCubeSource.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EACL,oBAAoB,EAEpB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,sCAAsC,cAAc,CAAC;AAElE,oBAAY,6BAA6B;IACvC,GAAG,QAAQ;CAEZ;AAED,qBAAa,uBAAwB,SAAQ,cAAc;IACzD,KAAK,EAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAC7C,OAAO,EAAG,MAAM,CAAC;IACjB,EAAE,EAAG,MAAM,CAAC;IACZ,MAAM,EAAG,MAAM,CAAC;IAChB,KAAK,EAAG,MAAM,CAAC;IACf,KAAK,EAAG,MAAM,CAAC;IACf,QAAQ,EAAG,MAAM,CAAC;IAClB,UAAU,EAAG,6BAA6B,CAAC;CAC5C;AAED,qBAAa,+BAA+B;IAC1C,KAAK,EAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAC7C,OAAO,EAAG,MAAM,CAAC;IACjB,EAAE,EAAG,MAAM,CAAC;IACZ,MAAM,EAAG,MAAM,CAAC;IAChB,KAAK,EAAG,MAAM,CAAC;IACf,KAAK,EAAG,MAAM,CAAC;IACf,QAAQ,EAAG,MAAM,CAAC;IAClB,UAAU,EAAG,6BAA6B,CAAC;IAE3C,MAAM,CAAC,QAAQ,CAAC,aAAa,wDAY3B;CACH"}

package/lib/stores/model/LocalFileDataCubeSource.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { DataCubeSource } from '@finos/legend-data-cube';
+import {} from '@finos/legend-graph';
+import { SerializationFactory, usingConstantValueSchema, } from '@finos/legend-shared';
+import { createModelSchema, primitive, raw } from 'serializr';
+export const LOCAL_FILE_QUERY_DATA_CUBE_SOURCE_TYPE = 'localFile';
+export var LocalFileDataCubeSourceFormat;
+(function (LocalFileDataCubeSourceFormat) {
+    LocalFileDataCubeSourceFormat["CSV"] = "csv";
+    // TODO: arrow/parquet/excel, etc.
+})(LocalFileDataCubeSourceFormat || (LocalFileDataCubeSourceFormat = {}));
+export class LocalFileDataCubeSource extends DataCubeSource {
+    model;
+    runtime;
+    db;
+    schema;
+    table;
+    count;
+    fileName;
+    fileFormat;
+}
+export class RawLocalFileQueryDataCubeSource {
+    model;
+    runtime;
+    db;
+    schema;
+    table;
+    count;
+    fileName;
+    fileFormat;
+    static serialization = new SerializationFactory(createModelSchema(RawLocalFileQueryDataCubeSource, {
+        _type: usingConstantValueSchema(LOCAL_FILE_QUERY_DATA_CUBE_SOURCE_TYPE),
+        count: primitive(),
+        db: primitive(),
+        fileFormat: primitive(),
+        fileName: primitive(),
+        model: raw(),
+        runtime: primitive(),
+        schema: primitive(),
+        table: primitive(),
+    }));
+}
+//# sourceMappingURL=LocalFileDataCubeSource.js.map

package/lib/stores/model/LocalFileDataCubeSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalFileDataCubeSource.js","sourceRoot":"","sources":["../../../src/stores/model/LocalFileDataCubeSource.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAgC,MAAM,qBAAqB,CAAC;AACnE,OAAO,EACL,oBAAoB,EACpB,wBAAwB,GAEzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAE9D,MAAM,CAAC,MAAM,sCAAsC,GAAG,WAAW,CAAC;AAElE,MAAM,CAAN,IAAY,6BAGX;AAHD,WAAY,6BAA6B;IACvC,4CAAW,CAAA;IACX,kCAAkC;AACpC,CAAC,EAHW,6BAA6B,KAA7B,6BAA6B,QAGxC;AAED,MAAM,OAAO,uBAAwB,SAAQ,cAAc;IACzD,KAAK,CAAwC;IAC7C,OAAO,CAAU;IACjB,EAAE,CAAU;IACZ,MAAM,CAAU;IAChB,KAAK,CAAU;IACf,KAAK,CAAU;IACf,QAAQ,CAAU;IAClB,UAAU,CAAiC;CAC5C;AAED,MAAM,OAAO,+BAA+B;IAC1C,KAAK,CAAwC;IAC7C,OAAO,CAAU;IACjB,EAAE,CAAU;IACZ,MAAM,CAAU;IAChB,KAAK,CAAU;IACf,KAAK,CAAU;IACf,QAAQ,CAAU;IAClB,UAAU,CAAiC;IAE3C,MAAM,CAAU,aAAa,GAAG,IAAI,oBAAoB,CACtD,iBAAiB,CAAC,+BAA+B,EAAE;QACjD,KAAK,EAAE,wBAAwB,CAAC,sCAAsC,CAAC;QACvE,KAAK,EAAE,SAAS,EAAE;QAClB,EAAE,EAAE,SAAS,EAAE;QACf,UAAU,EAAE,SAAS,EAAE;QACvB,QAAQ,EAAE,SAAS,EAAE;QACrB,KAAK,EAAE,GAAG,EAAE;QACZ,OAAO,EAAE,SAAS,EAAE;QACpB,MAAM,EAAE,SAAS,EAAE;QACnB,KAAK,EAAE,SAAS,EAAE;KACnB,CAAC,CACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-data-cube",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "Legend DataCube application core",
   "keywords": [
     "legend",
@@ -43,15 +43,15 @@
   },
   "dependencies": {
     "@duckdb/duckdb-wasm": "1.29.0",
-    "@finos/legend-application": "16.0.25",
-    "@finos/legend-art": "7.1.82",
-    "@finos/legend-code-editor": "2.0.46",
-    "@finos/legend-data-cube": "0.1.6",
-    "@finos/legend-graph": "32.1.4",
-    "@finos/legend-query-builder": "4.16.6",
-    "@finos/legend-server-depot": "6.0.81",
-    "@finos/legend-shared": "11.0.4",
-    "@finos/legend-storage": "3.0.123",
+    "@finos/legend-application": "16.0.26",
+    "@finos/legend-art": "7.1.83",
+    "@finos/legend-code-editor": "2.0.47",
+    "@finos/legend-data-cube": "0.1.7",
+    "@finos/legend-graph": "32.1.5",
+    "@finos/legend-query-builder": "4.16.7",
+    "@finos/legend-server-depot": "6.0.82",
+    "@finos/legend-shared": "11.0.5",
+    "@finos/legend-storage": "3.0.124",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
     "apache-arrow": "19.0.0",

package/src/components/builder/LegendDataCubeBuilder.tsx

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

package/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,12 +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 { 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,
@@ -44,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>
@@ -55,12 +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.LOCAL_FILE,
                 ].map((type) => (
                   <FormDropdownMenuItem
                     key={type}
@@ -71,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
@@ -89,6 +103,9 @@ export const LegendDataCubeCreator = observer(() => {
                   sourceBuilder={sourceBuilder}
                 />
               )}
+              {sourceBuilder instanceof LocalFileDataCubeSourceBuilderState && (
+                <LocalFileDataCubeSourceBuilder sourceBuilder={sourceBuilder} />
+              )}
             </div>
           </div>
         </div>

package/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)}

package/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>
     );

package/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" />

package/src/components/builder/source/LocalFileDataCubeSourceBuilder.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import type { LocalFileDataCubeSourceBuilderState } from '../../../stores/builder/source/LocalFileDataCubeSourceBuilderState.js';
+import { AlertType, FormAlert, FormCodeEditor } from '@finos/legend-data-cube';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
+
+export const LocalFileDataCubeSourceBuilder = observer(
+  (props: { sourceBuilder: LocalFileDataCubeSourceBuilderState }) => {
+    const { sourceBuilder } = props;
+
+    return (
+      <div className="h-full w-full p-2">
+        <FormAlert
+          message="Local file support is experimental"
+          type={AlertType.WARNING}
+          text={`Currently, support for local file comes with the following limitations:
+- Only CSV files are supported, but not all variants of CSV files are supported (required header row, comma delimiter, single escape quote).
+- Data from uploaded file will not be stored nor shared.
+- DataCube created with local file source cannot be saved.`}
+        />
+        <div className="mt-2 flex h-6 w-full items-center text-neutral-500">
+          <input
+            type="file"
+            onChange={(event) => {
+              sourceBuilder.processFile(event.target.files?.[0]);
+            }}
+            className="w-full"
+          />
+        </div>
+        {sourceBuilder.previewText !== undefined && (
+          <div className="mt-2 h-40">
+            <FormCodeEditor
+              value={sourceBuilder.previewText}
+              language={CODE_EDITOR_LANGUAGE.TEXT}
+              isReadOnly={true}
+              hidePadding={true}
+              title="Data Preview"
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+);