~hokiegeek/biologist-web

7d653c272de0103f7954029b15d90765ee75cc89 — HokieGeek 1 year, 9 months ago eb01fd1 1.3.0-1
Fixed a number of necessary tweaks
M package.json => package.json +1 -1
@@ 1,6 1,6 @@
{
  "name": "biologist-web",
  "version": "1.2.5",
  "version": "1.3.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",

M src/app/controls/controls.component.css => src/app/controls/controls.component.css +1 -1
@@ 3,5 3,5 @@
    cursor: pointer;
}
.settings-toggle:hover {
    background-color: #e5e5e5;
    background-color: #cccccc;
}

M src/app/controls/controls.component.html => src/app/controls/controls.component.html +21 -14
@@ 1,33 1,40 @@
<div>
    <button type="button" class="btn btn-primary btn-block rounded-0" (click)="create()">Study Life!</button>
    <div class="btn-group w-100" role="group">
        <button type="button" class="btn btn-primary btn-block rounded-0" (click)="create()">Study Life!</button>
        <button type="button"
                class="btn rounded-0"
                [ngClass]="{'btn-success': autoStart, 'btn-danger': !autoStart}"
                (click)="autoStart = !autoStart">
            Autostart</button>
    </div>
    <div class="text-center w-100 settings-toggle" data-toggle="collapse" data-target="#defaultSettings" title="default settings">
        &#x2304;
    </div>
    <div id="defaultSettings" class="collapse" role="tabpanel" aria-labelledby="settingsHeading">
    <div id="defaultSettings" class="collapse mt-1" role="tabpanel" aria-labelledby="settingsHeading">
        <div id="options" class="w-100 d-flex justify-content-around">
            <div class="d-flex flex-row">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">Rows</span>
                    <div class="input-group-prepend">
                        <span class="input-group-text">Rows</span>
                    </div>
                    <input type="text" class="form-control" size="3" placeholder="rows" [(ngModel)]="defaultRows" aria-describedby="basic-addon1">
                </div>
                <div class="input-group ml-1">
                    <span class="input-group-addon" id="basic-addon1">Cols</span>
                    <div class="input-group-prepend">
                        <span class="input-group-text">Cols</span>
                    </div>
                    <input type="text" class="form-control" size="3" placeholder="columns" [(ngModel)]="defaultColumns" aria-describedby="basic-addon1">
                </div>
            </div>
            <div class="d-flex flex-row">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">Density</span>
                    <div class="input-group-prepend">
                        <span class="input-group-text">Density</span>
                    </div>
                    <input type="text" class="form-control" size="3" placeholder="density" [(ngModel)]="defaultDensity" aria-describedby="basic-addon1">
                    <span class="input-group-addon">%</span>
                </div>
            </div>
            <div class="d-flex flex-row">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" [(ngModel)]="autoStart" aria-label="Checkbox for following text input">
                    </span>
                    <span class="input-group-addon">Autostart</span>
                    <div class="input-group-append">
                        <span class="input-group-text">%</span>
                    </div>
                </div>
            </div>
        </div>

