Better config system with automatic loading. Refactored file structure

.gitignore

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

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: {}
+  }
+}

experimentConfig.default/Experiments/AreSameImagesRandom.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)

experimentConfig.default/Experiments/AreSameImagesReference.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)

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)

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)

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)

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)

jsconfig.json

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

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 []
+// }

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), {})
 

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)
     },

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())

src/mixins/ExperimentBaseAreSameImages/index.vue

@@ -58,7 +58,8 @@ export default {
       const randomQuality = this.qualities[rand(0, this.qualities.length - 1)]
 
       const res = [this.qualities[this.qualities.length - 1], randomQuality]
-      return this.getTest(...(isReferenceLeft ? res : res.reverse()))
+      const table = isReferenceLeft ? res : res.reverse()
+      return this.getTest(table[0], table[1])
     },
 
     /** An action was triggered, load a new test and save progression

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())

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>

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())

src/mixins/ExperimentBaseExtracts/style.css

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

src/router/experiments.js

@@ -1,16 +1,16 @@
 export default [
   {
-    path: '/experiments/ExperimentWithReference/:sceneName',
-    name: 'ExperimentWithReference',
-    component: () => import('@/views/Experiments/WithReference'),
+    path: '/experiments/MatchExtractsWithReference/:sceneName',
+    name: 'MatchExtractsWithReference',
+    component: () => import('@/views/Experiments/MatchExtractsWithReference'),
     props: true,
     meta: {
       fullName: 'Match extracts qualities to reference image'
     }
   },
   {
-    path: '/experiments/ExperimentAreSameImagesRandom/:sceneName',
-    name: 'ExperimentAreSameImagesRandom',
+    path: '/experiments/AreSameImagesRandom/:sceneName',
+    name: 'AreSameImagesRandom',
     component: () => import('@/views/Experiments/AreSameImagesRandom'),
     props: true,
     meta: {
@@ -18,8 +18,8 @@ export default [
     }
   },
   {
-    path: '/experiments/ExperimentAreSameImagesReference/:sceneName',
-    name: 'ExperimentAreSameImagesReference',
+    path: '/experiments/AreSameImagesReference/:sceneName',
+    name: 'AreSameImagesReference',
     component: () => import('@/views/Experiments/AreSameImagesReference'),
     props: true,
     meta: {

src/style.css

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

src/views/Experiments/AreSameImagesRandom/index.vue

@@ -74,10 +74,9 @@
 <script>
 import ExperimentBaseAreTheSame from '@/mixins/ExperimentBaseAreSameImages'
 import Loader from '@/components/Loader.vue'
-import experimentConfig from './config'
 
 export default {
-  name: 'ExperimentAreSameImagesRandom',
+  name: 'AreSameImagesRandom',
   components: {
     Loader
   },
@@ -85,13 +84,13 @@ export default {
 
   data() {
     return {
-      experimentName: 'ExperimentAreSameImagesRandom'
+      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()

src/views/Experiments/AreSameImagesRandom/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/AreSameImagesRandom')
-
-// 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())

src/views/Experiments/AreSameImagesReference/index.vue

@@ -72,26 +72,25 @@
 </template>
 
 <script>
-import ExperimentBaseAreTheSame from '@/mixins/ExperimentBaseAreSameImages'
+import ExperimentBaseAreSameImages from '@/mixins/ExperimentBaseAreSameImages'
 import Loader from '@/components/Loader.vue'
-import experimentConfig from './config'
 
 export default {
-  name: 'ExperimentAreSameImagesRandom',
+  name: 'AreSameImagesReference',
   components: {
     Loader
   },
-  mixins: [ExperimentBaseAreTheSame],
+  mixins: [ExperimentBaseAreSameImages],
 
   data() {
     return {
-      experimentName: 'ExperimentAreSameImagesReference'
+      experimentName: 'AreSameImagesReference'
     }
   },
 
   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()

src/views/Experiments/AreSameImagesReference/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/AreSameImagesReference')
-
-// 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())

src/views/Experiments/WithReference/index.vue

@@ -93,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
@@ -105,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()

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())