v0.11.0 (#216)

* Report v2 (#201)

* assessment page saves in new v2 object

* mostly working I think

* child objects properly appear on server

* includes materials and transport colours in report parent object now

* removed comment

* moved around a load of functions to (hopefully) make things a little cleaner

* clean up

* model object id now saved to report object to be more certain that correct model being displayed on view assessment page

* child objects actually contain total carbon

* wrote main parameter update function, don't know if it works yet

* almost working

* attempted to make things work

* adding param function works (kinda)

* cleaned up addParams method a little bit, should more reliably work now

* model with new params being correctly uploaded

* carbon heatmap inside Act!

* started adding some controls for the viewer on the report viewer page

* continued work on the viewer controls on the report viewing page

* can change model views on the view report page

* report viewer can load both v1 and v2 reports

* updated v1 report to v2 works

* added key to report viewer page (it's rubbish, but gets the job done)

* removed most of the console.log's

* added message to the final loading spinner on the assessment page

* object parameter grouping now properly works

* updated version number

* cleaned things up

* updated speckle viewer

* almost working

* working (as far as I know)

* clean up

* clean up

* text update

* text update 2

* added links (#215)

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@speckle/objectloader": "^2.7.1",
-    "@speckle/viewer": "2.11.4",
+    "@speckle/viewer": "2.12.5",
     "@types/three": "^0.136.1",
     "@vue/vue2-jest": "^27.0.0",
     "axios": "^0.24.0",

src/components/assessment/Menu2.vue

@@ -47,14 +47,16 @@ export default class Menu2 extends Vue {
   @Prop() objectGroups!: string[];
   @Prop() defaultGroup!: string;
 
-  groupKey = 0;
-  defaultGroupSet = false;
-  objectGroup = this.defaultGroup ? this.defaultGroup : "Object Type";
-  @Watch("defaultGroup")
-  defaultGroupChange() {
-    this.objectGroup = this.defaultGroup;
+  _objectGroup = "";
+  get objectGroup() {
+    return this.defaultGroup;
+  }
+  set objectGroup(val: string) {
+    this._objectGroup = val;
   }
 
+  groupKey = 0;
+
   get loadedTypes() {
     return this.types ? this.types : [];
   }
@@ -77,7 +79,7 @@ export default class Menu2 extends Vue {
   @Emit("groupSelected")
   groupSelected() {
     this.groupKey++;
-    return this.objectGroup;
+    return this._objectGroup;
   }
 }
 </script>

src/components/core/Footer.vue

@@ -16,9 +16,21 @@
       </v-col>
       <v-col cols="6">
         <v-card-subtitle class="text-left pa-2">
-          created by <strong>Arup</strong>
+          <a
+            href="https://www.arup.com/"
+            target="_blank"
+            class="text-decoration-none"
+            style="color: inherit"
+            >created by <strong>Arup</strong></a
+          >
           <br />
-          powered by <strong>Speckle</strong>
+          <a
+            href="https://speckle.systems/"
+            target="_blank"
+            class="text-decoration-none"
+            style="color: inherit"
+            >powered by <strong>Speckle</strong></a
+          >
         </v-card-subtitle>
       </v-col>
     </v-row>

src/components/core/VersionUpdateDialog.vue

@@ -58,8 +58,11 @@ export default class VersionUpdateDialog extends Vue {
 
   features: { title: string; subtitle: string }[] = [
     {
-      title: "Object parameter grouping",
-      subtitle: `You can now group your objects for material selection by any parameter on your model.`,
+      title: "Report Object v2",
+      subtitle: `The way that we store your carbon reports has now changed. The update allows for faster loading, carbon heat maps, and gives you better access to your carbon report data in other apps that support Speckle connectors.`,
+    }, {
+      title: "Carbon Heat Map",
+      subtitle: `View a carbon heat map of your model after running a new report`
     }
   ];
 

src/components/shared/Renderer.vue

@@ -93,7 +93,7 @@ function instanceOfStringPropertyInfo(
 }
 
 @Component({
-  components: { RendererLightingOptions }
+  components: { RendererLightingOptions },
 })
 export default class extends Vue {
   @Prop() objecturls!: string[];
@@ -126,22 +126,25 @@ export default class extends Vue {
   }
 
   @Watch("colors")
-  onObjectColorChanged(value: Color[]) {
+  async onObjectColorChanged(value: Color[]) {
     if (value.length === 0 || this.gradientColorProperty) this.resetColors();
-    else this.setColors(value);
+    else {
+      await this.resetColors();
+      this.setColors(value);
+    }
   }
 
   @Watch("selectedIds")
   onMaterialChange() {
     this.setSelect();
   }
 
-  @Watch("gradientColorProperty")
+  @Watch("gradientColorProperty", { deep: true })
   async onGradientChange(value: GradientColor) {
     if (value) {
       const propertyData = this.viewer.getObjectProperties();
       const data = propertyData.find((v) => v.key === value.property);
-      if (data) this.viewer.setColorFilter(data);
+      if (data) await this.viewer.setColorFilter(data);
     }
   }
 
@@ -156,7 +159,6 @@ export default class extends Vue {
     this.renderStream(this.objecturls);
   }
   async beforeDestroy() {
-    await this.viewer.cancelLoad(this.objecturls[0], true);
     await this.viewer.unloadAll();
   }
   @Watch("objecturls")
@@ -169,6 +171,7 @@ export default class extends Vue {
   async renderStream(objecturls: string[]) {
     if (this.$store.state.speckleViewer.viewer) {
       this.viewer = this.$store.state.speckleViewer.viewer;
+      await this.viewer.unloadAll();
 
       this.domElement = this.$store.state.speckleViewer.container;
 
@@ -190,6 +193,8 @@ export default class extends Vue {
         showStats: false,
       });
 
+      await this.viewer.unloadAll();
+
       this.$store.commit("setSpeckleViewer", {
         viewer: this.viewer,
         container: this.domElement,
@@ -335,7 +340,7 @@ export default class extends Vue {
       objectIds: c[1],
       color: c[0],
     }));
-    const res = await this.viewer.setUserObjectColors(
+    await this.viewer.setUserObjectColors(
       groups as [{ objectIds: string[]; color: string }]
     );
   }

src/components/viewAssessment/MaterialBreakdownCard.vue

@@ -8,7 +8,7 @@
 </template>
 <script lang="ts">
 import { ChartData } from "@/models/chart";
-import { IMaterialBreakdown } from "@/views/utils/viewAssessmentUtils";
+import { IMaterialBreakdown } from "@/views/utils/process-report-object";
 import { Vue, Component, Prop } from "vue-property-decorator";
 
 import DoughtnutChart from "../charts/DoughnutChart.vue";

src/components/viewAssessment/ProjectInfoCard.vue

@@ -64,7 +64,7 @@
   </v-card>
 </template>
 <script lang="ts">
-import { IProjectInfo } from "@/views/utils/viewAssessmentUtils";
+import { IProjectInfo } from "@/views/utils/process-report-object";
 import { Vue, Component, Prop } from "vue-property-decorator";
 import BECChipGroup from "../shared/BECChipGroup.vue";
 

src/components/viewAssessment/RendererControlsCard.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-card class="card pa-4" flat outlined>
+    <v-card-title class="pt-0 px-0">
+      <span class="text-h7">Viewer controls</span>
+    </v-card-title>
+    <v-card-text>
+      Model showing:
+      <v-select
+        v-model="select"
+        :items="displayOptions"
+        item-text="name"
+        item-value="value"
+      />
+      <div v-if="showHeatmapKey">
+        <div class="d-flex align-center">
+          <div
+            style="width: 1rem; height: 1rem; background-color: #3f5efb"
+            class="mr-2"
+          ></div>
+          = low
+        </div>
+        <div class="d-flex align-center">
+          <div
+            style="width: 1rem; height: 1rem; background-color: #f9466d"
+            class="mr-2"
+          ></div>
+          = high
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+<script lang="ts">
+import { Vue, Component, Emit, Watch } from "vue-property-decorator";
+
+interface DisplayOption {
+  name: string;
+  value: string;
+}
+
+@Component
+export default class RendererControlsCard extends Vue {
+  displayOptions: DisplayOption[] = [
+    {
+      name: "Materials",
+      value: "materials",
+    },
+    {
+      name: "Total Carbon",
+      value: "parameters.Total Carbon.value",
+    },
+    {
+      name: "Product Stage Carbon A1-A3",
+      value: "parameters.Product Stage Carbon A1-A3.value",
+    },
+    {
+      name: "Transport Carbon A4",
+      value: "parameters.Transport Carbon A4.value",
+    },
+    {
+      name: "Construction Carbon A5",
+      value: "parameters.Construction Carbon A5.value",
+    },
+    {
+      name: "None",
+      value: "none",
+    },
+  ];
+
+  select = "materials";
+  get showHeatmapKey() {
+    if (
+      this.select === "parameters.Total Carbon.value" ||
+      this.select === "parameters.Product Stage Carbon A1-A3.value" ||
+      this.select === "parameters.Transport Carbon A4.value" ||
+      this.select === "parameters.Construction Carbon A5.value"
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  @Watch("select")
+  @Emit("selectChanged")
+  selectChanged() {
+    return this.select;
+  }
+}
+</script>