Add support for IDE visualisation API

MiniZinc · Jun 22, 2023 · de76b90 · de76b90
1 parent 8c3e80a
commit de76b90
Show file tree

Hide file tree

Showing 7 changed files with 713 additions and 38 deletions.
diff --git a/src/lang/index.js b/src/lang/index.js
@@ -13,6 +13,7 @@ import {
 } from '@codemirror/language';
 import { styleTags, tags as t } from '@lezer/highlight';
 import { json } from '@codemirror/lang-json';
+import { html } from '@codemirror/lang-html';
 import { debounce } from 'lodash';
 
 export const MiniZincLanguage = LRLanguage.define({
@@ -127,6 +128,7 @@ export const MiniZincEditorExtensions = (f) => [
     EditorView.updateListener.of(debounce(f, 250)),
 ];
 export const JSONEditorExtensions = [...extensions, json()];
+export const HTMLEditorExtensions = [...extensions, html()];
 
 export const ReadonlyTextExtensions = [
     ...extensions,

diff --git a/src/lib/Dropdown.svelte b/src/lib/Dropdown.svelte
@@ -9,6 +9,7 @@
     export let currentItem = null;
 
     export let active = false;
+    export let disabled = false;
 
     let element;
 
@@ -28,7 +29,7 @@
 
 <div class="dropdown" class:is-active={active} bind:this={element}>
     <div class="dropdown-trigger">
-        <button class="button" on:click={() => (active = !active)}>
+        <button class="button" on:click={() => (active = !active)} {disabled}>
             <span>
                 {#if currentItem}
                     <slot name="selected" item={currentItem}>

diff --git a/src/lib/NewFileModal.svelte b/src/lib/NewFileModal.svelte
@@ -62,6 +62,16 @@
                 >
             </li>
         </ul>
+        <p class="menu-label">Visualisation</p>
+        <ul class="menu-list">
+            <li>
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y-missing-attribute -->
+                <a on:click={() => dispatch('new', { type: '.html' })}
+                    >Custom visualisation (.html)</a
+                >
+            </li>
+        </ul>
         <p class="menu-label">Import</p>
         <ul class="menu-list">
             <li>
@@ -80,5 +90,5 @@
     bind:files
     on:change={uploaded}
     multiple
-    accept=".mzn,.mzc,.dzn,.json"
+    accept=".mzn,.mzc,.dzn,.json,.html"
 />
diff --git a/src/lib/Output.svelte b/src/lib/Output.svelte
@@ -3,14 +3,12 @@
     import Fa from 'svelte-fa/src/fa.svelte';
     import {
         faEraser,
-        faRotate,
         faTrash,
     } from '@fortawesome/free-solid-svg-icons';
     const dispatch = createEventDispatcher();
 
     export let output;
     export let autoClearOutput = false;
-    export let orientation = 'horizontal';
 
     let outputElement;
     let showStatistics = true;
@@ -46,6 +44,7 @@
             ...messages.filter((m) => m.type === 'trace').map((m) => m.section),
         ]);
         sections.delete('raw'); // Exclude raw section
+        sections.delete('vis_json'); // Exclude vis_json section
         const result = [...sections.values()];
         result.sort();
         hiddenSections = hiddenSections.filter((s) => sections.has(s));
@@ -128,14 +127,6 @@
         }
         return `${loc.filename}:${loc.firstLine}.${loc.firstColumn}-${loc.lastLine}.${loc.lastColumn}`;
     }
-
-    function switchOrientation() {
-        if (orientation === 'horizontal') {
-            orientation = 'vertical';
-        } else {
-            orientation = 'horizontal';
-        }
-    }
 </script>
 
 <div class="stack">
@@ -227,15 +218,7 @@
             </button>
         {/if}
         <div class="field has-addons">
-            <p class="control">
-                <button
-                    class="button is-small"
-                    title="Switch orientation"
-                    on:click={switchOrientation}
-                >
-                    <span class="icon"><Fa icon={faRotate} /></span>
-                </button>
-            </p>
+            <slot name="before-right-controls"/>
 
             <p class="control">
                 <button
@@ -276,7 +259,7 @@
                         {#each run.output as msg}
                             {#if msg.type === 'solution'}
                                 {#each msg.sections as section}
-                                    {#if hiddenSections.indexOf(section) === -1}
+                                    {#if hiddenSections.indexOf(section) === -1 && section !== 'vis_json'}
                                         {#if section === 'json' || section.endsWith('_json')}
                                             <pre>{JSON.stringify(
                                                     msg.output[section],
@@ -326,8 +309,18 @@
                                     <br />
                                 {/if}
                             {:else if msg.type === 'trace'}
-                                {#if hiddenSections.indexOf(msg.section) === -1}
-                                    <pre class="mzn-trace">{msg.message}</pre>
+                                {#if hiddenSections.indexOf(msg.section) === -1 && msg.section !== 'vis_json'}
+                                    {#if msg.section === 'json' || msg.section.endsWith('_json')}
+                                        <pre>{JSON.stringify(
+                                                msg.message,
+                                                null,
+                                                2
+                                            )}</pre>
+                                        <br />
+                                    {:else}
+                                        <pre
+                                            class="mzn-trace">{msg.message}</pre>
+                                    {/if}
                                 {/if}
                             {:else if msg.type === 'comment'}
                                 <pre class="mzn-comment">{msg.comment}</pre>