feat: fragilities added to buildings page #54

EPFL-ENAC · Jun 26, 2024 · d5fe9ee · d5fe9ee
1 parent 2e05628
commit d5fe9ee
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 14 deletions.
diff --git a/frontend/src/components/ExperimentFilters.vue b/frontend/src/components/ExperimentFilters.vue
@@ -35,7 +35,7 @@
       </template>
     </q-select>
     <q-tree
-      class="col-12 col-sm-6 q-ml-md"
+      class="col-12 col-sm-6 q-ml-sm"
       :nodes="filterNodes"
       node-key="key"
       no-connectors
@@ -44,14 +44,34 @@
       v-model:ticked="filters.selections"
     >
     </q-tree>
-    <div>
+    <div class="q-mb-md">
       <run-results-fragilities-chart
         :data="filters.runResultsFragilities"
-        :show-legend="false"
+        :compact="true"
         :show-empirical="false"
-        class="q-ml-xs q-mb-md"
+        class="q-mb-sm"
       />
+      <div class="row justify-center">
+        <q-btn
+          dense
+          flat
+          no-caps
+          icon="zoom_in"
+          class="text-caption text-primary"
+          :label="$t('view_details')"
+          @click="onShowFragilities"
+        />
+      </div>
     </div>
+
+    <simple-dialog v-model="showFragilities" :width="800">
+      <div>
+        <run-results-fragilities-chart :data="filters.runResultsFragilities" />
+        <div class="q-ma-md q-pl-lg q-pr-md text-grey-9">
+          <q-markdown :src="FragilitiesMd" no-line-numbers />
+        </div>
+      </div>
+    </simple-dialog>
   </div>
 </template>
 
@@ -61,7 +81,6 @@ export default defineComponent({
 });
 </script>
 <script setup lang="ts">
-import { computed } from 'vue';
 import { api } from 'src/boot/axios';
 import { Reference } from './models';
 import { testScaleLabel } from 'src/utils/numbers';
@@ -75,11 +94,15 @@ import {
   TEST_SCALE,
   WALL_LEAVES_NB,
 } from 'src/utils/criteria';
-import RunResultsFragilitiesChart from './charts/RunResultsFragilitiesChart.vue';
+import RunResultsFragilitiesChart from 'src/components/charts/RunResultsFragilitiesChart.vue';
+import SimpleDialog from 'src/components/SimpleDialog.vue';
+import FragilitiesMd from 'src/assets/fragilities.md';
 
 const { t } = useI18n({ useScope: 'global' });
 const filters = useFiltersStore();
 const references = ref([]);
+const showFragilities = ref(false);
+
 function filterFn(val, update, abort) {
   const query = {
     filter: val ? JSON.stringify({ full_reference: val }) : undefined,
@@ -180,4 +203,8 @@ watch(
     filters.loadRunResultsFragilities();
   }
 );
+
+function onShowFragilities() {
+  showFragilities.value = true;
+}
 </script>
diff --git a/frontend/src/components/SimpleDialog.vue b/frontend/src/components/SimpleDialog.vue
@@ -1,6 +1,12 @@
 <template>
   <q-dialog :maximized="$q.screen.lt.sm" v-model="showDialog" @hide="onHide">
-    <q-card :style="$q.screen.lt.sm ? '' : 'width: 600px; max-width: 80vw'">
+    <q-card
+      :style="
+        $q.screen.lt.sm
+          ? ''
+          : `width: ${props.width ? props.width : 600}px; max-width: 80vw`
+      "
+    >
       <q-card-actions v-if="$q.screen.lt.sm" align="right">
         <q-btn flat icon="close" color="primary" v-close-popup />
       </q-card-actions>
@@ -30,6 +36,7 @@ interface Props {
   modelValue: boolean;
   title?: string;
   content?: string;
+  width?: number;
 }
 const props = defineProps<Props>();
 const emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);

diff --git a/frontend/src/components/charts/RunResultsFragilitiesChart.vue b/frontend/src/components/charts/RunResultsFragilitiesChart.vue
@@ -17,34 +17,41 @@ const { t } = useI18n({ useScope: 'global' });
 
 interface Props {
   data: RunResultFragility[];
-  showLegend: boolean;
+  compact: boolean;
   showEmpirical: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  showLegend: true,
+  compact: false,
   showEmpirical: true,
 });
 
 const layout = {
   xaxis: {
     title: {
       text: t('pga_axis'),
+      font: {
+        size: props.compact ? 10 : undefined,
+      },
     },
     range: [0, 1],
   },
   yaxis: {
     title: {
       text: t('dg_pga_axis'),
+      font: {
+        size: props.compact ? 10 : undefined,
+      },
     },
   },
   margin: {
     l: 50, // Left margin
     r: 10, // Right margin
-    b: 50, // Bottom margin
+    b: props.compact ? 30 : 50, // Bottom margin
     t: 50, // Top margin
   },
-  showLegend: props.showLegend,
+  height: props.compact ? 300 : undefined,
+  showLegend: !props.compact,
 };
 
 const config = {
@@ -89,7 +96,7 @@ const chartData = computed(() => {
               color: getDgColor(key),
             },
             name: `DG${key} (empirical)`,
-            showlegend: props.showLegend,
+            showlegend: !props.compact,
             legendgroup: 'empirical',
           };
         })
@@ -110,7 +117,7 @@ const chartData = computed(() => {
           width: 2,
         },
         name: `DG${key} (fitted)`,
-        showlegend: props.showLegend,
+        showlegend: !props.compact,
         legendgroup: 'fitted',
       };
     });

diff --git a/frontend/src/i18n/en/index.ts b/frontend/src/i18n/en/index.ts
@@ -194,6 +194,7 @@ export default {
   top_displacement_mm: 'Top displacement (mm)',
   total_building_height: 'Total Building Height',
   units: 'Units',
+  view_details: 'View details',
   view_model: 'View numerical model',
   view_test: 'View test',
   vtk_help:

diff --git a/frontend/src/layouts/BuildingsLayout.vue b/frontend/src/layouts/BuildingsLayout.vue
@@ -2,7 +2,10 @@
   <q-layout view="hHh Lpr lFf">
     <q-header bordered class="bg-white text-grey-10">
       <app-toolbar />
-      <app-header url="Website_Background_Title_Option2.webp" />
+      <app-header
+        v-if="withBanner"
+        url="Website_Background_Title_Option2.webp"
+      />
     </q-header>
 
     <q-drawer
@@ -53,6 +56,10 @@ const miniState = ref(false);
 
 const isBuildings = computed(() => route.path === '/buildings');
 
+const withBanner = computed(
+  () => !Object.keys(route.query).includes('no-banner')
+);
+
 watch(
   () => isBuildings.value,
   () => {