Edge slicing #372

gotdairyya · 2022-02-10T18:59:23Z

Does this PR close any open issues?

No.

Give a longer description of what this PR addresses and why it's needed

This is incorporating the functionality of MultiDynamic into MultiMatrix. It will be more generalized so that it can also account for categorical edge types.

Provide pictures/videos of the behavior before and after these changes (optional)

Edge slicing lets you pick numerical and date-formated edge variables and create slices.

Once the slices are created, you can navigate the network along the slice

Are there any additional TODOs before this PR is ready to go?

TODOs:

Check why variables don't load for networks that need subsetting
Add metadata to EdgeSlices.vue (toopltip + visualization)
Fix type issues
Clear timeline view for the hop query

netlify · 2022-02-10T18:59:30Z

✔️ Deploy Preview for multimatrix ready!

🔨 Explore the source changes: 63f104e

🔍 Inspect the deploy log: https://app.netlify.com/sites/multimatrix/deploys/6229007b9bf10b00083fce43

😎 Browse the preview: https://deploy-preview-372--multimatrix.netlify.app/

gotdairyya · 2022-02-10T19:00:22Z

@JackWilb can you take a look at the to-do I listed? I think the reason it doesn't work is because of when the edge variable list is created. It might need to be generated onMounted()

src/components/EdgeSlicing.vue

src/store/index.ts

JackWilb

Looks good so far, the UI needs some work, as you said. I think it's good to go, but maybe we should hold off until you have a PR for the UI changes.

Also, is there anything different in the edge slicing, and edge slices component that I haven't review in the multidyno?

JackWilb · 2022-02-10T22:35:34Z

src/components/EdgeSlicing.vue

