Skip to content

Commit

Permalink
We are replacing impact block with non inferiority when that's the case.
Browse files Browse the repository at this point in the history
- Changing base change noninferiority impact only when it is absolute per day
- New tests for non inferiority new field (Expected Change) and bugfixes

Simplify selection of the effect size under the alternative

For non-inferiority testing, not only do people have to select the acceptable
cost, but they also have to specify what is the effect size under the alternative.
However, we can simplify everyone's life by breaking down what are the three
plausible scenarios under the alternative, given we already have the acceptable cost:
  - if we don't expect any change under the alternative then the effect size is
set to 0
  - if we expect a degradation then the effect size under the alternative is set
to a decrease of half of the acceptable cost
  - if we expect an improvement (but for some reason still want to perform a
non-inferiority test) then the effect size under the alternative is set to
the acceptatble cost (we hypothesize that people wouldn't care for an improvement
smaller than the acceptable cost and would in this case rather select the "no change"
case.

We also moved the acceptable cost selection to the impact box (rightmost column)
to improve the UX (no backing data on that though)
  • Loading branch information
Marcelo Pereira de Oliveira committed Apr 12, 2018
1 parent 9bc5c8d commit 9bb21e3
Show file tree
Hide file tree
Showing 11 changed files with 751 additions and 124 deletions.
57 changes: 51 additions & 6 deletions dist/powercalculator.css
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,7 @@
grid-template-rows: auto;
grid-template-areas:
"pc-input-left pc-input-right"
"pc-input-left-bottom pc-input-right-bottom"
;
align-items: start;
grid-gap: var(--row-gap) var(--columns-gap);
Expand Down Expand Up @@ -355,6 +356,12 @@
.pc-input-right {
grid-area: pc-input-right;
}
.pc-input-left-bottom {
grid-area: pc-input-left-bottom;
}
.pc-input-right-bottom {
grid-area: pc-input-right-bottom;
}
.pc-input-details {
font-size: 10px;
color: var(--dark-gray);
Expand Down Expand Up @@ -383,12 +390,7 @@

/* components/impact-comp.vue */

.pc-inputs {
grid-template-areas:
"pc-input-left pc-input-right"
;
}

/*# sourceMappingURL=impact-comp.vue.map */

/* components/base-comp.vue */

Expand Down Expand Up @@ -457,3 +459,46 @@
margin-left: 5px;
}


/* components/non-inferiority-comp.vue */

.pc-non-inf-select {
--base-padding: 5px;
font-size: inherit;
line-height: 28px;
border: none;
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
filter: drop-shadow(0 4px 2px rgba(0,0,0,0.1));
border-radius: 5px;
background: var(--white);
padding: var(--base-padding);
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.pc-non-inf-select:focus {
outline: 0;
box-shadow: inset 0 0 0 1px var(--dark-blue);
}
.pc-non-inf-select-wrapper {
position: relative;
}
.pc-non-inf-select-wrapper:after {
--border-size: 7px;
content: '';
position: absolute;
right: 5px;
bottom: 0;
pointer-events: none;
border: var(--border-size) solid transparent;
border-top: var(--border-size) solid var(--gray);
transform: translateY(calc(-50% - var(--border-size)/2));
}
.no-sub-title {
margin: 15px 0 10px 0;
}

160 changes: 130 additions & 30 deletions dist/powercalculator.js

Large diffs are not rendered by default.

5 changes: 0 additions & 5 deletions src/components/impact-comp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -176,10 +176,5 @@ export default {
</script>

<style>
.pc-inputs {
grid-template-areas:
"pc-input-left pc-input-right"
;
}
</style>
209 changes: 209 additions & 0 deletions src/components/non-inferiority-comp.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
<template id="noninferiority-comp">
<div class="pc-block pc-block--noninferiority" :class="{'pc-block-focused': focusedblock == 'noninferiority'}">

<pc-svg-chain v-bind:fieldFromBlock="fieldFromBlock"></pc-svg-chain>

<div class="pc-header">
Non Inferiority
</div>

<ul class="pc-inputs">
<li class="pc-input-item pc-input-left">
<label>
<span class="pc-input-title">Acceptable Cost
<small class="pc-input-sub-title">
{{isRelative ?
'relative difference of' :
'absolute impact per day of'
}}
</small>
</span>

<pc-block-field
fieldProp="threshold"
:suffix="isRelative ? '%' : ''"

v-bind:fieldValue="threshold"
v-bind:fieldFromBlock="fieldFromBlock"
v-bind:isBlockFocused="isBlockFocused"
v-bind:isReadOnly="isReadOnly"
v-bind:enableEdit="true"

v-on:update:focus="updateFocus"></pc-block-field>
</label>
</li>

<li class="pc-input-item pc-input-right">
<label>
<span class="pc-input-title">
Type {{ isRelative ?
'' :
'(per day)'
}}
<small class="pc-input-sub-title">
</small>
</span>

<div class="pc-non-inf-select-wrapper">
<select v-model="selected" class="pc-non-inf-select">
<option v-for="(option, index) in options" v-bind:key="index" v-bind:value="option.value">
{{option.text}}
</option>
</select>
</div>
</label>
</li>

<li class="pc-input-item pc-input-left-bottom">
<label>
<span class="pc-input-title no-sub-title">
Expected Change
<small class="pc-input-sub-title">

</small>
</span>

<div class="pc-non-inf-select-wrapper">
<select v-model="expectedChange" class="pc-non-inf-select">
<option value="nochange">
No Change
</option>
<option value="degradation">
Degradation
</option>
<option value="improvement">
Improvement
</option>
</select>
</div>
</label>
</li>
</ul>
</div>
</template>

<script>
import pcBlock from './pc-block.vue'
export default {
props: ['enableEdit', 'fieldFromBlock', 'isBlockFocused'],
extends: pcBlock,
template: '#base-comp',
data () {
return {
focusedBlock: '',
options: [
{
text: 'relative',
value: 'relative'
},
{
text: 'absolute',
value: 'absolutePerDay'
}
]
}
},
computed: {
isReadOnly () {
return this.calculateProp == 'base'
},
enabled () {
return this.$store.state.nonInferiority.enabled
},
threshold () {
return this.$store.state.nonInferiority.threshold
},
isRelative () {
return this.$store.state.nonInferiority.selected == 'relative'
},
selected: {
get () {
return this.$store.state.nonInferiority.selected
},
set (newValue) {
this.$store.dispatch('change:noninferiority', {
prop: 'selected',
value: newValue
})
}
},
expectedChange: {
get () {
return this.$store.state.nonInferiority.expectedChange
},
set (newValue) {
this.$store.dispatch('field:change', {
prop: 'expectedChange',
value: newValue
})
}
},
},
methods: {
enableInput () {
this.$emit('edit:update', {prop: 'base'})
},
updateFocus ({fieldProp, value}) {
if (this.focusedBlock == fieldProp && value === false) {
this.focusedBlock = ''
} else if (value === true) {
this.focusedBlock = fieldProp
}
this.$emit('update:focus', {
fieldProp: this.fieldFromBlock,
value: value
})
}
}
}
</script>

<style>
.pc-non-inf-select {
--base-padding: 5px;
font-size: inherit;
line-height: 28px;
border: none;
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
filter: drop-shadow(0 4px 2px rgba(0,0,0,0.1));
border-radius: 5px;
background: var(--white);
padding: var(--base-padding);
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.pc-non-inf-select:focus {
outline: 0;
box-shadow: inset 0 0 0 1px var(--dark-blue);
}
.pc-non-inf-select-wrapper {
position: relative;
}
.pc-non-inf-select-wrapper:after {
--border-size: 7px;
content: '';
position: absolute;
right: 5px;
bottom: 0;
pointer-events: none;
border: var(--border-size) solid transparent;
border-top: var(--border-size) solid var(--gray);
transform: translateY(calc(-50% - var(--border-size)/2));
}
.no-sub-title {
margin: 15px 0 10px 0;
}
</style>
48 changes: 2 additions & 46 deletions src/components/non-inferiority.vue
Original file line number Diff line number Diff line change
@@ -1,43 +1,17 @@
<template>
<div class="pc-non-inferiority">
<label class="pc-non-inf-label">
Use non inferiority test
<input type="checkbox" v-model="enabled">
Use non inferiority test
</label>
<div v-if="enabled" class="pc-non-inf-treshold">
<select v-model="selected" class="pc-non-inf-select">
<option v-for="(option, index) in options" v-bind:key="index" v-bind:value="option.value">
{{option.text}}
</option>
</select>

<pc-block-field
class="pc-non-inf-treshold-input"
fieldProp="threshold"
:suffix="isRelative ? '%' : ''"
v-bind:fieldValue="nonInfThreshold"
v-bind:enableEdit="true"></pc-block-field>
</div>
</div>
</template>

<script>
import pcBlockField from './pc-block-field.vue'
export default {
props: [ 'lockedField', 'readOnlyVisitorsPerDay' ],
props: [ 'lockedField' ],
data () {
return {
options: [
{
text: 'relative difference of',
value: 'relative'
},
{
text: 'absolute impact per day of',
value: 'absolutePerDay'
}
]
}
},
computed: {
Expand All @@ -52,27 +26,9 @@ export default {
})
}
},
selected: {
get () {
return this.$store.state.nonInferiority.selected
},
set (newValue) {
this.$store.dispatch('change:noninferiority', {
prop: 'selected',
value: newValue
})
}
},
isRelative () {
return this.$store.state.nonInferiority.selected == 'relative'
},
nonInfThreshold () {
return this.$store.state.nonInferiority.threshold
}
},
components: {
'pc-block-field': pcBlockField,
}
}
Expand Down
9 changes: 9 additions & 0 deletions src/components/pc-block.vue
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export default {
grid-template-rows: auto;
grid-template-areas:
"pc-input-left pc-input-right"
"pc-input-left-bottom pc-input-right-bottom"
;
align-items: start;
grid-gap: var(--row-gap) var(--columns-gap);
Expand Down Expand Up @@ -115,6 +116,14 @@ export default {
grid-area: pc-input-right;
}
.pc-input-left-bottom {
grid-area: pc-input-left-bottom;
}
.pc-input-right-bottom {
grid-area: pc-input-right-bottom;
}
.pc-input-details {
font-size: 10px;
color: var(--dark-gray);
Expand Down
Loading

0 comments on commit 9bb21e3

Please sign in to comment.