Browse Source

Merge branch 'release/v0.2.2'

rigwild 1 year ago
parent
commit
1453cb273b

+ 1 - 1
.gitignore

@@ -26,4 +26,4 @@ yarn-error.log*
 /test/images
 /data/*
 /doc
-/experimentConfig/
+/experimentConfig.js

+ 61 - 0
experimentConfig.default.js

@@ -0,0 +1,61 @@
+export const mixins = {
+  ExperimentBase: {
+    defaultConfig: {
+      lockConfig: true
+    },
+    scenesConfig: {
+      // bathroom: {
+      //   lockConfig: true
+      // }
+    }
+  },
+
+  ExperimentBaseAreSameImages: {
+    defaultConfig: {
+      maxTestCount: 10
+    },
+    scenesConfig: {
+      // bathroom: {
+      //   maxTestCount: 5
+      // }
+    }
+  },
+
+  ExperimentBaseExtracts: {
+    defaultConfig: {
+      showHoverBorder: false,
+      extractConfig: {
+        x: 4,
+        y: 4
+      }
+    },
+    scenesConfig: {
+      // bathroom: {
+      //   showHoverBorder: false,
+      //   extractConfig: {
+      //     x: 4,
+      //     y: 10
+      //   }
+      // }
+    }
+  }
+}
+
+
+export const experiments = {
+  MatchExtractsWithReference: {
+    mixin: mixins.ExperimentBaseExtracts,
+    defaultConfig: {},
+    scenesConfig: {}
+  },
+  AreSameImagesRandom: {
+    mixin: mixins.ExperimentBaseAreSameImages,
+    defaultConfig: {},
+    scenesConfig: {}
+  },
+  AreSameImagesReference: {
+    mixin: mixins.ExperimentBaseAreSameImages,
+    defaultConfig: {},
+    scenesConfig: {}
+  }
+}

+ 0 - 9
experimentConfig.default/Experiments/AreSameImages.js

@@ -1,9 +0,0 @@
-import { buildConfig } from '@/functions'
-
-// This will apply to all the scenes
-export const defaultConfig = {}
-
-// This will overwrite the config for the given scene
-export const scenesConfig = {}
-
-export default buildConfig(defaultConfig, scenesConfig)

+ 0 - 9
experimentConfig.default/Experiments/WithReference.js

@@ -1,9 +0,0 @@
-import { buildConfig } from '@/functions'
-
-// This will apply to all the scenes
-export const defaultConfig = {}
-
-// This will overwrite the config for the given scene
-export const scenesConfig = {}
-
-export default buildConfig(defaultConfig, scenesConfig)

+ 0 - 15
experimentConfig.default/mixins/ExperimentBase.js

@@ -1,15 +0,0 @@
-import { buildConfig } from '@/functions'
-
-// This will apply to all the scenes
-export const defaultConfig = {
-  // lockConfig: true
-}
-
-// This will overwrite the config for the given scene
-export const scenesConfig = {
-  // bathroom: {
-  //   lockConfig: true
-  // }
-}
-
-export default buildConfig(defaultConfig, scenesConfig)

+ 0 - 15
experimentConfig.default/mixins/ExperimentBaseAreSameImages.js

@@ -1,15 +0,0 @@
-import { buildConfig } from '@/functions'
-
-// This will apply to all the scenes
-export const defaultConfig = {
-  // maxTestCount: 5
-}
-
-// This will overwrite the config for the given scene
-export const scenesConfig = {
-  // bathroom: {
-  //   maxTestCount: 5
-  // }
-}
-
-export default buildConfig(defaultConfig, scenesConfig)

+ 0 - 23
experimentConfig.default/mixins/ExperimentBaseExtracts.js

@@ -1,23 +0,0 @@
-import { buildConfig } from '@/functions'
-
-// This will apply to all the scenes
-export const defaultConfig = {
-  // showHoverBorder: false,
-  // extractConfig: {
-  //   x: 4,
-  //   y: 6
-  // }
-}
-
-// This will overwrite the config for the given scene
-export const scenesConfig = {
-  // bathroom: {
-  //   showHoverBorder: false,
-  //   extractConfig: {
-  //     x: 4,
-  //     y: 10
-  //   }
-  // }
-}
-
-export default buildConfig(defaultConfig, scenesConfig)

+ 10 - 0
jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "expe-web",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "server:start": "node -r esm server/index.js",

+ 40 - 0
src/config.utils.js

@@ -0,0 +1,40 @@
+import deepmerge from 'deepmerge'
+import { experiments } from '@/../experimentConfig'
+
+// Merge a default config with a specific scene config
+const buildConfig = ({ defaultConfig = {}, scenesConfig = {} }, sceneName) =>
+  deepmerge(defaultConfig, scenesConfig[sceneName] || {})
+
+/**
+* Build a configuration file by merging the default config with the asked scene.
+* The asked scene config will overwrite the default config.
+* It merges the mixin config with the experiment config.
+* Experiment config overwrites all.
+*
+* @param {Object} experimentName The selected experiment
+* @param {Object} sceneName The selected scene
+* @returns {Object} The config for the selected experiment with the selected scene
+*/
+export const getExperimentConfig = (experimentName, sceneName) => {
+  if (!experiments[experimentName])
+    throw new Error(`Could not find the experiment "${experimentName}" in the config file.`)
+
+  // Build parent mixin config
+  const mixinConfig = buildConfig(experiments[experimentName].mixin, sceneName)
+  // Build global config
+  const globalConfig = buildConfig(experiments[experimentName], sceneName)
+  // Merge configs
+  return deepmerge(mixinConfig, globalConfig)
+}
+
+// /**
+//  * Read config to get the list of available scenes for a given experiment
+//  *
+//  * @param {Object} experimentName The selected experiment
+//  * @param {String[]} scenesList List of scenes
+//  * @returns {String[]} The list of available scenes for this experiment
+//  */
+// export const getExperimentSceneList = (experimentName, scenesList) => {
+//   // TODO: scene blacklist, scene array, all
+//   return []
+// }

+ 0 - 10
src/functions.js

@@ -60,16 +60,6 @@ export const shuffleArray = array => {
   return array
 }
 
-/**
- * Build a configuration file by merging the default config with the asked scene.
- * The asked scene config will overwrite the default config.
- * @param {Object} defaultConfig The default configuration object
- * @param {Object} scenesConfig The scenes specific configuration
- * @returns {Function} A function that will return the scene configuration
- */
-export const buildConfig = (defaultConfig = {}, scenesConfig = {}) =>
-  sceneName => Object.assign(defaultConfig, scenesConfig[sceneName])
-
 // Serialize non-serializable objects (like window.screen)
 export const serialize = obj => Object.keys(Object.getPrototypeOf(obj)).reduce((acc, x) => ((acc[x] = obj[x]), acc), {})
 

+ 3 - 2
src/mixins/ExperimentBase/index.vue

@@ -7,6 +7,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import { API_ROUTES } from '@/functions'
+import { getExperimentConfig } from '@/config.utils'
 import { EXPERIMENT as experimentMsgId } from '@/../config.messagesId'
 
 export default {
@@ -71,8 +72,8 @@ export default {
     },
 
     // Load a config object into the local state
-    async loadConfig(configFn) {
-      const config = (await configFn())(this.sceneName)
+    loadConfig() {
+      const config = getExperimentConfig(this.experimentName, this.sceneName)
       // console.log('Loaded configuration', config)
       Object.assign(this.$data, config)
     },

+ 0 - 27
src/mixins/ExperimentBase/config.js

@@ -1,27 +0,0 @@
-import deepmerge from 'deepmerge'
-import { buildConfig } from '@/functions'
-
-// const getMixinConfig = () => {}
-const getGlobalConfig = () => import('@/../experimentConfig/mixins/ExperimentBase')
-
-// This will apply to all the scenes
-export const defaultConfig = async () => {
-  const globalConfig = (await getGlobalConfig()).defaultConfig
-  return deepmerge.all([
-    {
-      lockConfig: true
-    },
-    globalConfig
-  ])
-}
-
-// This will overwrite the config for the given scene
-export const scenesConfig = async () => {
-  const globalConfig = (await getGlobalConfig()).scenesConfig
-  return deepmerge.all([
-    {},
-    globalConfig
-  ])
-}
-
-export default async () => buildConfig(await defaultConfig(), await scenesConfig())

+ 32 - 9
src/mixins/ExperimentBaseAreSameImages/index.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import './style.css'
 import ExperimentBase from '@/mixins/ExperimentBase'
 
 import { mapGetters } from 'vuex'
@@ -28,10 +27,14 @@ export default {
     ...mapGetters(['getHostURI'])
   },
   methods: {
+    scrollToChoiceButtons() {
+      const ele = document.querySelector('#choice')
+      if (ele) ele.scrollIntoView({ behavior: 'smooth' })
+    },
+
+    // Get images links for a test
     async getTest(leftQuality, rightQuality) {
-      const left = this.qualities[leftQuality]
-      const right = this.qualities[rightQuality]
-      const res = await Promise.all([this.getImage(left), this.getImage(right)])
+      const res = await Promise.all([this.getImage(leftQuality), this.getImage(rightQuality)])
       const [leftImage, rightImage] = res.map(x => {
         x.link = `${this.getHostURI}${x.link}`
         return x
@@ -39,12 +42,32 @@ export default {
       return { leftImage, rightImage }
     },
 
+    // Get a test with random qualities
     getRandomTest() {
-      return this.getTest(rand(0, this.qualities.length - 1), rand(0, this.qualities.length - 1))
+      return this.getTest(
+        this.qualities[rand(0, this.qualities.length - 1)],
+        this.qualities[rand(0, this.qualities.length - 1)]
+      )
+    },
+
+    // Get a test with random qualities
+    getReferenceTest() {
+      // Randomly choose which is the reference image (0 = left, 1 = right)
+      const isReferenceLeft = rand(0, 1) === 0
+      // Randomly choose a quality for the other image
+      const randomQuality = this.qualities[rand(0, this.qualities.length - 1)]
+
+      const res = [this.qualities[this.qualities.length - 1], randomQuality]
+      const table = isReferenceLeft ? res : res.reverse()
+      return this.getTest(table[0], table[1])
     },
 
-    // An action was triggered, load extracts and save progression
-    async areTheSameActionRandom(areTheSame) {
+    /** An action was triggered, load a new test and save progression
+     * @param {Boolean} areTheSame Are the images the same
+     * @param {Function} getTestFn Function to be called to get the next tests
+     * @returns {void}
+     */
+    async areTheSameAction(areTheSame, getTestFn) {
       this.loadingMessage = 'Loading new test...'
       this.loadingErrorMessage = null
       try {
@@ -59,12 +82,12 @@ export default {
         }
         this.sendMessage({ msgId: experimentMsgId.DATA, msg: obj })
 
-        const { leftImage, rightImage } = await this.getRandomTest()
+        const { leftImage, rightImage } = await getTestFn()
         this.leftImage = leftImage
         this.rightImage = rightImage
 
         // Experiment end
-        if (this.testCount >= this.maxTestCount) this.finishExperiment()
+        if (this.testCount > this.maxTestCount) return this.finishExperiment()
       }
       catch (err) {
         console.error('Failed to load new test', err)

+ 0 - 39
src/mixins/ExperimentBaseAreSameImages/config.js

@@ -1,39 +0,0 @@
-import deepmerge from 'deepmerge'
-import { buildConfig } from '@/functions'
-
-const getMixinConfig = () => import('@/mixins/ExperimentBase/config')
-const getGlobalConfig = () => import('@/../experimentConfig/mixins/ExperimentBaseAreSameImages')
-
-// This will apply to all the scenes
-export const defaultConfig = async () => {
-  // Import parent mixin config
-  const mixinConfig = await getMixinConfig().then(({ defaultConfig: fn }) => fn())
-
-  // Import global config
-  const globalConfig = (await getGlobalConfig()).defaultConfig
-
-  return deepmerge.all([
-    mixinConfig,
-    {
-      maxTestCount: 5
-    },
-    globalConfig
-  ])
-}
-
-// This will overwrite the config for the given scene
-export const scenesConfig = async () => {
-  // Import parent mixin config
-  const mixinConfig = await getMixinConfig().then(({ scenesConfig: fn }) => fn())
-
-  // Import global config
-  const globalConfig = (await getGlobalConfig()).scenesConfig
-
-  return deepmerge.all([
-    mixinConfig,
-    {},
-    globalConfig
-  ])
-}
-
-export default async () => buildConfig(await defaultConfig(), await scenesConfig())

+ 0 - 0
src/mixins/ExperimentBaseAreSameImages/style.css


+ 9 - 1
src/mixins/ExperimentBaseExtracts/index.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import './style.css'
 import ExperimentBase from '@/mixins/ExperimentBase'
 
 import { mapGetters } from 'vuex'
@@ -148,4 +147,13 @@ export default {
   z-index: 1;
   outline: 2px #f4f4f4 solid;
 }
+
+.img-extract-loader {
+  height: 100%;
+  width: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 </style>

+ 0 - 43
src/mixins/ExperimentBaseExtracts/config.js

@@ -1,43 +0,0 @@
-import deepmerge from 'deepmerge'
-import { buildConfig } from '@/functions'
-
-const getMixinConfig = () => import('@/mixins/ExperimentBase/config')
-const getGlobalConfig = () => import('@/../experimentConfig/mixins/ExperimentBaseExtracts')
-
-// This will apply to all the scenes
-export const defaultConfig = async () => {
-  // Import parent mixin config
-  const mixinConfig = await getMixinConfig().then(({ defaultConfig: fn }) => fn())
-
-  // Import global config
-  const globalConfig = (await getGlobalConfig()).defaultConfig
-
-  return deepmerge.all([
-    mixinConfig,
-    {
-      showHoverBorder: false,
-      extractConfig: {
-        x: 4,
-        y: 4
-      }
-    },
-    globalConfig
-  ])
-}
-
-// This will overwrite the config for the given scene
-export const scenesConfig = async () => {
-  // Import parent mixin config
-  const mixinConfig = await getMixinConfig().then(({ scenesConfig: fn }) => fn())
-
-  // Import global config
-  const globalConfig = (await getGlobalConfig()).scenesConfig
-
-  return deepmerge.all([
-    mixinConfig,
-    {},
-    globalConfig
-  ])
-}
-
-export default async () => buildConfig(await defaultConfig(), await scenesConfig())

+ 0 - 7
src/mixins/ExperimentBaseExtracts/style.css

@@ -1,7 +0,0 @@
-.img-extract-loader {
-  height: 100%;
-  width: 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}

+ 23 - 10
src/router/experiments.js

@@ -1,16 +1,29 @@
 export default [
   {
-    path: '/experiments/ExperimentWithReference/:sceneName',
-    name: 'ExperimentWithReference',
-    fullName: 'With reference image',
-    component: () => import('@/views/Experiments/WithReference'),
-    props: true
+    path: '/experiments/MatchExtractsWithReference/:sceneName',
+    name: 'MatchExtractsWithReference',
+    component: () => import('@/views/Experiments/MatchExtractsWithReference'),
+    props: true,
+    meta: {
+      fullName: 'Match extracts qualities to reference image'
+    }
   },
   {
-    path: '/experiments/ExperimentAreSameImages/:sceneName',
-    name: 'ExperimentAreSameImages',
-    fullName: 'Are images the same',
-    component: () => import('@/views/Experiments/AreSameImages'),
-    props: true
+    path: '/experiments/AreSameImagesRandom/:sceneName',
+    name: 'AreSameImagesRandom',
+    component: () => import('@/views/Experiments/AreSameImagesRandom'),
+    props: true,
+    meta: {
+      fullName: 'Are images the same ? (Both are random qualities images)'
+    }
+  },
+  {
+    path: '/experiments/AreSameImagesReference/:sceneName',
+    name: 'AreSameImagesReference',
+    component: () => import('@/views/Experiments/AreSameImagesReference'),
+    props: true,
+    meta: {
+      fullName: 'Are images the same ? (One is reference image, the other is random quality)'
+    }
   }
 ]

+ 9 - 2
src/store/mutations.js

@@ -34,7 +34,14 @@ export default {
 
   resetApp(state, { gdprConsent, hostConfig, progression }) {
     const defaultStateObj = defaultState()
-    if (gdprConsent) state.gdprConsent = false
+    if (gdprConsent) {
+      state.gdprConsent = false
+      delete state.hostConfig
+      delete state.progression
+      delete state.scenesList
+      return
+    }
+
     if (hostConfig) {
       if (state.socket.isConnected)
         this._vm.$disconnect()
@@ -43,7 +50,7 @@ export default {
     if (progression) {
       // Reset progression and recreate the progression object
       state.progression = defaultStateObj.progression
-      createProgressionObj(state, state.scenesList)
+      if (state.scenesList) createProgressionObj(state, state.scenesList)
     }
   },
 

+ 0 - 1
src/style.css

@@ -1,7 +1,6 @@
 .height100 {
   height: 100%;
 }
-
 .cursor {
   cursor: pointer;
 }

+ 0 - 37
src/views/Experiments/AreSameImages/config.js

@@ -1,37 +0,0 @@
-import deepmerge from 'deepmerge'
-import { buildConfig } from '@/functions'
-
-const getMixinConfig = () => import('@/mixins/ExperimentBaseAreSameImages/config')
-const getGlobalConfig = () => import('@/../experimentConfig/Experiments/AreSameImages')
-
-// This will apply to all the scenes
-export const defaultConfig = async () => {
-  // Import parent mixin config
-  const mixinConfig = await getMixinConfig().then(({ defaultConfig: fn }) => fn())
-
-  // Import global config
-  const globalConfig = (await getGlobalConfig()).defaultConfig
-
-  return deepmerge.all([
-    mixinConfig,
-    {},
-    globalConfig
-  ])
-}
-
-// This will overwrite the config for the given scene
-export const scenesConfig = async () => {
-  // Import parent mixin config
-  const mixinConfig = await getMixinConfig().then(({ scenesConfig: fn }) => fn())
-
-  // Import global config
-  const globalConfig = (await getGlobalConfig()).scenesConfig
-
-  return deepmerge.all([
-    mixinConfig,
-    {},
-    globalConfig
-  ])
-}
-
-export default async () => buildConfig(await defaultConfig(), await scenesConfig())

+ 18 - 13
src/views/Experiments/AreSameImages/index.vue

@@ -10,7 +10,8 @@
             </v-btn>
           </v-layout>
 
-          <h1>Experiment Are the images the same - {{ sceneName }}</h1>
+          <h2>Experiment "{{ $route.meta.fullName }}"</h2>
+          <h3>{{ sceneName }}</h3>
         </v-flex>
         <!-- Loading screen -->
         <loader v-if="loadingMessage" :message="loadingMessage" />
@@ -35,7 +36,7 @@
             <v-card dark color="primary">
               <v-card-text>Image 2</v-card-text>
 
-              <v-img v-if="rightImage && rightImage.link" :src="rightImage.link">
+              <v-img v-if="rightImage && rightImage.link" :src="rightImage.link" @load="scrollToChoiceButtons">
                 <template v-slot:placeholder>
                   <v-layout fill-height align-center justify-center ma-0>
                     <v-progress-circular indeterminate color="grey lighten-5" />
@@ -47,14 +48,19 @@
 
 
           <!-- Experiment validation button -->
-
           <v-layout justify-center align-content-center>
-            <div>
-              <h2>Test {{ testCount }} / {{ maxTestCount }}</h2>
-              <v-layout justify-center align-content-center>
-                <v-btn @click="areTheSameActionRandom(false)" color="error" large>Images are NOT the same</v-btn>
-                <v-btn @click="areTheSameActionRandom(true)" color="success" large>Images are the same</v-btn>
-              </v-layout>
+            <div id="choice">
+              <v-container grid-list-md text-xs-center fluid>
+                <h2>Test {{ testCount }} / {{ maxTestCount }}</h2>
+                <v-layout row wrap>
+                  <v-flex sm6 xs12>
+                    <v-btn @click="areTheSameAction(false, getRandomTest)" color="error" large>Images are NOT the same</v-btn>
+                  </v-flex>
+                  <v-flex sm6 xs12>
+                    <v-btn @click="areTheSameAction(true, getRandomTest)" color="success" large>Images are the same</v-btn>
+                  </v-flex>
+                </v-layout>
+              </v-container>
             </div>
           </v-layout>
           <!--/ Experiment validation button -->
@@ -68,10 +74,9 @@
 <script>
 import ExperimentBaseAreTheSame from '@/mixins/ExperimentBaseAreSameImages'
 import Loader from '@/components/Loader.vue'
-import experimentConfig from './config'
 
 export default {
-  name: 'ExperimentAreTheSame',
+  name: 'AreSameImagesRandom',
   components: {
     Loader
   },
@@ -79,13 +84,13 @@ export default {
 
   data() {
     return {
-      experimentName: 'ExperimentAreSameImages'
+      experimentName: 'AreSameImagesRandom'
     }
   },
 
   async mounted() {
     // Load config for this scene to local state
-    await this.loadConfig(experimentConfig)
+    this.loadConfig()
 
     // Load progress from store into local state
     this.loadProgress()

+ 113 - 0
src/views/Experiments/AreSameImagesReference.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <v-container grid-list-md text-xs-center fluid>
+      <v-layout row wrap>
+        <v-flex xs12>
+          <v-layout justify-start>
+            <v-btn flat exact :to="`/experiments/${experimentName}`">
+              <v-icon left>arrow_back</v-icon>
+              Back to scene selection
+            </v-btn>
+          </v-layout>
+
+          <h2>Experiment "{{ $route.meta.fullName }}"</h2>
+          <h3>{{ sceneName }}</h3>
+        </v-flex>
+        <!-- Loading screen -->
+        <loader v-if="loadingMessage" :message="loadingMessage" />
+        <!--/ Loading screen -->
+
+        <!-- Experiment -->
+        <template v-else-if="!loadingErrorMessage">
+          <v-flex xs12 sm6>
+            <v-card dark color="primary">
+              <v-card-text class="px-0">Image 1</v-card-text>
+
+              <v-img v-if="leftImage && leftImage.link" :src="leftImage.link">
+                <template v-slot:placeholder>
+                  <v-layout fill-height align-center justify-center ma-0>
+                    <v-progress-circular indeterminate color="grey lighten-5" />
+                  </v-layout>
+                </template>
+              </v-img>
+            </v-card>
+          </v-flex>
+          <v-flex sm6 xs12>
+            <v-card dark color="primary">
+              <v-card-text>Image 2</v-card-text>
+
+              <v-img v-if="rightImage && rightImage.link" :src="rightImage.link" @load="scrollToChoiceButtons">
+                <template v-slot:placeholder>
+                  <v-layout fill-height align-center justify-center ma-0>
+                    <v-progress-circular indeterminate color="grey lighten-5" />
+                  </v-layout>
+                </template>
+              </v-img>
+            </v-card>
+          </v-flex>
+
+
+          <!-- Experiment validation button -->
+          <v-layout justify-center align-content-center>
+            <div id="choice">
+              <v-container grid-list-md text-xs-center fluid>
+                <h2>Test {{ testCount }} / {{ maxTestCount }}</h2>
+                <v-layout row wrap>
+                  <v-flex sm6 xs12>
+                    <v-btn @click="areTheSameAction(false, getReferenceTest)" color="error" large>Images are NOT the same</v-btn>
+                  </v-flex>
+                  <v-flex sm6 xs12>
+                    <v-btn @click="areTheSameAction(true, getReferenceTest)" color="success" large>Images are the same</v-btn>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+            </div>
+          </v-layout>
+          <!--/ Experiment validation button -->
+        </template>
+        <!--/ Experiment -->
+      </v-layout>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import ExperimentBaseAreSameImages from '@/mixins/ExperimentBaseAreSameImages'
+import Loader from '@/components/Loader.vue'
+
+export default {
+  name: 'AreSameImagesReference',
+  components: {
+    Loader
+  },
+  mixins: [ExperimentBaseAreSameImages],
+
+  data() {
+    return {
+      experimentName: 'AreSameImagesReference'
+    }
+  },
+
+  async mounted() {
+    // Load config for this scene to local state
+    this.loadConfig()
+
+    // Load progress from store into local state
+    this.loadProgress()
+
+    // Load scene data from the API
+    await this.getQualitiesList()
+
+    // Load a test if not already one loaded
+    if (!this.leftImage || !this.leftImage.link || !this.rightImage || !this.rightImage.link) {
+      const { leftImage, rightImage } = await this.getReferenceTest()
+      this.leftImage = leftImage
+      this.rightImage = rightImage
+    }
+
+    this.saveProgress()
+  },
+
+  methods: {}
+}
+</script>

+ 6 - 5
src/views/Experiments/WithReference/index.vue

@@ -10,7 +10,9 @@
             </v-btn>
           </v-layout>
 
-          <h1>Experiment with reference - {{ sceneName }}</h1>
+          <h2>Experiment "{{ $route.meta.fullName }}"</h2>
+          <h3>{{ sceneName }}</h3>
+
           <!-- Extract configuration -->
           <extract-configuration v-if="lockConfig === false" @setExtractConfig="setExtractConfig($event, $refs.configurator)" :loading-error-message="loadingErrorMessage" ref="configurator" />
           <!--/ Extract configuration -->
@@ -91,10 +93,9 @@
 import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts'
 import Loader from '@/components/Loader.vue'
 import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
-import experimentConfig from './config'
 
 export default {
-  name: 'ExperimentWithReference',
+  name: 'MatchExtractsWithReference',
   components: {
     Loader,
     ExtractConfiguration
@@ -103,14 +104,14 @@ export default {
 
   data() {
     return {
-      experimentName: 'ExperimentWithReference',
+      experimentName: 'MatchExtractsWithReference',
       referenceImage: null
     }
   },
 
   async mounted() {
     // Load config for this scene to local state
-    await this.loadConfig(experimentConfig)
+    this.loadConfig()
 
     // Load progress from store into local state
     this.loadProgress()

+ 0 - 37
src/views/Experiments/WithReference/config.js

@@ -1,37 +0,0 @@
-import deepmerge from 'deepmerge'
-import { buildConfig } from '@/functions'
-
-const getMixinConfig = () => import('@/mixins/ExperimentBaseExtracts/config')
-const getGlobalConfig = () => import('@/../experimentConfig/Experiments/WithReference')
-
-// This will apply to all the scenes
-export const defaultConfig = async () => {
-  // Import parent mixin config
-  const mixinConfig = await getMixinConfig().then(({ defaultConfig: fn }) => fn())
-
-  // Import global config
-  const globalConfig = (await getGlobalConfig()).defaultConfig
-
-  return deepmerge.all([
-    mixinConfig,
-    {},
-    globalConfig
-  ])
-}
-
-// This will overwrite the config for the given scene
-export const scenesConfig = async () => {
-  // Import parent mixin config
-  const mixinConfig = await getMixinConfig().then(({ scenesConfig: fn }) => fn())
-
-  // Import global config
-  const globalConfig = (await getGlobalConfig()).scenesConfig
-
-  return deepmerge.all([
-    mixinConfig,
-    {},
-    globalConfig
-  ])
-}
-
-export default async () => buildConfig(await defaultConfig(), await scenesConfig())

+ 1 - 1
src/views/ExperimentsList.vue

@@ -60,7 +60,7 @@ export default {
   mounted() {
     this.items = Experiments.map(expe => {
       const res = {
-        name: expe.fullName,
+        name: expe.meta.fullName,
         link: `/experiments/${expe.name}`
       }
       // Check cache has an entry for each scenes in this experiment

+ 8 - 2
src/views/SelectExperimentScene.vue

@@ -7,7 +7,7 @@
       </v-btn>
     </v-layout>
 
-    Select a scene for the experiment "{{ experimentName }}"
+    Select a scene for the experiment "{{ experimentFullName }}"
 
     <v-card>
       <v-container
@@ -63,6 +63,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
+import Experiments from '@/router/experiments'
 import { API_ROUTES, shuffleArray } from '@/functions'
 
 export default {
@@ -75,7 +76,8 @@ export default {
   },
   data() {
     return {
-      scenes: []
+      scenes: [],
+      experimentFullName: null
     }
   },
   computed: {
@@ -83,6 +85,10 @@ export default {
     ...mapGetters(['getHostURI'])
   },
   async mounted() {
+    // Find the selected experiment full name
+    this.experimentFullName = Experiments.find(x => x.name === this.experimentName).meta.fullName
+
+    // Order each scene by progression group, random sort in each group
     let todo = []
     let working = []
     let done = []