Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Gitlab will go into maintenance Friday 3rd February from 9:00 to 10:00
Open sidebar
Fractalis
fractal.js
Commits
8dfa6bfb
Commit
8dfa6bfb
authored
May 19, 2017
by
Sascha Herzinger
Browse files
Implemented cross chart filters
parent
d060555c
Changes
7
Hide whitespace changes
Inline
Side-by-side
src/components/charts/CorrelationAnalysis.vue
View file @
8dfa6bfb
...
...
@@ -15,7 +15,7 @@
<div
class=
"fjs-controls-section"
>
<button
class=
"fjs-run-analysis-btn"
type=
"button"
@
click=
"runAnalysisWrapper(
{init: true})"
@
click=
"runAnalysisWrapper(
{init: true
, args
})"
:disabled="disabled">
▶
</button><br/>
<br/>
<span>
{{
error
}}
</span>
...
...
@@ -105,6 +105,8 @@
<
script
>
import
DataBox
from
'
../DataBox.vue
'
import
store
from
'
../../store/store
'
import
types
from
'
../../store/mutation-types
'
import
requestHandling
from
'
../mixins/request-handling
'
import
*
as
d3
from
'
d3
'
import
svgtooltip
from
'
../mixins/v-svgtooltip
'
...
...
@@ -119,14 +121,6 @@
height
:
0
,
xyData
:
[],
annotationData
:
[],
get
args
()
{
return
{
x
:
`$
${
this
.
xyData
[
0
]}
$`
,
y
:
`$
${
this
.
xyData
[
1
]}
$`
,
ids
:
this
.
selectedPoints
.
map
(
d
=>
d
.
id
)
}
},
shownAnalysisResults
:
{
init
:
true
,
// will disappear after being initially set
coef
:
0
,
...
...
@@ -172,9 +166,19 @@
}
},
computed
:
{
idFilter
()
{
return
store
.
getters
.
filter
(
'
ids
'
)
},
disabled
()
{
return
this
.
xyData
.
length
!==
2
},
args
()
{
return
{
x
:
`$
${
this
.
xyData
[
0
]}
$`
,
y
:
`$
${
this
.
xyData
[
1
]}
$`
,
ids
:
this
.
selectedPoints
.
map
(
d
=>
d
.
id
)
}
},
margin
()
{
const
left
=
this
.
width
/
3
const
top
=
50
...
...
@@ -295,20 +299,21 @@
this
.
error
=
''
if
(
!
d3
.
event
.
selection
)
{
this
.
selectedPoints
=
[]
this
.
runAnalysisWrapper
({
init
:
false
})
return
}
const
[[
x0
,
y0
],
[
x1
,
y1
]]
=
d3
.
event
.
selection
this
.
selectedPoints
=
this
.
shownPoints
.
all
.
filter
(
d
=>
{
const
x
=
this
.
scales
.
x
(
d
.
x
)
const
y
=
this
.
scales
.
y
(
d
.
y
)
return
x0
<=
x
&&
x
<=
x1
&&
y0
<=
y
&&
y
<=
y1
})
if
(
this
.
selectedPoints
.
length
>
0
&&
this
.
selectedPoints
.
length
<
3
)
{
this
.
error
=
'
Selection must be zero (everything is selected) or greater than two.
'
this
.
runAnalysisWrapper
({
init
:
false
,
args
:
this
.
args
})
}
else
{
this
.
runAnalysisWrapper
({
init
:
false
})
const
[[
x0
,
y0
],
[
x1
,
y1
]]
=
d3
.
event
.
selection
this
.
selectedPoints
=
this
.
shownPoints
.
all
.
filter
(
d
=>
{
const
x
=
this
.
scales
.
x
(
d
.
x
)
const
y
=
this
.
scales
.
y
(
d
.
y
)
return
x0
<=
x
&&
x
<=
x1
&&
y0
<=
y
&&
y
<=
y1
})
if
(
this
.
selectedPoints
.
length
>
0
&&
this
.
selectedPoints
.
length
<
3
)
{
this
.
error
=
'
Selection must be zero (everything is selected) or greater than two.
'
}
else
{
this
.
runAnalysisWrapper
({
init
:
false
,
args
:
this
.
args
})
}
}
store
.
commit
(
types
.
SET_FILTER
,
{
filter
:
'
ids
'
,
value
:
this
.
selectedPoints
.
map
(
d
=>
d
.
id
)})
})
},
histograms
()
{
...
...
@@ -407,12 +412,23 @@
TweenLite
.
to
(
yAttr
,
0.5
,
yAttrTarget
)
}
}
},
'
idFilter
'
:
{
handler
:
function
(
newIDFilter
)
{
const
isFiltered
=
(
newIDFilter
.
length
===
this
.
selectedPoints
.
length
)
&&
this
.
selectedPoints
.
map
(
d
=>
d
.
id
).
every
(
id
=>
newIDFilter
.
indexOf
(
id
)
!==
-
1
)
if
(
!
isFiltered
)
{
const
args
=
this
.
args
args
.
ids
=
newIDFilter
this
.
runAnalysisWrapper
({
init
:
false
,
args
})
}
}
}
},
mounted
()
{
window
.
addEventListener
(
'
resize
'
,
this
.
onResize
)
this
.
onResize
()
// initial call
// saves us
on
e manual initialization
// saves us
th
e manual initialization
of tmpAnalysisResults
this
.
tmpAnalysisResults
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
shownAnalysisResults
))
},
beforeDestroy
()
{
...
...
@@ -426,13 +442,9 @@
svgtooltip
],
methods
:
{
runAnalysisWrapper
({
init
})
{
let
args
=
this
.
args
if
(
init
)
{
args
.
ids
=
[]
}
runAnalysisWrapper
({
init
,
args
})
{
// function made available via requestHandling mixin
this
.
runAnalysis
({
task_name
:
'
compute-correlation
'
,
args
:
args
})
this
.
runAnalysis
({
task_name
:
'
compute-correlation
'
,
args
})
.
then
(
response
=>
{
const
results
=
JSON
.
parse
(
response
)
results
.
data
=
JSON
.
parse
(
results
.
data
)
...
...
src/store/actions.js
View file @
8dfa6bfb
...
...
@@ -17,5 +17,8 @@ export default {
context
.
dispatch
(
'
updateData
'
)
},
2000
)
})
},
setFilter
:
(
context
,
{
filter
,
value
})
=>
{
context
.
commit
(
types
.
SET_FILTER
,
{
filter
,
value
})
}
}
src/store/getters.js
View file @
8dfa6bfb
export
default
{
data
:
state
=>
state
.
data
,
loadedData
:
state
=>
state
.
data
.
filter
(
d
=>
d
.
loaded
),
subsets
:
state
=>
state
.
subsets
,
requestManager
:
state
=>
state
.
requestManager
requestManager
:
state
=>
state
.
requestManager
,
filter
:
state
=>
name
=>
state
.
filters
[
name
]
}
src/store/mutation-types.js
View file @
8dfa6bfb
export
default
{
SET_DATA
:
'
SET_DATA
'
,
SET_REQUEST_MANAGER
:
'
SET_REQUEST_MANAGER
'
,
SET_SUBSETS
:
'
SET_SUBSETS
'
SET_SUBSETS
:
'
SET_SUBSETS
'
,
SET_FILTER
:
'
SET_FILTER
'
}
src/store/mutations.js
View file @
8dfa6bfb
...
...
@@ -9,5 +9,8 @@ export default {
},
[
types
.
SET_SUBSETS
]
(
state
,
subsets
)
{
state
.
subsets
=
subsets
},
[
types
.
SET_FILTER
]
(
state
,
{
filter
,
value
})
{
state
.
filters
[
filter
]
=
value
}
}
src/store/store.js
View file @
8dfa6bfb
...
...
@@ -9,7 +9,10 @@ Vue.use(Vuex)
const
state
=
{
data
:
[],
requestManager
:
null
,
subsets
:
[]
subsets
:
[],
filters
:
{
ids
:
[]
}
}
export
default
new
Vuex
.
Store
({
...
...
test/charts/test-chart.html
View file @
8dfa6bfb
...
...
@@ -20,7 +20,7 @@
const
fjs
=
fractal
.
init
({
handler
:
'
ada
'
,
thisBaseURL
:
'
https://ada.parkinson.lu
'
,
fractalisBaseURL
:
'
http
s
://
fractalis.lcsb.uni.lu
'
,
fractalisBaseURL
:
'
http://
127.0.0.1:5000
'
,
getAuth
()
{
return
credentials1
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment