Merge pull request #63 from bptlab/dev

Release - The Resurrection

package.json

@@ -9,6 +9,7 @@
     "start": "npm run serve"
   },
   "dependencies": {
+    "interactjs": "^1.4.0-rc.13",
     "jsonapi-serializer": "^3.6.4",
     "time-ago": "^0.2.1",
     "v-click-outside": "^2.1.3",

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <Header/>
-    <router-view/>
+    <Header />
+    <router-view />
   </div>
 </template>
 
@@ -14,7 +14,7 @@ import Header from '@/components/Header.vue'; // @ is an alias to /src
     Header,
   },
 })
-export default class Home extends Vue {}
+export default class Home extends Vue { }
 </script>
 
 <style lang="less">
@@ -39,14 +39,23 @@ body {
 main {
   margin-top: 85px;
   box-sizing: border-box;
-  padding: 0px @spacing;
-  max-width: 900px;
-  width: 100%;
   flex-grow: 1;
   text-align: left;
   position: relative;
 }
 
+main,
+.wrapper {
+  box-sizing: border-box;
+  padding: 0px @spacing;
+  max-width: 900px;
+  width: 100%;
+}
+
+.wrapper {
+  align-self: center;
+}
+
 h1,
 h2,
 h3,

src/apis/rembrandt/lib/OptimizationAlgorithm.ts

@@ -18,7 +18,7 @@ export interface OptimizationAlgorithm extends Resource {
 }
 
 const serializer = new Serializer('optimizationAlgorithms', {
-  id: '_id',
+  id: 'id',
   attributes: [
     'name',
     'inputs',

src/apis/rembrandt/lib/OptimizationExecution.ts

@@ -0,0 +1,48 @@
+import { Serializer } from 'jsonapi-serializer';
+import Resource from '@/apis/jsonapi/Resource';
+import CRUDResource from '@/apis/jsonapi/CRUDResource';
+import config from '@/config/config.json';
+import { Recipe, createRecipeNullObject } from './Recipe';
+
+export interface OptimizationExecutionObject extends Resource {
+  identifier: string;
+  startedAt?: Date;
+  finishedAt?: Date;
+  successful?: boolean;
+}
+
+export interface OptimizationExecutionState extends OptimizationExecutionObject {
+  ingredient: string;
+}
+
+export interface OptimizationExecution extends OptimizationExecutionObject {
+  recipe: Recipe;
+  processingStates: OptimizationExecutionState[];
+}
+
+const serializer = new Serializer('optimizationExecutions', {
+  id: 'id',
+  attributes: [
+    'identifier',
+    'recipe',
+    'startedAt',
+    'finishedAt',
+    'successful',
+    'processingStates',
+  ],
+  keyForAttribute: 'camelCase',
+});
+
+export const OptimizationExecutions = new CRUDResource<OptimizationExecution>(
+  `${config.backendHost}/optimization/executions`,
+  serializer,
+);
+
+export function createOptimizationExecutionNullObject(): OptimizationExecution {
+  return {
+    identifier: '',
+    recipe: createRecipeNullObject(),
+    processingStates: [],
+  };
+}
+

src/apis/rembrandt/lib/Recipe.ts

@@ -0,0 +1,81 @@
+import { Serializer } from 'jsonapi-serializer';
+import Resource from '@/apis/jsonapi/Resource';
+import CRUDResource from '@/apis/jsonapi/CRUDResource';
+import config from '@/config/config.json';
+import { ResourceType, OptimizationAlgorithm, Transformer } from '@/apis/rembrandt/rembrandt';
+
+export enum IngredientType {
+  INPUT = 'input',
+  OUTPUT = 'output',
+  TRANSFORM = 'transform',
+  ALGORITHM = 'algorithm',
+}
+
+export interface Ingredient {
+  ingredientDefinition?: string;
+  ingredientType: IngredientType;
+  inputs: Ingredient[];
+  ingredientObject: Resource;
+  position: {
+    x: number;
+    y: number;
+  };
+}
+
+export interface InputIngredient extends Ingredient {
+  ingredientObject: ResourceType;
+}
+
+export interface TransformerIngredient extends Ingredient {
+  ingredientObject: Transformer;
+}
+
+export interface AlgorithmIngredient extends Ingredient {
+  ingredientObject: OptimizationAlgorithm;
+}
+
+export interface OutputIngredient extends Ingredient {
+  ingredientObject: ResourceType;
+}
+
+
+export interface Recipe extends Resource {
+  name: string;
+  rootIngredient: Ingredient;
+  ingredients?: Ingredient[];
+}
+
+const serializer = new Serializer('recipes', {
+  id: 'id',
+  attributes: [
+    'name',
+    'rootIngredient',
+    'ingredients',
+  ],
+  keyForAttribute: 'camelCase',
+});
+
+export const Recipes = new CRUDResource<Recipe>(
+  `${config.backendHost}/optimization/recipes`,
+  serializer,
+);
+
+export function createRecipeNullObject(): Recipe {
+  return {
+    name: '',
+    rootIngredient: createIngredientNullObject(),
+    ingredients: [],
+  };
+}
+
+export function createIngredientNullObject(): Ingredient {
+  return {
+    inputs: [],
+    ingredientObject: {},
+    ingredientType: IngredientType.INPUT,
+    position: {
+      x: 0,
+      y: 0,
+    },
+  };
+}

src/apis/rembrandt/lib/Transformer.ts

@@ -0,0 +1,38 @@
+import { Serializer } from 'jsonapi-serializer';
+import Resource from '@/apis/jsonapi/Resource';
+import { ResourceType, ResourceTypeNullObject } from '@/apis/rembrandt/rembrandt';
+import CRUDResource from '@/apis/jsonapi/CRUDResource';
+import config from '@/config/config.json';
+
+
+export interface Transformer extends Resource {
+  name: string;
+  transformerType: string;
+  resourceType: ResourceType;
+  body: string;
+}
+
+const serializer = new Serializer('transformators', {
+  id: 'id',
+  attributes: [
+    'name',
+    'transformerType',
+    'resourceType',
+    'body',
+  ],
+  keyForAttribute: 'camelCase',
+});
+
+export const Transformers = new CRUDResource<Transformer>(
+  `${config.backendHost}/optimization/transformers`,
+  serializer,
+);
+
+export function createTransformerNullObject() {
+  return {
+    name: '',
+    transformerType: '',
+    resourceType: ResourceTypeNullObject,
+    body: '',
+  };
+}

src/apis/rembrandt/lib/transformerTypes.ts

@@ -0,0 +1 @@
+export const transformerTypes = ['map', 'filter', 'reduce'];

src/apis/rembrandt/rembrandt.ts

@@ -2,3 +2,7 @@ export * from '@/apis/rembrandt/lib/dataTypes';
 export * from '@/apis/rembrandt/lib/ResourceType';
 export * from '@/apis/rembrandt/lib/ResourceInstance';
 export * from '@/apis/rembrandt/lib/OptimizationAlgorithm';
+export * from '@/apis/rembrandt/lib/OptimizationExecution';
+export * from '@/apis/rembrandt/lib/Transformer';
+export * from '@/apis/rembrandt/lib/Recipe';
+export * from '@/apis/rembrandt/lib/transformerTypes';

src/components/AlgorithmDraggable.vue

@@ -0,0 +1,143 @@
+<template>
+  <div
+    ref="draggable"
+    :class="`draggable algorithm ${inputClasses} ${outputClasses}`"
+    :style="{transform: translate}"
+  >
+    <div
+      v-if="!isBeeingDragged"
+      class="input-connector-wrapper"
+      :style="{ top: (-50 * (inputConnectors.length - 1)) + '%' }"
+    >
+      <div
+        v-for="inputConnector in inputConnectors"
+        :key="inputConnector.resourceType.name"
+        ref="inputDropzones"
+        class="connector input-connector"
+        :class="{disabled: inputConnector.disabled}"
+        :accepts="inputConnector.resourceType.id"
+      >
+        <span>{{ inputConnector.resourceType.name }}</span>
+      </div>
+    </div>
+
+    <div :class="{element: true, dragging: isBeeingDragged}">
+      <span>{{ingredientObject.name}}</span>
+    </div>
+
+    <div class="output-connector-wrapper">
+      <div
+        v-if="!isBeeingDragged"
+        ref="outputDropzone"
+        class="connector"
+        :class="{disabled: outputConnector.disabled}"
+        :accepts="outputConnector.resourceType.id"
+      >
+        <span>{{ outputConnector.resourceType.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop } from 'vue-property-decorator';
+import Draggable from '@/components/Draggable.vue';
+import { OptimizationAlgorithm, AlgorithmIngredient, IngredientType } from '@/apis/rembrandt/rembrandt';
+
+@Component
+export default class AlgorithmDraggable extends Draggable implements AlgorithmIngredient {
+  // region public static methods
+  // endregion
+
+  // region private static methods
+  // endregion
+
+  // region public members
+  @Prop({ type: Object })
+  public ingredientObject!: OptimizationAlgorithm;
+
+  public ingredientType = IngredientType.ALGORITHM;
+
+  public get inputClasses(): string {
+    if (this.ingredientObject.inputs.length <= 0) { return ''; }
+    return this.ingredientObject.inputs.map((input) => `input-${input.id}`).join(' ');
+  }
+
+  public get outputClasses(): string {
+    if (!this.ingredientObject.outputs.id) { return ''; }
+    return `output-${this.ingredientObject.outputs.id}`;
+  }
+  // endregion
+
+  // region private members
+  // endregion
+
+  // region constructor
+  // endregion
+
+  // region public methods
+  public mounted() {
+    this.inputConnectors = this.ingredientObject.inputs.map((input) => {
+      return {
+        resourceType: input,
+        disabled: false,
+      };
+    });
+    this.outputConnector = {
+      resourceType: this.ingredientObject.outputs,
+      disabled: false,
+    };
+  }
+  // endregion
+
+  // region private methods
+  // endregion
+}
+</script>
+
+
+<style lang="less">
+@import "../colors.less";
+
+div.draggable.algorithm {
+  .element {
+    background-color: red;
+    border-radius: 0;
+  }
+
+  .element.dragging {
+    shape-outside: polygon(
+      calc(100% - @spacing * 2) 0%,
+      100% 50%,
+      calc(100% - @spacing * 2) 100%,
+      0% 100%,
+      calc(0% + @spacing * 2) 50%,
+      0% 0%
+    );
+    shape-margin: 20px;
+    clip-path: polygon(
+      calc(100% - @spacing * 2) 0%,
+      100% 50%,
+      calc(100% - @spacing * 2) 100%,
+      0% 100%,
+      calc(0% + @spacing * 2) 50%,
+      0% 0%
+    );
+  }
+
+  .input-connector-wrapper,
+  .output-connector-wrapper {
+    .connector {
+      &.disabled {
+        display: block;
+        & > * {
+          display: none;
+        }
+        &:after {
+          background-color: red;
+        }
+      }
+    }
+  }
+}
+</style>