Time splitting

src/App.vue

@@ -9,6 +9,7 @@ import Alert from '@/components/Alert.vue';
 import Controls from '@/components/Controls.vue';
 import MultiLink from '@/components/MultiLink.vue';
 import ProvVis from '@/components/ProvVis.vue';
+import TimeLine from '@/components/TimeLine.vue';
 
 export default {
   name: 'App',
@@ -18,12 +19,14 @@ export default {
     Controls,
     MultiLink,
     ProvVis,
+    TimeLine,
   },
 
   setup() {
     const network = computed(() => store.state.network);
     const selectedNodes = computed(() => store.state.selectedNodes);
     const loadError = computed(() => store.state.loadError);
+    const slicedNetwork = computed(() => store.state.slicedNetwork.length > 1);
 
     const multilinkContainer: Ref<Element | null> = ref(null);
     const multilinkContainerDimensions = computed(() => {
@@ -56,6 +59,7 @@ export default {
       multilinkContainer,
       multilinkContainerDimensions,
       showProvenanceVis,
+      slicedNetwork,
     };
   },
 };
@@ -65,6 +69,9 @@ export default {
   <v-app>
     <v-main>
       <controls />
+      <time-line
+        v-if="network !== null && slicedNetwork === true"
+      />
 
       <multi-link
         v-if="network !== null && selectedNodes !== null"

src/components/Controls.vue

@@ -1,5 +1,7 @@
 <script lang="ts">
 import Legend from '@/components/Legend.vue';
+import TimeSlicing from '@/components/TimeSlicing.vue';
+import EdgeBuilder from '@/components/EdgeBuilder.vue';
 import AboutDialog from '@/components/AboutDialog.vue';
 import LoginMenu from '@/components/LoginMenu.vue';
 
@@ -12,8 +14,10 @@ import {
 export default defineComponent({
   components: {
     Legend,
+    TimeSlicing,
     AboutDialog,
     LoginMenu,
+    EdgeBuilder,
   },
 
   setup() {
@@ -482,7 +486,8 @@ export default defineComponent({
             />
           </v-list-item>
         </div>
-
+        <TimeSlicing />
+        <EdgeBuilder />
         <v-subheader class="grey darken-3 py-0 white--text">
           Legend
 

src/components/DragTarget.vue

@@ -49,12 +49,25 @@ export default defineComponent({
         const updatedEdgeVars = {
           width: droppedVarName,
           color: edgeVariables.value.color,
+          time: edgeVariables.value.time,
         };
         store.commit.setEdgeVariables(updatedEdgeVars);
       } else if (props.type === 'edge' && props.title === 'color') {
         const updatedEdgeVars = {
           width: edgeVariables.value.width,
           color: droppedVarName,
+          time: edgeVariables.value.time,
+
+        };
+        store.commit.setEdgeVariables(updatedEdgeVars);
+      } else if (props.type === 'edge' && props.title === 'time') {
+        // TODO: https://github.com/multinet-app/multidynamic/issues/6
+        // Make more elegant edge filter
+        const updatedEdgeVars = {
+          width: droppedVarName,
+          color: edgeVariables.value.color,
+          time: droppedVarName,
+
         };
         store.commit.setEdgeVariables(updatedEdgeVars);
       }

src/components/EdgeBuilder.vue

@@ -0,0 +1,142 @@
+<script lang="ts">
+import store from '@/store';
+import { internalFieldNames, Edge } from '@/types';
+import DragTarget from '@/components/DragTarget.vue';
+import { computed, defineComponent, ref } from '@vue/composition-api';
+import EdgeBuilderChart from '@/components/EdgeBuilderChart.vue';
+import LegendChart from '@/components/LegendChart.vue';
+
+export default defineComponent({
+  components: {
+    DragTarget,
+    EdgeBuilderChart,
+    LegendChart,
+  },
+
+  setup() {
+    const showOptions = ref(false);
+    const network = computed(() => store.state.network);
+    const nestedVariables = computed(() => store.state.nestedVariables);
+    const edgeVariables = computed(() => store.state.edgeVariables);
+
+    const columnTypes = computed(() => store.state.columnTypes);
+
+    function cleanVariableList(list: Set<string>): Set<string> {
+      const cleanedVariables = new Set<string>();
+
+      list.forEach((variable) => {
+        if (columnTypes.value !== null && columnTypes.value[variable] !== 'label') {
+          cleanedVariables.add(variable);
+        }
+      });
+
+      return cleanedVariables;
+    }
+
+    const cleanedEdgeVariables = computed(() => {
+      if (network.value !== null) {
+        // Loop through all edges, flatten the 2d array, and turn it into a set
+        const allVars: Set<string> = new Set();
+        network.value.edges.map((edge: Edge) => Object.keys(edge).forEach((key) => allVars.add(key)));
+
+        internalFieldNames.forEach((field) => allVars.delete(field));
+        allVars.delete('source');
+        allVars.delete('target');
+        allVars.delete('index');
+
+        return cleanVariableList(allVars);
+      }
+      return new Set();
+    });
+
+    const displayCharts = computed(() => store.state.displayCharts);
+
+    return {
+      showOptions,
+      edgeVariables,
+      cleanedEdgeVariables,
+      displayCharts,
+      nestedVariables,
+    };
+  },
+});
+</script>
+
+<template>
+  <div id="edgebuilder">
+    <v-list class="pa-0">
+      <v-subheader class="grey darken-3 py-0 pr-0 white--text">
+        Build Edges
+
+        <v-spacer />
+
+        <v-btn
+          :min-width="40"
+          :height="48"
+          depressed
+          tile
+          :class="showOptions? `grey darken-2 pa-0` : `grey darken-3 pa-0`"
+          @click="showOptions = !showOptions"
+        >
+          <v-icon color="white">
+            mdi-cog
+          </v-icon>
+        </v-btn>
+      </v-subheader>
+
+      <v-card
+        v-if="showOptions"
+        flat
+        color="white"
+        class="pb-4 pt-2"
+      >
+        <div class="sticky">
+          <drag-target
+            v-if="edgeVariables.time === ''"
+            :title="'time'"
+            :type="'edge'"
+          />
+
+          <edge-builder-chart
+            v-else
+            :var-name="edgeVariables.time"
+            :type="'edge'"
+            :selected="true"
+            :mapped-to="'time'"
+          />
+
+          <v-divider />
+        </div>
+
+        <div v-if="cleanedEdgeVariables.size === 0">
+          No edge attributes to visualize
+        </div>
+
+        <div
+          v-for="edgeAttr of cleanedEdgeVariables"
+          v-else
+          :key="`edge${edgeAttr}`"
+        >
+          <legend-chart
+            :var-name="edgeAttr"
+            :type="'edge'"
+            :selected="false"
+          />
+        </div>
+      </v-card>
+    </v-list>
+  </div>
+</template>
+
+<style scoped>
+.sticky {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: white;
+}
+
+.draggable {
+  cursor: pointer;
+}
+</style>