diff --git a/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts b/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts index edbdfd46c..b53f10742 100644 --- a/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts +++ b/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts @@ -148,7 +148,7 @@ export class ArrayDataSource viewport, }: ArrayDataSourceConstructorProps) { super(); - + console.log(`ArrayDataSource #${viewport}`); if (!data || !columnDescriptors) { throw Error( "ArrayDataSource constructor called without data or without columnDescriptors", @@ -700,8 +700,9 @@ export class ArrayDataSource return this.#title ?? `${this.table.module} ${this.table.table}`; } - set title(title: string | undefined) { + set title(title: string) { this.#title = title; + this.emit("title-changed", this.viewport, title); } get _clientCallback() { diff --git a/vuu-ui/packages/vuu-data-local/src/json-data-source/json-data-source.ts b/vuu-ui/packages/vuu-data-local/src/json-data-source/json-data-source.ts index 39bfd888b..9b2459f6c 100644 --- a/vuu-ui/packages/vuu-data-local/src/json-data-source/json-data-source.ts +++ b/vuu-ui/packages/vuu-data-local/src/json-data-source/json-data-source.ts @@ -369,10 +369,10 @@ export class JsonDataSource } get title() { - return this.#title; + return this.#title ?? ""; } - set title(title: string | undefined) { + set title(title: string) { this.#title = title; } diff --git a/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts b/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts index b9c7daa0d..326bd5dba 100644 --- a/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts +++ b/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts @@ -108,7 +108,7 @@ export class VuuDataSource this.bufferSize = bufferSize; this.table = table; - this.viewport = viewport; + this.viewport = viewport ?? ""; this.#config = { ...this.#config, @@ -126,7 +126,7 @@ export class VuuDataSource async subscribe( { - viewport = this.viewport ?? (this.viewport = uuid()), + viewport = this.viewport || (this.viewport = uuid()), columns, aggregations, range, @@ -605,15 +605,18 @@ export class VuuDataSource return this.#title ?? `${this.table.module} ${this.table.table}`; } - set title(title: string | undefined) { + set title(title: string) { this.#title = title; if (this.viewport && title) { + // This message doesn't actually trigger a message to Vuu server + // it will be used to recompute visual link labels this.server?.send({ type: "setTitle", title, viewport: this.viewport, }); } + this.emit("title-changed", this.viewport ?? "'", title); } get visualLink() { diff --git a/vuu-ui/packages/vuu-data-test/src/VuuModule.ts b/vuu-ui/packages/vuu-data-test/src/VuuModule.ts index a09ccb510..7e3b3b5d8 100644 --- a/vuu-ui/packages/vuu-data-test/src/VuuModule.ts +++ b/vuu-ui/packages/vuu-data-test/src/VuuModule.ts @@ -103,8 +103,6 @@ export class VuuModule implements IVuuModule { } private unregisterViewport = (viewportId: string) => { - console.log(` unregister viewport ${viewportId}`); - for (const [tableName, subscriptions] of this.#subscriptionMap) { if (subscriptions[0].viewportId.toString() === viewportId) { this.#subscriptionMap.delete(tableName); @@ -133,21 +131,22 @@ export class VuuModule implements IVuuModule { throw Error(`getSubscribedDataSource #${vpId} not in subscriptionMap`); } - getLink = ( + getLinks = ( subscriptionMap: Map, vuuLinks: VuuLink[], ) => { const visualLinks: LinkDescriptorWithLabel[] = []; for (let i = 0; i < vuuLinks.length; i++) { - if (subscriptionMap.get(vuuLinks[i].toTable)) { - const newLink: LinkDescriptorWithLabel = { - parentClientVpId: subscriptionMap.get(vuuLinks[i].toTable)?.[0] - .viewportId as string, - parentVpId: subscriptionMap.get(vuuLinks[i].toTable)?.[0] - .viewportId as string, - link: vuuLinks[i], - }; - visualLinks.push(newLink); + const subscriptions = subscriptionMap.get(vuuLinks[i].toTable); + if (subscriptions) { + subscriptions.forEach(({ viewportId }) => { + const newLink: LinkDescriptorWithLabel = { + parentClientVpId: viewportId, + parentVpId: viewportId, + link: vuuLinks[i], + }; + visualLinks.push(newLink); + }); } } return visualLinks; @@ -198,7 +197,7 @@ export class VuuModule implements IVuuModule { const visualLinks = this.#visualLinks?.[tableName] === undefined ? undefined - : this.getLink( + : this.getLinks( this.#subscriptionMap, this.#visualLinks[tableName] as VuuLink[], ); @@ -223,13 +222,20 @@ export class VuuModule implements IVuuModule { dataSource.on("unsubscribed", this.unregisterViewport); - this.#subscriptionMap.set(tableName, [ - { viewportId: dataSource.viewport as string, dataSource }, - ]); + const existingSubscriptions = this.#subscriptionMap.get(tableName); + const subscription = { + viewportId: dataSource.viewport as string, + dataSource, + }; + if (existingSubscriptions) { + existingSubscriptions.push(subscription); + } else { + this.#subscriptionMap.set(tableName, [subscription]); + } for (const key of this.#subscriptionMap.keys()) { if (this.#visualLinks?.[key as T] && key !== tableName) { - const vLink = this.getLink( + const vLink = this.getLinks( this.#subscriptionMap, this.#visualLinks?.[key as T] as VuuLink[], ); diff --git a/vuu-ui/packages/vuu-data-types/index.d.ts b/vuu-ui/packages/vuu-data-types/index.d.ts index 3b3754af3..ba4363b25 100644 --- a/vuu-ui/packages/vuu-data-types/index.d.ts +++ b/vuu-ui/packages/vuu-data-types/index.d.ts @@ -343,6 +343,7 @@ export type DataSourceEvents = { unsubscribed: DataSourceEventHandler; disabled: DataSourceEventHandler; enabled: DataSourceEventHandler; + "title-changed": (id: string, title: string) => void; "visual-link-created": (message: DataSourceVisualLinkCreatedMessage) => void; "visual-link-removed": () => void; }; @@ -507,7 +508,7 @@ export interface DataSource * Users can edit titles on components. If so, and this is a table component, we will display this title in * the context menu rather than the underlying table name (which may not be unique within the layout) */ - title?: string; + title: string; unsubscribe: () => void; viewport?: string; visualLink?: LinkDescriptorWithLabel; diff --git a/vuu-ui/packages/vuu-layout/src/layout-header/Header.tsx b/vuu-ui/packages/vuu-layout/src/layout-header/Header.tsx index 2ab092d48..41ef39fae 100644 --- a/vuu-ui/packages/vuu-layout/src/layout-header/Header.tsx +++ b/vuu-ui/packages/vuu-layout/src/layout-header/Header.tsx @@ -84,7 +84,7 @@ export const Header = ({ originalValue = "", finalValue = "", allowDeactivation = true, - editCancelled = false + editCancelled = false, ) => { setEditing(false); if (editCancelled) { @@ -113,7 +113,7 @@ export const Header = ({ break; default: postTitleContributedItems.push( - cloneElement(contribution.content, { key: i }) + cloneElement(contribution.content, { key: i }), ); } }); @@ -130,8 +130,7 @@ export const Header = ({ onExitEditMode={handleExitEditMode} onKeyDown={handleTitleKeyDown} ref={labelFieldRef} - tabIndex={0} - /> + />, ); allowRename && @@ -143,8 +142,9 @@ export const Header = ({ key="edit-button" onClick={handleClickEdit} onMouseDown={handleButtonMouseDown} + tabIndex={0} variant="secondary" - /> + />, ); closeable && @@ -156,21 +156,21 @@ export const Header = ({ onClick={handleClose} onMouseDown={handleButtonMouseDown} variant="secondary" - /> + />, ); postTitleContributedItems.length > 0 && toolbarItems.push(
{postTitleContributedItems} -
+ , ); actionButtons.length > 0 && toolbarItems.push(
{actionButtons} -
+ , ); return ( diff --git a/vuu-ui/packages/vuu-layout/src/layout-view/View.tsx b/vuu-ui/packages/vuu-layout/src/layout-view/View.tsx index 25718a92f..239138f73 100644 --- a/vuu-ui/packages/vuu-layout/src/layout-view/View.tsx +++ b/vuu-ui/packages/vuu-layout/src/layout-view/View.tsx @@ -39,7 +39,7 @@ const getProps = (state?: Props, props?: Props) => { */ const View = forwardRef(function View( props: ViewProps, - forwardedRef: ForwardedRef + forwardedRef: ForwardedRef, ) { const { Header = VuuHeader, @@ -73,6 +73,7 @@ const View = forwardRef(function View( }); const id = useId(idProp); + const rootRef = useRef(null); const mainRef = useRef(null); const [componentProps, _setComponentProps] = useState(); @@ -106,7 +107,7 @@ const View = forwardRef(function View( if (React.isValidElement(children) && (restoredState || componentProps)) { return React.cloneElement( children, - getProps(restoredState, componentProps) + getProps(restoredState, componentProps), ); } return children; @@ -138,7 +139,7 @@ const View = forwardRef(function View( saveSession, setComponentProps, title, - ] + ], ); const headerProps = typeof header === "object" ? header : {}; @@ -185,7 +186,7 @@ interface ViewComponentType { ( props: ViewProps & { ref?: ForwardedRef; - } + }, ): ReactElement; displayName?: string; } diff --git a/vuu-ui/packages/vuu-layout/src/layout-view/useViewBroadcastChannel.ts b/vuu-ui/packages/vuu-layout/src/layout-view/useViewBroadcastChannel.ts index 71eb72972..0fbb0d3df 100644 --- a/vuu-ui/packages/vuu-layout/src/layout-view/useViewBroadcastChannel.ts +++ b/vuu-ui/packages/vuu-layout/src/layout-view/useViewBroadcastChannel.ts @@ -12,7 +12,7 @@ export type BroadcastMessageHandler = (message: ViewBroadcastMessage) => void; const isMessageForSelf = ( message: ViewBroadcastMessage, id?: string, - path?: string + path?: string, ) => { if (id && message.targetId === id) { return true; @@ -25,7 +25,7 @@ const isMessageForSelf = ( export const useViewBroadcastChannel = ( id?: string, path?: string, - onMessageReceived?: BroadcastMessageHandler + onMessageReceived?: BroadcastMessageHandler, ) => { const broadcastChannelRef = useRef>(); @@ -34,6 +34,7 @@ export const useViewBroadcastChannel = ( const broadcastChannel: VuuBroadcastChannel = new BroadcastChannel("vuu"); broadcastChannel.onmessage = (evt) => { + console.log(`message received by ${id}`); if (isMessageForSelf(evt.data, id, path)) { onMessageReceived?.(evt.data); } @@ -46,6 +47,9 @@ export const useViewBroadcastChannel = ( }, [id, onMessageReceived, path]); const sendMessage = useCallback((message: ViewBroadcastMessage) => { + console.log(`send message from ${id} to ${message.targetId}`, { + message, + }); broadcastChannelRef.current?.postMessage(message); }, []); diff --git a/vuu-ui/packages/vuu-theme/css/components/header.css b/vuu-ui/packages/vuu-theme/css/components/header.css index 824d33cc3..fba6669e1 100644 --- a/vuu-ui/packages/vuu-theme/css/components/header.css +++ b/vuu-ui/packages/vuu-theme/css/components/header.css @@ -1,6 +1,5 @@ .salt-theme.vuu-theme { .vuuHeader-title { - height: 100%; border-bottom: solid 2px var(--vuu-color-purple-10); } } diff --git a/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.css b/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.css index bd884df38..3e5100ea8 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.css +++ b/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.css @@ -10,32 +10,29 @@ display: flex; flex-direction: column; font-size: var(--salt-text-fontSize); - height: var(--editableLabel-height); + height: 100%; justify-content: center; letter-spacing: normal; /* max-width: 170px; */ overflow: hidden; - padding: 0 var(--editableLabel-padding); + padding-right: var(--editableLabel-padding); position: relative; text-overflow: ellipsis; white-space: nowrap; z-index: var(--salt-zIndex-default); - &:focus, - &:focus-within { - outline: var(--salt-focused-outline); - } - &[data-embedded] { outline: none; } } .vuuEditableLabel:before { + box-sizing: content-box; content: attr(data-text); display: block; height: 0px; + padding: 0 var(--salt-spacing-200); visibility: hidden; white-space: pre-wrap; } @@ -43,12 +40,10 @@ .vuuEditableLabel .saltInput { font-weight: var(--salt-text-fontWeight); left: var(--editableLabel-padding, 0); - padding: 0; - outline-style: none; - position: absolute; + padding: 0 var(--salt-spacing-100); right: var(--editableLabel-padding, 0); top: var(--saltEditableLabel-top, 1px); - width: auto; + width: calc(100% - 4px); } .vuuEditableLabel .saltInput-activationIndicator { @@ -72,6 +67,7 @@ .vuuEditableLabel-label { overflow: hidden; + padding-left: 10px; text-overflow: ellipsis; white-space: nowrap; } diff --git a/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.tsx b/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.tsx index 927a807f4..b6feafbf6 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.tsx @@ -23,7 +23,7 @@ export type ExitEditModeHandler = ( originalLabel: string | undefined, editedLabel: string | undefined, allowDeactivation?: boolean, - editCancelled?: boolean + editCancelled?: boolean, ) => void; export interface EditAPI { @@ -61,7 +61,7 @@ export const EditableLabel = forwardRef(function EditableLabel( value: valueProp, ...restProps }: EditableLabelProps, - forwardedRef: ForwardedRef + forwardedRef: ForwardedRef, ): ReactElement { const targetWindow = useWindow(); useComponentCssInjection({ @@ -91,7 +91,7 @@ export const EditableLabel = forwardRef(function EditableLabel( (value: boolean) => { _setEditing((editingRef.current = value)); }, - [_setEditing] + [_setEditing], ); const initialValue = useRef(value); @@ -115,7 +115,7 @@ export const EditableLabel = forwardRef(function EditableLabel( () => ({ beginEdit, }), - [beginEdit] + [beginEdit], ); const exitEditMode = useCallback( @@ -130,14 +130,14 @@ export const EditableLabel = forwardRef(function EditableLabel( originalValue, originalValue, allowDeactivation, - cancelEdit + cancelEdit, ); } else { initialValue.current = value; onExitEditMode?.(originalValue, value, allowDeactivation, cancelEdit); } }, - [onExitEditMode, setEditing, setValue, value] + [onExitEditMode, setEditing, setValue, value], ); const handleChange = (evt: ChangeEvent) => { @@ -186,7 +186,6 @@ export const EditableLabel = forwardRef(function EditableLabel( onChange={handleChange} onKeyDown={handleKeyDown} inputRef={inputRef} - style={{ padding: 0 }} textAlign="left" variant="secondary" /> diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css index 81a3630b9..a1c380438 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css +++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css @@ -84,6 +84,7 @@ .vuuTab .vuuTab-text { display: inline-block; + height: 100%; position: relative; overflow: hidden; text-align: var(--salt-text-textAlign-embedded); @@ -102,20 +103,6 @@ font-weight: var(--salt-navigable-fontWeight-active); } -/* FIXME: these are all focusVisible styles, but with a bespoke inset */ -.vuuTab-editing:after { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 2px; - outline-color: var(--salt-focused-outlineColor); - outline-style: var(--salt-focused-outlineStyle); - outline-width: var(--salt-focused-outlineWidth); - outline-offset: -2px; -} - .vuuTab.vuuFocusVisible { background: var( --vuuTab-hover-background, diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts b/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts index 13bba5ff9..a71a0ac9b 100644 --- a/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts +++ b/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts @@ -1,5 +1,4 @@ import { useViewContext } from "@finos/vuu-layout"; -import { VuuDataSource } from "@finos/vuu-data-remote"; import { DataSource, DataSourceConfig, @@ -10,6 +9,7 @@ import { useCallback, useMemo } from "react"; import { BasketTradingFeatureProps } from "./VuuBasketTradingFeature"; import { useNotifications } from "@finos/vuu-popups"; import { VuuRpcViewportRequest } from "@finos/vuu-protocol-types"; +import { useDataSource } from "@finos/vuu-utils"; export type basketDataSourceKey = | "data-source-basket" @@ -31,6 +31,7 @@ export const useBasketTradingDataSources = ({ }) => { const notify = useNotifications(); const { id, loadSession, saveSession, title } = useViewContext(); + const { VuuDataSource } = useDataSource(); const [ dataSourceBasket, @@ -80,7 +81,7 @@ export const useBasketTradingDataSources = ({ const dataSources: DataSource[] = []; for (const [key, schema, bufferSize, config] of dataSourceConfig) { - let dataSource = loadSession?.(key) as VuuDataSource; + let dataSource = loadSession?.(key) as DataSource; if (dataSource === undefined) { dataSource = new VuuDataSource({ ...config, @@ -102,6 +103,7 @@ export const useBasketTradingDataSources = ({ basketTradingConstituentJoinSchema, basketConstituentSchema, loadSession, + VuuDataSource, id, title, saveSession, diff --git a/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx b/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx index 85c3367f7..42476ef27 100644 --- a/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx +++ b/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx @@ -162,7 +162,7 @@ export const useFilterTable = ({ tableSchema }: FilterTableFeatureProps) => { ); useEffect(() => { - if (dataSource.title !== title) { + if (title && dataSource.title !== title) { dataSource.title = title; } }, [dataSource, title]); diff --git a/vuu-ui/sample-apps/feature-filter-table/src/useSessionDataSource.ts b/vuu-ui/sample-apps/feature-filter-table/src/useSessionDataSource.ts index 24f14856c..969054c73 100644 --- a/vuu-ui/sample-apps/feature-filter-table/src/useSessionDataSource.ts +++ b/vuu-ui/sample-apps/feature-filter-table/src/useSessionDataSource.ts @@ -1,10 +1,9 @@ -import { VuuDataSource } from "@finos/vuu-data-remote"; import { DataSource, DataSourceConfig, TableSchema, } from "@finos/vuu-data-types"; -import { isConfigChanged, resetRange } from "@finos/vuu-utils"; +import { isConfigChanged, resetRange, useDataSource } from "@finos/vuu-utils"; import { useViewContext } from "@finos/vuu-layout"; import { useCallback, useMemo } from "react"; @@ -22,6 +21,9 @@ export const useSessionDataSource = ({ tableSchema: TableSchema; }) => { const { id, load, save, loadSession, saveSession, title } = useViewContext(); + const { VuuDataSource } = useDataSource(); + + console.log(`useSessionDataSource #${id}`); const { "datasource-config": dataSourceConfigFromState } = useMemo(() => load?.() ?? NO_CONFIG, [load]); @@ -32,25 +34,19 @@ export const useSessionDataSource = ({ if (confirmed === undefined) { const { noChanges } = isConfigChanged( dataSourceConfigFromState, - config + config, ); if (noChanges === false) { save?.(config, "datasource-config"); } } }, - [dataSourceConfigFromState, save] + [dataSourceConfigFromState, save], ); const dataSource: DataSource = useMemo(() => { - let ds = loadSession?.(dataSourceSessionKey) as VuuDataSource; + let ds = loadSession?.(dataSourceSessionKey) as DataSource; if (ds) { - // Only required when injecting a dataSource into session - // state in Showcase examples - if (!ds.hasListener("config", handleDataSourceConfigChange)) { - ds.on("config", handleDataSourceConfigChange); - } - if (dataSourceConfigFromState) { // this won't do anything if dataSource config already matches this // This is only really used when injecting a dataSource into session @@ -82,6 +78,7 @@ export const useSessionDataSource = ({ saveSession?.(ds, "data-source"); return ds; }, [ + VuuDataSource, dataSourceConfigFromState, dataSourceSessionKey, handleDataSourceConfigChange, diff --git a/vuu-ui/showcase/src/examples/Apps/SampleApp.examples.tsx b/vuu-ui/showcase/src/examples/Apps/SampleApp.examples.tsx index 81d182e7c..3e76bd76b 100644 --- a/vuu-ui/showcase/src/examples/Apps/SampleApp.examples.tsx +++ b/vuu-ui/showcase/src/examples/Apps/SampleApp.examples.tsx @@ -4,11 +4,11 @@ import { LeftNav, SettingsSchema, Shell, - SidePanelProps + SidePanelProps, } from "@finos/vuu-shell"; import { ColumnSettingsPanel, - TableSettingsPanel + TableSettingsPanel, } from "@finos/vuu-table-extras"; import { DragDropProvider } from "@finos/vuu-ui-controls"; import { @@ -16,7 +16,7 @@ import { DynamicFeatureProps, GetFeaturePaths, env, - registerComponent + registerComponent, } from "@finos/vuu-utils"; import { CSSProperties, useMemo } from "react"; import { sysLayouts } from "../_test-data/sysLayoutMetadata"; @@ -33,17 +33,17 @@ let displaySequence = 1; const getFeaturePath: GetFeaturePaths = ({ env, fileName, - withCss = env === "production" + withCss = env === "production", }) => { if (env === "production") { const url = `/features/${fileName}.feature.js`; return { url, - css: withCss ? `/features/${fileName}.feature.css` : undefined + css: withCss ? `/features/${fileName}.feature.css` : undefined, }; } else { return { - url: `/src/features/${fileName}.feature` + url: `/src/features/${fileName}.feature`, }; } }; @@ -51,7 +51,7 @@ const getFeaturePath: GetFeaturePaths = ({ const featurePaths: Record = { FilterTableFeature: getFeaturePath({ env, fileName: "FilterTable" }), InstrumentTiles: getFeaturePath({ env, fileName: "InstrumentTiles" }), - BasketTrading: getFeaturePath({ env, fileName: "BasketTrading" }) + BasketTrading: getFeaturePath({ env, fileName: "BasketTrading" }), }; const dynamicFeatures: DynamicFeatureDescriptor[] = [ @@ -60,9 +60,9 @@ const dynamicFeatures: DynamicFeatureDescriptor[] = [ name: "filter-table", ...featurePaths.FilterTableFeature, featureProps: { - schema: "*" + schema: "*", }, - leftNavLocation: "vuu-tables" + leftNavLocation: "vuu-tables", }, { title: "Instrument Price Tiles", @@ -72,41 +72,41 @@ const dynamicFeatures: DynamicFeatureDescriptor[] = [ schemas: [ { module: "SIMUL", - table: "instrumentPrices" - } - ] + table: "instrumentPrices", + }, + ], }, - leftNavLocation: "vuu-features" + leftNavLocation: "vuu-features", }, { title: "Basket Trading", name: "basket-trading", ...featurePaths.BasketTrading, viewProps: { - header: false + header: false, }, featureProps: { schemas: [ { module: "BASKET", - table: "basket" + table: "basket", }, { module: "BASKET", - table: "basketTrading" + table: "basketTrading", }, { module: "BASKET", - table: "basketTradingConstituentJoin" + table: "basketTradingConstituentJoin", }, { module: "BASKET", - table: "basketConstituent" - } - ] + table: "basketConstituent", + }, + ], }, - leftNavLocation: "vuu-features" - } + leftNavLocation: "vuu-features", + }, ]; const userSettingsSchema: SettingsSchema = { @@ -116,9 +116,9 @@ const userSettingsSchema: SettingsSchema = { label: "Mode", values: ["light", "dark"], defaultValue: "light", - type: "string" - } - ] + type: "string", + }, + ], }; const SampleApp = () => { @@ -126,18 +126,18 @@ const SampleApp = () => { () => ({ "basket-instruments": { dropTargets: "basket-constituents", - payloadType: "key" - } + payloadType: "key", + }, }), - [] + [], ); const SidePanelProps = useMemo( () => ({ children: , - sizeOpen: 240 + sizeOpen: 240, }), - [] + [], ); return ( @@ -150,14 +150,14 @@ const SampleApp = () => { { export const SampleAppDefaultFeatures = () => { document.cookie = `vuu-username=${user.username}`; - return ; + return ( + + + + ); }; SampleAppDefaultFeatures.displaySequence = displaySequence++; diff --git a/vuu-ui/showcase/src/examples/VuuFeatures/BasketTradingFeature.examples.tsx b/vuu-ui/showcase/src/examples/VuuFeatures/BasketTradingFeature.examples.tsx index 1aa287103..807443f7a 100644 --- a/vuu-ui/showcase/src/examples/VuuFeatures/BasketTradingFeature.examples.tsx +++ b/vuu-ui/showcase/src/examples/VuuFeatures/BasketTradingFeature.examples.tsx @@ -8,7 +8,7 @@ import { } from "@finos/vuu-utils"; import { useCallback, useEffect } from "react"; import { BasketTradingFeatureProps } from "sample-apps/feature-basket-trading"; -import { BasketTradingFeature } from "../../features/BasketTrading.feature"; +import BasketTradingFeature from "../../features/BasketTrading.feature"; import { VuuBlotterHeader } from "./VuuBlotterHeader"; registerComponent("BasketTradingFeature", BasketTradingFeature, "view"); diff --git a/vuu-ui/showcase/src/examples/VuuFeatures/FilterTableFeature.examples.tsx b/vuu-ui/showcase/src/examples/VuuFeatures/FilterTableFeature.examples.tsx index ff6e131c4..46149e6e3 100644 --- a/vuu-ui/showcase/src/examples/VuuFeatures/FilterTableFeature.examples.tsx +++ b/vuu-ui/showcase/src/examples/VuuFeatures/FilterTableFeature.examples.tsx @@ -2,7 +2,7 @@ import { getSchema } from "@finos/vuu-data-test"; import { FlexboxLayout, LayoutProvider, View } from "@finos/vuu-layout"; import { Feature, useWorkspace } from "@finos/vuu-shell"; import { useCallback, useState } from "react"; -import { FilterTableFeature } from "../../features/FilterTable.feature"; +import FilterTableFeature from "../../features/FilterTable.feature"; import { VuuBlotterHeader } from "./VuuBlotterHeader"; import { JsonTable } from "@finos/vuu-datatable"; import { diff --git a/vuu-ui/showcase/src/features/BasketTrading.feature.tsx b/vuu-ui/showcase/src/features/BasketTrading.feature.tsx index ac8b193a8..495ad5d8b 100644 --- a/vuu-ui/showcase/src/features/BasketTrading.feature.tsx +++ b/vuu-ui/showcase/src/features/BasketTrading.feature.tsx @@ -1,57 +1,2 @@ -import VuuBasketTradingFeature, { - basketDataSourceKey, - BasketTradingFeatureProps, -} from "feature-basket-trading"; - -import { vuuModule, VuuModuleName } from "@finos/vuu-data-test"; -import { TableSchema } from "@finos/vuu-data-types"; -import { useViewContext } from "@finos/vuu-layout"; -import { useMemo } from "react"; - -export const BasketTradingFeature = ({ - basketSchema, - basketConstituentSchema, - basketTradingSchema, - basketTradingConstituentJoinSchema, -}: BasketTradingFeatureProps) => { - const { saveSession } = useViewContext(); - - useMemo(() => { - const dataSourceConfig: [ - basketDataSourceKey, - TableSchema, - VuuModuleName - ][] = [ - ["data-source-basket", basketSchema, "BASKET"], - ["data-source-basket-trading-control", basketTradingSchema, "BASKET"], - ["data-source-basket-trading-search", basketTradingSchema, "BASKET"], - [ - "data-source-basket-trading-constituent-join", - basketTradingConstituentJoinSchema, - "BASKET", - ], - ["data-source-basket-constituent", basketConstituentSchema, "BASKET"], - ]; - for (const [key, schema, module] of dataSourceConfig) { - const dataSource = vuuModule(module).createDataSource(schema.table.table); - saveSession?.(dataSource, key); - } - }, [ - basketConstituentSchema, - basketSchema, - basketTradingConstituentJoinSchema, - basketTradingSchema, - saveSession, - ]); - - return ( - - ); -}; - -export default BasketTradingFeature; +import VuuBasketTradingFeature from "feature-basket-trading"; +export default VuuBasketTradingFeature; diff --git a/vuu-ui/showcase/src/features/FilterTable.feature.tsx b/vuu-ui/showcase/src/features/FilterTable.feature.tsx index 155d32bc3..bb8fa68ca 100644 --- a/vuu-ui/showcase/src/features/FilterTable.feature.tsx +++ b/vuu-ui/showcase/src/features/FilterTable.feature.tsx @@ -1,25 +1,2 @@ -import { vuuModule, VuuModuleName } from "@finos/vuu-data-test"; -import { useViewContext } from "@finos/vuu-layout"; -import { FilterTableFeatureProps } from "@finos/vuu-utils"; import VuuFilterTableFeature from "feature-vuu-filter-table"; -import { useMemo } from "react"; - -export const FilterTableFeature = ({ - tableSchema, -}: FilterTableFeatureProps) => { - const { saveSession } = useViewContext(); - const { - table: { module, table: tableName }, - } = tableSchema; - - const dataSource = useMemo( - () => vuuModule(module as VuuModuleName).createDataSource(tableName), - [module, tableName] - ); - - saveSession?.(dataSource, "data-source"); - - return ; -}; - -export default FilterTableFeature; +export default VuuFilterTableFeature;