Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
evaluate VS Code theme variables before saving svg
Browse files Browse the repository at this point in the history
mattseddon committed Oct 16, 2023
1 parent a5c19af commit ee03efa
Showing 8 changed files with 55 additions and 8 deletions.
5 changes: 5 additions & 0 deletions extension/src/fileSystem/index.ts
Original file line number Diff line number Diff line change
@@ -297,6 +297,11 @@ export const addPlotToDvcYamlFile = (cwd: string, plotObj: PlotConfigData) => {
return writeFileSync(dvcYamlFile, dvcYamlLines.join('\n'))
}

export const writeFile = (path: string, contents: string): void => {
ensureFileSync(path)
return writeFileSync(path, contents)
}

export const getFileExtension = (filePath: string) => parse(filePath).ext

export const relativeWithUri = (dvcRoot: string, uri: Uri) =>
15 changes: 14 additions & 1 deletion extension/src/plots/webview/messages.ts
Original file line number Diff line number Diff line change
@@ -24,13 +24,15 @@ import { BaseWebview } from '../../webview'
import {
getModifiedTime,
openImageFileInEditor,
showSaveDialog
showSaveDialog,
writeFile
} from '../../fileSystem'
import { reorderObjectList } from '../../util/array'
import { CustomPlotsOrderValue } from '../model/custom'
import { getCustomPlotId } from '../model/collect'
import { RegisteredCommands } from '../../commands/external'
import { ErrorsModel } from '../errors/model'
import { openUrl } from '../../vscode/external'

export class WebviewMessages {
private readonly dvcRoot: string
@@ -80,6 +82,8 @@ export class WebviewMessages {
return this.exportPlotDataAsCsv(message.payload)
case MessageFromWebviewType.EXPORT_PLOT_DATA_AS_TSV:
return this.exportPlotDataAsTsv(message.payload)
case MessageFromWebviewType.EXPORT_PLOT_AS_SVG:
return this.exportPlotAsSvg(message.payload)
case MessageFromWebviewType.EXPORT_PLOT_DATA_AS_JSON:
return this.exportPlotDataAsJson(message.payload)
case MessageFromWebviewType.RESIZE_PLOTS:
@@ -433,6 +437,15 @@ export class WebviewMessages {
writeFile(file.path, plotId)
}

private async exportPlotAsSvg(svg: string) {
const file = await showSaveDialog('visualization.svg', 'svg')
if (!file) {
return
}
writeFile(file.path, svg)
return openUrl(file.path)
}

private exportPlotDataAsJson(plotId: string) {
void this.exportPlotData(
'json',
5 changes: 5 additions & 0 deletions extension/src/webview/contract.ts
Original file line number Diff line number Diff line change
@@ -20,6 +20,7 @@ export enum MessageFromWebviewType {
CREATE_BRANCH_FROM_EXPERIMENT = 'create-branch-from-experiment',
COPY_TO_CLIPBOARD = 'copy-to-clipboard',
COPY_STUDIO_LINK = 'copy-studio-link',
EXPORT_PLOT_AS_SVG = 'export-plot-as-svg',
EXPORT_PLOT_DATA_AS_JSON = 'export-plot-data-as-json',
EXPORT_PLOT_DATA_AS_CSV = 'export-plot-data-as-csv',
EXPORT_PLOT_DATA_AS_TSV = 'export-plot-data-as-tsv',
@@ -119,6 +120,10 @@ export type MessageFromWebview =
type: MessageFromWebviewType.COPY_STUDIO_LINK
payload: { id: string; type: StudioLinkType }
}
| {
type: MessageFromWebviewType.EXPORT_PLOT_AS_SVG
payload: string
}
| {
type: MessageFromWebviewType.EXPORT_PLOT_DATA_AS_JSON
payload: string
19 changes: 17 additions & 2 deletions webview/src/plots/components/ZoomedInPlot.tsx
Original file line number Diff line number Diff line change
@@ -7,10 +7,12 @@ import {
makePlotZoomOnWheel,
reverseOfLegendSuppressionUpdate
} from 'dvc/src/plots/vega/util'
import { View } from 'react-vega'
import { TemplateVegaLite } from './templatePlots/TemplateVegaLite'
import styles from './styles.module.scss'
import { getThemeValue, ThemeProperty } from '../../util/styles'
import {
exportPlotAsSvg,
exportPlotDataAsCsv,
exportPlotDataAsJson,
exportPlotDataAsTsv
@@ -60,13 +62,26 @@ export const ZoomedInPlot: React.FC<ZoomedInPlotProps> = ({
}
}, [])

const onNewView = () => {
const onNewView = (view: View) => {
const actions: HTMLDivElement | null | undefined =
zoomedInPlotRef.current?.querySelector('.vega-actions')
if (!actions) {
return
}

appendActionToVega('SVG', actions, () => {
void view.toSVG().then(svg => {
const themedSvg = svg.replace(
/></,
`><style>:root{${ThemeProperty.FOREGROUND_COLOR}:${getThemeValue(
ThemeProperty.FOREGROUND_COLOR
)};${ThemeProperty.FONT}:${getThemeValue(
ThemeProperty.FONT
)}}</style><`
)
exportPlotAsSvg(themedSvg)
})
})
appendActionToVega('JSON', actions, () => exportPlotDataAsJson(id))
appendActionToVega('CSV', actions, () => exportPlotDataAsCsv(id))
appendActionToVega('TSV', actions, () => exportPlotDataAsTsv(id))
@@ -91,7 +106,7 @@ export const ZoomedInPlot: React.FC<ZoomedInPlotProps> = ({
actions: {
compiled: false,
editor: false,
export: true,
export: false,
source: false
},
config: {
5 changes: 3 additions & 2 deletions webview/src/plots/components/constants.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Config } from 'vega-lite'
import { ThemeProperty } from '../../util/styles'

const foregroundColor = 'var(--vscode-editor-foreground)'
const foregroundColor = `var(${ThemeProperty.FOREGROUND_COLOR})`
const backgroundColor = 'transparent'
const font = 'var(--vscode-editor-font-family)'
const font = `var(${ThemeProperty.FONT})`
const fontWeight = 'normal' as const

const title = {
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ export const TemplateVegaLite = ({
vegaLiteProps
}: {
id: string
onNewView: () => void
onNewView: (view: View) => void
vegaLiteProps: VegaLiteProps
}) => {
const vegaView = useRef<View>()
@@ -65,7 +65,7 @@ export const TemplateVegaLite = ({
<VegaLite
{...vegaLiteProps}
onNewView={view => {
onNewView()
onNewView(view)
vegaView.current = view
const defaultValue = smoothPlotValues[id]
const state = view.getState() as VegaState
7 changes: 7 additions & 0 deletions webview/src/plots/util/messages.ts
Original file line number Diff line number Diff line change
@@ -8,6 +8,13 @@ export const addPlot = () =>
type: MessageFromWebviewType.ADD_PLOT
})

export const exportPlotAsSvg = (svg: string) => {
sendMessage({
payload: svg,
type: MessageFromWebviewType.EXPORT_PLOT_AS_SVG
})
}

export const exportPlotDataAsCsv = (id: string) => {
sendMessage({
payload: id,
3 changes: 2 additions & 1 deletion webview/src/util/styles.ts
Original file line number Diff line number Diff line change
@@ -16,7 +16,8 @@ export enum ThemeProperty {
BACKGROUND_COLOR = '--vscode-editor-background',
FOREGROUND_COLOR = '--vscode-editor-foreground',
MENU_BACKGROUND = '--vscode-menu-background',
ACCENT_COLOR = '--button-primary-background'
ACCENT_COLOR = '--button-primary-background',
FONT = '--vscode-editor-font-family'
}

export const getThemeValue = (property: ThemeProperty) =>

0 comments on commit ee03efa

Please sign in to comment.