update: clean state / query handling

uwdata · Dec 3, 2023 · 5fefb6c · 5fefb6c
1 parent 2f39cf8
commit 5fefb6c
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 57 deletions.
diff --git a/src/handlers/query.js b/src/handlers/query.js
@@ -1,4 +1,4 @@
-import { escape, query } from "arquero";
+import { escape, query } from 'arquero';
 
 export const COMMAND_TYPE = {
     SELECT: 0,
@@ -12,18 +12,37 @@ export const SELECT_TYPE = {
 };
 
 export function generateQuery(predicates) {
-    for (const [field, predicate] of Object.entries(predicates)) {
-        const { value, type } = predicate;
+    const queries = [];
+    for (const predicate of predicates) {
+        const field = Object.keys(predicate)[0];
+        const { value, cond, type } = predicate[field];
+        let q;
+
         if (type === SELECT_TYPE.POINT) {
-            return query().filter(escape(d => d[field] === value)).reify();
+            q = query().filter(escape(d => d[field] === value)).reify();
+        } else if (type === SELECT_TYPE.RANGE) {
+            q = query().filter(escape(d => {
+                return (cond === '>=' ? d[field] >= value : d[field] <= value);
+            })).reify();
         }
+        queries.push(q);
     }
+    return queries;
 }
 
 export function generatePredicates(field, object, type) {
     if (type === SELECT_TYPE.POINT) {
-        return { [field]: { value: object[field], type: type } };
+        return [{ [field]: { value: object[field], type } }];
     } else {
         console.log('TODO');
     }
 }
+
+export function generateBrushPredicates(field1, field2, xR, yR) {
+    return [
+        { [field1]: { value: xR[0], cond: '>=', type: SELECT_TYPE.RANGE } },
+        { [field1]: { value: xR[1], cond: '<=', type: SELECT_TYPE.RANGE } },
+        { [field2]: { value: yR[0], cond: '<=', type: SELECT_TYPE.RANGE } },
+        { [field2]: { value: yR[1], cond: '>=', type: SELECT_TYPE.RANGE } }
+    ];
+}
diff --git a/src/state/constants.js b/src/state/constants.js
@@ -10,7 +10,7 @@ export const Arrange = 'arrange';
 
 // Interaction defaults
 export const SelectOpacity = 1;
-export const UnselectOpacity = 0.2;
+export const UnselectOpacity = 0.1;
 export const OpacityField = '__opacity__';
 export const SelectField = '__selected__';
 

diff --git a/src/state/data-state.js b/src/state/data-state.js
@@ -1,15 +1,15 @@
-import { LINK_TYPES } from "../orchestration/link";
+import { LINK_TYPES } from '../orchestration/link.js';
 
 export class DataState {
     constructor(table) {
         this.table = table;
         this.active = {
-            table: table,
+            table,
             selected: table,
             filtered: null,
             type: LINK_TYPES.NONE
         };
-        this.children = []; 
+        this.children = [];
         this.parents = [];
     }
-}
+}
diff --git a/src/state/view-state.js b/src/state/view-state.js
@@ -1,4 +1,4 @@
-import { DataState } from "./data-state";
+// import { DataState } from './data-state';
 
 export class ViewState {
     constructor() {
@@ -26,44 +26,17 @@ export class ViewState {
             axis: null,
             title: null
         };
-        
+
         this.legends = [];
         this.title = null;
-        
+
         this.interactions = {
-            selection: {
-                control: null,
-                active: false
-            },
-            zoom: {
-                control: null,
-                axisControl: null
-            },
-            pan: {
-                control: null,
-                axisControl: null,
-                flag: false
-            },
-            brush: {
-                control: null,
-                axisControl: null,
-                flag: true,
-                active: false,
-                on_elem: false
-            },
-            filter: {
-                control: null,
-                active: false
-            },
-            sort: {
-                control: null
-            },
-            annotate: {
-                flag: false
-            },
-            arrange: {
-                flag: false
-            }
-        }
+            selection: true,
+            brush: true,
+            navigate: false,
+            filter: false,
+            sort: false,
+            annotate: false
+        };
     }
 }
diff --git a/src/toolbar/menu.js b/src/toolbar/menu.js
@@ -1,13 +1,15 @@
-import { select } from "d3-selection";
+import { select } from 'd3-selection';
 import navigateIcon from './icons/navigate.svg';
-import annotateIcon from './icons/annotate.svg';
+// import annotateIcon from './icons/annotate.svg';
 import filterIcon from './icons/filter.svg';
 import linkIcon from './icons/link.svg';
-import downloadIcon from './icons/download.svg';
+// import downloadIcon from './icons/download.svg';
 import brushIcon from './icons/brush.svg';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { SelectOpacity, UnselectOpacity } from '../state/constants.js';
 
-export function createMenu(svg) {
+export function createMenu(states) {
+    const { svg } = states[states.length - 1];
     const svgRect = svg._getBBox();
     const div = select(document.body)
         .append('div')
@@ -17,25 +19,48 @@ export function createMenu(svg) {
         .style('position', 'absolute')
         .style('vertical-align', 'middle')
         .style('top', (svgRect.top + 20) + 'px')
-        .style('left', (svgRect.right + 20) + 'px');
+        .style('left', (svgRect.left - 20) + 'px');
 
-    div.append('div')
-        .html(navigateIcon);
+    const nav = div.append('div')
+        .html(navigateIcon)
+        .style('opacity', UnselectOpacity);
 
-    div.append('div')
+    const brush = div.append('div')
         .html(brushIcon);
 
     div.append('div')
         .html(filterIcon);
-    
+
     div.append('div')
         .classed('btn-secondary', true)
         .html(linkIcon);
-        
+
     div.selectAll('div')
         .classed('btn', true)
         .classed('m-1', true)
         .selectAll('svg')
         .attr('width', 20)
         .attr('height', 20);
+
+    nav.on('click', function() {
+        states.forEach(s => {
+            s.interactions.navigate = !s.interactions.navigate;
+            if (s.interactions.navigate) {
+                s.interactions.brush = false;
+                brush.style('opacity', s.interactions.brush ? SelectOpacity : UnselectOpacity);
+            }
+            nav.style('opacity', s.interactions.navigate ? SelectOpacity : UnselectOpacity);
+        });
+    });
+
+    brush.on('click', function() {
+        states.forEach(s => {
+            s.interactions.brush = !s.interactions.brush;
+            if (s.interactions.brush) {
+                s.interactions.navigate = false;
+                nav.style('opacity', s.interactions.navigate ? SelectOpacity : UnselectOpacity);
+            }
+            brush.style('opacity', s.interactions.brush ? SelectOpacity : UnselectOpacity);
+        });
+    });
 }