Skip to content

Commit b6b47a4

Browse files
BraunTomBraunTom
committed
Merge branch 'gh-pages' of https://github.com/LivelyKernel/lively4-core into gh-pages
2 parents 6de15f9 + 871cf37 commit b6b47a4

File tree

4 files changed

+191
-70
lines changed

4 files changed

+191
-70
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: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ export default class AcademicSubquery extends Morph {
186186
if (this.schemaFiltered) { return this.schemaFiltered; }
187187

188188
// load the schema of a paper
189+
// Documentation: https://docs.microsoft.com/en-us/academic-services/project-academic-knowledge/reference-paper-entity-attributes
189190
this.schema = await MicrosoftAcademicEntities.generateSchema("paper");
190191
// to use the descriptions in the UI, we need to shorten some
191192
var createShortDescriptions = attr => {
@@ -288,7 +289,7 @@ export default class AcademicSubquery extends Morph {
288289
// this.id = id
289290

290291
event.dataTransfer.effectAllowed = 'move';
291-
event.dataTransfer.setData('text/html', this.queryElement.getQuery()); // set Query as info
292+
event.dataTransfer.setData('text', this.queryElement.getQuery()); // set Query as info
292293
//event.dataTransfer.setData("application/lively4id", id);
293294
}
294295

@@ -311,10 +312,17 @@ export default class AcademicSubquery extends Morph {
311312
//var id = event.dataTransfer.getData("application/lively4id")
312313
//var el = lively.query(this, "#"+id);
313314
//lively.notify("ELEMENT", el);
314-
var query = event.dataTransfer.getData("text/html");
315-
this.queryElement.setQuery(event.dataTransfer.getData("text/html")); // read query in
315+
//lively.notify("MATCH", g.match(query));
316+
var query = event.dataTransfer.getData("text");
316317
this.classList.remove('over');
317-
//}
318+
try {
319+
var m = g.match(query)
320+
s(m).interpret();
321+
} catch(e) {
322+
lively.notify("Please use a correct query!")
323+
return
324+
}
325+
this.queryElement.setQuery(query); // read query in
318326
}
319327

320328
onDragEnter(event) {
@@ -433,13 +441,8 @@ export default class AcademicSubquery extends Morph {
433441
query = "Composite(" + currentAttribute.name + comp + val + ")";
434442
// TODO: Set type to Composite?
435443
else
436-
query = currentAttribute.name + comp + val;
437-
438-
439-
440-
444+
query = currentAttribute.name + comp + val;
441445
}
442-
lively.notify("QUERY from view", query)
443446
return query
444447
}
445448

@@ -622,7 +625,6 @@ export default class AcademicSubquery extends Morph {
622625
var attribute = currentAttribute.shortDesc;
623626
var value = ast.value;
624627
var comparator = ast.comparator;
625-
lively.notify(ast)
626628

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

0 commit comments

Comments
 (0)