+      return cleanedVariables;
+    }
+
+    const cleanedEdgeVariables = computed(() => {


Can these be moved to the store, we have similar logic for the node variable lists there. It would make sense to put similar code together, and maybe we can even reduce some of the logic needed

JackWilb · 2022-02-10T22:38:16Z

@JackWilb can you take a look at the to-do I listed? I think the reason it doesn't work is because of when the edge variable list is created. It might need to be generated onMounted()

It seems that the list generation relies on networkOnLoad, which wouldn't exist if the network doesn't get fetched because it's too big. You might need a refactor of that code if you want to see the list before you have a network downloaded. Also, it would then have to fetch the network split by time slices

gotdairyya · 2022-02-11T00:46:53Z

Looks good so far, the UI needs some work, as you said. I think it's good to go, but maybe we should hold off until you have a PR for the UI changes.

Also, is there anything different in the edge slicing, and edge slices component that I haven't review in the multidyno?

nope! I just refactored some of the code so that it works with the MultiMatrix setup, but nothing new yet

gotdairyya · 2022-02-14T16:20:00Z

Made some bigger changes:

slices show the number of edges within each section
now slices can be made along categorical variables
the input form for category v. number v. date input is now different
cleaned up the UI stuff that was bothering me
slices are cleared when a connectivity query is made

Left to do: I need some help with the type errors (sorry, I just can't figure out what's going on this time around)

JackWilb

I'm planning to give you a couple rounds of review. The first here will be higher level issues, and then I'll comment on specific code that might be updated in the next round.

Here are a few other things I noticed:

I can't see a tooltip
It was unintuitive to me that some of the slices were orange and some were not when I first made a network. The tooltip will help with this, but is there some other way we can show what the orange represents?
There isn't enough padding on the "Edge Slices" at the top of the vis
It looks like the SVG you added could be smaller from some playing around. I think 30px high would make it fit in a bit more. Unless I missed something that goes below each of the bars.
I found it unintuitive that there were separate variables for start and end. Looking at your screenshot, it seems a bit more clear, but why would we want it across 2 variables? Is that something we could hide unless the user asks for it, knowing that end variable is a separate column in their data?
There should be a button somewhere that will clean all the edge slicing away. It seems that the best way to do that currently is to remove the variables from the panel and re-run the slicing, but that's too much work for a user. If it's one button to clear, that will be much nicer.
We should open an issue to make sure that the sorting we implement is able to take information from slices instead of the whole network
Is there a nice way we can show what ranges of values fall into each time slice?

JackWilb · 2022-02-14T19:48:00Z

src/components/ConnectivityQuery.vue

@@ -228,6 +228,8 @@ export default defineComponent({
            store.dispatch.updateNetwork({ network: newNetwork });
            loading.value = false;
            store.commit.setDirectionalEdges(true);
+            // remove sliced network
+            store.commit.setSlicedNetwork([]);


Maybe this should just be a part of updateNetwork? It seems that every time it updates, we'd want to unset this

Great idea!

gotdairyya · 2022-02-17T22:56:36Z

Date + Time View:

Numeric + Time View:

Numeric View:

Categorical View:

JackWilb

Looking good so far! I have a smaller round of changes here that will just help with some papercuts

src/components/EdgeSlicing.vue

src/components/FilterOverlay.vue

src/components/EdgeSlices.vue

JackWilb · 2022-02-18T01:05:58Z

src/components/EdgeSlicing.vue

+      }
+    });
+
+    function sliceNetwork() {


This fails silently if the range specified by user is outside of the values of the data. For example, I have data from 0 to 31 and if I specify -100 to 31, it fails without alerting the user. We could have some simple validation and show errors to the user when it happens

resolved for both number inputs and date inputs

JackWilb · 2022-02-18T20:41:36Z

src/components/EdgeSlices.vue

+    const selectedArray: ComputedRef<boolean[]> = computed(() => Array.from(Array(timeRangesLength.value), (_, x: number) => (x === 0)));
+    function isSelected(key: number) {
+      selectedArray.value.fill(false);
+      selectedArray.value[key] = true;


Changing a value on a computed ref like this is dangerous. You should change the computedref to a ref and a watcher on timeRangesLength just to reset it when it changes, and then you can modify the array without it magically getting updated by the computed component

FWIW (might not apply here) you can use a "computed setter" (V2: https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter) or a "writable computed" (V3: https://vuejs.org/guide/essentials/computed.html#writable-computed) to give semantics to "changing a value on a computed ref".

Ok, this has also been fixed!

gotdairyya · 2022-03-09T00:23:00Z

As an overview, here is the expected views by data type.

CATEGORICAL

TIME BUT NOT DATE

TIME AND DATE

JackWilb

Noticed a couple of small things, but in general, it's looking good to go!

JackWilb · 2022-03-09T19:08:02Z

src/components/EdgeSlicing.vue

@@ -490,7 +491,7 @@ export default defineComponent({
                color="primary"
                block
                depressed
-                :disabled="!isValidRange && !isDate"
+                :disabled="!isValidRange && !isDate && isNumeric"


Is this right? Shouldn't it be just !isValidRange? Why would we disable it if it's numeric?

This is so that the isValidRange only does the check for isNumeric selections. Otherwise, you can't slice along categories

src/components/EdgeSlicing.vue

gotdairyya added 3 commits February 10, 2022 10:52

Add edge slicing component

a677b64

Add edge slicing component

b580ad6

Use instance for edge slice width

7d4a2a6

JackWilb reviewed Feb 10, 2022

View reviewed changes

src/components/EdgeSlicing.vue Outdated Show resolved Hide resolved

JackWilb reviewed Feb 10, 2022

View reviewed changes

src/store/index.ts Outdated Show resolved Hide resolved

JackWilb previously approved these changes Feb 10, 2022

View reviewed changes

JackWilb reviewed Feb 10, 2022

View reviewed changes

Change cog to chevron

fe0b541

gotdairyya dismissed JackWilb’s stale review via fe0b541 February 10, 2022 22:42

gotdairyya added 6 commits February 10, 2022 17:47

Refactor edge attribute list creation

b5aacaa

Represent total edges in edge slices

d26e069

Fix position of tooltip

abe8699

Visualize categorical attributes

485911d

Format numeric labels

467e52a

Remove edge slices on query

f6887cb

gotdairyya requested a review from JackWilb February 14, 2022 16:20

JackWilb requested changes Feb 14, 2022

View reviewed changes

JackWilb and others added 8 commits February 14, 2022 13:21

Fix most type issues

82f685a

Fix tooltip error

c16d769

Merge 'origin/main' into edge-slicing

58ef38c

Show labels under slices for numeric

50ecc03

Add padding

6323c14

Manage clearing form and sliced network

36e697a

Reset edge slice number

ea67b17

Set sliced network to empty on updateNetwork

01e16c4

gotdairyya requested a review from JackWilb February 17, 2022 22:13

gotdairyya added 2 commits February 17, 2022 15:40

Fix numeric edge slices

83448b8

Format edge slicing + fix label display

35ece64

Add isTime to reset

cd9cf04

JackWilb requested changes Feb 18, 2022

View reviewed changes

gotdairyya added 2 commits February 17, 2022 18:57

Disable buttpns when network not sliced

439163e

Remove unnecessary network update

b219da0

gotdairyya mentioned this pull request Feb 18, 2022

Move edge slice type checks to store #380

Open

gotdairyya added 2 commits February 17, 2022 19:33

Remove unused variables

95ad01a

Remove d3 for edge selection

c303cc5

JackWilb reviewed Feb 18, 2022

View reviewed changes

gotdairyya added 3 commits March 8, 2022 17:05

Check for valid input

4e67144

Remove computed ref manipulation

73cae4e

Fix categorical slicing

47e3f9c

gotdairyya requested a review from JackWilb March 9, 2022 00:23

JackWilb previously approved these changes Mar 9, 2022

View reviewed changes

Fix reset clearing removes min and max

0fa5f4b

gotdairyya dismissed JackWilb’s stale review via 0fa5f4b March 9, 2022 19:24

Update time selection

63f104e

JackWilb approved these changes Mar 9, 2022

View reviewed changes

gotdairyya merged commit 16cd064 into main Mar 9, 2022

gotdairyya deleted the edge-slicing branch March 9, 2022 19:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Edge slicing #372

Edge slicing #372

gotdairyya commented Feb 10, 2022 •

edited

Loading

netlify bot commented Feb 10, 2022 •

edited

Loading

gotdairyya commented Feb 10, 2022

JackWilb left a comment

JackWilb Feb 10, 2022

JackWilb commented Feb 10, 2022

gotdairyya commented Feb 11, 2022

gotdairyya commented Feb 14, 2022 •

edited

Loading

JackWilb left a comment

JackWilb Feb 14, 2022

gotdairyya Feb 17, 2022

gotdairyya commented Feb 17, 2022

JackWilb left a comment

JackWilb Feb 18, 2022

gotdairyya Mar 9, 2022

JackWilb Feb 18, 2022

waxlamp Feb 21, 2022

gotdairyya Mar 9, 2022

gotdairyya commented Mar 9, 2022

JackWilb left a comment

JackWilb Mar 9, 2022

gotdairyya Mar 9, 2022

Edge slicing #372

Edge slicing #372

Conversation

gotdairyya commented Feb 10, 2022 • edited Loading

Does this PR close any open issues?

Give a longer description of what this PR addresses and why it's needed

Provide pictures/videos of the behavior before and after these changes (optional)

Are there any additional TODOs before this PR is ready to go?

netlify bot commented Feb 10, 2022 • edited Loading

gotdairyya commented Feb 10, 2022

JackWilb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JackWilb commented Feb 10, 2022

gotdairyya commented Feb 11, 2022

gotdairyya commented Feb 14, 2022 • edited Loading

JackWilb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gotdairyya commented Feb 17, 2022

JackWilb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gotdairyya commented Mar 9, 2022

JackWilb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gotdairyya commented Feb 10, 2022 •

edited

Loading

netlify bot commented Feb 10, 2022 •

edited

Loading

gotdairyya commented Feb 14, 2022 •

edited

Loading