M src/app/lab.service.ts => src/app/lab.service.ts +12 -14
@@ 87,15 87,17 @@ export class Experiment {
                                this.lab.poll(this.id, this.highGeneration, maxGenerationsPerPoll)
                                    .subscribe(updates => {
                                            for (const update of updates.Updates) {
                                                // console.log(">> POLL CALLBACK", update)
                                                if (update.Generation < this.lowGeneration) {
                                                    this.lowGeneration = update.Generation;
                                                if (update != null) {
                                                    // console.log(">> POLL CALLBACK", update)
                                                    if (update.Generation < this.lowGeneration) {
                                                        this.lowGeneration = update.Generation;
                                                    }
                                                    if (update.Generation > this.highGeneration) {
                                                        this.highGeneration = update.Generation;
                                                    }
                                                    this.generations[update.Generation] =
                                                        new Generation(update.Generation, update.Status, update.Living);
                                                }
                                                if (update.Generation > this.highGeneration) {
                                                    this.highGeneration = update.Generation;
                                                }
                                                this.generations[update.Generation] =
                                                    new Generation(update.Generation, update.Status, update.Living);
                                            }
                                        }
                                    );


@@ 135,7 137,7 @@ export class Experiment {
        } else if (this.numGenerations() === 0 && this.seed != null) {
            return this.seed;
        } else {
            console.log('oh oh: get(): ', num, this.generations);
            // console.log('oh oh: get(): ', num, this.generations);
            return null;
        }
        // TODO if num is outside the boundaries (lowGen, highGen), poll for gen 'num' as well as a buffer around it


@@ 165,18 167,14 @@ export class Lab {
    createExperiment(width, height, seed): Observable<CreateAnalysisResponse> {
        const req = {Dims: {Width: width, Height: height}, Pattern: 0, Seed: seed};
        return this.http.post<CreateAnalysisResponse>(server + '/analyze', JSON.stringify(req));
        // .map((res: Response) => res.json())
        // .catch()
    }

    poll(id, startingGen, maxGen): Observable<AnalysisUpdateResponse> {
        const req = {'ID': id, 'StartingGeneration': startingGen, 'NumMaxGenerations': maxGen};
        return this.http.post<AnalysisUpdateResponse>(server + '/poll', JSON.stringify(req));
        // .map((res: Response) => res.json())
    }

    control(id, order) {
        // console.log(">> CONTROL")
        this.http.post(server + '/control', JSON.stringify({'ID': id, 'Order': order})).subscribe(blah => console.log('blah', blah));
        this.http.post(server + '/control', JSON.stringify({'ID': id, 'Order': order})).subscribe();
    }
}

M src/app/petridish/board/board.component.css => src/app/petridish/board/board.component.css +1 -3
@@ 1,10 1,8 @@
canvas {
    background: #e0e0e0;
    background: #000000;
    border: 1px solid #a0a0a0;
}

.resizable-helper {
    border: 1px dotted #000000;
    border: 1px dotted #c0c0c0;
}


M src/app/petridish/culture-info/culture-info.component.css => src/app/petridish/culture-info/culture-info.component.css +8 -5
@@ 1,16 1,16 @@
.culture-info {
    background-color: #fafafa;
    background-color: #b2b2b2;
    border: 1px solid #a0a0a0;
    font-family: Verdana, sans-serif;
    font-size: .85em;
}

.status-active {
    background-color: #f6f987;
    background-color: #4ca54c;
}

.status-stable {
    background-color: #8cff71;
    background-color: #66aaf5;
}

.status-dead {


@@ 18,15 18,18 @@
}

.culture-info .dims {
    color: #848484;
    color: #4c4c4c;
    font-size: .65em;
}

.culture-info .label {
    color: #5d5d5d;
    color: #e5e5e5;
    color: #f7f7f7;
}

.culture-info .data {
    color: #ffffff;
}

.close {


@@ 39,5 42,5 @@

.close:hover {
    color: red;
    opacity: .50;
    opacity: .90;
}

M src/app/petridish/petridish.component.css => src/app/petridish/petridish.component.css +1 -1
@@ 10,7 10,7 @@
}

.playback-controls {
    background: #fafafa;
    background-color: #b2b2b2;
    border: 1px solid #a0a0a0;
    text-align: center;
    vertical-align: middle;

M src/app/petridish/petridish.component.html => src/app/petridish/petridish.component.html +18 -10
@@ 4,23 4,31 @@
        <span *ngIf="creating">
            <div class="d-flex flex-row mb-1">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">Rows</span>
                    <div class="input-group-prepend">
                        <span class="input-group-text">Rows</span>
                    </div>
                    <input type="text" class="form-control" size="3" placeholder="rows" [(ngModel)]="experiment.rows" (change)="createSeed()" aria-describedby="basic-addon1">
                </div>
                <div class="input-group ml-1">
                    <span class="input-group-addon" id="basic-addon1">Cols</span>
                    <div class="input-group-prepend">
                        <span class="input-group-text">Cols</span>
                    </div>
                    <input type="text" class="form-control" size="3" placeholder="columns" [(ngModel)]="experiment.columns" (change)="createSeed()" aria-describedby="basic-addon1">
                </div>
            </div>
            <div class="d-flex flex-row mb-1">
                <div class="input-group align-self-stretch">
                    <span class="input-group-addon" id="basic-addon1">Cell size</span>
            <div class="d-flex flex-row mb-1 align-self-stretch">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Cells</span>
                    </div>
                    <span class="range rounded-right">
                        <input type="range" min="2" max="6" [(ngModel)]="cellSize" [title]="cellSize" />
                    </span>
                </div>
                <div class="input-group ml-1 align-self-stretch">
                    <span class="input-group-addon" id="basic-addon1">Density</span>
                <div class="input-group ml-1">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Density</span>
                    </div>
                    <span class="range rounded-right">
                        <input type="range" min="10" max="90" [(ngModel)]="experiment.initialDensity" (change)="createSeed()" [title]="experiment.initialDensity" />
                    </span>


@@ 37,15 45,15 @@
                   [cellSize]="cellSize" [cellSpacing]="cellSpacing"
                   [cells]="getCurrentGeneration().living">
            </app-board>
            <div class="ml-1 d-flex flex-column pb-2">
                <div class="h-100">
            <div class="d-flex align-items-start flex-column pb-2 ml-1">
                <div class="h-100 mb-auto">
                    <app-culture-info [generation]="getCurrentGeneration()"
                                  [boardWidth]="experiment.columns"
                                  [boardHeight]="experiment.rows"
                                  (close)="destroy()">
                    </app-culture-info>
                </div>
                <div *ngIf="!creating" class="mt-1 playback-controls align-items-end">
                <div *ngIf="!creating" class="mt-1 playback-controls align-items-end w-100">
                    <div>
                        <span *ngIf="!playing">
                            <span (click)="nav('-', 20)" title="Move backwards 20 generations">&#x25c5;</span>