Skip to content

Commit 82214e3

Browse files
author
Vishal Vora
committed
-
1 parent 1ac33b1 commit 82214e3

12 files changed

Lines changed: 210 additions & 60 deletions

File tree

‎examples/container.py‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
from datastack import datastack
2+
3+
ds = datastack(main=True)
4+
5+
6+
col3, col4 = ds.columns(2)
7+
col3.write("col1")
8+
col4.write("col2")
9+
10+
# container = ds.container()
11+
# container.write('test container')
12+
# col1, col2 = container.columns(2)
13+
14+
# col1.write('col1')
15+
# col2.write('col2')
16+
17+
18+
# ds.write('test')

‎frontend/src/app/app.component.html‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
<!-- main content -->
3636

37-
<div style="display: flex; flex-direction: column;width: 100%; overflow: auto;padding: 10px;" [ngStyle]="wide_mode ? { 'align-items': 'flex-start', 'padding-top':'30px '} : { 'align-items': 'center' }" >
37+
<div #scrollableDiv style="display: flex; flex-direction: column;width: 100%; overflow: auto;padding: 10px;" [ngStyle]="wide_mode ? { 'align-items': 'flex-start', 'padding-top':'30px '} : { 'align-items': 'center' }" >
3838
<div style="display: block; width:100%; " [ngStyle]="wide_mode ? { } : {'max-width': '50rem','padding': '6rem 1rem 10rem'}" >
3939
<ng-container *ngIf = "app_loading">
4040
<nz-spin [nzSpinning]="true" [nzDelay]="500">
@@ -83,7 +83,7 @@ <h3 style="font-size: 14px;">{{element.prop.label}}</h3>
8383
</div>
8484

8585

