Skip to content

GitLab

Commit ba241de2 authored by Kruyff,D.L.W. (Dylan)'s avatar Kruyff,D.L.W. (Dylan)
Browse files

Load BigWig files 


Former-commit-id: 6903c44c
parent 10dda117
Show whitespace changes
Inline Side-by-side
AngularApp/prototype/src/app/api.service.ts
View file @ ba241de2
......@@ -16,8 +16,8 @@ export class ApiService {
async readFile(): Promise<RawData> {
const response = await fetch('http://127.0.0.1:5000/read-data');
const temp = await response.json();
const index = JSON.parse(temp.index);
const values = JSON.parse(temp.values).map(Number);
const index = temp.index;
const values = temp.values;
return {index, values};
}
......@@ -62,6 +62,18 @@ export class ApiService {
return await response.json();
}
async getWindow(indices: number[]) {
const response = await fetch('http://127.0.0.1:5000/window', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({indices})
});
return await response.json();
}
// Return similar windows based on an input query
async getSimilarWindows(query, tables) {
const response = await fetch('http://127.0.0.1:5000/similarity', {
......
AngularApp/prototype/src/app/cache.service.ts
View file @ ba241de2
......@@ -20,7 +20,7 @@ export class CacheService {
public windowSize = 500;
public nrOfTables = 10;
public hashSize = 5;
public stepSize = 1;
public stepSize = 200;
public querySelectionMode = true;
public onNewData: EventEmitter<void> = new EventEmitter<void>();
......@@ -89,6 +89,10 @@ export class CacheService {
return this._queryWindow;
}
async getWindow(indices: number[]): Promise<number[][]> {
return await this.api.getWindow(indices);
}
async updateTables(): Promise<void> {
this.tables = await this.api.updateTables(this.queryWindow, this.labels, this.tables, this.parameters);
}
......
AngularApp/prototype/src/app/labeling-window/labeling-window.component.html
View file @ ba241de2
......@@ -9,7 +9,7 @@
</div>
</div>
</div>
<button *ngIf="windowSimilarity" (click)="changeTables()" class="train-button">Train</button>
<button *ngIf="windowSimilarity" (click)="train()" class="train-button">Train</button>
</div>
AngularApp/prototype/src/app/labeling-window/labeling-window.component.ts
View file @ ba241de2
......@@ -18,15 +18,11 @@ export class LabelingWindowComponent implements OnInit {
this.service.onNewSimilarity.subscribe(() => { this.getTopKSimilar(); });
}
public changeTables() {
public train() {
this.service.labels = Object.assign({}, this.service.labels, this.labels);
this.service.updateTables();
}
public get windowSimilarity() {
return this.service.windowSimilarity;
}
public labelCorrect(index: number) {
this.labels[index] = true;
}
......@@ -41,23 +37,12 @@ export class LabelingWindowComponent implements OnInit {
this.labels[index] = false;
}
shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
public getTopKSimilar() {
async getTopKSimilar() {
this.labels = [];
let abort = false;
if (!this.windowSimilarity) {
return;
}
let topk = [];
const topk = [];
let k = this.k;
const keys = Object.keys(this.windowSimilarity).map(a => Number(a)).sort((a, b) => b - a);
for (let i = 0; i < this.k; i++) {
const windows = this.windowSimilarity[keys[i]];
......@@ -70,23 +55,28 @@ export class LabelingWindowComponent implements OnInit {
k -= 1;
if (k < 1) {
abort = true;
}
break;
}
// break;
}
if (abort) {
break;
}
}
this.topk = topk;
await this.createPlots();
}
async createPlots() {
this.subplots = [];
for (const window of this.topk) {
const values = await this.service.getWindow(this.topk.map((window) => window.index));
this.topk.forEach((window, i) => {
this.subplots.push(
{
index: window.index,
data: [{
x: this.service.rawIndices.slice(window.index, window.index + this.service.windowSize),
y: this.service.rawValues.slice(window.index, window.index + this.service.windowSize),
x: [...Array(values[i].length).keys()],
y: values[i],
type: 'line'
}],
layout: {
......@@ -117,6 +107,19 @@ export class LabelingWindowComponent implements OnInit {
}
}
);
});
}
shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
public get windowSimilarity() {
return this.service.windowSimilarity;
}
}
AngularApp/prototype/src/app/labels/labels.component.ts
View file @ ba241de2
......@@ -16,17 +16,18 @@ export class LabelsComponent implements OnInit {
this.service.onNewLabels.subscribe(() => { this.createSubplots(); });
}
createSubplots(): void {
async createSubplots() {
this.goodLabels = [];
this.badLabels = [];
for (const key of Object.keys(this.service.labels)) {
const windows = await this.service.getWindow(Object.keys(this.service.labels).map(Number));
Object.keys(this.service.labels).forEach((key, i) => {
const index = Number(key);
const plot =
{
index,
data: [{
x: this.service.rawIndices.slice(index, index + this.service.windowSize),
y: this.service.rawValues.slice(index, index + this.service.windowSize),
x: [...Array(this.service.windowSize).keys()],
y: windows[i],
type: 'line'
}],
layout: {
......@@ -55,7 +56,7 @@ export class LabelsComponent implements OnInit {
} else {
this.badLabels.push(plot);
}
}
});
}
}
AngularApp/prototype/src/app/overview-window/overview-window.component.html
View file @ ba241de2
<zingchart-angular [id]="id" [config]="config" (dblclick)="doubleClick($event)" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular>
<zingchart-angular [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular>
AngularApp/prototype/src/app/overview-window/overview-window.component.ts
View file @ ba241de2
......@@ -35,7 +35,7 @@ export class OverviewWindowComponent implements OnInit {
this.service.queryWindow = undefined;
this.data = [];
for (let i = 0; i < this.service.rawValues.length; i++) {
this.data.push([i, this.service.rawValues[i]]);
this.data.push([this.service.rawIndices[i], this.service.rawValues[i]]);
}
this.series = [
{
......@@ -91,23 +91,6 @@ export class OverviewWindowComponent implements OnInit {
console.log("showing plot");
}
async clicked(clickData) {
if (!this.service.querySelectionMode) {
return;
}
this.service.querySelectionMode = false;
const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
x: clickData.x,
y: clickData.y
});
const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
await this.service.getQueryWindow(this.service.rawValues.slice(index, index + this.service.windowSize));
const temp = {};
temp[index] = true;
this.service.labels = temp;
await this.updatePlot();
}
async updatePlot() {
console.log('updating plot');
if (!this.service.queryWindow) {
......@@ -118,19 +101,19 @@ export class OverviewWindowComponent implements OnInit {
this.markers = [];
for (const index in this.service.labels) {
if (this.service.labels[index]) {
this.goodLabels.push(this.data[index]);
this.goodLabels.push([Number(index) * (12000 / 6), 0]);
this.markers.push({
type: 'area',
// BUG: For some reason the range values are multiplied by 10
range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
backgroundColor: "#4caf50",
});
} else {
this.badLabels.push(this.data[index]);
this.badLabels.push([Number(index) * (12000 / 6), 0]);
this.markers.push({
type: 'area',
// BUG: For some reason the range values are multiplied by 10
range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
backgroundColor: "#f44336",
});
}
......@@ -155,11 +138,11 @@ export class OverviewWindowComponent implements OnInit {
const labels = [];
const markers = [];
for (const index of candidates) {
labels.push(this.data[index]);
labels.push([Number(index) * (12000 / 6), 0]);
markers.push({
type: 'area',
// BUG: For some reason the range values are multiplied by 10
range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
backgroundColor: "#b1a343",
});
}
......@@ -180,6 +163,23 @@ export class OverviewWindowComponent implements OnInit {
});
}
async clicked(clickData) {
if (!this.service.querySelectionMode) {
return;
}
this.service.querySelectionMode = false;
const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
x: clickData.x,
y: clickData.y
});
const index = Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
this.service.queryWindow = await this.service.getQueryWindow(index);
const temp = {};
temp[index] = true;
this.service.labels = temp;
await this.updatePlot();
}
zoom(p) {
if (!p.ev) {
return;
......@@ -190,8 +190,4 @@ export class OverviewWindowComponent implements OnInit {
zingchart.exec("zingchart-ng-1", 'zoomout');
}
}
doubleClick(e) {
zingchart.exec("zingchart-ng-1", 'viewall');
}
}
AngularApp/prototype/src/app/progress-view/progress-view.component.ts
View file @ ba241de2
......@@ -10,6 +10,7 @@ export class ProgressViewComponent implements OnInit {
public plot;
public data;
public layout;
public amountOfCandidates;
private _sliderValue;
......@@ -20,17 +21,24 @@ export class ProgressViewComponent implements OnInit {
}
averagePlot(averages) {
let highest = 100;
let data = averages.map((average, i) => {
if (average.average.length !== 0 && i < highest) {
console.log(averages);
let highest = 0;
averages.map((average, i) => {
if (average.average.length !== 0 && i > highest) {
highest = i;
}
});
let data = averages.map((average, i) => {
return [
{
x: [...Array(average.average.length).keys()],
y: average.average,
type: 'line',
visible: i === highest,
line: {
color: 'red',
width: 3
}
},
{
x: [...Array(average.average.length).keys()],
......@@ -61,18 +69,18 @@ export class ProgressViewComponent implements OnInit {
data = [].concat(...data);
const visibility = Array(averages.length * 3).fill(false);
const steps = [];
for (let i = averages.length - 1; i >= 0; i--) {
for (let i = 0; i < this.cache.nrOfTables; i++) {
const v = visibility.slice();
v[i * 3 + 2] = true;
v[i * 3 + 1] = true;
v[i * 3] = true;
steps.push({
label: (100 * (averages.length - i) / averages.length).toString() + '%',
label: (100 * (i + 1) / this.cache.nrOfTables).toString() + '%',
method: 'restyle',
args: ['visible', v]
});
}
this._sliderValue = averages.length - 1 - highest;
this._sliderValue = highest;
this.data = data;
this.layout = {
showlegend: false,
......@@ -96,7 +104,7 @@ export class ProgressViewComponent implements OnInit {
height: 300,
width: 200,
sliders: [{
active: averages.length - 1 - highest,
active: highest,
pad: {t: 30},
currentvalue: {
xanchor: 'right',
......@@ -113,6 +121,7 @@ export class ProgressViewComponent implements OnInit {
async initializeInfo(): Promise<void> {
console.log('Updating progress view');
console.log(this.similarity);
const allWindows = [];
const keys = Object.keys(this.similarity);
for (let i = this.cache.nrOfTables; i >= 1; i--) {
......@@ -124,6 +133,11 @@ export class ProgressViewComponent implements OnInit {
}
const averages = await this.cache.getAverageProgressWindows(allWindows);
this.plot = this.averagePlot(averages);
let candidates = [];
for (let i = this._sliderValue; i < this.cache.nrOfTables; i++) {
candidates = candidates.concat(this.cache.windowSimilarity[i.toString()]);
}
this.amountOfCandidates = candidates.length;
}
public get similarity() {
......@@ -132,13 +146,14 @@ export class ProgressViewComponent implements OnInit {
public setSliderValue(v) {
this._sliderValue = v.slider.active;
let candidates = [];
for (let i = this._sliderValue; i < this.cache.nrOfTables; i++) {
candidates = candidates.concat(this.cache.windowSimilarity[i.toString()]);
}
this.amountOfCandidates = candidates.length;
}
public showCandidates() {
this.cache.sliderValue = this._sliderValue;
}
public get amountOfCandidates() {
return this.similarity[this._sliderValue.toString()].length;
}
}
AngularApp/prototype/src/app/table-overview/table-overview.component.ts
View file @ ba241de2
......@@ -157,7 +157,6 @@ export class TableOverviewComponent implements OnInit {
}
async setQuery(data) {
console.log('clicked for query');
this.service.queryWindow = await this.service.getQueryWindow(data[0].y);
await this.service.getSimilarWindows();
}
......
Flaskserver/.gitattributes 0 → 100644
View file @ ba241de2
*.{bigWig, csv, docs, h5, mmap, npy, pdf, pkl, png, xlsx} filter=lfs diff=lfs merge=lfs -text
\ No newline at end of file
Flaskserver/.idea/.name 0 → 100644
View file @ ba241de2
main.py
\ No newline at end of file
Flaskserver/.idea/misc.xml
View file @ ba241de2
......@@ -3,5 +3,8 @@
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.8 (Flaskserver)" project-jdk-type="Python SDK" />
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.8 (base)" project-jdk-type="Python SDK" />
<component name="PyCharmProfessionalAdvertiser">
<option name="shown" value="true" />
</component>
</project>
\ No newline at end of file
Flaskserver/.idea/workspace.xml
View file @ ba241de2
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="BranchesTreeState">
<expand>
<path>
<item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
<item name="LOCAL_ROOT" type="e8cecc67:BranchNodeDescriptor" />
</path>
<path>
<item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
<item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
</path>
<path>
<item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
<item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
<item name="GROUP_NODE:origin" type="e8cecc67:BranchNodeDescriptor" />
</path>
</expand>
<select />
</component>
<component name="ChangeListManager">
<list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/bigwig.py" afterDir="false" />
<change afterPath="$PROJECT_DIR$/test.bigWig" afterDir="false" />
<change afterPath="$PROJECT_DIR$/utils.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/api.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/api.service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/progress-view/progress-view.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/progress-view/progress-view.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/misc.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/misc.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/main.py" beforeDir="false" afterPath="$PROJECT_DIR$/main.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/processed-data.npy" beforeDir="false" afterPath="$PROJECT_DIR$/processed-data.npy" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../run-flask-server.bat" beforeDir="false" afterPath="$PROJECT_DIR$/../run-flask-server.bat" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2448">
<caret line="168" column="22" lean-forward="true" selection-start-line="168" selection-start-column="22" selection-end-line="168" selection-end-column="22" />
<folding>
<element signature="e#0#41#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$APPLICATION_HOME_DIR$/helpers/typeshed/stdlib/3/collections/__init__.pyi">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="3655">
<caret line="244" column="8" selection-start-line="244" selection-start-column="8" selection-end-line="244" selection-end-column="8" />
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>set</find>
<find>Counter</find>
<find>print</find>
<find>orjson</find>
<find>dumps</find>
<find>dask</find>
<find>dd</find>
</findStrings>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/main.py" />
</list>
</option>
</component>
<component name="ProjectFrameBounds" extendedState="6">
<option name="x" value="-11" />
<option name="y" value="-11" />
<option name="width" value="1890" />
<option name="height" value="960" />
</component>
<component name="ProjectId" id="1hupnL6K73Xlc13yxUhgTbUvBAB" />
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectView">
<navigator proportions="" version="1">
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="Scope" />
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="Flaskserver" type="b2602c69:ProjectViewProjectNode" />
<item name="Flaskserver" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
</panes>
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
<property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
</list>
</option>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$" />