Skip to content

Commit

Permalink
fixed graphs and multiple results
Browse files Browse the repository at this point in the history
  • Loading branch information
@datomo
datomo committed Mar 25, 2024
1 parent 9442c1f commit ff5a3e4
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 73 deletions.
74 changes: 36 additions & 38 deletions src/app/components/data-view/data-graph/data-graph.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {GraphResult} from '../models/result-set.model';
import {DataModel, GraphRequest} from '../../../models/ui-request.model';
import {DataTemplateComponent} from '../data-template/data-template.component';

const d3 = await import('d3');
import * as d3 from "d3";

@Component({
selector: 'app-data-graph',
Expand Down Expand Up @@ -37,19 +37,19 @@ export class DataGraphComponent extends DataTemplateComponent {
showInsertCard = false;
jsonValid = false;
public graphLoading = false;
private initialIds: Set<string>;

showProperties = false;
detail: Detail;
private height: number;
private width: number;

private zoom: any;
private subElement: any;
private labels: string[];
private ratio: number;
private color: any;
private isPath: boolean;

private initialNodeIds: Set<string>;
private initialNodes: Set<Node>;
private initialEdgeIds: string[];
private afterInit = false;


protected readonly NamespaceType = DataModel;

Expand All @@ -74,10 +74,11 @@ export class DataGraphComponent extends DataTemplateComponent {
return false;
}


private renderGraph(graph: Graph) {
if (!this.initialIds) {
this.initialIds = new Set(graph.nodes.map(n => n.id));
graph.nodes = Array.from(this.initialNodes); // normally this does nothing, but for cross model queries this ensures that the initial nodes are present (different ids)

if (!this.initialNodeIds) {
this.initialNodeIds = new Set(graph.nodes.map(n => n.id));
}

if (!this.initialEdgeIds) {
Expand All @@ -95,19 +96,15 @@ export class DataGraphComponent extends DataTemplateComponent {
this.hidden = [];

for (const n of graph.nodes) {
if (!this.initialIds.has(n.id)) {
if (!this.initialNodeIds.has(n.id)) {
this.hidden.push(n.id);
}
}


const width = 600;
this.width = width;
const height = 325;
this.height = height;

d3
.select('#chart-area > *').remove();
d3.select('#chart-area > *').remove();

const svg = d3
.select('#chart-area')
Expand All @@ -122,21 +119,21 @@ export class DataGraphComponent extends DataTemplateComponent {

const g = svg.append('g');

const zoom_actions = () => {
g.attr('transform', d3.event.transform);
const zoom_actions = (event) => {
g.attr('transform', event.transform);
};

this.zoom = d3.zoom()
.on('zoom', zoom_actions)
.filter(() => !d3.event.button); // fix for windows trackpad zooming
.filter((event) => !event.button); // fix for windows trackpad zooming

this.zoom(svg);


// Add "forces" to the simulation here
const simulation = d3.forceSimulation()
.force('center', d3.forceCenter(width / 2, height / 2))
.force('charge', d3.forceManyBody().strength(-this.initialIds.size))
.force('charge', d3.forceManyBody().strength(-this.initialNodeIds.size))
.force('collide', d3.forceCollide(100).strength(0.9).radius(40))
.force('link', d3.forceLink().id(d => d.id).distance(160));

Expand All @@ -150,24 +147,24 @@ export class DataGraphComponent extends DataTemplateComponent {
};

// Change the value of alpha, so things move around when we drag a node
const onDragStart = d => {
const onDragStart = (event, d) => {
action(d);
if (!d3.event.active) {
if (!event.active) {
simulation.alphaTarget(0.8).restart();
}
d.fx = d.x;
d.fy = d.y;
};

// Fix the position of the node that we are looking at
const onDrag = d => {
d.fx = d3.event.x;
d.fy = d3.event.y;
const onDrag = (event, d) => {
d.fx = event.x;
d.fy = event.y;
};

// Let the node do what it wants again once we've looked at it
const onDragEnd = d => {
if (!d3.event.active) {
const onDragEnd = (event, d) => {
if (!event.active) {
simulation.alphaTarget(0);
}
d.fx = null;
Expand Down Expand Up @@ -499,7 +496,7 @@ export class DataGraphComponent extends DataTemplateComponent {
activate();


// general update pattern for updating the graph
// general update pattern for updating the graph
this.update = () => {
g.selectAll('*').remove();
restart(this);
Expand Down Expand Up @@ -531,7 +528,7 @@ export class DataGraphComponent extends DataTemplateComponent {
const reset = () => {
this.hidden = [];
};
this.afterInit = true;

}

center() {
Expand Down Expand Up @@ -562,16 +559,21 @@ export class DataGraphComponent extends DataTemplateComponent {
let i = -1;

for (const dbColumn of graphResult.header) {
console.log(dbColumn);
i++;
if (!dbColumn.dataType.toLowerCase().includes('node') && !dbColumn.dataType.toLowerCase().includes('edge')) {
continue;
}

this.initialNodes = new Set();
if (dbColumn.dataType.toLowerCase().includes('node')) {
graphResult.data.forEach(d => {
console.log(d);
nodeIds.add(JSON.parse(d[i])['id']);

const node = JSON.parse(d[i]);
const id = node['id'];
if (!nodeIds.has(id)) {
nodeIds.add(id);
this.initialNodes.add(node)
}
});
}

Expand All @@ -582,7 +584,6 @@ export class DataGraphComponent extends DataTemplateComponent {
}

if (dbColumn.dataType.toLowerCase().includes('path')) {
this.isPath = true;
graphResult.data.forEach(d => {
for (const el of JSON.parse(d[i]).path) {
if (el.type.includes('NODE')) {
Expand All @@ -595,13 +596,11 @@ export class DataGraphComponent extends DataTemplateComponent {
});
}

this.initialIds = nodeIds;
this.initialNodeIds = nodeIds;
this.initialEdgeIds = Array.from(edgeIds);
}


console.log(this.initialIds);

if (!graphResult.header.map(h => h.dataType.toLowerCase()).includes('graph')) {
// is native
if (!this._crud.getGraph(this.webSocket, new GraphRequest(graphResult.namespace, nodeIds, edgeIds))) {
Expand All @@ -610,7 +609,6 @@ export class DataGraphComponent extends DataTemplateComponent {
this.graphLoading = true;
}
} else {

this.graphLoading = false;
const graph = Graph.from(graphResult.data.map(r => r.map(n => JSON.parse(n)).reduce((a, v) => ({
...a['id'],
Expand Down Expand Up @@ -641,7 +639,7 @@ export class DataGraphComponent extends DataTemplateComponent {
this.hidden = [];

for (const n of this.graph.nodes) {
if (!this.initialIds.has(n.id)) {
if (!this.initialNodeIds.has(n.id)) {
this.hidden.push(n.id);
}
}
Expand Down
1 change: 0 additions & 1 deletion src/app/components/data-view/data-template/data-template.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,6 @@ export abstract class DataTemplateComponent implements OnInit, OnDestroy {
});
}


ngOnInit() {
this._sidebar.open();
//listen to results
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/data-view/data-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
[class.active]="$presentationType() === presentationTypes.CARD"
tooltip="cards" placement="top" delay="200"><i class="fa fa-th-large"></i></button>
<button cButton color="light" class="mx-1"
[hidden]="$dataModel() !== NamespaceType.GRAPH"
[hidden]="$dataModel() !== NamespaceType.GRAPH || this.$result().queryType === QueryType.DDL || this.$result().queryType === QueryType.DML"
(click)="$presentationType.set(presentationTypes.GRAPH)"
[class.active]="$presentationType() === presentationTypes.GRAPH"
tooltip="graph" placement="top" delay="200"><i class="fa fa-code-fork"></i></button>
Expand Down
9 changes: 8 additions & 1 deletion src/app/components/data-view/data-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ export class ViewInformation {
this.tableType = tableType;
this.newViewName = newViewName;
}

}


Expand Down Expand Up @@ -84,6 +83,12 @@ export class DataViewComponent implements OnDestroy {
}

untracked(() => {
if (this.$result().queryType == QueryType.DML || this.$result().queryType == QueryType.DDL) {
// we use the same for dmls and ddls independent data models
this.$presentationType.set(DataPresentationType.TABLE);
return
}

switch (this.$result().dataModel) {
case DataModel.DOCUMENT:
this.$presentationType.set(DataPresentationType.CARD);
Expand Down Expand Up @@ -176,5 +181,7 @@ export class DataViewComponent implements OnDestroy {

}

protected readonly QueryLanguage = QueryLanguage;
protected readonly QueryType = QueryType;
}

58 changes: 29 additions & 29 deletions src/app/views/querying/console/console.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,42 +131,42 @@
</div>
</c-col>
<c-col class="col-lg-12 mb-3" [ngClass]="{'accordion': results() && results().length > 1}" id="results">
<c-card *ngFor="let result of results(); let i = index;">
<c-card-footer
<c-card class="mb-1" *ngFor="let result of results(); let i = index;">
<c-card-header
[ngClass]="{'pointer': results().length > 1, 'open': collapsed !== undefined && collapsed[i]}"
(click)="toggleCollapsed(i)">
<span>{{result.query}}</span>
<c-badge class="pull-right" [color]="result.error ? 'danger' : 'secondary'">
<ng-container *ngIf="!result.error">{{result.affectedTuples}}</ng-container>
<ng-container *ngIf="result.error">!</ng-container>
</c-badge>
</c-card-footer>

<div [id]="'collapse'+i" class="collapse show" data-parent="#accordion">
<c-card-body [collapse]="collapsed !== undefined && !collapsed[i] && results().length !== 1">
<div class="text-danger" *ngIf="result && result.error">
<strong>Error:</strong>
<p class="mb-3">{{result.error}}</p>
</div>

<div class="query-info">
<p *ngIf="result && !result.data && !result.error" class="mb-3">
<i>Successfully executed</i>
</p>
</div>


<c-row class="col-lg-12 result-wrapper" *ngIf="result && result.data">
<app-data-view [result]="result"
[config]="entityConfig"
[loading]="loading()"
(viewQueryConsumer)="createView($event)"></app-data-view>
<p class="text-muted text-center small mt-1 mb-0 w-auto" *ngIf="result.hasMore">
Only {{result.data.length}} rows are being displayed. To fetch more rows, please specify
a LIMIT clause.</p>
</c-row>
</c-card-body>
</div>
</c-card-header>


<c-card-body [visible]="!(collapsed !== undefined && !collapsed[i] && results().length !== 1)"
cCollapse>
<div class="text-danger" *ngIf="result && result.error">
<strong>Error:</strong>
<p class="mb-3">{{ result.error }}</p>
</div>

<div class="query-info">
<p *ngIf="result && !result.data && !result.error" class="mb-3">
<i>Successfully executed</i>
</p>
</div>


<c-row class="col-lg-12 result-wrapper" *ngIf="result && result.data">
<app-data-view [result]="result"
[config]="entityConfig"
[loading]="loading()"
(viewQueryConsumer)="createView($event)"></app-data-view>
<p class="text-muted text-center small mt-1 mb-0 w-auto" *ngIf="result.hasMore">
Only {{ result.data.length }} rows are being displayed. To fetch more rows, please specify
a LIMIT clause.</p>
</c-row>
</c-card-body>
</c-card>
</c-col>
</c-row>
Expand Down
12 changes: 10 additions & 2 deletions src/app/views/querying/console/console.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,15 @@ export class ConsoleComponent implements OnInit, OnDestroy {
this.loadAndSetNamespaceDB();
});
});

effect(() => {
const res = this.results();

untracked(() => {
this.collapsed = new Array(res.length);
this.collapsed.fill(false);
})
});
}


Expand Down Expand Up @@ -308,8 +317,6 @@ export class ConsoleComponent implements OnInit, OnDestroy {
} else if (Array.isArray(msg) && ((msg[0].hasOwnProperty('data') || msg[0].hasOwnProperty('affectedTuples') || msg[0].hasOwnProperty('error')))) { // array of ResultSets
this.loading.set(false);
this.results.set(<Result<any, any>[]>msg);
this.collapsed = new Array(this.results.length);
this.collapsed.fill(false);

} else if (msg.hasOwnProperty('type')) { //if msg contains a notification of a changed information object
const iObj = <InformationObject>msg;
Expand Down Expand Up @@ -386,6 +393,7 @@ export class ConsoleComponent implements OnInit, OnDestroy {
}

toggleCollapsed(i: number) {
console.log(i)
if (this.collapsed !== undefined && this.collapsed[i] !== undefined) {
this.collapsed[i] = !this.collapsed[i];
}
Expand Down
4 changes: 3 additions & 1 deletion src/app/views/views.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import {
CardHeaderComponent,
ColComponent,
ColDirective,
CollapseDirective,
ContainerComponent,
DropdownComponent,
DropdownDividerDirective,
Expand Down Expand Up @@ -161,7 +162,8 @@ import {TreeModule} from '@ali-hm/angular-tree-component';
TreeModule,
PlaceholderDirective,
ProgressComponent,
ProgressBarComponent
ProgressBarComponent,
CollapseDirective
],
declarations: [
EditColumnsComponent,
Expand Down

0 comments on commit ff5a3e4

Please sign in to comment.