@tuprolog/arg2p-ui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -2
- package/dist/components/arg2p-editor.js +47 -47
- package/dist/components/arg2p-flags.js +197 -197
- package/dist/components/arg2p-graph.js +210 -210
- package/dist/components/arg2p-solutions.js +186 -186
- package/package.json +2 -2
|
@@ -326,42 +326,42 @@ export class Arg2pGraph extends LitElement {
|
|
|
326
326
|
render() {
|
|
327
327
|
const abstract = isAbstract(this.drawn);
|
|
328
328
|
const stages = this.stages;
|
|
329
|
-
return html `
|
|
330
|
-
<div class="bar" part="bar">
|
|
331
|
-
<div class="legend">
|
|
332
|
-
<span class="item"><span class="line attack"></span>attack</span>
|
|
329
|
+
return html `
|
|
330
|
+
<div class="bar" part="bar">
|
|
331
|
+
<div class="legend">
|
|
332
|
+
<span class="item"><span class="line attack"></span>attack</span>
|
|
333
333
|
${abstract
|
|
334
334
|
? nothing
|
|
335
|
-
: html `
|
|
336
|
-
<label class="item toggle" title="Show which sub-arguments every argument is built on">
|
|
337
|
-
<input type="checkbox" .checked=${this.showSupports} @change=${(e) => this.toggle('showSupports', e.target.checked)} />
|
|
338
|
-
<span class="line support"></span>supports
|
|
339
|
-
</label>
|
|
340
|
-
<label class="item toggle" title="Write the conclusion of every argument under its name">
|
|
341
|
-
<input type="checkbox" .checked=${this.showConclusions} @change=${(e) => this.toggle('showConclusions', e.target.checked)} />
|
|
342
|
-
conclusions
|
|
343
|
-
</label>
|
|
344
|
-
`}
|
|
345
|
-
</div>
|
|
346
|
-
<button type="button" class="png" title="Download the graph as a picture" ?disabled=${this.drawn.arguments.length === 0} @click=${() => this.export()}>
|
|
347
|
-
<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M12 3v12m0 0l-5-5m5 5l5-5M4 19h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
|
|
348
|
-
PNG
|
|
349
|
-
</button>
|
|
335
|
+
: html `
|
|
336
|
+
<label class="item toggle" title="Show which sub-arguments every argument is built on">
|
|
337
|
+
<input type="checkbox" .checked=${this.showSupports} @change=${(e) => this.toggle('showSupports', e.target.checked)} />
|
|
338
|
+
<span class="line support"></span>supports
|
|
339
|
+
</label>
|
|
340
|
+
<label class="item toggle" title="Write the conclusion of every argument under its name">
|
|
341
|
+
<input type="checkbox" .checked=${this.showConclusions} @change=${(e) => this.toggle('showConclusions', e.target.checked)} />
|
|
342
|
+
conclusions
|
|
343
|
+
</label>
|
|
344
|
+
`}
|
|
345
|
+
</div>
|
|
346
|
+
<button type="button" class="png" title="Download the graph as a picture" ?disabled=${this.drawn.arguments.length === 0} @click=${() => this.export()}>
|
|
347
|
+
<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M12 3v12m0 0l-5-5m5 5l5-5M4 19h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
|
|
348
|
+
PNG
|
|
349
|
+
</button>
|
|
350
350
|
${stages === null
|
|
351
351
|
? nothing
|
|
352
|
-
: html `
|
|
353
|
-
<div class="stages">
|
|
354
|
-
<button type="button" class="previous" title="Previous stage of the computation" aria-label="Previous stage" ?disabled=${this.stage <= 0} @click=${() => this.goTo(this.stage - 1)}>◀</button>
|
|
355
|
-
<span class="stage" title="Every step of the computation keeps its own context: browse them to see how the graph is built">Stage ${this.stage} / ${stages.last}</span>
|
|
356
|
-
<button type="button" class="next" title="Next stage of the computation" aria-label="Next stage" ?disabled=${this.stage >= stages.last} @click=${() => this.goTo(this.stage + 1)}>▶</button>
|
|
357
|
-
</div>
|
|
358
|
-
`}
|
|
359
|
-
</div>
|
|
360
|
-
<div class="area">
|
|
361
|
-
<div class="canvas"></div>
|
|
362
|
-
${this.drawn.arguments.length === 0 && stages !== null ? html `<div class="none">No arguments at this stage.</div>` : nothing}
|
|
363
|
-
${this.popup(abstract)}
|
|
364
|
-
</div>
|
|
352
|
+
: html `
|
|
353
|
+
<div class="stages">
|
|
354
|
+
<button type="button" class="previous" title="Previous stage of the computation" aria-label="Previous stage" ?disabled=${this.stage <= 0} @click=${() => this.goTo(this.stage - 1)}>◀</button>
|
|
355
|
+
<span class="stage" title="Every step of the computation keeps its own context: browse them to see how the graph is built">Stage ${this.stage} / ${stages.last}</span>
|
|
356
|
+
<button type="button" class="next" title="Next stage of the computation" aria-label="Next stage" ?disabled=${this.stage >= stages.last} @click=${() => this.goTo(this.stage + 1)}>▶</button>
|
|
357
|
+
</div>
|
|
358
|
+
`}
|
|
359
|
+
</div>
|
|
360
|
+
<div class="area">
|
|
361
|
+
<div class="canvas"></div>
|
|
362
|
+
${this.drawn.arguments.length === 0 && stages !== null ? html `<div class="none">No arguments at this stage.</div>` : nothing}
|
|
363
|
+
${this.popup(abstract)}
|
|
364
|
+
</div>
|
|
365
365
|
`;
|
|
366
366
|
}
|
|
367
367
|
popup(abstract) {
|
|
@@ -370,22 +370,22 @@ export class Arg2pGraph extends LitElement {
|
|
|
370
370
|
return nothing;
|
|
371
371
|
const { by, on } = attacksAround(this.drawn, argument.id);
|
|
372
372
|
const kind = kindOf(argument, abstract);
|
|
373
|
-
const attack = (id, type, target) => html `
|
|
374
|
-
<span class="attack">${this.chip(id)}${abstract || type === null ? nothing : html `<span class="type">${type}${target !== null && target !== argument.id ? html ` on ${this.chip(target)}` : nothing}</span>`}</span>
|
|
373
|
+
const attack = (id, type, target) => html `
|
|
374
|
+
<span class="attack">${this.chip(id)}${abstract || type === null ? nothing : html `<span class="type">${type}${target !== null && target !== argument.id ? html ` on ${this.chip(target)}` : nothing}</span>`}</span>
|
|
375
375
|
`;
|
|
376
|
-
return html `
|
|
377
|
-
<div class="popup" part="popup" role="tooltip">
|
|
378
|
-
<div class="header">
|
|
379
|
-
${this.chip(argument.id)}
|
|
380
|
-
<span class="label">${argument.label === 'na' ? 'not labelled yet' : argument.label}</span>
|
|
381
|
-
${kind === 'assumption' || kind === 'premise' ? html `<span class="kind">${kind}</span>` : nothing}
|
|
382
|
-
</div>
|
|
383
|
-
${abstract ? nothing : this.row('Conclusion', html `<div class="term">${argument.conclusion}</div>`)}
|
|
384
|
-
${kind === 'rule' ? this.row('Top rule', html `<div class="term">${argument.topRule}</div>`) : nothing}
|
|
385
|
-
${abstract ? nothing : this.row('Built on', this.chips(argument.supports.map(id => this.chip(id))))}
|
|
386
|
-
${this.row('Attacked by', this.chips(by.map(it => attack(it.from, it.type, it.on))))}
|
|
387
|
-
${this.row('Attacks', this.chips(on.map(it => attack(it.to, it.type, it.on))))}
|
|
388
|
-
</div>
|
|
376
|
+
return html `
|
|
377
|
+
<div class="popup" part="popup" role="tooltip">
|
|
378
|
+
<div class="header">
|
|
379
|
+
${this.chip(argument.id)}
|
|
380
|
+
<span class="label">${argument.label === 'na' ? 'not labelled yet' : argument.label}</span>
|
|
381
|
+
${kind === 'assumption' || kind === 'premise' ? html `<span class="kind">${kind}</span>` : nothing}
|
|
382
|
+
</div>
|
|
383
|
+
${abstract ? nothing : this.row('Conclusion', html `<div class="term">${argument.conclusion}</div>`)}
|
|
384
|
+
${kind === 'rule' ? this.row('Top rule', html `<div class="term">${argument.topRule}</div>`) : nothing}
|
|
385
|
+
${abstract ? nothing : this.row('Built on', this.chips(argument.supports.map(id => this.chip(id))))}
|
|
386
|
+
${this.row('Attacked by', this.chips(by.map(it => attack(it.from, it.type, it.on))))}
|
|
387
|
+
${this.row('Attacks', this.chips(on.map(it => attack(it.to, it.type, it.on))))}
|
|
388
|
+
</div>
|
|
389
389
|
`;
|
|
390
390
|
}
|
|
391
391
|
row(title, content) {
|
|
@@ -403,169 +403,169 @@ export class Arg2pGraph extends LitElement {
|
|
|
403
403
|
}
|
|
404
404
|
static { this.styles = [
|
|
405
405
|
tokens,
|
|
406
|
-
css `
|
|
407
|
-
:host {
|
|
408
|
-
display: flex;
|
|
409
|
-
flex-direction: column;
|
|
410
|
-
min-height: 200px;
|
|
411
|
-
background: var(--_surface);
|
|
412
|
-
font-size: 13px;
|
|
413
|
-
}
|
|
414
|
-
.bar {
|
|
415
|
-
display: flex;
|
|
416
|
-
flex-wrap: wrap;
|
|
417
|
-
align-items: center;
|
|
418
|
-
gap: 6px 16px;
|
|
419
|
-
padding: 6px 10px;
|
|
420
|
-
border-bottom: 1px solid var(--_border);
|
|
421
|
-
color: var(--_muted);
|
|
422
|
-
}
|
|
423
|
-
.legend {
|
|
424
|
-
display: flex;
|
|
425
|
-
align-items: center;
|
|
426
|
-
gap: 14px;
|
|
427
|
-
margin-right: auto;
|
|
428
|
-
}
|
|
429
|
-
.item {
|
|
430
|
-
display: inline-flex;
|
|
431
|
-
align-items: center;
|
|
432
|
-
gap: 6px;
|
|
433
|
-
}
|
|
434
|
-
.toggle {
|
|
435
|
-
cursor: pointer;
|
|
436
|
-
user-select: none;
|
|
437
|
-
}
|
|
438
|
-
/* attacks take the colour of the attacker: the legend shows the stroke alone */
|
|
439
|
-
.line {
|
|
440
|
-
display: inline-block;
|
|
441
|
-
width: 26px;
|
|
442
|
-
border-top: 2px solid var(--_muted);
|
|
443
|
-
}
|
|
444
|
-
.line.support {
|
|
445
|
-
border-top: 2px dashed var(--_support);
|
|
446
|
-
}
|
|
447
|
-
button {
|
|
448
|
-
display: inline-flex;
|
|
449
|
-
align-items: center;
|
|
450
|
-
gap: 4px;
|
|
451
|
-
font: inherit;
|
|
452
|
-
color: var(--_text);
|
|
453
|
-
background: var(--_surface);
|
|
454
|
-
border: 1px solid var(--_border);
|
|
455
|
-
border-radius: 4px;
|
|
456
|
-
padding: 2px 8px;
|
|
457
|
-
cursor: pointer;
|
|
458
|
-
}
|
|
459
|
-
button:hover:not(:disabled) {
|
|
460
|
-
background: var(--_hover);
|
|
461
|
-
}
|
|
462
|
-
button:disabled {
|
|
463
|
-
opacity: 0.5;
|
|
464
|
-
cursor: default;
|
|
465
|
-
}
|
|
466
|
-
.stages {
|
|
467
|
-
display: flex;
|
|
468
|
-
align-items: center;
|
|
469
|
-
gap: 8px;
|
|
470
|
-
}
|
|
471
|
-
.stage {
|
|
472
|
-
min-width: 80px;
|
|
473
|
-
text-align: center;
|
|
474
|
-
font-variant-numeric: tabular-nums;
|
|
475
|
-
}
|
|
476
|
-
.area {
|
|
477
|
-
flex: 1;
|
|
478
|
-
min-height: 0;
|
|
479
|
-
position: relative;
|
|
480
|
-
overflow: hidden;
|
|
481
|
-
}
|
|
482
|
-
.canvas {
|
|
483
|
-
position: absolute;
|
|
484
|
-
inset: 0;
|
|
485
|
-
}
|
|
486
|
-
.none {
|
|
487
|
-
position: absolute;
|
|
488
|
-
top: 40%;
|
|
489
|
-
width: 100%;
|
|
490
|
-
text-align: center;
|
|
491
|
-
color: var(--_muted);
|
|
492
|
-
font-style: italic;
|
|
493
|
-
pointer-events: none;
|
|
494
|
-
}
|
|
495
|
-
.popup {
|
|
496
|
-
position: absolute;
|
|
497
|
-
z-index: 20;
|
|
498
|
-
width: max-content;
|
|
499
|
-
max-width: min(320px, calc(100% - 16px));
|
|
500
|
-
padding: 10px 12px;
|
|
501
|
-
background: var(--_surface);
|
|
502
|
-
border: 1px solid var(--_border);
|
|
503
|
-
border-radius: 8px;
|
|
504
|
-
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
|
|
505
|
-
pointer-events: none;
|
|
506
|
-
}
|
|
507
|
-
.header {
|
|
508
|
-
display: flex;
|
|
509
|
-
align-items: center;
|
|
510
|
-
gap: 8px;
|
|
511
|
-
margin-bottom: 6px;
|
|
512
|
-
}
|
|
513
|
-
.label,
|
|
514
|
-
.kind {
|
|
515
|
-
font-size: 11px;
|
|
516
|
-
font-weight: bold;
|
|
517
|
-
text-transform: uppercase;
|
|
518
|
-
letter-spacing: 0.04em;
|
|
519
|
-
color: var(--_muted);
|
|
520
|
-
}
|
|
521
|
-
.kind {
|
|
522
|
-
font-weight: normal;
|
|
523
|
-
}
|
|
524
|
-
.row {
|
|
525
|
-
display: grid;
|
|
526
|
-
grid-template-columns: 82px 1fr;
|
|
527
|
-
column-gap: 8px;
|
|
528
|
-
align-items: baseline;
|
|
529
|
-
padding: 3px 0;
|
|
530
|
-
}
|
|
531
|
-
.title,
|
|
532
|
-
.muted,
|
|
533
|
-
.type {
|
|
534
|
-
color: var(--_muted);
|
|
535
|
-
}
|
|
536
|
-
.term {
|
|
537
|
-
font-family: var(--_mono);
|
|
538
|
-
word-break: break-word;
|
|
539
|
-
}
|
|
540
|
-
.chips {
|
|
541
|
-
display: flex;
|
|
542
|
-
flex-wrap: wrap;
|
|
543
|
-
gap: 4px;
|
|
544
|
-
}
|
|
545
|
-
.attack {
|
|
546
|
-
display: inline-flex;
|
|
547
|
-
align-items: center;
|
|
548
|
-
gap: 4px;
|
|
549
|
-
}
|
|
550
|
-
.type {
|
|
551
|
-
font-size: 12px;
|
|
552
|
-
}
|
|
553
|
-
.chip {
|
|
554
|
-
color: #ffffff;
|
|
555
|
-
border-radius: 10px;
|
|
556
|
-
padding: 0 8px;
|
|
557
|
-
font-size: 12px;
|
|
558
|
-
background: var(--_unlabelled);
|
|
559
|
-
}
|
|
560
|
-
.chip.in {
|
|
561
|
-
background: var(--_in);
|
|
562
|
-
}
|
|
563
|
-
.chip.out {
|
|
564
|
-
background: var(--_out);
|
|
565
|
-
}
|
|
566
|
-
.chip.und {
|
|
567
|
-
background: var(--_und);
|
|
568
|
-
}
|
|
406
|
+
css `
|
|
407
|
+
:host {
|
|
408
|
+
display: flex;
|
|
409
|
+
flex-direction: column;
|
|
410
|
+
min-height: 200px;
|
|
411
|
+
background: var(--_surface);
|
|
412
|
+
font-size: 13px;
|
|
413
|
+
}
|
|
414
|
+
.bar {
|
|
415
|
+
display: flex;
|
|
416
|
+
flex-wrap: wrap;
|
|
417
|
+
align-items: center;
|
|
418
|
+
gap: 6px 16px;
|
|
419
|
+
padding: 6px 10px;
|
|
420
|
+
border-bottom: 1px solid var(--_border);
|
|
421
|
+
color: var(--_muted);
|
|
422
|
+
}
|
|
423
|
+
.legend {
|
|
424
|
+
display: flex;
|
|
425
|
+
align-items: center;
|
|
426
|
+
gap: 14px;
|
|
427
|
+
margin-right: auto;
|
|
428
|
+
}
|
|
429
|
+
.item {
|
|
430
|
+
display: inline-flex;
|
|
431
|
+
align-items: center;
|
|
432
|
+
gap: 6px;
|
|
433
|
+
}
|
|
434
|
+
.toggle {
|
|
435
|
+
cursor: pointer;
|
|
436
|
+
user-select: none;
|
|
437
|
+
}
|
|
438
|
+
/* attacks take the colour of the attacker: the legend shows the stroke alone */
|
|
439
|
+
.line {
|
|
440
|
+
display: inline-block;
|
|
441
|
+
width: 26px;
|
|
442
|
+
border-top: 2px solid var(--_muted);
|
|
443
|
+
}
|
|
444
|
+
.line.support {
|
|
445
|
+
border-top: 2px dashed var(--_support);
|
|
446
|
+
}
|
|
447
|
+
button {
|
|
448
|
+
display: inline-flex;
|
|
449
|
+
align-items: center;
|
|
450
|
+
gap: 4px;
|
|
451
|
+
font: inherit;
|
|
452
|
+
color: var(--_text);
|
|
453
|
+
background: var(--_surface);
|
|
454
|
+
border: 1px solid var(--_border);
|
|
455
|
+
border-radius: 4px;
|
|
456
|
+
padding: 2px 8px;
|
|
457
|
+
cursor: pointer;
|
|
458
|
+
}
|
|
459
|
+
button:hover:not(:disabled) {
|
|
460
|
+
background: var(--_hover);
|
|
461
|
+
}
|
|
462
|
+
button:disabled {
|
|
463
|
+
opacity: 0.5;
|
|
464
|
+
cursor: default;
|
|
465
|
+
}
|
|
466
|
+
.stages {
|
|
467
|
+
display: flex;
|
|
468
|
+
align-items: center;
|
|
469
|
+
gap: 8px;
|
|
470
|
+
}
|
|
471
|
+
.stage {
|
|
472
|
+
min-width: 80px;
|
|
473
|
+
text-align: center;
|
|
474
|
+
font-variant-numeric: tabular-nums;
|
|
475
|
+
}
|
|
476
|
+
.area {
|
|
477
|
+
flex: 1;
|
|
478
|
+
min-height: 0;
|
|
479
|
+
position: relative;
|
|
480
|
+
overflow: hidden;
|
|
481
|
+
}
|
|
482
|
+
.canvas {
|
|
483
|
+
position: absolute;
|
|
484
|
+
inset: 0;
|
|
485
|
+
}
|
|
486
|
+
.none {
|
|
487
|
+
position: absolute;
|
|
488
|
+
top: 40%;
|
|
489
|
+
width: 100%;
|
|
490
|
+
text-align: center;
|
|
491
|
+
color: var(--_muted);
|
|
492
|
+
font-style: italic;
|
|
493
|
+
pointer-events: none;
|
|
494
|
+
}
|
|
495
|
+
.popup {
|
|
496
|
+
position: absolute;
|
|
497
|
+
z-index: 20;
|
|
498
|
+
width: max-content;
|
|
499
|
+
max-width: min(320px, calc(100% - 16px));
|
|
500
|
+
padding: 10px 12px;
|
|
501
|
+
background: var(--_surface);
|
|
502
|
+
border: 1px solid var(--_border);
|
|
503
|
+
border-radius: 8px;
|
|
504
|
+
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
|
|
505
|
+
pointer-events: none;
|
|
506
|
+
}
|
|
507
|
+
.header {
|
|
508
|
+
display: flex;
|
|
509
|
+
align-items: center;
|
|
510
|
+
gap: 8px;
|
|
511
|
+
margin-bottom: 6px;
|
|
512
|
+
}
|
|
513
|
+
.label,
|
|
514
|
+
.kind {
|
|
515
|
+
font-size: 11px;
|
|
516
|
+
font-weight: bold;
|
|
517
|
+
text-transform: uppercase;
|
|
518
|
+
letter-spacing: 0.04em;
|
|
519
|
+
color: var(--_muted);
|
|
520
|
+
}
|
|
521
|
+
.kind {
|
|
522
|
+
font-weight: normal;
|
|
523
|
+
}
|
|
524
|
+
.row {
|
|
525
|
+
display: grid;
|
|
526
|
+
grid-template-columns: 82px 1fr;
|
|
527
|
+
column-gap: 8px;
|
|
528
|
+
align-items: baseline;
|
|
529
|
+
padding: 3px 0;
|
|
530
|
+
}
|
|
531
|
+
.title,
|
|
532
|
+
.muted,
|
|
533
|
+
.type {
|
|
534
|
+
color: var(--_muted);
|
|
535
|
+
}
|
|
536
|
+
.term {
|
|
537
|
+
font-family: var(--_mono);
|
|
538
|
+
word-break: break-word;
|
|
539
|
+
}
|
|
540
|
+
.chips {
|
|
541
|
+
display: flex;
|
|
542
|
+
flex-wrap: wrap;
|
|
543
|
+
gap: 4px;
|
|
544
|
+
}
|
|
545
|
+
.attack {
|
|
546
|
+
display: inline-flex;
|
|
547
|
+
align-items: center;
|
|
548
|
+
gap: 4px;
|
|
549
|
+
}
|
|
550
|
+
.type {
|
|
551
|
+
font-size: 12px;
|
|
552
|
+
}
|
|
553
|
+
.chip {
|
|
554
|
+
color: #ffffff;
|
|
555
|
+
border-radius: 10px;
|
|
556
|
+
padding: 0 8px;
|
|
557
|
+
font-size: 12px;
|
|
558
|
+
background: var(--_unlabelled);
|
|
559
|
+
}
|
|
560
|
+
.chip.in {
|
|
561
|
+
background: var(--_in);
|
|
562
|
+
}
|
|
563
|
+
.chip.out {
|
|
564
|
+
background: var(--_out);
|
|
565
|
+
}
|
|
566
|
+
.chip.und {
|
|
567
|
+
background: var(--_und);
|
|
568
|
+
}
|
|
569
569
|
`,
|
|
570
570
|
]; }
|
|
571
571
|
}
|