Experiment with new Custom Component as Section Row Item for Animal M…

…odel (#143) * Updated Rosalution to have the prototype of turning a csv into a table in html * CSV to Table prototype component
uab-cgds-worthey · Oct 13, 2023 · d4e3b88 · d4e3b88
1 parent afdfbca
commit d4e3b88
Show file tree

Hide file tree

Showing 12 changed files with 634 additions and 0 deletions.
diff --git a/docs/prototypes/csv-to-table-prototype/.gitignore b/docs/prototypes/csv-to-table-prototype/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/docs/prototypes/csv-to-table-prototype/README.md b/docs/prototypes/csv-to-table-prototype/README.md
@@ -0,0 +1,21 @@
+# Vue Prototype - CSV to Table
+
+## Install
+
+yarn install
+
+## Run
+
+yarn dev
+
+## Example Table Setups
+
+heading1,heading2,heading3,heading4,heading5
+value1_1,value2_1,value3_1,value4_1,value5_1
+value1_2,value2_2,value3_2,value4_2,value5_2
+
+columnA,columnB,columnC
+"Susan",41,a
+"Mike",5,b
+"Jake",33,c
+"Jill",30,d
diff --git a/docs/prototypes/csv-to-table-prototype/index.html b/docs/prototypes/csv-to-table-prototype/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <title>CSV to Table</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/docs/prototypes/csv-to-table-prototype/package.json b/docs/prototypes/csv-to-table-prototype/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "csv-to-table-prototype",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/docs/prototypes/csv-to-table-prototype/public/vite.svg b/docs/prototypes/csv-to-table-prototype/public/vite.svg
diff --git a/docs/prototypes/csv-to-table-prototype/src/App.vue b/docs/prototypes/csv-to-table-prototype/src/App.vue
@@ -0,0 +1,7 @@
+<script setup>
+import CSVtoTable from './components/CSVtoTable.vue'
+</script>
+
+<template>
+  <CSVtoTable/>
+</template>
diff --git a/docs/prototypes/csv-to-table-prototype/src/components/CSVtoTable.vue b/docs/prototypes/csv-to-table-prototype/src/components/CSVtoTable.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="rosalution-section-container">
+      <div class="rosalution-section-header">
+      <h2 class="rosalution-section-header-text">
+          Animal Models
+      </h2>
+      </div>
+      <div class="rosalution-section-seperator"></div>
+      <div class="section-content">
+          <br>
+          <textarea style="width: 400px; height: 100px;" v-model="modelText"/>
+          <p  v-html="convertToTable"></p>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'csv-to-table',
+  data() {
+      return {
+          section_toggle: 'animal models' + '_collapse',
+          modelText: ''
+      }
+  },
+  computed: {
+      convertToTable() {
+        if (this.modelText == '')
+            return
+        
+        var data = this.modelText
+        var lines = data.split("\n"), output = [], i;
+        
+        for (i = 0; i < lines.length; i++)
+            output.push(
+                "<tr><td>"
+                + lines[i].split(",").join("</td><td>")
+                + "</td></tr>"
+            );
+
+        return `<table>` + output.join("") + `</table>`;
+      }
+    }
+}
+</script>
+
+<!--
+    The styling doesn't appear to work if it's scoped,
+    which means anything with this class will be affected
+    within Rosalution
+-->
+<style>
+
+table, th, td {
+  border: 1px solid;
+}
+
+</style>
diff --git a/docs/prototypes/csv-to-table-prototype/src/main.js b/docs/prototypes/csv-to-table-prototype/src/main.js
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+
+import './styles/main.css';
+import './styles/rosalution.css';
+
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/docs/prototypes/csv-to-table-prototype/src/styles/main.css b/docs/prototypes/csv-to-table-prototype/src/styles/main.css
@@ -0,0 +1,113 @@
+/** Variables **/
+
+html {   
+  --rosalution-grey-200: #C4C4C4; 
+  --rosalution-grey-300: #A1A1A1;
+  --rosalution-grey-100: #E7E6E6;
+  --rosalution-grey-50: #F6F6F6;
+  --rosalution-grey-000: #F1F1F1;
+  --rosalution-black: black;
+  --rosalution-white: white;
+
+  --primary-background-color: #F3F5F9;
+  --secondary-background-color: var(--rosalution-white);
+
+  --content-border-radius: 10px;
+  --input-border-radius: 15px;
+  --button-border-radius: 25px;
+
+  --modal-background-z-index: 10;
+  --modal-container-z-index: 999;
+
+  --p-0: 0rem;
+  --p-005: 0.04rem;
+  --p-05: 0.125rem;
+  --p-1: 0.25rem;
+  --p-5: 0.313rem;
+  --p-8: 0.5rem;
+  --p-10: 0.625rem;
+  --p-16: 1rem;
+
+  scroll-padding-top: 4rem;
+}
+
+/** General Styles **/
+
+body {
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 1.125rem; /* 18px */
+  background-color: var(--primary-background-color);
+}
+
+h2 { 
+  font-size: 1.5rem; /* 24px */
+  font-weight: 700;
+
+  margin-block: 0px;
+  margin-inline: 0px;
+}
+
+input,
+textarea {
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 1.125rem; /* 18px */
+  border-radius: var(--input-border-radius);
+  padding: var(--p-10);
+  border: 2px solid var(--rosalution-grey-100);
+  background-color: var(--secondary-background-color);
+  outline: none;
+}
+
+input:placeholder,
+textarea::placeholder {
+  color: var(--rosalution-grey-100);
+}
+
+input:hover,
+input:focus,
+textarea:hover,
+textarea:focus {
+  border: 2px solid var(--rosalution-purple-300);
+  box-shadow:  0px 0 0 4px rgba(69, 28, 137, 0.10);
+}
+
+/** Primary Grid Site Layout **/
+
+#app {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-auto-columns: 1fr;
+  padding: var(--p-10);
+}
+
+app-header {
+  grid-column: 1;
+}
+
+app-content {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+app-footer {
+  grid-column: 1;
+  grid-row: 3;
+  height: 3rem;
+}
+
+/** Typography **/
+
+.title {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
+}
+
+.header-text {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
+}
+
diff --git a/docs/prototypes/csv-to-table-prototype/src/styles/rosalution.css b/docs/prototypes/csv-to-table-prototype/src/styles/rosalution.css
@@ -0,0 +1,44 @@
+/** Variables **/
+
+.rosalution-input {
+  text-align: center;
+  font-size: 0.813rem;
+  margin-top: 1.563rem;
+  border: solid;
+  border-radius: 0.438rem;
+  border-color: var(--rosalution-grey-100);
+  width: 9.375rem;
+  height: 1.688rem;
+}
+
+.rosalution-input::placeholder {
+  color: var(--rosalution-grey-300);
+}
+
+.rosalution-section-container {
+  display: flex;
+  flex-direction: column;
+  padding: var(--p-10);
+  margin: var(--p-10);
+  border-radius: var(--content-border-radius);
+  background-color: var(--rosalution-white);
+}
+
+.rosalution-section-seperator {
+  height: var(--p-05);
+  background-color: var(--rosalution-grey-100);
+  border: solid .0469rem var(--rosalution-grey-100);
+}
+
+.rosalution-section-header {
+  display: flex;
+  align-items: flex-end;
+}
+
+.rosalution-section-center {
+  flex-grow: 2;
+}
+
+.rosalution-section-header-text {
+  margin: var(--p-05) var(--p-05) var(--p-0) var(--p-05);
+}
diff --git a/docs/prototypes/csv-to-table-prototype/vite.config.js b/docs/prototypes/csv-to-table-prototype/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})