irie 0.0.50__py3-none-any.whl → 0.0.52__py3-none-any.whl

irie/apps/templates/components/json-table.html

@@ -0,0 +1 @@
+

irie/apps/templates/includes/paginate.js

@@ -1,3 +1,9 @@
+//===----------------------------------------------------------------------===#
+//
+//         STAIRLab -- STructural Artificial Intelligence Laboratory
+//
+//===----------------------------------------------------------------------===#
+//
 class TablePagination {
     constructor(tableId, paginationId, searchInputId, rowsPerPage = 9) {
         this.table = document.getElementById(tableId);

irie/apps/templates/includes/scripts.html

@@ -3,32 +3,19 @@
 <script src="{{ ASSETS_ROOT }}/vendor/@popperjs/core/dist/umd/popper.min.js"></script>
 <script src="{{ ASSETS_ROOT }}/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
 <script>
-    var win = navigator.platform.indexOf('Win') > -1;
-    if (win && document.querySelector('#sidenav-scrollbar')) {
-      var options = {
-        damping: '0.5'
-      }
-      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
-    }
+var win = navigator.platform.indexOf('Win') > -1;
+if (win && document.querySelector('#sidenav-scrollbar')) {
+  var options = {
+    damping: '0.5'
+  }
+  Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
+}
 </script>
 
-{% comment %}
-<script src="{{ ASSETS_ROOT }}/vendor/onscreen/dist/on-screen.umd.min.js"></script>
-<script src="{{ ASSETS_ROOT }}/vendor/nouislider/distribute/nouislider.min.js"></script>
-<script src="{{ ASSETS_ROOT }}/vendor/vanillajs-datepicker/dist/js/datepicker.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
-<script src="{{ ASSETS_ROOT }}/vendor/vanillajs-datepicker/dist/js/datepicker.min.js"></script>
-{% endcomment %}
-
 <script src="{{ ASSETS_ROOT }}/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
-
 <script src="{{ ASSETS_ROOT }}/vendor/sweetalert2/dist/sweetalert2.all.min.js"></script>
-
 <script src="{{ ASSETS_ROOT }}/vendor/notyf/notyf.min.js"></script>
 
-<!-- Simplebar -->
-<!-- <script src="{{ ASSETS_ROOT }}/vendor/simplebar/dist/simplebar.min.js"></script> -->
-
 <!-- Github buttons -->
 <script async defer src="https://buttons.github.io/buttons.js"></script>
 

irie/apps/templates/inventory/asset-on-map.html

@@ -13,12 +13,12 @@
     </style>
     {% if viewer == "three" %}
     <script type="importmap">
-        {
-            "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
-            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
-            }
+    {
+        "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
+        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
         }
+    }
     </script>
     {% else %}
     <script src="https://unpkg.com/babylonjs@5.42.2/babylon.js"></script>

irie/apps/templates/inventory/sensor-upload.html

@@ -46,149 +46,113 @@ input[type="number"]::-webkit-outer-spin-button {
 
 
 <div class="container">
-    <div class="row align-right">
+  <div class="row align-right">
         
 <!-- Left Side: Sensor Form -->
-<div class="col-md-6" >
-<form method="post">
-    {% csrf_token %}
-
-    <fieldset class="mb-4">
-        <legend>Sensor Group</legend>
-        {{ group_form.as_p }}
-        <div id="datum-info" class="mb-4 p-2 border rounded bg-light" style="display: none;">
-            <strong>Datum Location (x;y;z):</strong> <span id="datum-location">_, _, _</span> <br>
-            <strong>Datum Orientation (dx;dy;dz):</strong> <span id="datum-orientation">_, _, _</span>
-        </div>
-    </fieldset>
-
-    <fieldset>
-        <legend>Sensors</legend>
-        {{ formset.management_form }}
-        <div id="formset-container" class="container">
-                {% for form in formset %}
-                    <div class="sensor-form mb-4">
-                        <div class="row mb-3">
-                            <div class="input-group">
-                                <span class="input-group-text col-md-2 text-dark border-dark">{{ form.name.label }}</span>
-                                <input id="{{form.name.html_name}}" type="text" name="{{form.name.html_name}}" class="form-control col-md-4 text-dark border-dark" required></input>
+    <div class="col-md-4" >
+      <form method="post">
+        {% csrf_token %}
+
+        <fieldset class="mb-4">
+            <legend>Sensor Group</legend>
+            {{ group_form.as_p }}
+            <div id="datum-info" class="mb-4 p-2 border rounded bg-light" style="display: none;">
+                <strong>Datum Location (x;y;z):</strong> <span id="datum-location">_, _, _</span> <br>
+                <strong>Datum Orientation (dx;dy;dz):</strong> <span id="datum-orientation">_, _, _</span>
+            </div>
+        </fieldset>
+
+        <fieldset>
+            <legend>Sensors</legend>
+            {{ formset.management_form }}
+            <div id="formset-container" class="container">
+                    {% for form in formset %}
+                        <div class="sensor-form mb-4">
+                            <div class="row mb-3">
+                                <div class="input-group">
+                                    <span class="input-group-text col-md-2 text-dark border-dark">{{ form.name.label }}</span>
+                                    <input id="{{form.name.html_name}}" type="text" name="{{form.name.html_name}}" class="form-control col-md-4 text-dark border-dark" required></input>
+                                </div>
                             </div>
+                            <div class="row"><div class="col-md-12 d-flex align-items-center mb-3">
+                                <div class="input-group">
+                                    <span class="input-group-text col-md-4 text-gray">{{ form.x.label }}</span>
+                                    <input id="{{form.x.html_name}}" type="number" step="any" name="{{form.x.html_name}}" class="form-control col-md-8 text-gray" required></input>
+                                </div>
+                                <div class="input-group">
+                                    <span class="input-group-text col-md-4 text-gray">{{ form.y.label }}</span>
+                                    <input id="{{form.y.html_name}}" type="number" step="any" name="{{form.y.html_name}}" class="form-control col-md-8 text-gray" required></input>
+                                </div>
+                                <div class="input-group">
+                                    <span class="input-group-text col-md-4 text-gray">{{ form.z.label }}</span>
+                                    <input id="{{form.z.html_name}}" type="number" step="any" name="{{form.z.html_name}}" class="form-control col-md-8 text-gray" required></input>
+                                </div>
+                            </div></div>
+                            <div class="row"><div class="col-md-12 d-flex align-items-center mb-3">
+                                <div class="input-group">
+                                    <span class="input-group-text col-md-5 text-gray">{{ form.dx.label }}</span>
+                                    <input id="{{form.dx.html_name}}" type="number" step="any" name="{{form.dx.html_name}}" class="form-control col-md-8 text-gray" required></input>
+                                </div>
+                                <div class="input-group">
+                                    <span class="input-group-text col-md-5 text-gray">{{ form.dy.label }}</span>
+                                    <input id="{{form.dy.html_name}}" type="number" step="any" name="{{form.dy.html_name}}" class="form-control col-md-8 text-gray" required></input>
+                                </div>
+                                <div class="input-group">
+                                    <span class="input-group-text col-md-5 text-gray">{{ form.dz.label }}</span>
+                                    <input id="{{form.dz.html_name}}" type="number" step="any" name="{{form.dz.html_name}}" class="form-control col-md-8 text-gray" required></input>
+                                </div>
+                            </div></div>
+                            
+                            <button class="remove-form btn btn-danger btn-sm ml-2">Remove</button>
                         </div>
-                        <div class="row"><div class="col-md-12 d-flex align-items-center mb-3">
-                            <div class="input-group">
-                                <span class="input-group-text col-md-4 text-gray">{{ form.x.label }}</span>
-                                <input id="{{form.x.html_name}}" type="number" step="any" name="{{form.x.html_name}}" class="form-control col-md-8 text-gray" required></input>
-                            </div>
-                            <div class="input-group">
-                                <span class="input-group-text col-md-4 text-gray">{{ form.y.label }}</span>
-                                <input id="{{form.y.html_name}}" type="number" step="any" name="{{form.y.html_name}}" class="form-control col-md-8 text-gray" required></input>
-                            </div>
-                            <div class="input-group">
-                                <span class="input-group-text col-md-4 text-gray">{{ form.z.label }}</span>
-                                <input id="{{form.z.html_name}}" type="number" step="any" name="{{form.z.html_name}}" class="form-control col-md-8 text-gray" required></input>
-                            </div>
-                        </div></div>
-                        <div class="row"><div class="col-md-12 d-flex align-items-center mb-3">
-                            <div class="input-group">
-                                <span class="input-group-text col-md-5 text-gray">{{ form.dx.label }}</span>
-                                <input id="{{form.dx.html_name}}" type="number" step="any" name="{{form.dx.html_name}}" class="form-control col-md-8 text-gray" required></input>
-                            </div>
-                            <div class="input-group">
-                                <span class="input-group-text col-md-5 text-gray">{{ form.dy.label }}</span>
-                                <input id="{{form.dy.html_name}}" type="number" step="any" name="{{form.dy.html_name}}" class="form-control col-md-8 text-gray" required></input>
-                            </div>
-                            <div class="input-group">
-                                <span class="input-group-text col-md-5 text-gray">{{ form.dz.label }}</span>
-                                <input id="{{form.dz.html_name}}" type="number" step="any" name="{{form.dz.html_name}}" class="form-control col-md-8 text-gray" required></input>
-                            </div>
-                        </div></div>
-                        
-                        <button class="remove-form btn btn-danger btn-sm ml-2">Remove</button>
-                    </div>
-                {% endfor %}
-        </div>
-
-        <button id="add-form" class="btn btn-sm button btn-outline-primary mb-3">Add Sensor</button>
-    </fieldset>
-    
-    <button type="button" id="plot-btn" class="btn btn-info btn-sm mb-3">Plot</button>
-
-    <button type="submit" class="btn btn-sm button btn-success mb-3">Submit</button>
-</form>
-</div>
-<!-- Right Side: Asset Geometry -->
-<div class="col-md-6">
-    <h4>Geometry</h4>
-{%if false %}
-    {% if asset.cesmd %}
-    <div id="sensors" class="card bg-white-100 border-1 rounded-0 shadow mb-3">
-        <div class="card-body text-center p-2">
-            <img src="{{ ASSETS_ROOT }}/inventory/ll{{ asset.cesmd|slice:"2:" }}.svg" class="img-fluid">
-        </div>
-        <div class="card-footer text-center">
-            <span class="small">
-                Source: <a rel="nofollow noreferrer" href="https://www.strongmotioncenter.org/cgi-bin/CESMD/stationhtml.pl?stationID={{asset.cesmd}}&network=CGS">CGS</a>
-            </span>
-        </div>
+                    {% endfor %}
+            </div>
+            <button id="add-form" class="btn btn-sm button btn-outline-primary mb-3">Add Sensor</button>
+        </fieldset>
+        
+        <button type="button" id="plot-btn" class="btn btn-info btn-sm mb-3">Plot</button>
+        <button type="submit" class="btn btn-sm button btn-success mb-3">Save</button>
+      </form>
     </div>
-    {% endif %}
 
-    <div id="rendering" class="card bg-white-100 border-1 rounded-0 shadow">
-        <div class="card-body text-center">
-            <model-viewer 
-                id="irie-viewer"
-                alt="3D Model" 
-                {% if asset.rendering %}
-                src="{{ asset.rendering }}" 
-                {% else %}
-                src="{{ ASSETS_ROOT }}/inventory/empty.glb" 
-                {% endif %}
-                camera-controls
-                interaction-prompt="none"
-                camera-orbit="0deg 75deg 2m" 
-                field-of-view="30deg"
-                style="width: 100%; height: 300px; background-color: #f0f0f0;">
-            </model-viewer>
-        </div>
-        <div class="card-footer text-center">
-            Powered by <a href="https://veux.io/">veux</a>
-        </div>
-    </div>
-{% else %}
-    {% if asset.cesmd %}
-    <div id="sensors" class="card bg-white-100 border-1 rounded-0 shadow mb-3">
-        <div class="card-body text-center p-2">
-            <img src="{{ ASSETS_ROOT }}/inventory/ll{{ asset.cesmd|slice:"2:" }}.svg" class="img-fluid">
-        </div>
-        <div class="card-footer text-center">
-            <span class="small">
-                Source: <a rel="nofollow noreferrer" href="https://www.strongmotioncenter.org/cgi-bin/CESMD/stationhtml.pl?stationID={{asset.cesmd}}&network=CGS">CGS</a>
-            </span>
+    <!-- Right Side: Asset Geometry -->
+    <div class="col-md-8">
+        <h4>Geometry</h4>
+        <div id="rendering" class="card bg-white-100 border-1 rounded-0 shadow">
+            {% if renderings %}
+            <div class="card-header d-sm-flex flex-row align-items-center flex-0">
+                <select id="id_rendering" class="form-select form-select-sm mb-3" name="rendering">
+                    {% for rendering in renderings %}
+                        <option value="{{ rendering.glb }}">{{ rendering.name }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            {% endif %}
+            <div class="card-body text-center" style="background-color: #f0f0f0;">
+                <div id="veux-container"
+                    style="width: 100%; height: 300px; background-color: #f0f0f0; margin: 0 auto;">
+                </div>
+            </div>
+            <div class="card-footer text-center">
+                Powered by <a href="https://veux.io/">veux</a>
+            </div>
         </div>
-    </div>
-    {% endif %}
 
-    <div id="rendering" class="card bg-white-100 border-1 rounded-0 shadow">
-        <div class="card-body text-center" style="background-color: #f0f0f0;">
-            <!-- Our Three.js container -->
-            <div id="veux-container"
-                 style="width: 100%; height: 300px; background-color: #f0f0f0; margin: 0 auto;">
+        {% if asset.cesmd %}
+        <div id="sensors" class="card bg-white-100 border-1 rounded-0 shadow mb-3">
+            <div class="card-body text-center p-2">
+                <img src="{{ ASSETS_ROOT }}/inventory/ll{{ asset.cesmd|slice:"2:" }}.svg" class="img-fluid">
+            </div>
+            <div class="card-footer text-center">
+                <span class="small">
+                    Source: <a rel="nofollow noreferrer" href="https://www.strongmotioncenter.org/cgi-bin/CESMD/stationhtml.pl?stationID={{asset.cesmd}}&network=CGS">CGS</a>
+                </span>
             </div>
         </div>
-        <div class="card-footer text-center">
-            Powered by <a href="https://veux.io/">veux</a>
-        </div>
+        {% endif %}
     </div>
-{% endif %}
+  </div>
 </div>
-
-    </div>
-</div>
-<!-- 
-<div id="plot-container" style="display: none;">
-    <h3>3D Sensor Plot</h3>
-    <div id="sensor-plot"></div>
-</div> -->
 {%endblock content %}
 
 
@@ -266,44 +230,7 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 </script>
 <script type="module">
-
-import * as THREE from 'three';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-
-function createArrow(origin, direction, length, color, headLength, headWidth, shaftRadius) {
-    const dir = direction.clone().normalize();
-
-    const shaftLength = length - headLength;
-
-    const arrowGroup = new THREE.Group();
-
-    const shaftGeometry = new THREE.CylinderGeometry(shaftRadius, shaftRadius, shaftLength, 16);
-    const shaftMaterial = new THREE.MeshStandardMaterial({ color: color });
-    const shaftMesh = new THREE.Mesh(shaftGeometry, shaftMaterial);
-
-    // CylinderGeometry is oriented along the Y-axis.
-    // Rotate it so it aligns with the group's local +Y (arrow "up").
-    // Then rotate the entire group to match `dir`.
-    shaftMesh.position.y = shaftLength / 2;  // move it so its base starts at y=0
-    arrowGroup.add(shaftMesh);
-
-    const headGeometry = new THREE.ConeGeometry(shaftRadius * 2, headLength, 16);
-    const headMaterial = new THREE.MeshStandardMaterial({ color: color });
-    const headMesh = new THREE.Mesh(headGeometry, headMaterial);
-
-    headMesh.position.y = shaftLength + headLength / 2;
-    arrowGroup.add(headMesh);
-
-    arrowGroup.position.copy(origin);
-
-    // 5) Rotate the entire group so that +Y in local space points along `dir`
-    const up = new THREE.Vector3(0, 1, 0);
-    const quaternion = new THREE.Quaternion().setFromUnitVectors(up, dir);
-    arrowGroup.quaternion.copy(quaternion);
-
-    return arrowGroup;
-}
+{% include "sensors/render-sensors.js" %}
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.getElementById("veux-container");
@@ -314,100 +241,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const modelPath = "";
     {% endif %}
 
-    // 1) SETUP SCENE
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(0xf0f0f0);
-
-    // 2) SETUP RENDERER
-    const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setPixelRatio(window.devicePixelRatio);
-    renderer.setSize(container.clientWidth, container.clientHeight);
-    // renderer.outputEncoding = THREE.sRGBEncoding; 
-    container.appendChild(renderer.domElement);
-
-    // 3) SETUP CAMERA
-    const camera = new THREE.PerspectiveCamera(
-        30,                                // fov
-        container.clientWidth / container.clientHeight,  // aspect
-        0.1,                               // near
-        1000                               // far
-    );
-    // Position: "0deg 75deg 2m" => we can interpret as an angle from horizontal
-    // Place the camera a bit above and away from the origin.
-    camera.position.set(0, 2, 2);
-    camera.lookAt(0, 0, 0);
-
-    // 4) ORBIT CONTROLS
-    const controls = new OrbitControls(camera, renderer.domElement);
-    controls.enableDamping = true;
-    controls.dampingFactor = 0.05;
-    controls.target.set(0, 0, 0);
-
-    // 5) LIGHTING (basic environment)
-    const ambientLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1.2);
-    scene.add(ambientLight);
-
-    const globalLight = new THREE.AmbientLight(0xffffff, 0.4);
-    scene.add(globalLight);
-
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-    directionalLight.position.set(5, 10, 7.5);
-    scene.add(directionalLight);
-
-    // 6) LOAD THE GLB MODEL (if asset.rendering is not empty)
-    if (modelPath) {
-        const loader = new GLTFLoader();
-        loader.load(modelPath, (gltf) => {
-            const model = gltf.scene;
-            scene.add(model);
-
-            // Compute bounding box
-            const box = new THREE.Box3().setFromObject(model);
-            const size = box.getSize(new THREE.Vector3()).length();
-            const center = box.getCenter(new THREE.Vector3());
-
-            // Adjust camera clipping
-            camera.near = size / 100;
-            camera.far  = size * 100;
-            camera.updateProjectionMatrix();
-
-            // Move camera so the model is nicely framed
-            camera.position.copy(center);
-            // Move the camera out some distance (play with the multiplier)
-            camera.position.x += size;  
-            camera.position.y += size;  
-            camera.position.z += size;  
-            camera.lookAt(center);
-
-
-            controls.target.copy(center);
-            controls.update();
-        },
-        undefined,
-        (error) => {
-            console.error('Error loading GLB:', error);
-        });
-
-    } else {
-        const axesHelper = new THREE.AxesHelper(1);
-        scene.add(axesHelper);
-    }
+    const scene = createSensorRenderer(container, modelPath);
 
-    // 7) HANDLE WINDOW RESIZE
-    window.addEventListener('resize', onWindowResize, false);
-    function onWindowResize() {
-        camera.aspect = container.clientWidth / container.clientHeight;
-        camera.updateProjectionMatrix();
-        renderer.setSize(container.clientWidth, container.clientHeight);
-    }
-
-    // 8) ANIMATE LOOP
-    function animate() {
-        requestAnimationFrame(animate);
-        controls.update();
-        renderer.render(scene, camera);
-    }
-    animate();
 
     const arrowObjects = [];
 

irie/apps/templates/networks/{networks.html → _networks.html}

@@ -33,7 +33,6 @@
     width: 150px;
     text-align: right;
 }
-
 .styled-input {
     flex: 1;
 }

irie/apps/templates/networks/networks.js

@@ -4,9 +4,11 @@
 //
 //===----------------------------------------------------------------------===//
 //
+// IRiE
+//
 let initializedTabs = [];
 
-function loadContent(tab, formData) {
+function fetchAndUpdateTab(tab, formData) {
 
     const contentDiv = document.getElementById(`${tab}-content`);
 
@@ -118,7 +120,7 @@ function addCorridorTab(corr) {
     const form = document.getElementById("tab1-form");
     let formData = new FormData(form);
     formData.append('corridor_input', corr);
-    loadContent(selectedTab, formData);
+    fetchAndUpdateTab(selectedTab, formData);
     return tabLink;
 }
 
@@ -211,7 +213,7 @@ function handleCorridorUpdate(event) {
   
     // Create a URLSearchParams object from the form data
     // and fetch the data for the selected tab
-    loadContent(tab, formData);
+    fetchAndUpdateTab(tab, formData);
 }
 
 
@@ -219,7 +221,7 @@ function handleCorridorUpdate(event) {
 document.addEventListener('DOMContentLoaded', function () {
     initializedTabs.push('tab1');
     
-    loadContent('tab1', new FormData(document.getElementById("tab1-form")));
+    fetchAndUpdateTab('tab1', new FormData(document.getElementById("tab1-form")));
 
     const tabs = document.querySelectorAll('.tab-link');
 

irie/apps/templates/prediction/asset-predictors.html

@@ -6,9 +6,7 @@
 ===----------------------------------------------------------------------===#
 
 Claudio Perez, Summer 2023 
-
 -->
-{# TODO: Accordion table? #}
 
 {% extends "layouts/base.html" %}
 {% load predictor %}
@@ -20,64 +18,60 @@ Claudio Perez, Summer 2023
   }
 </style>
 {% endblock %}
+
 {% block content %}
-<h1><code>{{ asset.calid }}</code> Predictors</h1>
+<div class="col-10 mb-4 d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
+  <div class="d-block mb-4 mb-md-0">
+      <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
+        <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
+          <li class="breadcrumb-item">
+            <a href="{% url 'dashboard' %}">
+              <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+            </a>
+          </li>
+          <li class="breadcrumb-item" aria-current="page"><a href="{% url 'asset_table' %}">Inventory</a></li>
+          <li class="breadcrumb-item"><a href="{% url 'asset_profile' asset.calid %}"><code>{{ asset.calid }}</code></a></li>
+          <li class="breadcrumb-item active">Predictors</li>
+        </ol>
+      </nav>
+      <h1><code>{{ asset.calid }}</code> Predictors</h1>
+  </div>
+</div>
+
   <div class="py-4 align-right">
-    <a role="button" class="button btn btn-outline-white btn-gray-600 text-white"
+    <a role="button" class="button btn btn-outline-primary"
     href="/inventory/{{ asset.calid }}" class="me-1">Back to Structure</a>
 
     {% for runner in runners %}
+    {% if runner.name.lower == 'systemidrunner' %}
     {% include 'prediction/new-runner.html' with runner=runner form=form %}
+    {% endif %}
     {% endfor %}
 
-    {% if False %}
     <a role="button" class="button btn btn-outline-primary" disabled
-       href="/inventory/{{ asset.calid }}/predictors/new/" class="me-1">New (Link)</a>
-    {% endif %}
-  </div>
-  {% if False %}
-  <pre id="get-params"></pre>
-  {% endif %}
+       href="/inventory/{{ asset.calid }}/predictors/create/model/" class="me-1">New Model</a>
 
+  </div>
 <div class="col-10">
-  <div class="card">
-    <div class="card-body">
-      <div class="accordion accordion-flush" id="accordionFlush">
-        {% for predictor in asset.predictors.values %}
-          <div class="accordion-item">
-              <button class="btn {%if predictor.active %}btn-outline-success{%else%}btn-outline-dark{%endif%}" type="button">Active</button>
-
-              <button class="btn" type="button"
-                      data-bs-toggle="collapse" 
-                      data-bs-target="#flush-collapse{{forloop.counter}}"
-                      aria-expanded="false" aria-controls="flush-collapse{{forloop.counter}}">
-                Details</button>
-              &nbsp;
-              <h6 class="accordion-header" style="display:inline" id="flush-heading{{forloop.counter}}">
-                <a href="./{{predictor.id}}" >
-                  {{predictor.name}}
-                </a>
-              </h6>
-              (<code>{{ predictor.platform }}</code>)
-              {% if False %}
-              <button class="accordion-button btn collapsed" type="button" 
-                      data-bs-toggle="collapse" 
-                      data-bs-target="#flush-collapse{{forloop.counter}}"
-                      aria-expanded="false" aria-controls="flush-collapse{{forloop.counter}}">
-              </button>
-              {% endif %}
-            <div id="flush-collapse{{forloop.counter}}" class="accordion-collapse collapse" 
-                 style="color:black"
-                 aria-labelledby="flush-heading{{forloop.counter}}" 
-                 data-bs-parent="#accordionFlushExample">
-              <div class="table-responsive">
-              {{ predictor|display_predictor }}
-              </div>
-            </div>
-          </div>
-        {% endfor %}
+
+  <div class="row row-cols-1 row-cols-md-2 g-4">
+    {% for predictor in asset.predictors.values %}
+    <div class="col">
+      <div class="card">
+        <div class="card-header d-sm-flex flex-row align-items-center flex-0">
+          <h6 class="accordion-header" style="display:inline" id="{{forloop.counter}}">
+            <a href="./{{predictor.id}}" >
+              {{predictor.name}}
+            </a> (<code>{{ predictor.platform }}</code>)
+          </h6>
+        </div>
+
+        <div class="card-footer">
+          <button class="btn {%if predictor.active %}btn-outline-success{%else%}btn-outline-dark{%endif%}" type="button">Active</button>
+        </div>
       </div>
     </div>
+    {% endfor %}
   </div>
 </div>