UI improvements (#25)

* fixed open button * added saving status * retrieval status + minor design changes * fixed select + hover
TwigSlot · Sep 23, 2022 · 223d967 · 223d967
1 parent 7070ef8
commit 223d967
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 42 deletions.
diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
@@ -1,10 +1,13 @@
 <template>
  <div class="control-panel">
- <button class="button is-light" @click="$emit('home')">Home</button>
- <DropdownComponent @custom_change="changed_item" :dropdownItem="options"></DropdownComponent>
- <button class="button is-light" @click="$emit('save-locations')">Save Locations</button>
+ <div id="control-box">
+ <button class="button is-light control-box-item" @click="$emit('home')">Center</button>
+ <DropdownComponent @custom_change="changed_item" :dropdownItem="options"></DropdownComponent>
+ <button class="button is-light control-box-item" @click="$emit('save-locations')">Save Locations </button>
+ <text class="subtitle is-4 control-box-item">{{ save_locations_status }}</text>
+ </div>
  <div id="information-box-thing">
- <text>Pressing delete will remove selected items. </text>
+ <text>Pressing <i>delete</i> will remove selected items. </text><br>
  <text>{{ instructions }}</text>
  </div>
  </div>
@@ -17,11 +20,13 @@ const options = [
  { name: 'add-node', label: 'Add Vertex (V)' },
  { name: 'add-edge', label: 'Add Edge (E)', },
  { name: 'move', label: 'Look Around (A)' }];
+const save_locations_status = ref("")
 export default defineComponent({
  name: "ControlPanel",
  data() {
  return {
  options,
+ save_locations_status,
  };
  },
  methods: {
@@ -59,13 +64,25 @@ export default defineComponent({
 .control-panel {
  #information-box-thing {
  padding-left: 0.5rem;
+ padding-top: 0.5rem;
+ }
+ #control-box{
+ padding-left: 0.5rem;
+ align-items: center;
+ display: flex;
+ padding-top: 0.5rem;
+ .control-box-item{
+ margin-inline: 0.2rem;
+ }
  }
- width: 30%;
+ width: 40%;
  padding-bottom: 1rem;
  border-bottom-right-radius: 25px;
  background-color: lightblue;
  font-family: 'Noto Sans', sans-serif;
-
+}
+i {
+ font-style: italic;
 }
 
 .flush-right {

diff --git a/src/components/DataPanel.vue b/src/components/DataPanel.vue
@@ -1,37 +1,23 @@
 <template>
  <div class="info-panel-outer">
- <h1 class="title is-4">ID : {{ data_panel.uid }}</h1>
+ <h1 class="title is-4">ID : {{ (data_panel.uid ? data_panel.uid : "Hover over a node") }}</h1>
  <div class="control">
- <input
- class="input is-hovered"
- type="text"
- placeholder="Name"
- :value="data_panel.name"
- @focus="pauseKeyDown"
- @blur="handleBlur('name', $event)"
- />
+ <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="data_panel.name"
+ @focus="pauseKeyDown" @blur="handleBlur('name', $event)" />
  </div>
- <div class="control"  :style="{marginBottom: '5px'}">
- <input
- class="input is-hovered"
-  type="text"
-  placeholder="URL"
-  :value="data_panel.link"
- @focus="pauseKeyDown"
-  @blur="handleBlur('link', $event)"
- />
+ <div class="control" :style="{marginBottom: '5px'}">
+ <input class="input is-hovered info-panel-item" type="text" placeholder="URL" :value="data_panel.link"
+ @focus="pauseKeyDown" @blur="handleBlur('link', $event)" />
+ </div>
+ <div class="control">
+ <a target="_blank" :href="data_panel.link">
+ <button class="button is-dark">Open</button>
+ </a>
+ <text class="subtitle is-4 data-panel-item">{{ retrieval_status }}</text>
  </div>
- <button class="button is-dark" :href="data_panel.link">Open</button>
  <div class="control" :style="{marginTop: '10px'}">
- <textarea
- class="textarea"
- rows="5"
- cols="50"
- placeholder="Description"
- :value="data_panel.description"
- @focus="pauseKeyDown"
- @blur="handleBlur('description', $event)"
- ></textarea>
+ <textarea class="textarea" rows="5" cols="50" placeholder="Description" :value="data_panel.description"
+ @focus="pauseKeyDown" @blur="handleBlur('description', $event)"></textarea>
  </div>
 
  <div class="info-panel-inner">
@@ -41,15 +27,32 @@
 </template>
 
 <style lang="scss" scoped>
+
+.control{
+ align-items: center;
+ display: flex;
+}
+.data-panel-item {
+ margin-inline: 0.2rem;
+ color: white;
+}
+
 .info-panel-outer {
  background-color: green;
+
  h1 {
  color: white;
  }
- font-family: 'Noto Sans', sans-serif;
+
+ font-family: 'Noto Sans',
+ sans-serif;
  padding: 1rem;
  border-bottom-left-radius: 25px;
 }
+
+.info-panel-item {
+ margin: 0.1rem;
+}
 </style>
 
 <script lang="ts">
@@ -58,14 +61,20 @@ import { defineComponent, ref } from "vue";
 import graphData from "../graphData";
 
 const project_id: any = ref("");
+const retrieval_status = ref("")
 export default defineComponent({
  name: "DataPanel",
- setup() {},
+ setup() { },
  props: ["data_panel"],
  mounted() {
  axios.defaults.headers.common["X-User"] = this.$store.state.kratos_user_id;
  project_id.value = this.$route.params.id;
  },
+ data() {
+ return {
+ retrieval_status
+ }
+ },
  methods: {
  handleBlur: async function (property: string, e: any) {
  this.$emit("resumeKeyDown");
@@ -86,6 +95,7 @@ export default defineComponent({
  link = "",
  description = "";
  try {
+ retrieval_status.value = "Retrieving website info..."
  const response = await axios.get(autofill_request_url);
  name = response.data.title;
  link = response.data.url;
@@ -108,17 +118,22 @@ export default defineComponent({
  request_url_post =
  request_url_post.substring(0, requestLengthLimit) +
  (request_url_post.length > requestLengthLimit ? "..." : "");
+ retrieval_status.value = "Saving..."
  axios.post(request_url_pre + request_url_post).then((response) => {
  console.log(response.data);
  graphData.nodes.value[`node${response.data.uid}`] = response.data;
  if (this.$props.data_panel.uid == response.data.uid) {
  this.$emit("updatedDataPanel");
  }
+ retrieval_status.value = "Saved!"
+ setTimeout(() => {
+ retrieval_status.value = ""
+ }, 1000)
  });
  },
- onInputPropertyName: function () {},
- onInputPropertyValue: function () {},
- onInputLabel: function () {},
+ onInputPropertyName: function () { },
+ onInputPropertyValue: function () { },
+ onInputLabel: function () { },
  pauseKeyDown: function () {
  this.$emit("pauseKeyDown");
  },

diff --git a/src/views/Graph.vue b/src/views/Graph.vue
@@ -101,6 +101,7 @@ export default defineComponent({
  data() {
  return {
  graph_ref,
+ control_panel_ref,
  project_id,
  graphData,
  dataPanel,
@@ -110,6 +111,10 @@ export default defineComponent({
  console.log(type, event)
  if (type == 'node:pointerover') {
  dataPanel.value = graphData.nodes.value[event.node]
+ } else if (type == 'node:pointerout'){
+ if(selected_nodes.value){
+ dataPanel.value = graphData.nodes.value[selected_nodes.value[0]]
+ }
  } else if (type == 'view:click') {
  this.handle_view_click(event)
  } else if (type == 'node:select') {
@@ -210,11 +215,26 @@ export default defineComponent({
  y: node_pos_raw[n].y,
  }
  }
- console.log(node_pos)
  const request_url = `${import.meta.env.VITE_API_URL}` +
  `/project/${project_id.value}` +
- `/positions/update`
- axios.post(request_url, node_pos)
+ `/positions/update`;
+ const cp_ref : any= (this.$refs.control_panel_ref as any);
+ cp_ref.save_locations_status = 'saving...'
+ axios.post(request_url, node_pos).then((response) => {
+ if(response.status == 200){
+ (cp_ref).save_locations_status = 'saved'
+ setTimeout(() => { 
+ (cp_ref).save_locations_status = ''
+ }, 1000)
+ }else{
+ throw 'err'
+ }
+ }).catch((error) => {
+ (cp_ref).save_locations_status = 'error!'
+ setTimeout(() => { 
+ (cp_ref).save_locations_status = ''
+ }, 1000)
+ })
  },
  get_items,
  add_node_with_mouse: function (raw: any, e: any) {