diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx index 2931b07f577..301c4a02e64 100644 --- a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx +++ b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx @@ -3,12 +3,12 @@ import { useCallback, useMemo, useState } from "react"; import styled from "styled-components"; import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage"; import { ModeledMethod } from "../../data-extensions-editor/modeled-method"; -import { pluralize } from "../../common/word"; import { ModeledMethodDataGrid } from "./ModeledMethodDataGrid"; import { calculateModeledPercentage } from "../../data-extensions-editor/shared/modeled-percentage"; -import { decimalFormatter, percentFormatter } from "./formatters"; +import { percentFormatter } from "./formatters"; import { Codicon } from "../common"; import { Mode } from "../../data-extensions-editor/shared/mode"; +import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"; const LibraryContainer = styled.div` margin-bottom: 1rem; @@ -19,8 +19,6 @@ const TitleContainer = styled.button` gap: 0.5em; align-items: center; width: 100%; - font-size: 1.2em; - font-weight: bold; color: var(--vscode-editor-foreground); background-color: transparent; @@ -28,14 +26,37 @@ const TitleContainer = styled.button` cursor: pointer; `; -const StatusContainer = styled.div` +const NameContainer = styled.div` display: flex; - gap: 1em; - align-items: center; + gap: 0.5em; + align-items: baseline; + flex-grow: 1; + text-align: left; +`; + +const DependencyName = styled.span` + font-size: 1.2em; + font-weight: bold; +`; + +const ModeledPercentage = styled.span` + color: var(--vscode-descriptionForeground); +`; + +const UnsavedLabel = styled.span` + text-transform: uppercase; + background-color: var(--vscode-input-background); + padding: 0.2em 0.4em; + border-radius: 0.2em; +`; + +const TitleButton = styled(VSCodeButton)` + background-color: transparent; - margin-top: 0.5em; - margin-bottom: 0.5em; - margin-left: 1em; + &:hover { + pointer: cursor; + background-color: var(--vscode-button-secondaryBackground); + } `; type Props = { @@ -43,6 +64,7 @@ type Props = { externalApiUsages: ExternalApiUsage[]; modeledMethods: Record; mode: Mode; + hasUnsavedChanges: boolean; onChange: ( externalApiUsage: ExternalApiUsage, modeledMethod: ModeledMethod, @@ -54,6 +76,7 @@ export const LibraryRow = ({ externalApiUsages, modeledMethods, mode, + hasUnsavedChanges, onChange, }: Props) => { const modeledPercentage = useMemo(() => { @@ -66,9 +89,15 @@ export const LibraryRow = ({ setExpanded((oldIsExpanded) => !oldIsExpanded); }, []); - const usagesCount = useMemo(() => { - return externalApiUsages.reduce((acc, curr) => acc + curr.usages.length, 0); - }, [externalApiUsages]); + const handleModelWithAI = useCallback(async (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + }, []); + + const handleModelFromSource = useCallback(async (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + }, []); return ( @@ -78,51 +107,29 @@ export const LibraryRow = ({ ) : ( )} - {title} - {isExpanded ? null : ( - <> - {" "} - ( - {pluralize( - externalApiUsages.length, - "method", - "methods", - decimalFormatter.format.bind(decimalFormatter), - )} - , {percentFormatter.format(modeledPercentage / 100)} modeled) - - )} + + {title} + + {percentFormatter.format(modeledPercentage / 100)} modeled + + {hasUnsavedChanges ? UNSAVED : null} + + + +  Model with AI + + + +  Model from source + {isExpanded && ( - <> - -
- {pluralize( - externalApiUsages.length, - "method", - "methods", - decimalFormatter.format.bind(decimalFormatter), - )} -
-
- {pluralize( - usagesCount, - "usage", - "usages", - decimalFormatter.format.bind(decimalFormatter), - )} -
-
- {percentFormatter.format(modeledPercentage / 100)} modeled -
-
- - + )}
); diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx index dbcff18c87b..3f8c96a9261 100644 --- a/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx +++ b/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx @@ -41,6 +41,7 @@ export const ModeledMethodsList = ({ externalApiUsages={grouped[libraryName]} modeledMethods={modeledMethods} mode={mode} + hasUnsavedChanges={false} onChange={onChange} /> ))}