<commit_before><template>
  <div class="editor-container">
    <div class="side-box">
      <div id="source-code-inspection"></div>
      <div id="online-users"></div>
      <div id="outline-nodes"></div>
    </div>

    <div class="container code-editor editor-box" :data-meta-model-id="gdslProject.id" :data-dsl-type="dslType">
      <div class="panel panel-default">
        <div class="panel-heading">
          <span class="editor-title">{{ dslType }}</span>
          <span class="editor-button">
              <span class="label label-success js-save-successful" style="display: none">Saving succeed</span>
              <span class="label label-danger js-save-failed" style="display: none">Saving failed</span>
              <span class="js-save btn btn-sm btn-primary" title="Save Document">
                  Save <span class="glyphicon glyphicon-floppy-disk"></span>
              </span>
          </span>
        </div>
        <div class="panel-body editor-body">
          <div class="editor"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'MetamodelCodeEditor',
  data() {
    return {
      gdslProject: {
        id: "520ec611-1dbd-4a93-bf6c-2b316cb67f0b",
        name: "testproject",
        concept: "Concept",
        diagram: "diagram",
        shape: "shape",
        style: "style",
        validator: "None"
      },
      dslType: ''
    }
  },
  methods: {
    initializeEditor: function () {
      $('.code-editor').each((i, e) => new CodeEditor(e, $(e).data('meta-model-id'), $(e).data('dsl-type')));
    }
  },
  created() {
    this.gdslProject.id = this.$route.params.id
    this.dslType = this.$route.params.dslType
  },
  mounted() {
    this.initializeEditor()
  },
  watch: {
    '$route': 'initializeEditor'
  }
}

import $ from "jquery";
import 'brace';
import 'brace/ext/language_tools';
import 'brace/theme/xcode';
import 'brace/mode/scala';
import {styleLanguage, diagramLanguage, shapeLanguage} from './utils/ace-grammar';
import {SourceCodeInspector} from "./utils/source-code-inspector";
import {CodeOutline} from "./utils/code-outline";
import {OnlineSocket} from "./utils/online-socket";
import axios from 'axios'


const modesForModel = {
  'diagram': diagramLanguage,
  'shape': shapeLanguage,
  'style': styleLanguage
};

class CodeEditor {
  constructor(element, metaModelId, dslType) {
    this.$element = $(element);
    this.metaModelId = metaModelId;
    this.dslType = dslType;
    this.editor = this.initAceEditor(element.querySelector('.editor'));
    this.loadSourceCode();
    this.$element.on('click', '.js-save', () => this.saveSourceCode(this.editor.getValue()));
    this.sourceCodeInspector = new SourceCodeInspector(element, metaModelId, dslType, this.editor);
    this.sourceCodeInspector.runInspection();
    this.codeOutline = new CodeOutline(element, metaModelId, dslType, this.editor);
    let area = "codeEditor-" + dslType + "-" + metaModelId;
    this.onlineSocket = new OnlineSocket(area);
  }

  initAceEditor(element) {
    const editor = ace.edit(element);
    editor.setTheme("ace/theme/xcode");
    editor.getSession().setMode("ace/mode/scala");
    editor.$blockScrolling = Number.PositiveInfinity;
    editor.setOptions({
      "enableBasicAutocompletion": true,
      "enableLiveAutocompletion": true
    });
    return editor;
  }

  loadSourceCode() {
    axios.get(
        'http://localhost:9000/rest/v1/meta-models/' + this.metaModelId,
        {withCredentials: true}).then(
        (response) => {
          this.setAceEditorContent(response.data[this.dslType]);
          this.codeOutline.createCodeOutline();
        },
        (error) => console.log('Error loading MetaModel ' + this.metaModelId + ': ' + error )
    )
  }

  setAceEditorContent(content) {
    const session = ace.createEditSession(content, modesForModel[this.dslType]);
    this.editor.setSession(session);
  }

  saveSourceCode(code) {
    /*fetch(`http://localhost:9000/rest/v1/meta-models/${this.metaModelId}/${this.dslType}`, {
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'PUT',
      credentials: 'same-origin',
      body: JSON.stringify(code)
    })
        .then(() => {
          this.toggleSaveNotifications('.js-save-successful');
          this.sourceCodeInspector.runInspection();
        })
        .catch(err => {
          this.toggleSaveNotifications('.js-save-failed');
          console.error(`Save failed`, err);
        });*/
    axios.put(
        'http://localhost:9000/rest/v1/meta-models/' + this.metaModelId + '/' + this.dslType,
        JSON.stringify(code),
        {
          withCredentials: true,
          headers: {
            'Content-Type': 'application/json'
          }
        }
    ).then(
        (response) => {
          this.toggleSaveNotifications('.js-save-successful');
          this.sourceCodeInspector.runInspection();
        },
        (error) => {
          this.toggleSaveNotifications('.js-save-failed');
          console.error(`Save failed`, error);
        }
    )
  }

