Ideogram: App Improvements

assets/ideogram-style.css

@@ -18,16 +18,30 @@
 }
 
 .ideogram-column {
-    max-height: 78vh;
+    padding-left: 0.5%;
+    max-height: 83vh;
     overflow-y: auto;
 }
 
 .ideogram-custom {
-    max-height: 78vh;
+    max-height: 83vh;
     overflow-y: auto;
     position: relative;
 }
 
 .ideogram-column-content {
     width: 100%;
+}
+
+.ideogram-homology-inputs {
+    max-width: 100%;
+}
+
+.ideogram-databox-parameters {
+    border: 1px solid #D1D1D1;
+    border-radius: 4px;
+    margin-top: 5%;
+    padding-left: 4%;
+    padding-top: 3%;
+    padding-bottom: 3%;
 }

dash_bio/_imports_.py

@@ -3,10 +3,9 @@
 from .NeedlePlot import NeedlePlot
 from .SequenceViewer import SequenceViewer
 
-
 __all__ = [
     "DashCircos",
     "DashIdeogram",
     "NeedlePlot",
-    "SequenceViewer",
-]
+    "SequenceViewer"
+]

src/lib/components/DashIdeogram.react.js

@@ -199,12 +199,11 @@ export default class DashIdeogram extends Component {
     setConfig() {
         // Pass in all props into config except setProps
         let config = omit(['setProps'], this.props);
-
         // Event handlers
         config.onDidRotate = this.onRotateHandler
         config.onBrushMove = this.props.brush ? this.onBrushHandler : null
         config.onLoad = this.onLoadHandler
-        config.container = '#ideogram-container' + '-' + this.props.id
+        config.container = '#ideogram-container-' + this.props.id
 
         return config;
     }
@@ -244,7 +243,7 @@ export default class DashIdeogram extends Component {
             <div id={this.props.id} className={this.props.className} style={this.props.style}>
                 <div
                     {...omit(['setProps'], this.props)}
-                    id={'ideogram-container' + '-' + this.props.id}
+                    id={'ideogram-container-' + this.props.id}
                     onMouseOver={this.onMouseOverHandler}
                 ></div>
             </div>