Merge pull request #52 from lars-reimann/ReadMoreAktualisieren

Read more aktualisieren
Safe-DS · Jun 18, 2021 · d96db9e · d96db9e
2 parents ad99a4c + d9f54fc
commit d96db9e
Show file tree

Hide file tree

Showing 10 changed files with 475 additions and 255,901 deletions.
diff --git a/client/package.json b/client/package.json
@@ -8,7 +8,9 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-markdown": "^6.0.2",
     "react-scripts": "4.0.3",
+    "remark-gfm": "^1.0.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

diff --git a/client/src/Components/ParameterView/DocumentationText.tsx b/client/src/Components/ParameterView/DocumentationText.tsx
@@ -1,22 +1,32 @@
 import React, {useState} from "react";
 import "./ParameterView.css";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import classNames from "classnames";
 
 // @ts-ignore
 const DocumentationText = ({inputText}) => {
 
-    const [readMore,setReadMore] = useState(false);
-    const moreTextOption = inputText.length > 50
+    const shortenedText = inputText.split("\n")[0];
+    const hasMultipleLines = shortenedText !== inputText;
 
-    const linkName = readMore ? '[Read less]' : '[Read more]'
+    const [readMore, setReadMore] = useState(false);
+
+    const cssClasses = classNames(
+        "read-more-button",
+        {
+            "pl-1-5rem": !hasMultipleLines,
+        }
+    );
 
     return (
-        <div className="documentation-text">
-            <p>{!readMore && inputText.substr(0, 50)}
-                {readMore && inputText}
-                <button className="read-more-button" onClick={()=>{setReadMore(!readMore)}}>
-                    {moreTextOption && linkName}
-                </button>
-            </p>
+        <div className="docu-paragraph" onClick={() => {
+            setReadMore(!readMore)
+        }}>
+            {!readMore && hasMultipleLines && "▶"}
+            {readMore && hasMultipleLines && "▼"}
+            <ReactMarkdown className={cssClasses} children={readMore ? inputText : shortenedText}
+                           remarkPlugins={[remarkGfm]}/>
 
         </div>
     );

diff --git a/client/src/Components/ParameterView/ParameterNode.tsx b/client/src/Components/ParameterView/ParameterNode.tsx
@@ -8,11 +8,11 @@ type ParameterProps = {inputParameter: PythonParameter}
 
 const ParameterNode = ({inputParameter}: ParameterProps) => {
 
-    const hasDescription = !!inputParameter.docstring;
+    const hasDescription = !!inputParameter.description;
 
     return (
         <div className="parametersList">
-            <span className="parameter-header">
+            <div className="parameter-header">
                 <h4 className={"parameter-name"}>{inputParameter?.name}</h4>
                 <Dropdown>
                     <Dropdown.Toggle size="sm" variant="outline-primary">
@@ -23,14 +23,14 @@ const ParameterNode = ({inputParameter}: ParameterProps) => {
                         <Dropdown.Item eventKey="enum">@Enum</Dropdown.Item>
                     </Dropdown.Menu>
                 </Dropdown>
-            </span>
+            </div>
             {
                 hasDescription &&
-                <DocumentationText inputText={inputParameter?.docstring}/>
+                <DocumentationText inputText={inputParameter?.description}/>
             }
             {
                 !hasDescription &&
-                <p>No Documentation available</p>
+                <p className="pl-1-5rem">No Documentation available</p>
             }
 
         </div>

diff --git a/client/src/Components/ParameterView/ParameterView.css b/client/src/Components/ParameterView/ParameterView.css
@@ -3,14 +3,17 @@
     position: -webkit-sticky;
     position: sticky;
     top: 0;
+    overflow-x: hidden;
 }
 
 .parameterViewDiv h2{
     padding-top: 1rem;
+    padding-left: 1rem;
 }
 
 .parameterViewDiv h5{
     padding-top: 1rem;
+    padding-left: 1rem;
 }
 
 .parameterViewDiv a{
@@ -22,12 +25,22 @@
     padding-bottom: .5rem;
 }
 
+.docuTextHidden {
+    text-overflow: ellipsis;
+}
+
+.docu-paragraph{
+    display: flex;
+    justify-content: flex-start;
+}
+
 .parameter-header {
+    display: flex;
+    justify-content: flex-start;
     font-weight: bold;
 }
 
 .parameter-name {
-    float: left;
     margin-right: 15px;
 }
 
@@ -41,15 +54,11 @@
 }
 
 .read-more-button {
+    text-align: left;
     background: none!important;
     border: none;
-    /*padding: 0!important;*/
     padding-left: 0.5rem;
-    /*optional*/
     font-family: arial, sans-serif;
-    /*input has OS specific font-family*/
-    color: #069;
-    text-decoration: underline;
     cursor: pointer;
 }
 

diff --git a/client/src/Components/TreeView/TreeView.tsx b/client/src/Components/TreeView/TreeView.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Tree from "../Tree/Tree";
 import './tree-view.css';
-import packageJson from "../../sklearn.json";
+import packageJson from "../../data/sklearn_new_schema.json";
 import PythonPackageBuilder from "../../model/PythonPackageBuilder";
 
 type TreeViewProps = {