  toggleSaveNotifications(element) {
    this.$element.find(element).stop(true, true).fadeIn(400).delay(3000).fadeOut(400);
  }

}
<commit_msg>Remove unused JavaScript in CodeEditor<commit_after><template>
  <div class="editor-container">
    <div class="side-box">
      <div id="source-code-inspection"></div>
      <div id="online-users"></div>
      <div id="outline-nodes"></div>
    </div>

    <div class="container code-editor editor-box" :data-meta-model-id="gdslProject.id" :data-dsl-type="dslType">
      <div class="panel panel-default">
        <div class="panel-heading">
          <span class="editor-title">{{ dslType }}</span>
          <span class="editor-button">
              <span class="label label-success js-save-successful" style="display: none">Saving succeed</span>
              <span class="label label-danger js-save-failed" style="display: none">Saving failed</span>
              <span class="js-save btn btn-sm btn-primary" title="Save Document">
                  Save <span class="glyphicon glyphicon-floppy-disk"></span>
              </span>
          </span>
        </div>
        <div class="panel-body editor-body">
          <div class="editor"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'MetamodelCodeEditor',
  data() {
    return {
      gdslProject: {
        id: "520ec611-1dbd-4a93-bf6c-2b316cb67f0b",
        name: "testproject",
        concept: "Concept",
        diagram: "diagram",
        shape: "shape",
        style: "style",
        validator: "None"
      },
      dslType: ''
    }
  },
  methods: {
    initializeEditor: function () {
      $('.code-editor').each((i, e) => new CodeEditor(e, $(e).data('meta-model-id'), $(e).data('dsl-type')));
    }
  },
  created() {
    this.gdslProject.id = this.$route.params.id
    this.dslType = this.$route.params.dslType
  },
  mounted() {
    this.initializeEditor()
  },
  watch: {
    '$route': 'initializeEditor'
  }
}

import $ from "jquery";
import 'brace';
import 'brace/ext/language_tools';
import 'brace/theme/xcode';
import 'brace/mode/scala';
import {styleLanguage, diagramLanguage, shapeLanguage} from './utils/ace-grammar';
import {SourceCodeInspector} from "./utils/source-code-inspector";
import {CodeOutline} from "./utils/code-outline";
import {OnlineSocket} from "./utils/online-socket";
import axios from 'axios'


const modesForModel = {
  'diagram': diagramLanguage,
  'shape': shapeLanguage,
  'style': styleLanguage
};

class CodeEditor {
  constructor(element, metaModelId, dslType) {
    this.$element = $(element);
    this.metaModelId = metaModelId;
    this.dslType = dslType;
    this.editor = this.initAceEditor(element.querySelector('.editor'));
    this.loadSourceCode();
    this.$element.on('click', '.js-save', () => this.saveSourceCode(this.editor.getValue()));
    this.sourceCodeInspector = new SourceCodeInspector(element, metaModelId, dslType, this.editor);
    this.sourceCodeInspector.runInspection();
    this.codeOutline = new CodeOutline(element, metaModelId, dslType, this.editor);
    let area = "codeEditor-" + dslType + "-" + metaModelId;
    this.onlineSocket = new OnlineSocket(area);
  }

  initAceEditor(element) {
    const editor = ace.edit(element);
    editor.setTheme("ace/theme/xcode");
    editor.getSession().setMode("ace/mode/scala");
    editor.$blockScrolling = Number.PositiveInfinity;
    editor.setOptions({
      "enableBasicAutocompletion": true,
      "enableLiveAutocompletion": true
    });
    return editor;
  }

  loadSourceCode() {
    axios.get(
        'http://localhost:9000/rest/v1/meta-models/' + this.metaModelId,
        {withCredentials: true}).then(
        (response) => {
          this.setAceEditorContent(response.data[this.dslType]);
          this.codeOutline.createCodeOutline();
        },
        (error) => console.log('Error loading MetaModel ' + this.metaModelId + ': ' + error )
    )
  }

  setAceEditorContent(content) {
    const session = ace.createEditSession(content, modesForModel[this.dslType]);
    this.editor.setSession(session);
  }

  saveSourceCode(code) {
    axios.put(
        'http://localhost:9000/rest/v1/meta-models/' + this.metaModelId + '/' + this.dslType,
        JSON.stringify(code),
        {
          withCredentials: true,
          headers: {
            'Content-Type': 'application/json'
          }
        }
    ).then(
        (response) => {
          this.toggleSaveNotifications('.js-save-successful');
          this.sourceCodeInspector.runInspection();
        },
        (error) => {
          this.toggleSaveNotifications('.js-save-failed');
          console.error(`Save failed`, error);
        }
    )
  }

  toggleSaveNotifications(element) {
    this.$element.find(element).stop(true, true).fadeIn(400).delay(3000).fadeOut(400);
  }

}

{'fraction_non_alphanumeric': 0.16049134111961338, 'fraction_numerical': 0.00815545710833669, 'mean_word_length': 2.8203846153846155, 'pattern_counts': {'":': 4, '<': 73, '<?xml version=': 0, '>': 87, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5453093', 'n_tokens_mistral': 3188, 'n_tokens_neox': 3124, 'n_words': 516}