Skip to content

Commit 753075d

Browse files
delasdelas
committed
Updated layout and added proper syntax highlighting with line numbers
1 parent 2f8bddf commit 753075d

6 files changed

Lines changed: 91 additions & 49 deletions

File tree

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"dev": "vite",
88
"build": "vite build",
99
"preview": "vite preview",
10-
"antlr4ts": "antlr4ts src/converters/grammar/MScGrammar.g4 -o src/converters/grammar/generated/"
10+
"antlr4ts": "antlr4ts src/converters/grammar/MScGrammar.g4 -o src/converters/grammar/generated/"
1111
},
1212
"dependencies": {
1313
"@ai-sdk/openai": "^1.1.9",
@@ -16,7 +16,7 @@
1616
"ai": "^4.1.34",
1717
"antlr4ts": "^0.5.0-alpha.4",
1818
"bpmn-moddle": "^9.0.1",
19-
"prismjs": "^1.29.0",
19+
"prismjs": "^1.30.0",
2020
"roboto-fontface": "^0.10.0",
2121
"vite-plugin-vuetify": "^2.1.0",
2222
"vue": "^3.5.13",

‎src/components/ProcessVisualizer.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</v-container>
2626
</v-tabs-window-item>
2727
<v-tabs-window-item value="declare" class="flex-fill" style="">
28-
<v-container class="d-flex flex-column flex-fill" style="height: 100%;">
28+
<v-container class="d-flex flex-column flex-fill" style="height: 800px;">
2929
<v-btn class="align-self-end" elevation="0" outlined @click="handleDownloadFile('DECLARE')">
3030
<v-icon class="mr-2" icon="mdi-download" />
3131
Download .decl

‎src/components/RestrictedLanguageVisualizer.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<prism-editor
3+
class="editor mb-3"
4+
v-model="restrictedLanguage"
5+
:highlight="highlighter"
6+
:line-numbers="true">
7+
</prism-editor>
8+
</template>
9+
10+
<script>
11+
import { PrismEditor } from "vue-prism-editor";
12+
import { highlight, languages } from "prismjs/components/prism-core";
13+
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
14+
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
15+
import "vue-prism-editor/dist/prismeditor.min.css";
16+
import "../highlights/prism-vs.css";
17+
import "../highlights/businessprocess.js";
18+
19+
export default {
20+
name: 'RestrictedLanguageVisualizer',
21+
components: {
22+
PrismEditor
23+
},
24+
data: () => ({
25+
restrictedLanguage: '',
26+
}),
27+
methods: {
28+
highlighter(code) {
29+
return highlight(code, languages.businessprocess); //returns html
30+
},
31+
},
32+
}
33+
</script>
34+
35+
<style>
36+
.editor {
37+
background: #f6f6f6;
38+
/* font-family: Roboto, sans-serif; */
39+
font-family: Fira code, Fira Mono, Consolas, monospace;
40+
font-size: 14px;
41+
padding: 16px 0;
42+
/* margin-bottom: 20px; */
43+
border-bottom: 1px solid #A5A5A5;
44+
}
45+
46+
.prism-editor-wrapper .prism-editor__container {
47+
overflow-x: auto;
48+
}
49+
50+
.prism-editor-wrapper .prism-editor__editor, .prism-editor-wrapper .prism-editor__textarea {
51+
white-space: pre !important; /* Changed from pre-wrap to pre */
52+
word-break: normal; /* Prevents long words from breaking unnaturally */
53+
}
54+
55+
.prism-editor__textarea:focus {
56+
outline: none;
57+
}
58+
59+
.prism-editor__line-number {
60+
font-style: normal !important;
61+
color: #23799373 !important;
62+
}
63+
</style>

‎src/highlights/businessprocess.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { languages } from "prismjs/components/prism-core";
33
languages.businessprocess = {
44
// 'comment': //,
55
'string': /(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,
6-
'keyword': /\b(?:start|after|ends|and|initially|immediately start|Activity|is performed by|the process finishes|The following textual description follows the closed-world assumption, meaning that only the activities specified can be executed in the specified order. Any possible activity and execution that is not specified is considered impossible)\b/i,
6+
'keyword': /\b(?:start|after|ends|and|initially|immediately start|immediately either|immediately repeat since|or|Activity|is performed by|the process finishes|The following textual description follows the closed-world assumption, meaning that only the activities specified can be executed in the specified order. Any possible activity and execution that is not specified is considered impossible)\b/i,
77
'boolean': /\b(?:true|false)\b/,
88
'number': /\b\d+(\.\d+)?\b/,
99
'operator': /[-+*/=<>!]+/,

‎src/views/BusinessProcessView.vue‎

Lines changed: 23 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<h1 class="mb-3">Modelling of Business Processes</h1>
33

4-
<div class="d-flex flex-row flex-fill" style="height: 90%;">
4+
<div class="d-flex flex-row flex-fill">
55
<v-tabs v-model="tab" class="mr-3" direction="vertical" bg-color="surface-light">
66
<v-tab :value="'nl'">
77
<v-icon class="mr-1" icon="mdi-chat-outline" />
@@ -17,40 +17,46 @@
1717
</v-tab>
1818
</v-tabs>
1919

20-
<v-tabs-window v-model="tab" class="flex-fill" style="height: 100%;">
21-
<v-tabs-window-item value="nl" class="flex-fill">
20+
<v-tabs-window v-model="tab" class="w-100">
21+
<v-tabs-window-item value="nl" class="">
2222
<v-alert v-if="!isTokenConfigured" closable
2323
text="Configure the ChatGPT API Token and reload the page in order to use the system." type="error"
2424
variant="tonal" class="mb-3"></v-alert>
25-
<v-container class="d-flex flex-column" style="height: 100%;">
25+
<v-container>
2626
<v-select
2727
label="Select an example description"
2828
:items="examples"
2929
item-title="name"
3030
item-value="description"
3131
v-model="textualDescription"
32-
class="mb-2 flex-grow-0"
32+
class="mb-2"
3333
clearable
3434
></v-select>
3535
<p class="mb-2">Natural language description of the process:</p>
36-
<v-textarea v-model="textualDescription" auto-grow></v-textarea>
37-
<v-btn class="align-self-end" color="primary" @click="processNaturalLanguage">
36+
<v-textarea v-model="textualDescription" auto-grow rows="10"></v-textarea>
37+
<v-btn class="float-right" color="primary" @click="processNaturalLanguage">
3838
Convert to Restricted language
3939
<v-icon class="ml-1" icon="mdi-arrow-right" />
4040
</v-btn>
4141
</v-container>
4242
</v-tabs-window-item>
4343

4444
<v-tabs-window-item value="restricted" class="flex-fill">
45-
<v-container class="d-flex flex-column" style="height: 100%;">
45+
<v-container>
4646
<p class="mb-2">Restricted natural language:</p>
47-
<prism-editor class="editor flex-grow-1 line-numbers" v-model="restrictedLanguage"
48-
:highlight="highlighter" :line-numbers="false"></prism-editor>
49-
<div v-if="syntaxErrors.length > 0">
50-
<p class="text-h6">Syntax Error</p>
47+
<RestrictedLanguageVisualizer
48+
v-model="restrictedLanguage"
49+
></RestrictedLanguageVisualizer>
50+
<v-alert v-if="syntaxErrors.length > 0"
51+
border="top"
52+
type="error"
53+
variant="outlined"
54+
class="mb-3"
55+
title="Syntax Error"
56+
>
5157
<pre v-html="syntaxErrors.join('\n')"></pre>
52-
</div>
53-
<v-btn class="align-self-end" color="primary" @click="processRestrictedNaturalLanguage">
58+
</v-alert>
59+
<v-btn class="float-right" color="primary" @click="processRestrictedNaturalLanguage">
5460
Convert to model
5561
<v-icon class="ml-1" icon="mdi-arrow-right" />
5662
</v-btn>
@@ -76,21 +82,14 @@
7682

7783
<script>
7884
import ProcessVisualizer from '../components/ProcessVisualizer.vue'
79-
80-
import { PrismEditor } from "vue-prism-editor";
81-
import { highlight, languages } from "prismjs/components/prism-core";
82-
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
83-
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
84-
import "vue-prism-editor/dist/prismeditor.min.css";
85-
import "../highlights/prism-vs.css";
86-
import "../highlights/businessprocess.js";
85+
import RestrictedLanguageVisualizer from '../components/RestrictedLanguageVisualizer.vue';
8786
8887
import { getNlTextConvertedToDialect, getConvertedText, checkSyntax } from '../converters/businessprocesses';
8988
9089
export default {
9190
name: 'BusinessProcess',
9291
components: {
93-
ProcessVisualizer, PrismEditor
92+
ProcessVisualizer, RestrictedLanguageVisualizer
9493
},
9594
data: () => ({
9695
tab: null,
@@ -157,24 +156,4 @@ export default {
157156
}
158157
}
159158
</script>
160-
161-
<style>
162-
.editor {
163-
background: #f6f6f6;
164-
font-family: Roboto, sans-serif;
165-
font-size: 16px;
166-
line-height: 1.5;
167-
padding: 16px;
168-
margin-bottom: 20px;
169-
border-bottom: 1px solid #A5A5A5;
170-
}
171-
172-
.prism-editor__textarea:focus {
173-
outline: none;
174-
}
175-
176-
.prism-editor__line-number {
177-
font-style: normal !important;
178-
color: #23799373 !important;
179-
}
180-
</style>
159+
<

0 commit comments

Comments
 (0)