86-
<div *ngIf="element.type == 'button'">
86+
<div *ngIf="element.type == 'button'" style="padding: 5px 0;">
8787
<button nz-button nzType="primary" (click)="click(element)">{{element.prop.title}}</button>
8888
</div>
8989
<div *ngIf="element.type == 'divider'">
@@ -255,25 +255,8 @@ <h3 style="font-size: calc(1.3rem + .4vw); font-weight:600">{{element.prop.data}
255255

256256
</div>
257257
<div *ngIf="element.type == 'table'">
258-
<nz-table #basicTable nzSize="small" [nzData]="element.prop.data" nzBordered>
259-
<thead>
260-
<tr>
261-
<th *ngFor ="let h of element.prop.columns">
262-
{{h}}
263-
</th>
264-
</tr>
265-
</thead>
266-
<tbody>
267-
<tr *ngFor="let data of basicTable.data">
268-
<td *ngFor="let col of element.prop.columns" >
269-
270-
<div [innerHTML] = data[col]></div>
271-
<!-- {{data[col]}} -->
272-
</td>
273-
<!-- {{data.col1}} -->
274-
</tr>
275-
</tbody>
276-
</nz-table>
258+
<app-table [element] = "element"></app-table>
259+
277260
</div>
278261
<div *ngIf="element.type == 'dataframe'" style="margin:5px;" id="slick-grid-container">
279262
<angular-slickgrid [gridId]="element.prop.grid_id"

‎frontend/src/app/app.component.ts‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, HostListener, Renderer2, ViewChild } from '@angular/core';
1+
import { Component, ElementRef, HostListener, Renderer2, ViewChild } from '@angular/core';
22
import { DomSanitizer } from '@angular/platform-browser';
33
import { Subject } from 'rxjs';
44
import { Observable } from 'rxjs/internal/Observable';
@@ -10,7 +10,6 @@ import { marked } from 'marked';
1010
import { NzNotificationService } from 'ng-zorro-antd/notification';
1111
import { AngularGridInstance, Column, GridOption } from 'angular-slickgrid';
1212
import { ExcelExportService } from '@slickgrid-universal/excel-export';
13-
1413
interface trace {
1514
x:Array<any>,
1615
y:Array<any>,
@@ -80,6 +79,7 @@ export class AppComponent {
8079
dataset: any[] = [];
8180
hide_sidebar:boolean = true
8281
wide_mode = false
82+
current_page = 'main'
8383
breakpoints = {
8484
sm: 576,
8585
columns: 640,
@@ -97,8 +97,10 @@ export class AppComponent {
9797
config : {editable:true, responsive: true}
9898
};
9999
angularGrid: AngularGridInstance;
100-
101-
constructor(private api:ApiService, public sanitizer: DomSanitizer, public renderer: Renderer2, public notification:NzNotificationService){
100+
@ViewChild('scrollableDiv') scrollableDiv: ElementRef;
101+
constructor(private api:ApiService,
102+
public sanitizer: DomSanitizer,
103+
public renderer: Renderer2, public notification:NzNotificationService){
102104
console.log(window.location.protocol)
103105
let host = window.location.hostname
104106
let port
@@ -180,6 +182,10 @@ export class AppComponent {
180182

181183
update_app(res:any){
182184
console.log(res)
185+
if (this.current_page != res['current_page']){
186+
this.scrollToTop()
187+
this.current_page = res['current_page']
188+
}
183189
let all_elements = []
184190
let all_pages = ['main_page'].concat(res['pages'])
185191
console.log(all_pages)
@@ -599,7 +605,11 @@ is_menu_open(item, value){
599605
return item.children.some(item => item.title === value)
600606
}
601607

602-
608+
scrollToTop() {
609+
console.log('scrolling to top')
610+
const scrollableElement = this.scrollableDiv.nativeElement;
611+
scrollableElement.scrollTop = 0;
612+
}
603613

604614
}
605615

‎frontend/src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { NgZorroAntdModule} from './ng-zorro-antd.module';
2828
import { CodeComponent } from './components/elements/code/code.component';
2929
import { ExpanderComponent } from './components/elements/expander/expander.component';
3030
import { EditableComponent } from './components/elements/editable/editable.component'
31+
import { TableComponent } from './components/elements/table/table.component'
3132
registerLocaleData(en);
3233

3334
// @dynamic
@@ -37,6 +38,7 @@ registerLocaleData(en);
3738
CodeComponent,
3839
ExpanderComponent,
3940
EditableComponent,
41+
TableComponent
4042
// MyComponentWrapperComponent
4143
],
4244
imports: [

‎frontend/src/app/components/elements/code/code.component.html‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
11

22
<div *ngIf = "show" >
3-
<nz-code-editor [style.height.px]="height" [(ngModel)]="block.prop.code" [nzEditorOption]="{theme:'vs-dark', language: 'python',lineNumbers: 'off',padding: {
4-
top: 20
5-
},scrollbar: {vertical: 'hidden'} , minimap:{enabled:false}, automaticLayout: true, wordWrap: 'on', scrollBeyondLastLine: false}" (nzEditorInitialized)="onEditorInit($event)"></nz-code-editor>
3+
<nz-code-editor
4+
[style.height.px]="height"
5+
[(ngModel)]="block.prop.code"
6+
[nzEditorOption]="{theme:'vs-dark',
7+
language: 'python',
8+
lineNumbers: 'off',
9+
padding: {
10+
top: 20
11+
},
12+
scrollbar: {vertical: 'hidden'} ,
13+
minimap:{enabled:false},
14+
automaticLayout: true,
15+
wordWrap: 'on',
16+
scrollBeyondLastLine: false}"
17+
(nzEditorInitialized)="onEditorInit($event)"
18+
(ngModelChange)="onCodeChange(block, $event)"
19+
></nz-code-editor>
620
<!-- <button (click)="run_block(block)">run</button>
721
<div style="border: 1px solid;">Result:
822
<div *ngIf="code_output_type != 'table'">{{code_output}}</div>

‎frontend/src/app/components/elements/code/code.component.ts‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, Input } from '@angular/core';
22
import { ApiService } from 'src/app/services/api.service';
3+
import { AppComponent } from 'src/app/app.component'
34

45
@Component({
56
selector: 'app-code',
@@ -14,22 +15,22 @@ export class CodeComponent {
1415
height =30;
1516
url = 'http://localhost:5000/'
1617
editor: any;
17-
constructor(private api:ApiService){}
18+
constructor(private api:ApiService, private app :AppComponent){}
1819
code_output:any
1920
code_output_type:any
2021
show = false
2122
ngOnInit(){
2223
console.log(this.block, this.root, this.element)
2324
this.show = true
2425
}
25-
run_block(e:any){
26-
console.log(e)
27-
this.api.post(this.url + '/run_block', {...e}).subscribe(res=>{
28-
console.log(res)
29-
this.code_output = res['res']
30-
this.code_output_type = res['type']
31-
})
32-
}
26+
// run_block(e:any){
27+
// console.log(e)
28+
// this.api.post(this.url + '/run_block', {...e}).subscribe(res=>{
29+
// console.log(res)
30+
// this.code_output = res['res']
31+
// this.code_output_type = res['type']
32+
// })
33+
// }
3334

3435
onEditorInit(e: any): void {
3536
this.editor = e
@@ -48,12 +49,17 @@ export class CodeComponent {
4849
console.log( e.getModel().getLineCount())
4950
}
5051

51-
block_change(){
52-
console.log('block chaneged', this.block)
53-
let payload = {
54-
'block':this.block,
55-
'parent':this.element
56-
}
57-
this.api.post(this.url +'editable', {...this.root,...{'payload':payload}}).subscribe(res=>{console.log(res)})
52+
// block_change(){
53+
// console.log('block chaneged', this.block)
54+
// let payload = {
55+
// 'block':this.block,
56+
// 'parent':this.element
57+
// }
58+
// this.api.post(this.url +'editable', {...this.root,...{'payload':payload}}).subscribe(res=>{console.log(res)})
59+
// }
60+
61+
onCodeChange(block, ev){
62+
// this.app.req(this.url, )
63+
this.app.req(block, {value: ev, action:'change'})
5864
}
5965
}

‎frontend/src/app/components/elements/table/table.component.css‎

Whitespace-only changes.

‎frontend/src/app/components/elements/table/table.component.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<nz-table #basicTable nzSize="small" [nzData]="element.prop.data" nzBordered>
2+
<thead>
3+
<tr>
4+
<th *ngFor ="let h of element.prop.columns">
5+
{{h}}
6+
</th>
7+
</tr>
8+
</thead>
9+
<tbody>
10+
<tr *ngFor="let data of basicTable.data">
11+
<td *ngFor="let col of element.prop.columns" >
12+
13+
<div [innerHTML] = data[col]></div>
14+
<!-- {{data[col]}} -->
15+
</td>
16+
<!-- {{data.col1}} -->
17+
</tr>
18+
</tbody>
19+
</nz-table>

‎frontend/src/app/components/elements/table/table.component.spec.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { TableComponent } from './table.component';
4+
5+
describe('TableComponent', () => {
6+
let component: TableComponent;
7+
let fixture: ComponentFixture<TableComponent>;
8+
9+
beforeEach(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [TableComponent]
12+
});
13+
fixture = TestBed.createComponent(TableComponent);
14+
component = fixture.componentInstance;
15+
fixture.detectChanges();
16+
});
17+
18+
it('should create', () => {
19+
expect(component).toBeTruthy();
20+
});
21+
});

‎frontend/src/app/components/elements/table/table.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, Input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-table',
5+
templateUrl: './table.component.html',
6+
styleUrls: ['./table.component.css']
7+
})
8+
export class TableComponent {
9+
10+
@Input() element:any=[]
11+
12+
ngOnInit(){
13+
console.log(this.element)
14+
15+
}
16+
}

0 commit comments

Comments
 (0)