Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mrc-5455-v2 POC: Can add graphs to Run and drag variables to select or hide #205

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

mrc-5455-v2 POC: Can add graphs to Run and drag variables to select or hide #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4f1fc99
reshape selected variables into a dictionary in the store
EmmaLRussell Jun 11, 2024
2bd521e
add graph
EmmaLRussell Jun 11, 2024
f504fc5
make variables draggable
EmmaLRussell Jun 11, 2024
da2cddb
make graphs deletable
EmmaLRussell Jun 12, 2024
d1f17fd
Drag a single set of variables
EmmaLRussell Jun 12, 2024
4db2847
tidy component
EmmaLRussell Jun 13, 2024
472e0f5
desaturate hidden variables colors
EmmaLRussell Jun 14, 2024
7efa870
highlight drop zones while dragging
EmmaLRussell Jun 14, 2024
4cbf494
Show x button on duplicate variables, which can be used to delete
EmmaLRussell Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 117 additions & 58 deletions app/static/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions app/static/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"@types/d3-format": "^3.0.1",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"color": "^4.2.3",
"csv-parse": "^5.2.1",
"d3-format": "^3.1.0",
"i18next": "^22.4.11",
Expand All @@ -50,6 +51,7 @@
"devDependencies": {
"@playwright/test": "1.37.0",
"@types/bootstrap": "^5.2.6",
"@types/color": "^3.0.6",
"@types/jest": "^27.4.0",
"@types/markdown-it": "^12.2.3",
"@types/plotly.js-basic-dist-min": "^2.12.1",
Expand Down
19 changes: 17 additions & 2 deletions app/static/src/app/components/code/CodeTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,13 @@
<error-info :error="error"></error-info>
<div class="mt-3">
<vertical-collapse v-if="showSelectedVariables" title="Select variables" collapse-id="select-variables">
<selected-variables></selected-variables>
<div class="ms-2">
Drag variables to move to another graph, or to hide variable. Press the Ctrl key on drag to make a
copy of a variable.
</div>
<selected-variables v-for="graphKey in graphKeys" :graph-key="graphKey"></selected-variables>
<hidden-variables style="clear: both"></hidden-variables>
<button class="btn btn-primary mt-2 float-end" id="add-graph-btn" @click="addGraph">Add Graph</button>
Comment on lines +19 to +25
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we only show this if there are multiple graphs? Otherwise, it's a bit confusing because you can't in fact drag the variables, yet.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I see, you can drag them already, to the hidden variables section.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess I overlooked the 'hidden variables' bit at first while I was trying to suss out what the interaction was by trying to drag. So I wonder how this could have been more obvious to me on first seeing the feature. I should have created a graph first rather than trying to drag ineffectually.

Here are some ideas...

One half-baked idea is that there could be a 'graph N+1' (as it were) that you can always drag to, such that when you've only got Graph 1, you can still drag variables onto a new graph (so, in this case, Graph 2), and dragging variables into the next graph causes the graph to start existing? Would perhaps need to grey out this draph graft.

A better iteration on that idea: when you start dragging a variable, if there is only one graph in existence, then a field appears to receive them, 'Drag variables here to create a new graph with these variables'.

Or, edit the instructions to mention the possibility of adding a graph or change the implied order of trying out the functionality, e.g.:

Drag variables to 'Hidden variables' to remove them from your graph, or click 'Add Graph' to create a new graph to move them to. Press the Ctrl key on drag to make a copy of a variable.

Or, move the 'add graph' button to sit before the 'hidden variables' bit, because the 'add graph' button is well into my peripheral vision when I'm reading the instructions, I wouldn't spot it unless looking for it. If moving it to this position, I'd make it into a + icon for concision.

</vertical-collapse>
</div>
</div>
Expand All @@ -33,6 +39,7 @@ import { ModelAction } from "../../store/model/actions";
import userMessages from "../../userMessages";
import ErrorInfo from "../ErrorInfo.vue";
import SelectedVariables from "./SelectedVariables.vue";
import HiddenVariables from "./HiddenVariables.vue";
import VerticalCollapse from "../VerticalCollapse.vue";
import GenericHelp from "../help/GenericHelp.vue";

Expand All @@ -41,6 +48,7 @@ export default defineComponent({
components: {
GenericHelp,
SelectedVariables,
HiddenVariables,
ErrorInfo,
CodeEditor,
VueFeather,
Expand All @@ -60,6 +68,11 @@ export default defineComponent({
const appIsConfigured = computed(() => store.state.configured);
const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
const loadingMessage = userMessages.code.isValidating;
const graphKeys = computed(() => Object.keys(store.state.model.graphs));
const addGraph = () => {
const newGraphKey = `Graph ${Object.keys(store.state.model.graphs).length + 1}`;
store.dispatch(`model/${ModelAction.UpdateSelectedVariables}`, { key: newGraphKey, selectedVariables: [] });
};

return {
appIsConfigured,
Expand All @@ -72,7 +85,9 @@ export default defineComponent({
showSelectedVariables,
codeHelp,
codeValidating,
loadingMessage
loadingMessage,
graphKeys,
addGraph
};
}
});
Expand Down
Loading
Loading