Ignore:
Timestamp:
06/27/20 17:57:53 (5 years ago)
Author:
Maciej Komosinski
Message:

Improved layout, added one free-text question, properly counted the number of Parts in the Model instead of counting 'X' in the genotype

File:
1 edited

Legend:

Unmodified
Added
Removed

  • TabularUnified js/human_3d_alignment/src/index.jsx

    r942 r964  
    44import React from 'react';
    55import Genotypes from './utils/genotypes';
     6import GenotypeParser from './utils/genotypeparser';
    67import TitlePanel from './viewskeleton/titlepanel';
    78import WidgetsContainer from './viewskeleton/widgetscontainer';
    … …  
    1314import EndViewer from './widgets/endviewer';
    1415
    15 const ROUNDS = 15;
     16const ROUNDS = 6;
    1617
    1718const styles = {
    … …  
    9394            selectedSportYears: {value: "empty", label: " "},
    9495            selectedSportHours: {value: "empty", label: " "},
    95             selectedSportType: {value: "empty", label: " "},
     96            selectedSportStrength: {value: "empty", label: " "},
     97            selectedSportCardio: {value: "empty", label: " "},
     98            selectedSportIntellect: {value: "empty", label: " "},
    9699            selectedCons: {value: "empty", label: " "},
    97100            selectedCalculations: {value: "empty", label: " "},
    … …  
    105108            controlMode: 'translate',
    106109            blockView: true,
    107             result: ''
     110            result: '',
     111            random: false,
     112            sequence1: [0, 2, 1, 2, 11, 2],
     113            sequence2: [12, 11, 7, 3, 10, 10],
     114            sequence_len: 6,
     115            sequence_pos: 0,
     116            textValue: ''
    108117        };
    109118
    … …  
    135144        this.handleChangeSportYears = this.handleChangeSportYears.bind(this);
    136145        this.handleChangeSportHours = this.handleChangeSportHours.bind(this);
    137         this.handleChangeSportType = this.handleChangeSportType.bind(this);
     146        this.handleChangeStrengthPercent = this.handleChangeStrengthPercent.bind(this);
     147        this.handleChangeCardioPercent = this.handleChangeCardioPercent.bind(this);
     148        this.handleChangeIntellectPercent = this.handleChangeIntellectPercent.bind(this);
    138149        this.handleChangeCons = this.handleChangeCons.bind(this);
    139150        this.handleChangeCalculations = this.handleChangeCalculations.bind(this);
    140151        this.handleChangeNavigation = this.handleChangeNavigation.bind(this);
    141152        this.handleChangePercent = this.handleChangePercent.bind(this);
     153        this.handleChangeText = this.handleChangeText.bind(this);
    142154        this.handleChangeStartTime = this.handleChangeStartTime.bind(this);
    143155        this.handleChangeFitHeight = this.handleChangeFitHeight.bind(this);
    … …  
    173185        this.genotypes = new Genotypes(this, "https://raw.githubusercontent.com/arturolejnik95/human_3d_alignment/master/walking.gen");   //load text from file to this.genotypes
    174186        //or another URL...
    175         let head = "'User ID'|'User IP'|'Gender'|'Year of birth'|'Handeness'|'Sleep hours'|'Sleep hours today'|'YearsGamePlaying'|'HoursGamePlaying'|'Musical experience'|'MusicalDuration'|'Languages'|'SportYears'|'SportHours'|'SportType'|'Cons'|'Calculations'|'Navigation'|'Start time'|'Stop time'|'Position of 1st'|'Position of 2nd'|'Rotation of 1st'|'Rotation of 2nd'|'ID 1st'|'ID 2nd'|'Fit'|'Result'\n"
     187        let head = "'User ID'|'User IP'|'Gender'|'Year of birth'|'Handeness'|'Sleep hours'|'Sleep hours today'|'YearsGamePlaying'|'HoursGamePlaying'|'Musical experience'|'MusicalDuration'|'Languages'|'SportYears'|'SportHours'|'StrengthPercent'|'CardioPercent'|'IntellectPercent'|'Cons'|'Calculations'|'Navigation'|'Start time'|'Stop time'|'Position of 1st'|'Position of 2nd'|'Rotation of 1st'|'Rotation of 2nd'|'ID 1st'|'ID 2nd'|'Fit'|'Result'|'Reason|\n"
    176188        this.handleChangeResult(head);
    177189    }
    … …  
    246258                    this.state.selectedSportYears.value + '|' +
    247259                    this.state.selectedSportHours.value + '|' +
    248                     this.state.selectedSportType.value + '|' +
     260                    this.state.selectedSportStrength.value + '|' +
     261                    this.state.selectedSportCardio.value + '|' +
     262                    this.state.selectedSportIntellect.value + '|' +
    249263                    this.state.selectedCons.value + '|' +
    250264                    this.state.selectedCalculations.value + '|' +
    … …  
    267281            }
    268282        }
    269         fit = fit + '|' + this.state.percent + '\n';
     283        fit = fit + '|' + this.state.percent + '|' + this.state.textValue.split("|").join(","); + '\n';
    270284
    271285        this.sendToServer(fit);
    … …  
    310324     */
    311325    loadNewGenotypes() {
    312         //Firstly it chooses pair of genotypes that user doesnt used before
    313         let rand1, rand2, amount1, amount2, gen1, gen2;
    314 
    315         do {
    316             rand1 = 0, rand2 = 0;
    317             do  {
    318                 while (rand1 == rand2) {
    319                     rand1 = Math.floor(Math.random() * this.state.genotypes);
    320                     rand2 = Math.floor(Math.random() * this.state.genotypes);
    321                 }
    322             } while (this.state.pairs.includes([rand1, rand2]) || this.state.pairs.includes([rand2, rand1]));
    323 
    324             //This part load genotypes to the state
    325             gen1 = this.genotypes.genotype[rand1];
    326             gen2 = this.genotypes.genotype[rand2];
    327             amount1 = gen1.split('').filter(function(sign){return sign === 'X'}).length;
    328             amount2 = gen2.split('').filter(function(sign){return sign === 'X'}).length;
    329             if (amount1 > 0) {
    330                 amount1++;
    331             }
    332             if (amount2 > 0) {
    333                 amount2++
    334             }
    335         } while (amount1 > 52 || amount2 > 52);
    336 
    337         let newpairs = this.state.pairs;
    338         if (amount1 <= amount2) {
    339             newpairs.push([rand1, rand2]);
    340             this.setState({ genotype1: gen1, genotype2: gen2 }, function() {
    341                 console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
    342             });
    343             this.setState({parts1: amount1, parts2: amount2}, function() {
    344                 console.log(this.state.parts1 + ' ' + this.state.parts2);
    345             });
    346         } else {
    347             newpairs.push([rand2, rand1]);
    348             this.setState({ genotype1: gen2, genotype2: gen1 }, function() {
    349                 console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
    350             });
    351             this.setState({parts1: amount2, parts2: amount1}, function() {
    352                 console.log(this.state.parts1 + ' ' + this.state.parts2);
    353             });
    354         }
    355         this.setState({ pairs: newpairs }, function() {
    356             console.log(`Pairs: `, this.state.pairs);
    357         });
    358 
    359         //Load tables of selected parts in fitviewer
    360         let min = Math.min(amount1, amount2);
    361         let s1 = [];
    362         let s2 = [];
    363         for (let i = 0; i < min; i++) {
    364             s1.push((i+1).toString());
    365             s2.push(' ');
    366         }
    367 
    368         //Start new round and load to state tables of selected and round
    369         let r = this.state.round + 1;
    370         this.setState({ round: r, selected1: s1, selected2: s2}, function() {
    371             console.log(`Round and state `, this.state.round + '. ' + this.state.selected1 + ' ' + this.state.selected2);
    372         });
     326         
     327               //Firstly it chooses pair of genotypes that user doesnt used before
     328               let rand1, rand2, amount1, amount2, gen1, gen2;
     329
     330               do {
     331                    if (this.state.random)
     332                    {
     333                         rand1 = 0, rand2 = 0;
     334                         do  {
     335                              while (rand1 == rand2) {
     336                                   rand1 = Math.floor(Math.random() * this.state.genotypes);
     337                                   rand2 = Math.floor(Math.random() * this.state.genotypes);
     338                              }
     339                         } while (this.state.pairs.includes([rand1, rand2]) || this.state.pairs.includes([rand2, rand1]));
     340                    }
     341                    else
     342                    {
     343                         if (this.state.sequence_pos==this.state.sequence_len)
     344                         {
     345                              this.onClickFinish();
     346                         }
     347                         else
     348                         {
     349                              rand1 = this.state.sequence1[this.state.sequence_pos];
     350                              rand2 = this.state.sequence2[this.state.sequence_pos];
     351                                                          this.setState({ sequence_pos: this.state.sequence_pos + 1 }, function() {
     352                              });
     353                                                          console.log("state", this.state.sequence_pos);
     354                         }
     355                    }
     356
     357                    //This part load genotypes to the state
     358                    gen1 = this.genotypes.genotype[rand1];
     359                    gen2 = this.genotypes.genotype[rand2];
     360                   
     361                    let model1 = GenotypeParser.getModelFromGenotype(gen1);
     362                    let model2 = GenotypeParser.getModelFromGenotype(gen2);
     363                   
     364                    amount1 = model1.getPartCount();
     365                    amount2 = model2.getPartCount();
     366     
     367               } while (amount1 > 52 || amount2 > 52);
     368
     369               let newpairs = this.state.pairs;
     370               if (amount1 <= amount2) {
     371                    newpairs.push([rand1, rand2]);
     372                    this.setState({ genotype1: gen1, genotype2: gen2 }, function() {
     373                         console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
     374                    });
     375                    this.setState({parts1: amount1, parts2: amount2}, function() {
     376                         console.log(this.state.parts1 + ' ' + this.state.parts2);
     377                    });
     378               } else {
     379                    newpairs.push([rand2, rand1]);
     380                    this.setState({ genotype1: gen2, genotype2: gen1 }, function() {
     381                         console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
     382                    });
     383                    this.setState({parts1: amount2, parts2: amount1}, function() {
     384                         console.log(this.state.parts1 + ' ' + this.state.parts2);
     385                    });
     386               }
     387               this.setState({ pairs: newpairs }, function() {
     388                    console.log(`Pairs: `, this.state.pairs);
     389               });
     390
     391               //Load tables of selected parts in fitviewer
     392               let min = Math.min(amount1, amount2);
     393               let s1 = [];
     394               let s2 = [];
     395               for (let i = 0; i < min; i++) {
     396                    s1.push((i+1).toString());
     397                    s2.push(' ');
     398               }
     399
     400               //Start new round and load to state tables of selected and round
     401               let r = this.state.round + 1;
     402               this.setState({ round: r, selected1: s1, selected2: s2}, function() {
     403                    console.log(`Round and state `, this.state.round + '. ' + this.state.selected1 + ' ' + this.state.selected2);
     404               });
    373405    }
    374406
    … …  
    377409     */
    378410    isReady() {
    379         if (this.state.selectedSportType.value != 'empty' && this.state.selectedYearsGamePlaying.value != 'empty' && this.state.selectedHoursGamePlaying.value != 'empty' && this.state.selectedMusicalDuration.value != 'empty' && this.state.selectedLanguages.value != 'empty' && this.state.selectedSportYears.value != 'empty' && this.state.selectedSportHours.value != 'empty' && this.state.selectedCons.value != 'empty' && this.state.selectedCalculations.value != 'empty' && this.state.selectedNavigation.value != 'empty' && this.state.selectedMusicalExperience.value != 'empty' && this.state.selectedGender.value != 'empty' && this.state.selectedSleepHoursToday.value != 'empty' && this.state.selectedSleepHours.value != 'empty' && this.state.selectedHand.value != 'empty' && this.state.selectedYear.value != 'empty' && this.state.sliderUpdated) {
     411        if (this.state.textValue && this.state.selectedSportIntellect.value != 'empty' && this.state.selectedSportCardio.value != 'empty' && this.state.selectedSportStrength.value != 'empty' && this.state.selectedYearsGamePlaying.value != 'empty' && this.state.selectedHoursGamePlaying.value != 'empty' && this.state.selectedMusicalDuration.value != 'empty' && this.state.selectedLanguages.value != 'empty' && this.state.selectedSportYears.value != 'empty' && this.state.selectedSportHours.value != 'empty' && this.state.selectedCons.value != 'empty' && this.state.selectedCalculations.value != 'empty' && this.state.selectedNavigation.value != 'empty' && this.state.selectedMusicalExperience.value != 'empty' && this.state.selectedGender.value != 'empty' && this.state.selectedSleepHoursToday.value != 'empty' && this.state.selectedSleepHours.value != 'empty' && this.state.selectedHand.value != 'empty' && this.state.selectedYear.value != 'empty' && this.state.sliderUpdated) {
    380412            this.setState({isDisable: false}, function() {
    381413                console.log(this.state.isDisable);
    … …  
    442474     /**
    443475     * Allow to change sport type in state
    444      * @param {string} sport type choosed sport type by user in listbox
    445      */
    446     handleChangeSportType(sporttype) {
    447         this.setState({ selectedSportType: sporttype }, function() {
    448             console.log(`Sport type selected:`, this.state.selectedSportType);
    449             this.isReady();
    450         });
    451     };
    452    
    453          /**
     476     * @param {Integer} sporttype choosed strenght component
     477     */
     478    handleChangeStrengthPercent(sporttype) {
     479        this.setState({ selectedSportStrength: sporttype }, function() {
     480            console.log(`Sport type selected:`, this.state.selectedSportStrength);
     481            this.isReady();
     482        });
     483    };
     484     
     485     /**
     486     * Allow to change sport type in state
     487     * @param {Integer} sporttype choosed cardio component
     488     */
     489    handleChangeCardioPercent(sporttype) {
     490        this.setState({ selectedSportCardio: sporttype }, function() {
     491            console.log(`Sport type selected:`, this.state.selectedSportCardio);
     492            this.isReady();
     493        });
     494    };
     495     
     496     /**
     497     * Allow to change sport type in state
     498     * @param {Integer} sporttype choosed intellect component
     499     */
     500    handleChangeIntellectPercent(sporttype) {
     501        this.setState({ selectedSportIntellect: sporttype }, function() {
     502            console.log(`Sport type selected:`, this.state.selectedSportIntellect);
     503            this.isReady();
     504        });
     505    };
     506   
     507     /**
    454508     * Allow to years game playing type in state
    455509     * @param {string} gameyp type choosed years game playing by user in listbox
    … …  
    462516    };
    463517
    464         /**
     518    /**
    465519     * Allow to hours game playing type in state
    466520     * @param {string} gamehp type choosed hours game playing by user in listbox
    … …  
    643697        this.setState({ percent: per, sliderUpdated: true }, function() {
    644698            console.log('Percent selected: ' + this.state.percent + ' ' + this.state.sliderUpdated);
     699            this.isReady();
     700        });
     701    }
     702     
     703     /**
     704     * Allow to change text area in state
     705     * @param {string} per text input
     706     */
     707    handleChangeText(per) {
     708        this.setState({ textValue: per }, function() {
     709            console.log('Text value: ' + this.state.textValue);
    645710            this.isReady();
    646711        });
    … …  
    867932                            handleChangeSleepHoursToday = {(hours) => {this.handleChangeSleepHoursToday(hours)}}                           
    868933                            handleChangeGender = {(gen) => {this.handleChangeGender(gen)}}
    869                             handleChangeSportType = {(gen) => {this.handleChangeSportType(gen)}}
     934                            handleChangeStrengthPercent = {(gen) => {this.handleChangeStrengthPercent(gen)}}
     935                            handleChangeCardioPercent = {(gen) => {this.handleChangeCardioPercent(gen)}}
     936                            handleChangeIntellectPercent = {(gen) => {this.handleChangeIntellectPercent(gen)}}
    870937                            handleChangeMusicalExperience = {(gen) => {this.handleChangeMusicalExperience(gen)}}
    871938                            handleChangeHand = {(hand) => {this.handleChangeHand(hand)}}
    … …  
    904971                            onClickNext = {() => {this.onClickNext()}}
    905972                            onClickFinish = {() => {this.onClickFinish()}}
     973                            handleChangeText = {(per) => {this.handleChangeText(per)}}
    906974                            handleChangePercent = {(per) => {this.handleChangePercent(per)}}/>,
    907975                        i: "" + i + 'sliderviewer',
Note: See TracChangeset for help on using the changeset viewer.