mrc-5490 Add graph

app/static/package.json

@@ -31,6 +31,7 @@
         "@types/d3-format": "^3.0.1",
         "axios": "^0.26.0",
         "bootstrap": "^5.1.3",
+        "color": "^4.2.3",
         "csv-parse": "^5.2.1",
         "d3-format": "^3.1.0",
         "i18next": "^22.4.11",
@@ -50,6 +51,7 @@
     "devDependencies": {
         "@playwright/test": "1.37.0",
         "@types/bootstrap": "^5.2.6",
+        "@types/color": "^3.0.6",
         "@types/jest": "^27.4.0",
         "@types/markdown-it": "^12.2.3",
         "@types/plotly.js-basic-dist-min": "^2.12.1",

app/static/src/app/components/code/CodeTab.vue

@@ -15,9 +15,7 @@
         </div>
         <error-info :error="error"></error-info>
         <div class="mt-3">
-            <vertical-collapse v-if="showSelectedVariables" title="Select variables" collapse-id="select-variables">
-                <selected-variables></selected-variables>
-            </vertical-collapse>
+            <graph-configs-collapsible></graph-configs-collapsible>
         </div>
     </div>
 </template>
@@ -32,19 +30,18 @@ import CodeEditor from "./CodeEditor.vue";
 import { ModelAction } from "../../store/model/actions";
 import userMessages from "../../userMessages";
 import ErrorInfo from "../ErrorInfo.vue";
-import SelectedVariables from "./SelectedVariables.vue";
-import VerticalCollapse from "../VerticalCollapse.vue";
 import GenericHelp from "../help/GenericHelp.vue";
+import GraphConfigsCollapsible from "../graphConfig/GraphConfigsCollapsible.vue";
 
 export default defineComponent({
     name: "CodeTab",
     components: {
+        GraphConfigsCollapsible,
         GenericHelp,
-        SelectedVariables,
+
         ErrorInfo,
         CodeEditor,
-        VueFeather,
-        VerticalCollapse
+        VueFeather
     },
     setup() {
         const store = useStore();
@@ -55,8 +52,6 @@ export default defineComponent({
         const validIcon = computed(() => (codeIsValid.value ? "check" : "x"));
         const iconValidatedClass = computed(() => (codeIsValid.value ? "text-success" : "text-danger"));
         const iconClass = computed(() => (codeValidating.value ? "code-validating-icon" : iconValidatedClass.value));
-        const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-        const showSelectedVariables = computed(() => allVariables.value.length && !store.state.model.compileRequired);
         const appIsConfigured = computed(() => store.state.configured);
         const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
         const loadingMessage = userMessages.code.isValidating;
@@ -69,7 +64,6 @@ export default defineComponent({
             iconClass,
             compile,
             error,
-            showSelectedVariables,
             codeHelp,
             codeValidating,
             loadingMessage