Skip to content

Commit 871cf37

Browse files
s4pus4pu
committed
[academic_query] plug as demo into academic_histogram.md
SQUASHED: AUTO-COMMIT-demos-bibliographie-leoUIexample.js,AUTO-COMMIT-demos-bibliographie-leoUIexample.md,AUTO-COMMIT-src-components-widgets-academic-query.js,AUTO-COMMIT-src-components-widgets-academic-subquery.html,AUTO-COMMIT-src-components-widgets-academic-subquery.js,
1 parent bc4f464 commit 871cf37

File tree

4 files changed

+179
-66
lines changed

4 files changed

+179
-66
lines changed

‎demos/bibliographie/leoUIexample.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import AcademicQuery from 'src/components/widgets/academic-query.js';
33
export default class LeoUIExample{
44
static async create () {
55
var queryWidget = await (<academic-query></academic-query>);
6-
queryWidget.setQuery("And(Or(Y='1985', Y='2008'), Ti='disordered electronic systems')");
6+
queryWidget.setQuery("And(Or(Y=1985, Y=2008), Ti='disordered electronic systems')");
77
//queryWidget.setQuery("Y='1985'");
88

99
return <div>{queryWidget}</div>;

‎demos/bibliographie/leoUIexample.md‎

Lines changed: 171 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,180 @@
1-
# Leo's UI Example
1+
<script>
2+
var markdownComp = lively.query(this, "lively-markdown")
23

4+
import {Panning} from "src/client/html.js"
5+
import Literature from "src/client/literature.js"
6+
import {Paper, Author, MicrosoftAcademicEntities} from "src/client/literature.js"
7+
import Chart from 'src/external/chart.js';
8+
import Strings from "src/client/strings.js"
9+
import AcademicQuery from "src/components/widgets/academic-query.js"
310

4-
<!--div>
5-
<div class='row'>
6-
<div class='column'>
7-
Title: <input value="indexing by latent semantic analysis"></input>
8-
</div>
9-
<div class='column'>
10-
<div class='row'>
11-
Author:
12-
</div>
13-
<div class='row'>
14-
<div class='column'>
15-
<div class='row'>
16-
Name:
17-
</div>
18-
<div class='row'>
19-
Institution:
20-
</div>
21-
</div>
22-
<div class='column'>
23-
<div class='row'>
24-
<input value="susan t dumais"></input>
25-
</div>
26-
<div class='row'>
27-
<input value="indiana university"></input>
28-
</div>
29-
</div>
30-
</div>
31-
</div>
32-
<div class='column'>
33-
Year: <input value="1990"></input> - <input value="2010"></input>
34-
</div>
35-
</div>
36-
</div-->
37-
38-
<style>
39-
.column {
40-
float: left;
41-
width: min;
42-
margin: 5px;
43-
}
4411

45-
/* Clear floats after the columns */
46-
.row:after {
47-
content: "";
48-
display: table;
49-
clear: both;
12+
import files from "src/client/files.js"
13+
14+
const default_query="Composite(AA.AuId=2055148755)"
15+
const default_count = 1000
16+
const default_min = 0
17+
const default_attr = "F.FN"
18+
19+
class HistogramChart {
20+
21+
static style() {
22+
var style = document.createElement("style")
23+
style.textContent = `
24+
25+
input#query {
26+
width: 400px;
27+
}
28+
29+
input#count, input#min {
30+
width: 30px
31+
}
32+
33+
div#info {
34+
color: lightgray;
35+
font-style: italic;
36+
padding: 2px;
5037
}
51-
</style>
38+
`
39+
return style
40+
}
5241

53-
<script>
54-
import Leo from './leoUIexample.js'
42+
static createChart(json, ctx) {
43+
if (!json || !json.histograms || !json.histograms[0]) return
44+
45+
this.data = json
46+
47+
var hist = json.histograms[0].histogram
48+
hist = hist.sortBy(ea => ea.value)
49+
50+
var minValue = default_min
51+
hist = hist.filter(ea => ea.count > minValue)
5552

56-
Leo.create();
53+
this.chart = new Chart(ctx, {
54+
type: 'bar',
55+
data: {
56+
labels: hist.map(ea => ea.value),
57+
datasets: [{
58+
label: 'Histogram',
59+
data: hist.map(ea => ea.count),
60+
borderWidth: 1
61+
}]
62+
},
63+
options: {
64+
scales: {
65+
yAxes: [{
66+
ticks: {
67+
beginAtZero: true
68+
}
69+
}]
70+
}
71+
}
72+
});
73+
return this.chart
74+
}
5775

76+
static subQuery(query, attribute, value, count=10) {
77+
// ok, we have to create a subquery based on the type of the attribute #Fuck #Patrick #Home ... #Objects
78+
var attributeSchema = this.schemas.paper[attribute]
79+
var type = attributeSchema.type
80+
var other = attribute+ '=' + (type == "String" ? "'" + value + "'" : value)
81+
if(attribute.match(/\./)) {
82+
other = "Composite(" + other + ")"
83+
}
84+
return `academic://expr:And(${query},${other})?count=${count}`
85+
}
86+
87+
static async onClick(evt, element) {
88+
if (evt.shiftKey) return lively.openInspector(this);
89+
90+
var firstPoint = this.chart.getElementAtEvent(evt)[0];
91+
if (firstPoint) {
92+
var label = this.chart.data.labels[firstPoint._index];
93+
var value = this.chart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
94+
95+
lively.openBrowser(this.subQuery(this.queryString(), this.attr(), label, 20))
96+
} else {
97+
98+
let mousePoint = Chart.helpers.getRelativePosition(evt, this.chart.chart);
99+
let value = this.chart.scales['x-axis-0'].getValueForPixel(mousePoint.x);
100+
let label = this.chart.data.labels[value]
101+
let attribute = this.attr()
102+
103+
104+
if (attribute == "F.FN"){
105+
var newquery = `And(Composite(F.FN='${label}'),${this.queryWidget.getQuery()})`
106+
lively.openBrowser("academic://hist:" + newquery + "?count=1000&attr=" + attribute)
107+
} else {
108+
lively.notify("narrowing in on " + attribute + " is not supported yet!")
109+
}
110+
}
111+
}
112+
113+
static async update() {
114+
if (this.canvas) this.canvas.remove()
115+
this.canvas = <canvas></canvas>
116+
this.pane.appendChild(this.canvas)
58117

118+
var query = this.queryWidget.getQuery() || default_query
119+
var json = await files.loadJSON(`academic://hist:${query}?count=1000&attr=F.FN`);
120+
var ctx = this.canvas.getContext('2d');
121+
122+
let targetLabel = ""
123+
let info = ""
124+
125+
126+
this.canvas.onclick = evt => {
127+
if (!this.chart) return
128+
this.onClick(evt, this.chart.getElementAtEvent(evt));
129+
}
130+
131+
(() => this.createChart(json, ctx)).defer(100);
132+
}
133+
134+
static async create() {
135+
136+
this.schemas = await MicrosoftAcademicEntities.allSchemas()
137+
138+
var inspect = () => lively.openInspector(this.data)
139+
140+
this.queryWidget = await (<academic-query></academic-query>);
141+
this.queryWidget.setQuery(default_query)
142+
143+
this.pane = <div id="root" title=" " style={`
144+
position: absolute;
145+
top: 0px;
146+
left: 0px;
147+
overflow-x: auto;
148+
overflow-y: scroll;
149+
user-select: none;
150+
width: calc(100% );
151+
height: calc(100%);`}>
152+
{this.style()}
153+
<div>
154+
<h2>Academic Query: </h2>
155+
{this.queryWidget}
156+
</div>
157+
<button click={inspect}>inspect</button>
158+
</div>
159+
160+
161+
this.pane.creator = this
162+
163+
164+
let parameters = markdownComp.parameters
165+
for(let name of Object.keys(parameters)) {
166+
let element = this.pane.querySelector("#" +name)
167+
if (element && (parameters[name] !== undefined)) element.value = parameters[name]
168+
else {
169+
lively.warn("parameter " + name + " not found")
170+
}
171+
}
172+
173+
this.update()
174+
175+
return this.pane
176+
}
177+
}
59178

60-
</script>
179+
HistogramChart.create()
180+
</script>

‎src/components/widgets/academic-query.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export default class AcademicQuery extends Morph {
2424
if (mutation.type == "childList") {
2525
if (this.subquery) {
2626
this.textContent = await this.subquery.viewToQuery();
27-
var input = this.get('#queryInput');
28-
input.value = this.getQuery();
27+
var queryText = this.get('#queryText');
28+
queryText.innerHTML = this.getQuery();
2929
}
3030
}
3131
}, 1000);
@@ -64,15 +64,14 @@ export default class AcademicQuery extends Morph {
6464
var queryView = <academic-subquery></academic-subquery>;
6565
queryView = this.subquery;
6666

67-
var input = <input id="queryInput" value={this.textContent} style="width: 300px"></input>;
68-
var updateButton = <button click={() => this.setQuery(input.value)}>update</button>;
67+
var queryText = <span id="queryText" style="width: 300px; font-style: italic; color: lightgray;">{this.textContent}</span>;
6968
var searchButton = <button click={() => lively.openBrowser("academic://expr:" + this.textContent + "?count=100")}>search</button>;
7069

7170
pane.innerHTML = ""
7271
pane.appendChild(<div>
73-
<h1>Academic Query:</h1>
74-
{input} {updateButton} {searchButton}
72+
{searchButton}
7573
{queryView}
74+
{queryText}
7675
</div>);
7776
}
7877

@@ -82,7 +81,7 @@ export default class AcademicQuery extends Morph {
8281

8382
async livelyExample() {
8483
this.setQuery("Composite(AA.AuId = 2055148755)")
85-
//this.setQuery("And(Or(Y = '1985', Y = '2008'), Ti = 'disordered electronic systems')")
84+
//this.setQuery("And(Composite(AA.AuId = 2154319088),Y = 2020)")
8685
//this.setQuery("And(O='abc', Y='1000')")
8786
//this.setQuery("Y='1000'")
8887
}

‎src/components/widgets/academic-subquery.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -441,13 +441,8 @@ export default class AcademicSubquery extends Morph {
441441
query = "Composite(" + currentAttribute.name + comp + val + ")";
442442
// TODO: Set type to Composite?
443443
else
444-
query = currentAttribute.name + comp + val;
445-
446-
447-
448-
444+
query = currentAttribute.name + comp + val;
449445
}
450-
lively.notify("QUERY from view", query)
451446
return query
452447
}
453448

@@ -630,7 +625,6 @@ export default class AcademicSubquery extends Morph {
630625
var attribute = currentAttribute.shortDesc;
631626
var value = ast.value;
632627
var comparator = ast.comparator;
633-
lively.notify(ast)
634628

635629
if (currentAttribute.name.match(/[Ii]d/)) {
636630
var id = ast.value;

0 commit comments

Comments
 (0)