diff --git a/extension/resources/plots/circle.svg b/extension/resources/plots/circle.svg new file mode 100644 index 0000000000..e8edbba837 --- /dev/null +++ b/extension/resources/plots/circle.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/extension/resources/plots/diamond.svg b/extension/resources/plots/diamond.svg new file mode 100644 index 0000000000..8645e370aa --- /dev/null +++ b/extension/resources/plots/diamond.svg @@ -0,0 +1,3 @@ + + + diff --git a/extension/resources/plots/square.svg b/extension/resources/plots/square.svg new file mode 100644 index 0000000000..691748af7d --- /dev/null +++ b/extension/resources/plots/square.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/extension/resources/plots/stroke-dash-1-0.svg b/extension/resources/plots/stroke-dash-1-0.svg new file mode 100644 index 0000000000..42487dcb6c --- /dev/null +++ b/extension/resources/plots/stroke-dash-1-0.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/extension/resources/plots/stroke-dash-1-1.svg b/extension/resources/plots/stroke-dash-1-1.svg new file mode 100644 index 0000000000..2c9b402063 --- /dev/null +++ b/extension/resources/plots/stroke-dash-1-1.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/extension/resources/plots/stroke-dash-2-1.svg b/extension/resources/plots/stroke-dash-2-1.svg new file mode 100644 index 0000000000..1b0abe5f10 --- /dev/null +++ b/extension/resources/plots/stroke-dash-2-1.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/extension/resources/plots/stroke-dash-4-2.svg b/extension/resources/plots/stroke-dash-4-2.svg new file mode 100644 index 0000000000..53f49167a0 --- /dev/null +++ b/extension/resources/plots/stroke-dash-4-2.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/extension/resources/plots/stroke-dash-4-4.svg b/extension/resources/plots/stroke-dash-4-4.svg new file mode 100644 index 0000000000..e65325a21f --- /dev/null +++ b/extension/resources/plots/stroke-dash-4-4.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/extension/resources/plots/stroke-dash-8-4.svg b/extension/resources/plots/stroke-dash-8-4.svg new file mode 100644 index 0000000000..12c1f51778 --- /dev/null +++ b/extension/resources/plots/stroke-dash-8-4.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/extension/resources/plots/stroke-dash-8-8.svg b/extension/resources/plots/stroke-dash-8-8.svg new file mode 100644 index 0000000000..4351b303fc --- /dev/null +++ b/extension/resources/plots/stroke-dash-8-8.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/extension/resources/plots/triangle.svg b/extension/resources/plots/triangle.svg new file mode 100644 index 0000000000..b8f8a4a5c9 --- /dev/null +++ b/extension/resources/plots/triangle.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/extension/src/experiments/columns/model.ts b/extension/src/experiments/columns/model.ts index 7d0c73ff36..f846a55632 100644 --- a/extension/src/experiments/columns/model.ts +++ b/extension/src/experiments/columns/model.ts @@ -63,7 +63,22 @@ export class ColumnsModel extends PathSelectionModel { ) } - public filterChildren(path?: string) { + public getChildren(path: string | undefined) { + return this.filterChildren(path).map(element => { + return { + ...element, + descendantStatuses: this.getTerminalNodeStatuses(element.path), + label: element.label, + status: this.status[element.path] + } + }) + } + + public hasNonDefaultColumns() { + return this.data.length > 1 + } + + private filterChildren(path?: string) { return this.data.filter(element => path ? element.parentPath === path @@ -73,10 +88,6 @@ export class ColumnsModel extends PathSelectionModel { ) } - public hasNonDefaultColumns() { - return this.data.length > 1 - } - private async transformAndSetColumns(data: ExperimentsOutput) { const [columns, paramsFiles] = await Promise.all([ collectColumns(data), diff --git a/extension/src/experiments/columns/tree.ts b/extension/src/experiments/columns/tree.ts index 58d7d10dca..df4f647982 100644 --- a/extension/src/experiments/columns/tree.ts +++ b/extension/src/experiments/columns/tree.ts @@ -31,7 +31,10 @@ export class ExperimentsColumnsTree extends BasePathSelectionTree this.transformElement({ ...element, dvcRoot })) } public getRepositoryStatuses(dvcRoot: string) { diff --git a/extension/src/path/selection/model.ts b/extension/src/path/selection/model.ts index ff486cbd04..1d577dd352 100644 --- a/extension/src/path/selection/model.ts +++ b/extension/src/path/selection/model.ts @@ -44,17 +44,6 @@ export abstract class PathSelectionModel< .map(element => ({ ...element, selected: !!this.status[element.path] })) } - public getChildren(path: string | undefined) { - return this.filterChildren(path).map(element => { - return { - ...element, - descendantStatuses: this.getTerminalNodeStatuses(element.path), - label: element.label, - status: this.status[element.path] - } - }) - } - public toggleStatus(path: string) { const status = this.getNextStatus(path) this.status[path] = status @@ -153,5 +142,7 @@ export abstract class PathSelectionModel< return this.persist(this.statusKey, this.status) } - abstract filterChildren(path?: string): T[] + abstract getChildren( + ...args: unknown[] + ): (T & { descendantStatuses: Status[]; label: string; status: Status })[] } diff --git a/extension/src/path/selection/tree.ts b/extension/src/path/selection/tree.ts index d7eed7ad51..90035ff1a4 100644 --- a/extension/src/path/selection/tree.ts +++ b/extension/src/path/selection/tree.ts @@ -23,7 +23,7 @@ export type PathSelectionItem = { collapsibleState: TreeItemCollapsibleState label: string path: string - iconPath: Resource + iconPath: Resource | Uri } export abstract class BasePathSelectionTree< @@ -35,8 +35,7 @@ export abstract class BasePathSelectionTree< public readonly onDidChangeTreeData: Event protected readonly workspace: T - - private readonly resourceLocator: ResourceLocator + protected readonly resourceLocator: ResourceLocator private readonly view: TreeView @@ -127,6 +126,33 @@ export abstract class BasePathSelectionTree< }${separator}${statuses.length}` } + protected transformElement(element: { + dvcRoot: string + descendantStatuses: Status[] + hasChildren: boolean + path: string + status: Status + label: string + }) { + const { dvcRoot, descendantStatuses, hasChildren, path, status, label } = + element + + const description = this.getDescription(descendantStatuses, '/') + const iconPath = this.getIconPath(status) + const collapsibleState = hasChildren + ? TreeItemCollapsibleState.Collapsed + : TreeItemCollapsibleState.None + + return { + collapsibleState, + description, + dvcRoot, + iconPath, + label, + path + } as PathSelectionItem + } + private updateDescriptionOnChange() { this.dispose.track( this.onDidChangeTreeData(() => { @@ -165,52 +191,22 @@ export abstract class BasePathSelectionTree< } if (this.isRoot(element)) { - return this.transformRepositoryChildren(element, undefined) + return this.getRepositoryChildren(element, undefined) } const { dvcRoot, path } = element - return this.transformRepositoryChildren(dvcRoot, path) + return this.getRepositoryChildren(dvcRoot, path) } private isRoot(element: string | PathSelectionItem): element is string { return typeof element === 'string' } - private transformRepositoryChildren( - dvcRoot: string, - path: string | undefined - ) { - return this.getRepositoryChildren(dvcRoot, path).map(element => { - const { descendantStatuses, hasChildren, path, status, label } = element - - const description = this.getDescription(descendantStatuses, '/') - const iconPath = this.getIconPath(status) - const collapsibleState = hasChildren - ? TreeItemCollapsibleState.Collapsed - : TreeItemCollapsibleState.None - - return { - collapsibleState, - description, - dvcRoot, - iconPath, - label, - path - } as PathSelectionItem - }) - } - abstract getRepositoryStatuses(dvcRoot: string): Status[] abstract getRepositoryChildren( dvcRoot: string, path: string | undefined - ): { - descendantStatuses: Status[] - hasChildren: boolean - label: string - path: string - status: Status - }[] + ): PathSelectionItem[] } diff --git a/extension/src/plots/index.ts b/extension/src/plots/index.ts index 5832b6d6c8..a31b5fdcd3 100644 --- a/extension/src/plots/index.ts +++ b/extension/src/plots/index.ts @@ -4,7 +4,7 @@ import { PlotsData as TPlotsData } from './webview/contract' import { WebviewMessages } from './webview/messages' import { PlotsData } from './data' import { PlotsModel } from './model' -import { collectScale } from './paths/collect' +import { collectEncodingElements, collectScale } from './paths/collect' import { PathsModel } from './paths/model' import { BaseWebview } from '../webview' import { ViewKey } from '../webview/constants' @@ -127,8 +127,14 @@ export class Plots extends BaseRepository { this.data.managedUpdate() } - public getChildPaths(path: string) { - return this.paths?.getChildren(path) || [] + public getChildPaths(path: string | undefined) { + const multiSourceEncoding = this.plots?.getMultiSourceData() || {} + + if (path && multiSourceEncoding[path]) { + return collectEncodingElements(path, multiSourceEncoding) + } + + return this.paths?.getChildren(path, multiSourceEncoding) || [] } public getPathStatuses() { diff --git a/extension/src/plots/model/index.ts b/extension/src/plots/model/index.ts index 3e034519d4..7908fbf7ad 100644 --- a/extension/src/plots/model/index.ts +++ b/extension/src/plots/model/index.ts @@ -306,6 +306,10 @@ export class PlotsModel extends ModelWithPersistence { return this.sectionCollapsed } + public getMultiSourceData() { + return this.multiSourceEncoding + } + private removeStaleData() { return Promise.all([ this.removeStaleBranches(), diff --git a/extension/src/plots/multiSource/constants.ts b/extension/src/plots/multiSource/constants.ts index 725a811cd9..5a956f6336 100644 --- a/extension/src/plots/multiSource/constants.ts +++ b/extension/src/plots/multiSource/constants.ts @@ -9,13 +9,7 @@ export const StrokeDash = [ ] as const export type StrokeDashValue = typeof StrokeDash[number] -export const Shape = [ - 'square', - 'circle', - 'triangle', - 'diamond', - 'cross' -] as const +export const Shape = ['square', 'circle', 'triangle', 'diamond'] as const export type ShapeValue = typeof Shape[number] export type Scale = { diff --git a/extension/src/plots/paths/collect.test.ts b/extension/src/plots/paths/collect.test.ts index 0e3f0a197d..d5347fadb0 100644 --- a/extension/src/plots/paths/collect.test.ts +++ b/extension/src/plots/paths/collect.test.ts @@ -1,8 +1,14 @@ import { join } from 'path' import { VisualizationSpec } from 'react-vega' -import { collectPaths, collectTemplateOrder } from './collect' +import { + collectEncodingElements, + collectPaths, + collectTemplateOrder, + EncodingType +} from './collect' import { TemplatePlotGroup, PlotsType } from '../webview/contract' import plotsDiffFixture from '../../test/fixtures/plotsDiff/output' +import { Shape, StrokeDash } from '../multiSource/constants' describe('collectPath', () => { it('should return the expected data from the test fixture', () => { @@ -380,3 +386,55 @@ describe('collectTemplateOrder', () => { ]) }) }) + +describe('collectEncodingElements', () => { + it('should return an empty array if there is no multi source encoding for a path', () => { + const elements = collectEncodingElements(__filename, {}) + expect(elements).toStrictEqual([]) + }) + + it('should collect encoding elements from multi source encoding', () => { + const elements = collectEncodingElements(__filename, { + [__filename]: { + shape: { + field: 'filename', + scale: { domain: ['X', 'Y'], range: [Shape[0], Shape[1]] } + }, + strokeDash: { + field: 'field', + scale: { + domain: ['A', 'B', 'C'], + range: [StrokeDash[0], StrokeDash[1], StrokeDash[2]] + } + } + } + }) + expect(elements).toStrictEqual([ + { + label: 'A', + type: EncodingType.STROKE_DASH, + value: StrokeDash[0] + }, + { + label: 'B', + type: EncodingType.STROKE_DASH, + value: StrokeDash[1] + }, + { + label: 'C', + type: EncodingType.STROKE_DASH, + value: StrokeDash[2] + }, + { + label: 'X', + type: EncodingType.SHAPE, + value: Shape[0] + }, + { + label: 'Y', + type: EncodingType.SHAPE, + value: Shape[1] + } + ]) + }) +}) diff --git a/extension/src/plots/paths/collect.ts b/extension/src/plots/paths/collect.ts index bb74c897bd..39564ec95b 100644 --- a/extension/src/plots/paths/collect.ts +++ b/extension/src/plots/paths/collect.ts @@ -4,6 +4,13 @@ import { getParent, getPath, getPathArray } from '../../fileSystem/util' import { splitMatchedOrdered, definedAndNonEmpty } from '../../util/array' import { isMultiViewPlot } from '../vega/util' import { createTypedAccumulator } from '../../util/object' +import { + ShapeScale, + ShapeValue, + StrokeDashScale, + StrokeDashValue +} from '../multiSource/constants' +import { MultiSourceEncoding } from '../multiSource/collect' export enum PathType { COMPARISON = 'comparison', @@ -263,3 +270,63 @@ export const collectScale = (paths: PlotPath[] = []) => { } return acc } + +export enum EncodingType { + SHAPE = 'shape', + STROKE_DASH = 'strokeDash' +} + +export type EncodingElement = + | { + type: EncodingType.STROKE_DASH + value: StrokeDashValue + label: string + } + | { + type: EncodingType.SHAPE + value: ShapeValue + label: string + } + +export const isEncodingElement = ( + element: unknown +): element is EncodingElement => !!(element as EncodingElement)?.value + +const collectElements = ( + acc: EncodingElement[], + scale: StrokeDashScale | ShapeScale, + type: EncodingType +): void => { + const { domain, range } = scale + for (const [i, element] of domain.entries()) { + const child = { + label: element, + type, + value: range[i] + } + acc.push(child as EncodingElement) + } +} + +export const collectEncodingElements = ( + path: string, + multiSourceEncoding: MultiSourceEncoding +): EncodingElement[] => { + const encoding = multiSourceEncoding[path] + + if (!encoding) { + return [] + } + + const { strokeDash } = encoding + const acc: EncodingElement[] = [] + collectElements(acc, strokeDash.scale, EncodingType.STROKE_DASH) + + const { shape } = encoding + + if (shape) { + collectElements(acc, shape.scale, EncodingType.SHAPE) + } + + return acc +} diff --git a/extension/src/plots/paths/model.ts b/extension/src/plots/paths/model.ts index 5036ebb79a..034b2cb325 100644 --- a/extension/src/plots/paths/model.ts +++ b/extension/src/plots/paths/model.ts @@ -10,6 +10,7 @@ import { PlotsOutput } from '../../cli/dvc/reader' import { PathSelectionModel } from '../../path/selection/model' import { PersistenceKey } from '../../persistence/constants' import { performSimpleOrderedUpdate } from '../../util/array' +import { MultiSourceEncoding } from '../multiSource/collect' export class PathsModel extends PathSelectionModel { private templateOrder: TemplateOrder @@ -50,12 +51,23 @@ export class PathsModel extends PathSelectionModel { this.persist(PersistenceKey.PLOT_TEMPLATE_ORDER, this.templateOrder) } - public filterChildren(path: string | undefined): PlotPath[] { - return this.data.filter(element => { - if (!path) { - return !element.parentPath + public getChildren( + path: string | undefined, + multiSourceEncoding: MultiSourceEncoding = {} + ) { + return this.filterChildren(path).map(element => { + const hasChildren = + element.hasChildren === false + ? !!multiSourceEncoding[element.path] + : element.hasChildren + + return { + ...element, + descendantStatuses: this.getTerminalNodeStatuses(element.path), + hasChildren, + label: element.label, + status: this.status[element.path] } - return element.parentPath === path }) } @@ -95,4 +107,13 @@ export class PathsModel extends PathSelectionModel { .filter(plotPath => filter(type, plotPath)) .map(({ path }) => path) } + + private filterChildren(path: string | undefined): PlotPath[] { + return this.data.filter(element => { + if (!path) { + return !element.parentPath + } + return element.parentPath === path + }) + } } diff --git a/extension/src/plots/paths/tree.test.ts b/extension/src/plots/paths/tree.test.ts new file mode 100644 index 0000000000..cee85a8e86 --- /dev/null +++ b/extension/src/plots/paths/tree.test.ts @@ -0,0 +1,83 @@ +import { Uri } from 'vscode' +import { Disposable, Disposer } from '@hediet/std/disposable' +import { EncodingType } from './collect' +import { PlotsPathsTree } from './tree' +import { WorkspacePlots } from '../workspace' +import { ResourceLocator } from '../../resourceLocator' +import { InternalCommands } from '../../commands/internal' +import { Plots } from '..' +import { buildMockedEventEmitter } from '../../test/util/jest' +import { Shape, StrokeDash } from '../multiSource/constants' +import { join } from '../../test/util/path' + +const mockedDisposable = jest.mocked(Disposable) +const mockedGetChildPaths = jest.fn() + +jest.mock('vscode') +jest.mock('@hediet/std/disposable') + +beforeEach(() => { + jest.resetAllMocks() + mockedDisposable.fn.mockReturnValue({ + track: function (disposable: T): T { + return disposable + } + } as unknown as (() => void) & Disposer) +}) + +describe('PlotsPathsTree', () => { + it('should return the correct children for multi source plots (encoding elements)', () => { + const mockedWorkspacePlots = { + getRepository: () => + ({ getChildPaths: mockedGetChildPaths } as unknown as Plots), + pathsChanged: buildMockedEventEmitter() + } as unknown as WorkspacePlots + const mockedInternalCommands = { + registerExternalCommand: jest.fn() + } as unknown as InternalCommands + const resourceLocator = new ResourceLocator(Uri.file(__filename)) + + const plotsPathTree = new PlotsPathsTree( + mockedWorkspacePlots, + mockedInternalCommands, + resourceLocator + ) + + mockedGetChildPaths.mockReturnValueOnce([ + { + label: 'A', + type: EncodingType.STROKE_DASH, + value: StrokeDash[0] + }, + { + label: 'Y', + type: EncodingType.SHAPE, + value: Shape[1] + } + ]) + + const children = plotsPathTree.getRepositoryChildren(__dirname, undefined) + expect(children).toStrictEqual([ + { + collapsibleState: 0, + description: undefined, + dvcRoot: __dirname, + iconPath: Uri.file( + join(__filename, 'resources', 'plots', 'stroke-dash-1-0.svg') + ), + label: 'A', + path: 'A' + }, + { + collapsibleState: 0, + description: undefined, + dvcRoot: __dirname, + iconPath: Uri.file( + join(__filename, 'resources', 'plots', 'circle.svg') + ), + label: 'Y', + path: 'Y' + } + ]) + }) +}) diff --git a/extension/src/plots/paths/tree.ts b/extension/src/plots/paths/tree.ts index 285b25d3e8..fe41a7cdc6 100644 --- a/extension/src/plots/paths/tree.ts +++ b/extension/src/plots/paths/tree.ts @@ -1,3 +1,5 @@ +import { TreeItemCollapsibleState } from 'vscode' +import { EncodingType, isEncodingElement } from './collect' import { BasePathSelectionTree, PathSelectionItem @@ -30,8 +32,28 @@ export class PlotsPathsTree extends BasePathSelectionTree { ) } - public getRepositoryChildren(dvcRoot: string, path: string) { - return this.workspace.getRepository(dvcRoot).getChildPaths(path) + public getRepositoryChildren(dvcRoot: string, path: string | undefined) { + return this.workspace + .getRepository(dvcRoot) + .getChildPaths(path) + .map(element => { + if (isEncodingElement(element)) { + const { label, type, value } = element + return { + collapsibleState: TreeItemCollapsibleState.None, + description: undefined, + dvcRoot, + iconPath: + type === EncodingType.STROKE_DASH + ? this.resourceLocator.getPlotsStrokeDashResource(value) + : this.resourceLocator.getPlotsShapeResource(value), + label, + path: label + } + } + + return this.transformElement({ ...element, dvcRoot }) + }) } public getRepositoryStatuses(dvcRoot: string) { diff --git a/extension/src/plots/vega/util.test.ts b/extension/src/plots/vega/util.test.ts index b4994f93c4..8179f71c78 100644 --- a/extension/src/plots/vega/util.test.ts +++ b/extension/src/plots/vega/util.test.ts @@ -282,14 +282,17 @@ describe('reverseOfLegendSuppressionUpdate', () => { shape: { field: 'shape-field', legend: { - disable: true + disable: true, + symbolFillColor: 'blue' }, scale: { domain: [], range: [] } }, strokeDash: { field: 'strokeDash-field', legend: { - disable: true + disable: true, + symbolFillColor: 'blue', + symbolStrokeColor: 'red' }, scale: { domain: [], range: [] } } diff --git a/extension/src/plots/vega/util.ts b/extension/src/plots/vega/util.ts index c6aa688f23..8244d4f687 100644 --- a/extension/src/plots/vega/util.ts +++ b/extension/src/plots/vega/util.ts @@ -103,11 +103,14 @@ export type Encoding = { strokeDash?: StrokeDashEncoding & { legend: { disable: boolean + symbolFillColor: string + symbolStrokeColor: string } } shape?: ShapeEncoding & { legend: { disable: boolean + symbolFillColor: string } } detail?: { @@ -145,15 +148,23 @@ export const getSpecEncodingUpdate = ({ if (strokeDash) { encoding.strokeDash = { ...strokeDash, - legend: { disable: true } + legend: { + disable: true, + symbolFillColor: 'transparent', + symbolStrokeColor: 'grey' + } } } + if (shape) { encoding.shape = { ...shape, - legend: { disable: true } + legend: { + disable: true, + symbolFillColor: 'grey' + } } - encoding.detail = { field: shape.field } + encoding.detail = shape } return { @@ -292,8 +303,16 @@ export const reverseOfLegendSuppressionUpdate = () => ({ spec: { encoding: { color: { legend: { disable: false } }, - shape: { legend: { disable: false } }, - strokeDash: { legend: { disable: false } } + shape: { + legend: { + disable: false + } + }, + strokeDash: { + legend: { + disable: false + } + } } } }) diff --git a/extension/src/resourceLocator.ts b/extension/src/resourceLocator.ts index 4383ca9b50..46c276ea4e 100644 --- a/extension/src/resourceLocator.ts +++ b/extension/src/resourceLocator.ts @@ -1,12 +1,14 @@ import { Uri } from 'vscode' import { Disposable } from './class/dispose' +import { ShapeValue, StrokeDashValue } from './plots/multiSource/constants' export type Resource = { dark: Uri; light: Uri } export enum IconName { CIRCLE_FILLED = 'circle-filled', CIRCLE_OUTLINE = 'circle-outline', - LOADING_SPIN = 'loading-spin' + LOADING_SPIN = 'loading-spin', + STROKE_DASH = 'stroke-dash' } export class ResourceLocator extends Disposable { @@ -45,6 +47,19 @@ export class ResourceLocator extends Disposable { ) } + public getPlotsStrokeDashResource(strokeDash: StrokeDashValue): Uri { + return Uri.joinPath( + this.extensionUri, + 'resources', + 'plots', + `stroke-dash-${strokeDash.join('-')}.svg` + ) + } + + public getPlotsShapeResource(shape: ShapeValue): Uri { + return Uri.joinPath(this.extensionUri, 'resources', 'plots', `${shape}.svg`) + } + private getResourceLocations(...path: string[]): { dark: Uri; light: Uri } { return { dark: this.getResourceLocation('dark', ...path),