├── .gitignore ├── CHANGES.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── deps.edn ├── package.json ├── resources └── public │ ├── assets │ ├── css │ │ ├── site.css │ │ ├── site.css.map │ │ └── vendor │ │ │ └── animate.min.css │ ├── font │ │ └── ProximaNova-Regular.otf │ ├── img │ │ ├── chevron_down.svg │ │ ├── chevron_up.svg │ │ ├── error.png │ │ ├── error_icon.svg │ │ ├── error_icon_paused.svg │ │ ├── error_icon_red.svg │ │ ├── inject_icon.svg │ │ ├── inject_icon_paused.svg │ │ ├── message.png │ │ ├── message_icon.svg │ │ ├── message_icon_paused.svg │ │ ├── pause_icon.svg │ │ ├── pause_icon_orange.svg │ │ ├── pause_icon_paused.svg │ │ ├── pause_icon_white.svg │ │ ├── play_icon.svg │ │ ├── play_icon_green.svg │ │ ├── play_icon_green_1.svg │ │ └── settings.svg │ └── js │ │ ├── compiled │ │ ├── main.js │ │ └── manifest.edn │ │ └── vendor │ │ ├── code-mirror │ │ ├── clojure.js │ │ ├── closebrackets.js │ │ ├── codemirror.js │ │ └── matchbrackets.js │ │ ├── firefox-svg-poly.min.js │ │ └── leader-line.min.js │ └── index.html ├── shadow-cljs.edn └── src ├── clojure └── core │ └── async │ ├── flow_monitor.clj │ └── flow_static.clj └── clojurescript ├── flow_monitor_ui ├── components │ ├── alerts.cljs │ ├── log_modal.cljs │ ├── modal.cljs │ └── nav.cljs ├── config.cljs ├── core.cljs ├── db.cljs ├── events.cljs ├── global.cljs ├── interceptors.cljs ├── router.cljs ├── routes │ └── index │ │ ├── db.cljs │ │ └── view.cljs ├── subs.cljs └── utils │ └── helpers.cljs └── sass ├── _code_mirror.scss ├── _colors.scss ├── _modal.scss ├── _nav.scss ├── _normalize.scss ├── _scrollbar.scss ├── package.json └── site.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .cpcache/* 2 | .idea/* 3 | *.iml 4 | .shadow-cljs/* 5 | node_modules/* 6 | package-lock.json 7 | resources/public/assets/js/compiled/cljs-runtime/* 8 | src/clojurescript/sass/node_modules/* 9 | *.DS_Store -------------------------------------------------------------------------------- /CHANGES.md: -------------------------------------------------------------------------------- 1 | # v0.1.1 2 | 3 | * Bug Fix: Multi outs to a single in were displaying duplicate chan representations 4 | * Enhancement: Support optionally filtering the state displayed in procs 5 | * Enhancement: Support circular flows 6 | 7 | # v0.1.1 8 | * Enhancement: Construct websocket url based on window.location -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | If you'd like to submit a patch, please follow the [contributing guidelines](http://clojure.org/contributing). -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Eclipse Public License - v 1.0 2 | THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT. 3 | 4 | 1. DEFINITIONS 5 | 6 | "Contribution" means: 7 | 8 | a) in the case of the initial Contributor, the initial code and documentation distributed under this Agreement, and 9 | 10 | b) in the case of each subsequent Contributor: 11 | 12 | i) changes to the Program, and 13 | 14 | ii) additions to the Program; 15 | 16 | where such changes and/or additions to the Program originate from and are distributed by that particular Contributor. A Contribution 'originates' from a Contributor if it was added to the Program by such Contributor itself or anyone acting on such Contributor's behalf. Contributions do not include additions to the Program which: (i) are separate modules of software distributed in conjunction with the Program under their own license agreement, and (ii) are not derivative works of the Program. 17 | 18 | "Contributor" means any person or entity that distributes the Program. 19 | 20 | "Licensed Patents" mean patent claims licensable by a Contributor which are necessarily infringed by the use or sale of its Contribution alone or when combined with the Program. 21 | 22 | "Program" means the Contributions distributed in accordance with this Agreement. 23 | 24 | "Recipient" means anyone who receives the Program under this Agreement, including all Contributors. 25 | 26 | 2. GRANT OF RIGHTS 27 | 28 | a) Subject to the terms of this Agreement, each Contributor hereby grants Recipient a non-exclusive, worldwide, royalty-free copyright license to reproduce, prepare derivative works of, publicly display, publicly perform, distribute and sublicense the Contribution of such Contributor, if any, and such derivative works, in source code and object code form. 29 | 30 | b) Subject to the terms of this Agreement, each Contributor hereby grants Recipient a non-exclusive, worldwide, royalty-free patent license under Licensed Patents to make, use, sell, offer to sell, import and otherwise transfer the Contribution of such Contributor, if any, in source code and object code form. This patent license shall apply to the combination of the Contribution and the Program if, at the time the Contribution is added by the Contributor, such addition of the Contribution causes such combination to be covered by the Licensed Patents. The patent license shall not apply to any other combinations which include the Contribution. No hardware per se is licensed hereunder. 31 | 32 | c) Recipient understands that although each Contributor grants the licenses to its Contributions set forth herein, no assurances are provided by any Contributor that the Program does not infringe the patent or other intellectual property rights of any other entity. Each Contributor disclaims any liability to Recipient for claims brought by any other entity based on infringement of intellectual property rights or otherwise. As a condition to exercising the rights and licenses granted hereunder, each Recipient hereby assumes sole responsibility to secure any other intellectual property rights needed, if any. For example, if a third party patent license is required to allow Recipient to distribute the Program, it is Recipient's responsibility to acquire that license before distributing the Program. 33 | 34 | d) Each Contributor represents that to its knowledge it has sufficient copyright rights in its Contribution, if any, to grant the copyright license set forth in this Agreement. 35 | 36 | 3. REQUIREMENTS 37 | 38 | A Contributor may choose to distribute the Program in object code form under its own license agreement, provided that: 39 | 40 | a) it complies with the terms and conditions of this Agreement; and 41 | 42 | b) its license agreement: 43 | 44 | i) effectively disclaims on behalf of all Contributors all warranties and conditions, express and implied, including warranties or conditions of title and non-infringement, and implied warranties or conditions of merchantability and fitness for a particular purpose; 45 | 46 | ii) effectively excludes on behalf of all Contributors all liability for damages, including direct, indirect, special, incidental and consequential damages, such as lost profits; 47 | 48 | iii) states that any provisions which differ from this Agreement are offered by that Contributor alone and not by any other party; and 49 | 50 | iv) states that source code for the Program is available from such Contributor, and informs licensees how to obtain it in a reasonable manner on or through a medium customarily used for software exchange. 51 | 52 | When the Program is made available in source code form: 53 | 54 | a) it must be made available under this Agreement; and 55 | 56 | b) a copy of this Agreement must be included with each copy of the Program. 57 | 58 | Contributors may not remove or alter any copyright notices contained within the Program. 59 | 60 | Each Contributor must identify itself as the originator of its Contribution, if any, in a manner that reasonably allows subsequent Recipients to identify the originator of the Contribution. 61 | 62 | 4. COMMERCIAL DISTRIBUTION 63 | 64 | Commercial distributors of software may accept certain responsibilities with respect to end users, business partners and the like. While this license is intended to facilitate the commercial use of the Program, the Contributor who includes the Program in a commercial product offering should do so in a manner which does not create potential liability for other Contributors. Therefore, if a Contributor includes the Program in a commercial product offering, such Contributor ("Commercial Contributor") hereby agrees to defend and indemnify every other Contributor ("Indemnified Contributor") against any losses, damages and costs (collectively "Losses") arising from claims, lawsuits and other legal actions brought by a third party against the Indemnified Contributor to the extent caused by the acts or omissions of such Commercial Contributor in connection with its distribution of the Program in a commercial product offering. The obligations in this section do not apply to any claims or Losses relating to any actual or alleged intellectual property infringement. In order to qualify, an Indemnified Contributor must: a) promptly notify the Commercial Contributor in writing of such claim, and b) allow the Commercial Contributor to control, and cooperate with the Commercial Contributor in, the defense and any related settlement negotiations. The Indemnified Contributor may participate in any such claim at its own expense. 65 | 66 | For example, a Contributor might include the Program in a commercial product offering, Product X. That Contributor is then a Commercial Contributor. If that Commercial Contributor then makes performance claims, or offers warranties related to Product X, those performance claims and warranties are such Commercial Contributor's responsibility alone. Under this section, the Commercial Contributor would have to defend claims against the other Contributors related to those performance claims and warranties, and if a court requires any other Contributor to pay any damages as a result, the Commercial Contributor must pay those damages. 67 | 68 | 5. NO WARRANTY 69 | 70 | EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR CONDITIONS OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Each Recipient is solely responsible for determining the appropriateness of using and distributing the Program and assumes all risks associated with its exercise of rights under this Agreement , including but not limited to the risks and costs of program errors, compliance with applicable laws, damage to or loss of data, programs or equipment, and unavailability or interruption of operations. 71 | 72 | 6. DISCLAIMER OF LIABILITY 73 | 74 | EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY CONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION LOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 75 | 76 | 7. GENERAL 77 | 78 | If any provision of this Agreement is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this Agreement, and without further action by the parties hereto, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable. 79 | 80 | If Recipient institutes patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Program itself (excluding combinations of the Program with other software or hardware) infringes such Recipient's patent(s), then such Recipient's rights granted under Section 2(b) shall terminate as of the date such litigation is filed. 81 | 82 | All Recipient's rights under this Agreement shall terminate if it fails to comply with any of the material terms or conditions of this Agreement and does not cure such failure in a reasonable period of time after becoming aware of such noncompliance. If all Recipient's rights under this Agreement terminate, Recipient agrees to cease use and distribution of the Program as soon as reasonably practicable. However, Recipient's obligations under this Agreement and any licenses granted by Recipient relating to the Program shall continue and survive. 83 | 84 | Everyone is permitted to copy and distribute copies of this Agreement, but in order to avoid inconsistency the Agreement is copyrighted and may only be modified in the following manner. The Agreement Steward reserves the right to publish new versions (including revisions) of this Agreement from time to time. No one other than the Agreement Steward has the right to modify this Agreement. The Eclipse Foundation is the initial Agreement Steward. The Eclipse Foundation may assign the responsibility to serve as the Agreement Steward to a suitable separate entity. Each new version of the Agreement will be given a distinguishing version number. The Program (including Contributions) may always be distributed subject to the version of the Agreement under which it was received. In addition, after a new version of the Agreement is published, Contributor may elect to distribute the Program (including its Contributions) under the new version. Except as expressly stated in Sections 2(a) and 2(b) above, Recipient receives no rights or licenses to the intellectual property of any Contributor under this Agreement, whether expressly, by implication, estoppel or otherwise. All rights in the Program not expressly granted under this Agreement are reserved. 85 | 86 | This Agreement is governed by the laws of the State of New York and the intellectual property laws of the United States of America. No party to this Agreement will bring a legal action under this Agreement more than one year after the cause of action arose. Each party waives its rights to a jury trial in any resulting litigation. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flow Monitor 2 | 3 | A real-time monitoring and interaction tool for [clojure.core.async.flow](https://clojure.github.io/core.async/flow.html) 4 | 5 | flow-example-gif 6 | 7 | ## Overview 8 | 9 | Flow Monitor provides a web-based interface for visualizing, monitoring, and interacting with clojure.core.async.flow 10 | 11 | With Flow Monitor, you can observe the structure of your flow, track the state of processes and the async channels between them, control process execution by pausing and resuming them, inject data into channels, and view any errors or messages that emerge from the flow. 12 | 13 | ## Installation 14 | 15 | Add the following dependency to your project: 16 | 17 | ```clojure 18 | ;; deps.edn 19 | {:deps {io.github.clojure/core.async.flow-monitor {:git/tag "v0.1.1" :git/sha "61e8d31"}}} 20 | ``` 21 | 22 | ## Usage 23 | 24 | ### Starting a Monitor Server 25 | 26 | ```clojure 27 | (:require 28 | [clojure.core.async.flow-monitor :as monitor] 29 | [clojure.core.async.flow :as flow]) 30 | 31 | ;; Create a flow 32 | (def my-flow (flow/create-flow ...)) 33 | 34 | ;; Start the monitoring server 35 | (def server-state (monitor/start-server {:flow my-flow :port 9876})) 36 | 37 | ;; The web interface will be available at: 38 | ;; http://localhost:9876/index.html 39 | ``` 40 | 41 | ### Custom Transit Handlers 42 | 43 | You can provide custom Transit write handlers to properly serialize types that aren't natively supported by Transit (used for visualizing state). These handlers should follow the format expected by cognitect.transit/writer :handlers. If not provided, the default handler will be used, which converts objects to strings. 44 | 45 | ```clojure 46 | (:require 47 | [clojure.core.async.flow-monitor :as monitor] 48 | [clojure.core.async.flow :as flow] 49 | [cognitect.transit :as transit] 50 | [java.time :as time]) 51 | (:import 52 | [java.time Instant ZoneId] 53 | [java.time.format DateTimeFormatter]) 54 | 55 | (def my-flow (flow/create-flow ...)) 56 | 57 | (defn format-instant [instant] 58 | (.format 59 | (.withZone 60 | (DateTimeFormatter/ofPattern "MMMM d, yyyy") 61 | (ZoneId/systemDefault)) 62 | instant)) 63 | 64 | (def instant-write-handler 65 | (transit/write-handler "instant-long" 66 | (fn [instant] (format-instant instant)))) 67 | 68 | (def server-state (monitor/start-server {:flow my-flow 69 | :port 9876 70 | :handlers {Instant instant-write-handler}})) 71 | ``` 72 | 73 | ### Stopping the Server 74 | 75 | ```clojure 76 | (monitor/stop-server server-state) 77 | ``` 78 | 79 | ### Multiple Monitors 80 | 81 | You can run multiple monitoring servers simultaneously to monitor different flows: 82 | 83 | ```clojure 84 | (def server1 (monitor/start-server {:flow flow1 :port 9876})) 85 | (def server2 (monitor/start-server {:flow flow2 :port 9877})) ; unique unused port 86 | 87 | ;; Stop them independently 88 | (monitor/stop-server server1) 89 | (monitor/stop-server server2) 90 | ``` 91 | 92 | ### Filtering Proc State 93 | 94 | It is common for the state to contain credentials and other sensitive information not intended to be displayed in the monitor. Filter predicates can optionally be provided when starting the monitor to filter the state data of flow procs. 95 | 96 | ``` clojure 97 | ;; Create a flow 98 | (def my-flow (flow/create-flow ...)) 99 | 100 | ;; Start the monitoring server 101 | ;;; In this example 102 | ;;; The :categorize proc will have the :salary value removed 103 | ;;; and :db-pass will be removed from all procs other than :categorize 104 | (def server-state (monitor/start-server {:flow my-flow 105 | :state-filters {:categorize (fn [[k v]] (not= :salary k)) 106 | :default (fn [[k v]] (not= :db-pass k))}})) 107 | ``` 108 | 109 | 110 | ### Circular Flows 111 | 112 | It is valid to create a cyclical flow. The monitor displays procs without a `[to-pid inid]` at the top as roots. A circular flow will need to specify the intended root explicitly. A vector of :pid keywords can optionally be provided when starting the monitor to designate the root procs. 113 | 114 | ``` clojure 115 | 116 | (def flow-config {:procs ... 117 | :conns [[[:a :out] [:b :in]] 118 | [[:b :out] [:a :in]]]}) 119 | 120 | ;; Create a flow 121 | (def my-flow (flow/create-flow flow-config)) 122 | 123 | ;; Start the monitoring server specifying the root proc(s) 124 | (def server-state (monitor/start-server {:flow my-flow 125 | ;; Multiple roots can be provided if desired 126 | :root [:a]})) 127 | 128 | ;; Inline static flow graphs also require the root to be specified for circular flows 129 | (static/graph flow-config [:a]) 130 | ``` 131 | 132 | ## Static Flow Graph 133 | 134 | Both [Cursive](https://cursive-ide.com/blog/cursive-2025.1.html) and [Calva](https://calva.io/flares/) support displaying HTML in the editor. A static graph can be generated from your flow-config and displayed in either of those editor environments with the following: 135 | 136 | ``` clojure 137 | (:require 138 | [clojure.core.async.flow-static :refer [graph]] 139 | [clojure.core.async.flow :as flow]) 140 | 141 | ;; Create a flow 142 | (def flow-config {:procs ... 143 | :conns ...}) 144 | 145 | (graph flow-config) ; Takes a config not what is returned from create-flow 146 | 147 | (def my-flow (flow/create-flow flow-config)) 148 | ``` 149 | 150 | ## Contributing 151 | 152 | [Contributing to Clojure projects](https://clojure.org/community/contributing) requires a signed Contributor Agreement. Pull requests and GitHub issues are not accepted; please use the [core.async.flow-monitor JIRA project](https://clojure.atlassian.net/browse/AFMON) to report problems or enhancements. 153 | 154 | ## License 155 | 156 | Copyright © 2025 157 | 158 | Distributed under the Eclipse Public License v 1.0 159 | -------------------------------------------------------------------------------- /deps.edn: -------------------------------------------------------------------------------- 1 | {:paths ["src" "resources"] 2 | :deps {org.clojure/clojure {:mvn/version "1.12.0"} 3 | org.clojure/core.async {:mvn/version "1.9.808-alpha1"} 4 | metosin/reitit {:mvn/version "0.6.0"} 5 | http-kit/http-kit {:mvn/version "2.7.0"} 6 | com.cognitect/transit-clj {:mvn/version "1.0.329"} 7 | org.clojure/data.json {:mvn/version "2.4.0"} 8 | ring/ring-core {:mvn/version "1.14.0"} 9 | ring/ring-defaults {:mvn/version "0.6.0"} 10 | thheller/shadow-cljs {:mvn/version "2.27.4"} 11 | reagent/reagent {:mvn/version "1.2.0"} 12 | re-frame/re-frame {:mvn/version "1.4.3"} 13 | lambdaisland/glogi {:mvn/version "1.3.169"} 14 | day8.re-frame/async-flow-fx {:mvn/version "0.4.0"} 15 | day8.re-frame/http-fx {:mvn/version "0.2.4"} 16 | com.cognitect/transit-cljs {:mvn/version "0.8.280"} 17 | hiccup/hiccup {:mvn/version "2.0.0-RC5"}} 18 | 19 | :aliases {:min {:main-opts ["-m" "shadow.cljs.devtools.cli" "release" "app"]} 20 | :dev {:extra-paths ["test"] 21 | :main-opts ["-m" "shadow.cljs.devtools.cli" "watch" "app"] 22 | :extra-deps {day8.re-frame/test {:mvn/version "0.1.5"} 23 | binaryage/devtools {:mvn/version "1.0.4"}}}}} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flow-monitor-ui", 3 | "version": "1.0.0", 4 | "description": "Behold the majesty of JavaScript", 5 | "dependencies": { 6 | "create-react-class": "^15.7.0", 7 | "react": "16.13.0", 8 | "react-dom": "16.13.0" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://gitlab.com/jarrodctaylor/flow_monitor_ui.git" 13 | }, 14 | "devDependencies": { 15 | "shadow-cljs": "2.8.93" 16 | } 17 | } 18 | 19 | -------------------------------------------------------------------------------- /resources/public/assets/css/site.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../../../src/clojurescript/sass/_normalize.scss","../../../../src/clojurescript/sass/_scrollbar.scss","../../../../src/clojurescript/sass/_modal.scss","../../../../src/clojurescript/sass/_colors.scss","../../../../src/clojurescript/sass/_nav.scss","../../../../src/clojurescript/sass/_code_mirror.scss","../../../../src/clojurescript/sass/site.scss"],"names":[],"mappings":"AAAA;AAEA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,QACQ;EACN;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,SACS;EACP;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AC1VF;EAEE;EACA;;AAGA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;;;AAKJ;EACA;IACE;;;AClCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE,YCVO;EDWP,OCpBM;EDqBN;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE,OC/DE;EDgEF;EACA;;AACA;EACE;EACA;;AAKR;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;AACA;EACE;;;AEjGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACE;EACA,kBDtBO;ECuBP,YAlBK;EAmBL,OAzBQ;EA0BR,QA1BQ;EA2BR;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBDjCK;;ACoCP;EACE;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AAGF;EACE;;AACA;EACE;EACA,kBD1DO;EC2DP,YAtDK;EAuDL,OA7DQ;EA8DR,QA9DQ;EA+DR;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBDrEK;;ACwEP;EACE;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA,QA1FgB;EA2FhB,kBDzFS;EC0FT,YAvFO;EAwFP;EACA;EACA;EACA,OD/FS;ECgGT;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,OAxHS;EAyHT;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;;AACA;EACE;EACA;EACA;EACA,OD9IO;;;ACkJX;EACE;;;AAIF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBD/KO;ECgLP;EACA;EACA;;AAGF;AAAA;EAEE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE,cAzNU;;;AA8NhB;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,kBAhPc;EAiPd;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,OA3PW;;AA6PX;EACE;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AChSJ;AAEA;AACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;;;AAEF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAA2B;;;AAC3B;EAAkC;;;AAElC;AAEA;EACE;EACA;EACA;;;AAEF;AACA;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EAEE;IAAM;;;AAGR;EAEE;IAAM;;;AAGR;EAEE;IAAM;;;AAIR;AAGA;EAAU;EAAuB;;;AAEjC;EACE;EACA;EAAS;EAAU;EAAY;EAC/B;;;AAEF;EACE;EACA;EAAQ;EACR;;;AAGF;AAEA;EAA0B;;;AAC1B;EAAyB;;;AACzB;EAAc;;;AACd;EAAc;;;AACd;EAAwB;;;AACxB;EAAQ;;;AACR;EAAU;;;AACV;EAAmB;;;AAEnB;EAA2B;;;AAC3B;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAAuB;;;AAKvB;EAA8B;;;AAC9B;EAAsD;;;AACtD;EAA2B;;;AAC3B;EAA0B;;;AAC1B;EAA4B;;;AAC5B;EAAwB;;;AACxB;EAA6B;;;AAC7B;EAA2B;;;AAC3B;EAA2B;;;AAC3B;EAAuB;;;AACvB;EAA6B;;;AAC7B;EAAsB;;;AACtB;EAAwB;;;AAExB;EAAyB;;;AACzB;EAAiB;;;AAEjB;EAAwB;;;AAExB;AAEA;EAAgD;;;AAChD;EAAmD;;;AACnD;EAA0B;;;AAC1B;EAAmC;;;AAEnC;AAEA;AAAA;AAGA;EACE;EACA;EACA;;;AAGF;EACE;AACA;AACA;EACA;EAAsB;EACtB;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;;;AAEF;EACE;EAAU;EACV;EACA;;;AAEF;EACE;EAAW;EACX;EACA;;;AAEF;EACE;EAAU;;;AAEZ;EACE;EAAS;;;AAGX;EACE;EAAoB;EAAS;EAC7B;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EAAQ;EACR;;;AAEF;EACE;EACA;EACA;;;AAEF;EAAyC;;;AACzC;EAA8C;;;AAE9C;EACE;EACA;;;AAEF;AAAA;AAEE;EACA;EAAuB;EAA0B;EACjD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EAAS;EAAU;EAAQ;EAC3B;;;AAGF;EACE;EACA;EACA;;;AAKF;EAAsB;;;AAEtB;EACE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAEF;EAA0B;;;AAE1B;EACE;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EAAuB;;;AACvB;EAA2C;;;AAC3C;EAAwB;;;AACxB;EAA6G;;;AAC7G;EAA4H;;;AAE5H;EACE;EACA;;;AAGF;AACA;EAAmB;;;AAEnB;AACE;EACA;IACE;;;AAIJ;AACA;EAA0B;;;AAE1B;AACA;EAA+B;;;ACrV/B;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA,kBHvBS;;;AG0BX;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YHnEO;EGoEP;;AAGF;EACE,YHzEO;EG0EP,OHxEO;EGyEP;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,YHrGK;EGsGL;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,OH/GG;EGgHH;;AAEF;EACE;;AAMN;EACE,YHzHO;EG0HP;EACA;EACA;EACA;EACA;EAEA;EACA;;AAGE;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACI;;AAKR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA,OHxMC;EGyMD;EACA;;AAIJ;EACE;EACA,YHjMG;EGkMH,OHjMG;EGkMH;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YH/PD;;AGgQC;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,YHrRG;;AGuRH;EACE,OHxRC;EGyRD;EACA;;AAGJ;EACE,YH9RG;EG+RH,OH9RG;EG+RH;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA,OH3SD;EG4SC;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAOR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,OHrXD;EGsXC;EACA;EACA;EACA;EACA;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,OHvZC;EGwZD;EACA;EACA;EACA;EACA;EACA;;;AAOV;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE,YHzbO;EG0bP;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,OHhcK;EGicL;;;AAKN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA,OHldO;;AGqdT;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA,YH/iBO;EGgjBP;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE,YH9jBK;EG+jBL;EACA;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA,YH9kBO;EG+kBP;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA,YHxmBO;EGymBP;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBHvpBS;EGwpBT,OHtpBS;EGupBT;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE,YH1sBK;EG2sBL,OH9sBK;;AGgtBP;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE,kBH9vBO;EG+vBP,OHnwBO;EGowBP;EACA;EACA;EACA;;AAGF;EACE,kBH3wBO;;AG8wBT;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA","file":"site.css"} -------------------------------------------------------------------------------- /resources/public/assets/font/ProximaNova-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clojure/core.async.flow-monitor/6248a5d8e4228ab5974289559e3cb11ff3152263/resources/public/assets/font/ProximaNova-Regular.otf -------------------------------------------------------------------------------- /resources/public/assets/img/chevron_down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/public/assets/img/chevron_up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/public/assets/img/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clojure/core.async.flow-monitor/6248a5d8e4228ab5974289559e3cb11ff3152263/resources/public/assets/img/error.png -------------------------------------------------------------------------------- /resources/public/assets/img/error_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /resources/public/assets/img/error_icon_paused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /resources/public/assets/img/error_icon_red.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /resources/public/assets/img/inject_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /resources/public/assets/img/inject_icon_paused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /resources/public/assets/img/message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clojure/core.async.flow-monitor/6248a5d8e4228ab5974289559e3cb11ff3152263/resources/public/assets/img/message.png -------------------------------------------------------------------------------- /resources/public/assets/img/message_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /resources/public/assets/img/message_icon_paused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /resources/public/assets/img/pause_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/public/assets/img/pause_icon_orange.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /resources/public/assets/img/pause_icon_paused.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /resources/public/assets/img/pause_icon_white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /resources/public/assets/img/play_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/public/assets/img/play_icon_green.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /resources/public/assets/img/play_icon_green_1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /resources/public/assets/img/settings.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/public/assets/js/compiled/manifest.edn: -------------------------------------------------------------------------------- 1 | [{:module-id :main, :name :main, :output-name "main.js", :entries [clojurescript.flow-monitor-ui.core], :depends-on nil, :sources ["goog/base.js" "goog/debug/error.js" "goog/dom/nodetype.js" "goog/asserts/asserts.js" "goog/reflect/reflect.js" "goog/math/long.js" "goog/math/integer.js" "goog/dom/htmlelement.js" "goog/dom/tagname.js" "goog/dom/element.js" "goog/asserts/dom.js" "goog/dom/asserts.js" "goog/functions/functions.js" "goog/string/typedstring.js" "goog/string/const.js" "goog/html/trustedtypes.js" "goog/html/safescript.js" "goog/fs/url.js" "goog/fs/blob.js" "goog/html/trustedresourceurl.js" "goog/string/internal.js" "goog/html/safeurl.js" "goog/html/safestyle.js" "goog/object/object.js" "goog/html/safestylesheet.js" "goog/flags/flags.js" "goog/labs/useragent/useragent.js" "goog/labs/useragent/util.js" "goog/labs/useragent/highentropy/highentropyvalue.js" "goog/labs/useragent/highentropy/highentropydata.js" "goog/labs/useragent/browser.js" "goog/array/array.js" "goog/dom/tags.js" "goog/html/safehtml.js" "goog/html/uncheckedconversions.js" "goog/dom/safe.js" "goog/string/string.js" "goog/collections/maps.js" "goog/structs/structs.js" "goog/uri/utils.js" "goog/uri/uri.js" "goog/string/stringbuffer.js" "cljs/core.cljs" "goog/promise/thenable.js" "goog/async/freelist.js" "goog/async/workqueue.js" "goog/debug/asyncstacktag.js" "goog/debug/entrypointregistry.js" "goog/labs/useragent/engine.js" "goog/labs/useragent/platform.js" "goog/useragent/useragent.js" "goog/dom/browserfeature.js" "goog/math/math.js" "goog/math/coordinate.js" "goog/math/size.js" "goog/dom/dom.js" "goog/async/nexttick.js" "goog/async/throwexception.js" "goog/async/run.js" "goog/promise/resolver.js" "goog/promise/promise.js" "goog/disposable/idisposable.js" "goog/disposable/dispose.js" "goog/disposable/disposeall.js" "goog/disposable/disposable.js" "goog/debug/errorcontext.js" "goog/debug/debug.js" "goog/events/eventid.js" "goog/events/event.js" "goog/events/browserfeature.js" "goog/events/eventtypehelpers.js" "goog/events/eventtype.js" "goog/events/browserevent.js" "goog/events/listenable.js" "goog/events/listenablekey.js" "goog/events/listener.js" "goog/events/listenermap.js" "goog/events/events.js" "goog/events/eventtarget.js" "goog/timer/timer.js" "goog/dom/inputtype.js" "goog/events/eventhandler.js" "goog/history/eventtype.js" "goog/history/event.js" "goog/labs/useragent/device.js" "goog/memoize/memoize.js" "goog/history/history.js" "clojure/string.cljs" "goog/net/errorcode.js" "shadow/js.js" "node_modules/object-assign/index.js" "node_modules/react/cjs/react.production.min.js" "node_modules/react/index.js" "clojure/walk.cljs" "reagent/debug.cljs" "reagent/impl/util.cljs" "reagent/impl/batching.cljs" "reagent/impl/protocols.cljs" "clojure/set.cljs" "reagent/ratom.cljs" "reagent/impl/component.cljs" "reagent/impl/input.cljs" "reagent/impl/template.cljs" "reagent/core.cljs" "re_frame/interop.cljs" "re_frame/db.cljc" "re_frame/loggers.cljc" "re_frame/utils.cljc" "re_frame/settings.cljc" "re_frame/registrar.cljc" "re_frame/trace.cljc" "re_frame/interceptor.cljc" "re_frame/events.cljc" "re_frame/subs.cljc" "re_frame/router.cljc" "re_frame/fx.cljc" "re_frame/cofx.cljc" "clojure/data.cljs" "re_frame/std_interceptors.cljc" "re_frame/core.cljc" "ajax/protocols.cljc" "ajax/util.cljc" "ajax/url.cljc" "ajax/interceptors.cljc" "ajax/formats.cljc" "goog/json/json.js" "goog/json/hybrid.js" "goog/log/log.js" "goog/net/eventtype.js" "goog/net/httpstatus.js" "goog/net/xhrlike.js" "goog/net/xmlhttpfactory.js" "goog/net/wrapperxmlhttpfactory.js" "goog/net/xmlhttp.js" "goog/net/xhrio.js" "ajax/simple.cljc" "goog/structs/queue.js" "goog/structs/collection.js" "goog/collections/iters.js" "goog/iter/iter.js" "goog/iter/es6.js" "goog/structs/map.js" "goog/structs/set.js" "goog/structs/pool.js" "goog/structs/node.js" "goog/structs/heap.js" "goog/structs/priorityqueue.js" "goog/structs/prioritypool.js" "goog/net/xhriopool.js" "goog/net/xhrmanager.js" "ajax/xhrio.cljs" "day8/re_frame/http_fx.cljs" "node_modules/scheduler/cjs/scheduler.production.min.js" "node_modules/scheduler/index.js" "node_modules/react-dom/cjs/react-dom.production.min.js" "node_modules/react-dom/index.js" "reagent/dom.cljs" "meta_merge/core.cljc" "reitit/exception.cljc" "reitit/trie.cljc" "reitit/impl.cljc" "reitit/coercion.cljc" "reitit/core.cljc" "reitit/frontend.cljs" "goog/debug/relativetimeprovider.js" "goog/debug/formatter.js" "goog/debug/console.js" "goog/structs/circularbuffer.js" "goog/debug/debugwindow.js" "goog/debug/fancywindow.js" "goog/dom/vendor.js" "goog/math/box.js" "goog/math/irect.js" "goog/math/rect.js" "goog/style/style.js" "goog/debug/divconsole.js" "lambdaisland/glogi.cljs" "lambdaisland/glogi/print.cljs" "lambdaisland/glogi/console.cljs" "clojurescript/flow_monitor_ui/utils/helpers.cljs" "clojurescript/flow_monitor_ui/subs.cljs" "clojurescript/flow_monitor_ui/components/alerts.cljs" "goog/useragent/product.js" "com/cognitect/transit/util.js" "com/cognitect/transit/delimiters.js" "com/cognitect/transit/caching.js" "com/cognitect/transit/eq.js" "com/cognitect/transit/types.js" "com/cognitect/transit/impl/decoder.js" "com/cognitect/transit/impl/reader.js" "com/cognitect/transit/handlers.js" "com/cognitect/transit/impl/writer.js" "com/cognitect/transit.js" "cognitect/transit.cljs" "clojurescript/flow_monitor_ui/config.cljs" "clojurescript/flow_monitor_ui/interceptors.cljs" "cljs/spec/gen/alpha.cljs" "cljs/spec/alpha.cljs" "clojurescript/flow_monitor_ui/routes/index/db.cljs" "clojurescript/flow_monitor_ui/db.cljs" "clojurescript/flow_monitor_ui/events.cljs" "clojurescript/flow_monitor_ui/global.cljs" "cljs/tools/reader/impl/utils.cljs" "cljs/tools/reader/reader_types.cljs" "cljs/tools/reader/impl/inspect.cljs" "cljs/tools/reader/impl/errors.cljs" "cljs/tools/reader/impl/commons.cljs" "cljs/tools/reader.cljs" "cljs/tools/reader/edn.cljs" "cljs/reader.cljs" "clojurescript/flow_monitor_ui/components/log_modal.cljs" "clojurescript/flow_monitor_ui/components/nav.cljs" "cljs/pprint.cljs" "clojurescript/flow_monitor_ui/components/modal.cljs" "clojurescript/flow_monitor_ui/routes/index/view.cljs" "clojurescript/flow_monitor_ui/router.cljs" "clojurescript/flow_monitor_ui/core.cljs" "shadow/module/main/append.js"]}] -------------------------------------------------------------------------------- /resources/public/assets/js/vendor/code-mirror/clojure.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function(mod) { 5 | if (typeof exports === "object" && typeof module === "object") // CommonJS 6 | mod(require("../../lib/codemirror")); 7 | else if (typeof define === "function" && define.amd) // AMD 8 | define(["../../lib/codemirror"], mod); 9 | else // Plain browser env 10 | mod(CodeMirror); 11 | })(function(CodeMirror) { 12 | "use strict"; 13 | 14 | CodeMirror.defineMode("clojure", function (options) { 15 | var atoms = ["false", "nil", "true"]; 16 | var specialForms = [".", "catch", "def", "do", "if", "monitor-enter", 17 | "monitor-exit", "new", "quote", "recur", "set!", "throw", "try", "var"]; 18 | var coreSymbols = ["*", "*'", "*1", "*2", "*3", "*agent*", 19 | "*allow-unresolved-vars*", "*assert*", "*clojure-version*", 20 | "*command-line-args*", "*compile-files*", "*compile-path*", 21 | "*compiler-options*", "*data-readers*", "*default-data-reader-fn*", "*e", 22 | "*err*", "*file*", "*flush-on-newline*", "*fn-loader*", "*in*", 23 | "*math-context*", "*ns*", "*out*", "*print-dup*", "*print-length*", 24 | "*print-level*", "*print-meta*", "*print-namespace-maps*", 25 | "*print-readably*", "*read-eval*", "*reader-resolver*", "*source-path*", 26 | "*suppress-read*", "*unchecked-math*", "*use-context-classloader*", 27 | "*verbose-defrecords*", "*warn-on-reflection*", "+", "+'", "-", "-'", 28 | "->", "->>", "->ArrayChunk", "->Eduction", "->Vec", "->VecNode", 29 | "->VecSeq", "-cache-protocol-fn", "-reset-methods", "..", "/", "<", "<=", 30 | "=", "==", ">", ">=", "EMPTY-NODE", "Inst", "StackTraceElement->vec", 31 | "Throwable->map", "accessor", "aclone", "add-classpath", "add-watch", 32 | "agent", "agent-error", "agent-errors", "aget", "alength", "alias", 33 | "all-ns", "alter", "alter-meta!", "alter-var-root", "amap", "ancestors", 34 | "and", "any?", "apply", "areduce", "array-map", "as->", "aset", 35 | "aset-boolean", "aset-byte", "aset-char", "aset-double", "aset-float", 36 | "aset-int", "aset-long", "aset-short", "assert", "assoc", "assoc!", 37 | "assoc-in", "associative?", "atom", "await", "await-for", "await1", 38 | "bases", "bean", "bigdec", "bigint", "biginteger", "binding", "bit-and", 39 | "bit-and-not", "bit-clear", "bit-flip", "bit-not", "bit-or", "bit-set", 40 | "bit-shift-left", "bit-shift-right", "bit-test", "bit-xor", "boolean", 41 | "boolean-array", "boolean?", "booleans", "bound-fn", "bound-fn*", 42 | "bound?", "bounded-count", "butlast", "byte", "byte-array", "bytes", 43 | "bytes?", "case", "cast", "cat", "char", "char-array", 44 | "char-escape-string", "char-name-string", "char?", "chars", "chunk", 45 | "chunk-append", "chunk-buffer", "chunk-cons", "chunk-first", "chunk-next", 46 | "chunk-rest", "chunked-seq?", "class", "class?", "clear-agent-errors", 47 | "clojure-version", "coll?", "comment", "commute", "comp", "comparator", 48 | "compare", "compare-and-set!", "compile", "complement", "completing", 49 | "concat", "cond", "cond->", "cond->>", "condp", "conj", "conj!", "cons", 50 | "constantly", "construct-proxy", "contains?", "count", "counted?", 51 | "create-ns", "create-struct", "cycle", "dec", "dec'", "decimal?", 52 | "declare", "dedupe", "default-data-readers", "definline", "definterface", 53 | "defmacro", "defmethod", "defmulti", "defn", "defn-", "defonce", 54 | "defprotocol", "defrecord", "defstruct", "deftype", "delay", "delay?", 55 | "deliver", "denominator", "deref", "derive", "descendants", "destructure", 56 | "disj", "disj!", "dissoc", "dissoc!", "distinct", "distinct?", "doall", 57 | "dorun", "doseq", "dosync", "dotimes", "doto", "double", "double-array", 58 | "double?", "doubles", "drop", "drop-last", "drop-while", "eduction", 59 | "empty", "empty?", "ensure", "ensure-reduced", "enumeration-seq", 60 | "error-handler", "error-mode", "eval", "even?", "every-pred", "every?", 61 | "ex-data", "ex-info", "extend", "extend-protocol", "extend-type", 62 | "extenders", "extends?", "false?", "ffirst", "file-seq", "filter", 63 | "filterv", "find", "find-keyword", "find-ns", "find-protocol-impl", 64 | "find-protocol-method", "find-var", "first", "flatten", "float", 65 | "float-array", "float?", "floats", "flush", "fn", "fn?", "fnext", "fnil", 66 | "for", "force", "format", "frequencies", "future", "future-call", 67 | "future-cancel", "future-cancelled?", "future-done?", "future?", 68 | "gen-class", "gen-interface", "gensym", "get", "get-in", "get-method", 69 | "get-proxy-class", "get-thread-bindings", "get-validator", "group-by", 70 | "halt-when", "hash", "hash-combine", "hash-map", "hash-ordered-coll", 71 | "hash-set", "hash-unordered-coll", "ident?", "identical?", "identity", 72 | "if-let", "if-not", "if-some", "ifn?", "import", "in-ns", "inc", "inc'", 73 | "indexed?", "init-proxy", "inst-ms", "inst-ms*", "inst?", "instance?", 74 | "int", "int-array", "int?", "integer?", "interleave", "intern", 75 | "interpose", "into", "into-array", "ints", "io!", "isa?", "iterate", 76 | "iterator-seq", "juxt", "keep", "keep-indexed", "key", "keys", "keyword", 77 | "keyword?", "last", "lazy-cat", "lazy-seq", "let", "letfn", "line-seq", 78 | "list", "list*", "list?", "load", "load-file", "load-reader", 79 | "load-string", "loaded-libs", "locking", "long", "long-array", "longs", 80 | "loop", "macroexpand", "macroexpand-1", "make-array", "make-hierarchy", 81 | "map", "map-entry?", "map-indexed", "map?", "mapcat", "mapv", "max", 82 | "max-key", "memfn", "memoize", "merge", "merge-with", "meta", 83 | "method-sig", "methods", "min", "min-key", "mix-collection-hash", "mod", 84 | "munge", "name", "namespace", "namespace-munge", "nat-int?", "neg-int?", 85 | "neg?", "newline", "next", "nfirst", "nil?", "nnext", "not", "not-any?", 86 | "not-empty", "not-every?", "not=", "ns", "ns-aliases", "ns-imports", 87 | "ns-interns", "ns-map", "ns-name", "ns-publics", "ns-refers", 88 | "ns-resolve", "ns-unalias", "ns-unmap", "nth", "nthnext", "nthrest", 89 | "num", "number?", "numerator", "object-array", "odd?", "or", "parents", 90 | "partial", "partition", "partition-all", "partition-by", "pcalls", "peek", 91 | "persistent!", "pmap", "pop", "pop!", "pop-thread-bindings", "pos-int?", 92 | "pos?", "pr", "pr-str", "prefer-method", "prefers", 93 | "primitives-classnames", "print", "print-ctor", "print-dup", 94 | "print-method", "print-simple", "print-str", "printf", "println", 95 | "println-str", "prn", "prn-str", "promise", "proxy", 96 | "proxy-call-with-super", "proxy-mappings", "proxy-name", "proxy-super", 97 | "push-thread-bindings", "pvalues", "qualified-ident?", 98 | "qualified-keyword?", "qualified-symbol?", "quot", "rand", "rand-int", 99 | "rand-nth", "random-sample", "range", "ratio?", "rational?", 100 | "rationalize", "re-find", "re-groups", "re-matcher", "re-matches", 101 | "re-pattern", "re-seq", "read", "read-line", "read-string", 102 | "reader-conditional", "reader-conditional?", "realized?", "record?", 103 | "reduce", "reduce-kv", "reduced", "reduced?", "reductions", "ref", 104 | "ref-history-count", "ref-max-history", "ref-min-history", "ref-set", 105 | "refer", "refer-clojure", "reify", "release-pending-sends", "rem", 106 | "remove", "remove-all-methods", "remove-method", "remove-ns", 107 | "remove-watch", "repeat", "repeatedly", "replace", "replicate", "require", 108 | "reset!", "reset-meta!", "reset-vals!", "resolve", "rest", 109 | "restart-agent", "resultset-seq", "reverse", "reversible?", "rseq", 110 | "rsubseq", "run!", "satisfies?", "second", "select-keys", "send", 111 | "send-off", "send-via", "seq", "seq?", "seqable?", "seque", "sequence", 112 | "sequential?", "set", "set-agent-send-executor!", 113 | "set-agent-send-off-executor!", "set-error-handler!", "set-error-mode!", 114 | "set-validator!", "set?", "short", "short-array", "shorts", "shuffle", 115 | "shutdown-agents", "simple-ident?", "simple-keyword?", "simple-symbol?", 116 | "slurp", "some", "some->", "some->>", "some-fn", "some?", "sort", 117 | "sort-by", "sorted-map", "sorted-map-by", "sorted-set", "sorted-set-by", 118 | "sorted?", "special-symbol?", "spit", "split-at", "split-with", "str", 119 | "string?", "struct", "struct-map", "subs", "subseq", "subvec", "supers", 120 | "swap!", "swap-vals!", "symbol", "symbol?", "sync", "tagged-literal", 121 | "tagged-literal?", "take", "take-last", "take-nth", "take-while", "test", 122 | "the-ns", "thread-bound?", "time", "to-array", "to-array-2d", 123 | "trampoline", "transduce", "transient", "tree-seq", "true?", "type", 124 | "unchecked-add", "unchecked-add-int", "unchecked-byte", "unchecked-char", 125 | "unchecked-dec", "unchecked-dec-int", "unchecked-divide-int", 126 | "unchecked-double", "unchecked-float", "unchecked-inc", 127 | "unchecked-inc-int", "unchecked-int", "unchecked-long", 128 | "unchecked-multiply", "unchecked-multiply-int", "unchecked-negate", 129 | "unchecked-negate-int", "unchecked-remainder-int", "unchecked-short", 130 | "unchecked-subtract", "unchecked-subtract-int", "underive", "unquote", 131 | "unquote-splicing", "unreduced", "unsigned-bit-shift-right", "update", 132 | "update-in", "update-proxy", "uri?", "use", "uuid?", "val", "vals", 133 | "var-get", "var-set", "var?", "vary-meta", "vec", "vector", "vector-of", 134 | "vector?", "volatile!", "volatile?", "vreset!", "vswap!", "when", 135 | "when-first", "when-let", "when-not", "when-some", "while", 136 | "with-bindings", "with-bindings*", "with-in-str", "with-loading-context", 137 | "with-local-vars", "with-meta", "with-open", "with-out-str", 138 | "with-precision", "with-redefs", "with-redefs-fn", "xml-seq", "zero?", 139 | "zipmap"]; 140 | var haveBodyParameter = [ 141 | "->", "->>", "as->", "binding", "bound-fn", "case", "catch", "comment", 142 | "cond", "cond->", "cond->>", "condp", "def", "definterface", "defmethod", 143 | "defn", "defmacro", "defprotocol", "defrecord", "defstruct", "deftype", 144 | "do", "doseq", "dotimes", "doto", "extend", "extend-protocol", 145 | "extend-type", "fn", "for", "future", "if", "if-let", "if-not", "if-some", 146 | "let", "letfn", "locking", "loop", "ns", "proxy", "reify", "struct-map", 147 | "some->", "some->>", "try", "when", "when-first", "when-let", "when-not", 148 | "when-some", "while", "with-bindings", "with-bindings*", "with-in-str", 149 | "with-loading-context", "with-local-vars", "with-meta", "with-open", 150 | "with-out-str", "with-precision", "with-redefs", "with-redefs-fn"]; 151 | 152 | CodeMirror.registerHelper("hintWords", "clojure", 153 | [].concat(atoms, specialForms, coreSymbols)); 154 | 155 | var atom = createLookupMap(atoms); 156 | var specialForm = createLookupMap(specialForms); 157 | var coreSymbol = createLookupMap(coreSymbols); 158 | var hasBodyParameter = createLookupMap(haveBodyParameter); 159 | var delimiter = /^(?:[\\\[\]\s"(),;@^`{}~]|$)/; 160 | var numberLiteral = /^(?:[+\-]?\d+(?:(?:N|(?:[eE][+\-]?\d+))|(?:\.?\d*(?:M|(?:[eE][+\-]?\d+))?)|\/\d+|[xX][0-9a-fA-F]+|r[0-9a-zA-Z]+)?(?=[\\\[\]\s"#'(),;@^`{}~]|$))/; 161 | var characterLiteral = /^(?:\\(?:backspace|formfeed|newline|return|space|tab|o[0-7]{3}|u[0-9A-Fa-f]{4}|x[0-9A-Fa-f]{4}|.)?(?=[\\\[\]\s"(),;@^`{}~]|$))/; 162 | 163 | // simple-namespace := /^[^\\\/\[\]\d\s"#'(),;@^`{}~.][^\\\[\]\s"(),;@^`{}~.\/]*/ 164 | // simple-symbol := /^(?:\/|[^\\\/\[\]\d\s"#'(),;@^`{}~][^\\\[\]\s"(),;@^`{}~]*)/ 165 | // qualified-symbol := ((<.>)*)? 166 | var qualifiedSymbol = /^(?:(?:[^\\\/\[\]\d\s"#'(),;@^`{}~.][^\\\[\]\s"(),;@^`{}~.\/]*(?:\.[^\\\/\[\]\d\s"#'(),;@^`{}~.][^\\\[\]\s"(),;@^`{}~.\/]*)*\/)?(?:\/|[^\\\/\[\]\d\s"#'(),;@^`{}~][^\\\[\]\s"(),;@^`{}~]*)*(?=[\\\[\]\s"(),;@^`{}~]|$))/; 167 | 168 | function base(stream, state) { 169 | if (stream.eatSpace() || stream.eat(",")) return ["space", null]; 170 | if (stream.match(numberLiteral)) return [null, "number"]; 171 | if (stream.match(characterLiteral)) return [null, "string-2"]; 172 | if (stream.eat(/^"/)) return (state.tokenize = inString)(stream, state); 173 | if (stream.eat(/^[(\[{]/)) return ["open", "bracket"]; 174 | if (stream.eat(/^[)\]}]/)) return ["close", "bracket"]; 175 | if (stream.eat(/^;/)) {stream.skipToEnd(); return ["space", "comment"];} 176 | if (stream.eat(/^[#'@^`~]/)) return [null, "meta"]; 177 | 178 | var matches = stream.match(qualifiedSymbol); 179 | var symbol = matches && matches[0]; 180 | 181 | if (!symbol) { 182 | // advance stream by at least one character so we don't get stuck. 183 | stream.next(); 184 | stream.eatWhile(function (c) {return !is(c, delimiter);}); 185 | return [null, "error"]; 186 | } 187 | 188 | if (symbol === "comment" && state.lastToken === "(") 189 | return (state.tokenize = inComment)(stream, state); 190 | if (is(symbol, atom) || symbol.charAt(0) === ":") return ["symbol", "atom"]; 191 | if (is(symbol, specialForm) || is(symbol, coreSymbol)) return ["symbol", "keyword"]; 192 | if (state.lastToken === "(") return ["symbol", "builtin"]; // other operator 193 | 194 | return ["symbol", "variable"]; 195 | } 196 | 197 | function inString(stream, state) { 198 | var escaped = false, next; 199 | 200 | while (next = stream.next()) { 201 | if (next === "\"" && !escaped) {state.tokenize = base; break;} 202 | escaped = !escaped && next === "\\"; 203 | } 204 | 205 | return [null, "string"]; 206 | } 207 | 208 | function inComment(stream, state) { 209 | var parenthesisCount = 1; 210 | var next; 211 | 212 | while (next = stream.next()) { 213 | if (next === ")") parenthesisCount--; 214 | if (next === "(") parenthesisCount++; 215 | if (parenthesisCount === 0) { 216 | stream.backUp(1); 217 | state.tokenize = base; 218 | break; 219 | } 220 | } 221 | 222 | return ["space", "comment"]; 223 | } 224 | 225 | function createLookupMap(words) { 226 | var obj = {}; 227 | 228 | for (var i = 0; i < words.length; ++i) obj[words[i]] = true; 229 | 230 | return obj; 231 | } 232 | 233 | function is(value, test) { 234 | if (test instanceof RegExp) return test.test(value); 235 | if (test instanceof Object) return test.propertyIsEnumerable(value); 236 | } 237 | 238 | return { 239 | startState: function () { 240 | return { 241 | ctx: {prev: null, start: 0, indentTo: 0}, 242 | lastToken: null, 243 | tokenize: base 244 | }; 245 | }, 246 | 247 | token: function (stream, state) { 248 | if (stream.sol() && (typeof state.ctx.indentTo !== "number")) 249 | state.ctx.indentTo = state.ctx.start + 1; 250 | 251 | var typeStylePair = state.tokenize(stream, state); 252 | var type = typeStylePair[0]; 253 | var style = typeStylePair[1]; 254 | var current = stream.current(); 255 | 256 | if (type !== "space") { 257 | if (state.lastToken === "(" && state.ctx.indentTo === null) { 258 | if (type === "symbol" && is(current, hasBodyParameter)) 259 | state.ctx.indentTo = state.ctx.start + options.indentUnit; 260 | else state.ctx.indentTo = "next"; 261 | } else if (state.ctx.indentTo === "next") { 262 | state.ctx.indentTo = stream.column(); 263 | } 264 | 265 | state.lastToken = current; 266 | } 267 | 268 | if (type === "open") 269 | state.ctx = {prev: state.ctx, start: stream.column(), indentTo: null}; 270 | else if (type === "close") state.ctx = state.ctx.prev || state.ctx; 271 | 272 | return style; 273 | }, 274 | 275 | indent: function (state) { 276 | var i = state.ctx.indentTo; 277 | 278 | return (typeof i === "number") ? 279 | i : 280 | state.ctx.start + 1; 281 | }, 282 | 283 | closeBrackets: {pairs: "()[]{}\"\""}, 284 | lineComment: ";;" 285 | }; 286 | }); 287 | 288 | CodeMirror.defineMIME("text/x-clojure", "clojure"); 289 | CodeMirror.defineMIME("text/x-clojurescript", "clojure"); 290 | CodeMirror.defineMIME("application/edn", "clojure"); 291 | 292 | }); 293 | -------------------------------------------------------------------------------- /resources/public/assets/js/vendor/code-mirror/closebrackets.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function(mod) { 5 | if (typeof exports == "object" && typeof module == "object") // CommonJS 6 | mod(require("../../lib/codemirror")); 7 | else if (typeof define == "function" && define.amd) // AMD 8 | define(["../../lib/codemirror"], mod); 9 | else // Plain browser env 10 | mod(CodeMirror); 11 | })(function(CodeMirror) { 12 | var defaults = { 13 | pairs: "()[]{}''\"\"", 14 | closeBefore: ")]}'\":;>", 15 | triples: "", 16 | explode: "[]{}" 17 | }; 18 | 19 | var Pos = CodeMirror.Pos; 20 | 21 | CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) { 22 | if (old && old != CodeMirror.Init) { 23 | cm.removeKeyMap(keyMap); 24 | cm.state.closeBrackets = null; 25 | } 26 | if (val) { 27 | ensureBound(getOption(val, "pairs")) 28 | cm.state.closeBrackets = val; 29 | cm.addKeyMap(keyMap); 30 | } 31 | }); 32 | 33 | function getOption(conf, name) { 34 | if (name == "pairs" && typeof conf == "string") return conf; 35 | if (typeof conf == "object" && conf[name] != null) return conf[name]; 36 | return defaults[name]; 37 | } 38 | 39 | var keyMap = {Backspace: handleBackspace, Enter: handleEnter}; 40 | function ensureBound(chars) { 41 | for (var i = 0; i < chars.length; i++) { 42 | var ch = chars.charAt(i), key = "'" + ch + "'" 43 | if (!keyMap[key]) keyMap[key] = handler(ch) 44 | } 45 | } 46 | ensureBound(defaults.pairs + "`") 47 | 48 | function handler(ch) { 49 | return function(cm) { return handleChar(cm, ch); }; 50 | } 51 | 52 | function getConfig(cm) { 53 | var deflt = cm.state.closeBrackets; 54 | if (!deflt || deflt.override) return deflt; 55 | var mode = cm.getModeAt(cm.getCursor()); 56 | return mode.closeBrackets || deflt; 57 | } 58 | 59 | function handleBackspace(cm) { 60 | var conf = getConfig(cm); 61 | if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass; 62 | 63 | var pairs = getOption(conf, "pairs"); 64 | var ranges = cm.listSelections(); 65 | for (var i = 0; i < ranges.length; i++) { 66 | if (!ranges[i].empty()) return CodeMirror.Pass; 67 | var around = charsAround(cm, ranges[i].head); 68 | if (!around || pairs.indexOf(around) % 2 != 0) return CodeMirror.Pass; 69 | } 70 | for (var i = ranges.length - 1; i >= 0; i--) { 71 | var cur = ranges[i].head; 72 | cm.replaceRange("", Pos(cur.line, cur.ch - 1), Pos(cur.line, cur.ch + 1), "+delete"); 73 | } 74 | } 75 | 76 | function handleEnter(cm) { 77 | var conf = getConfig(cm); 78 | var explode = conf && getOption(conf, "explode"); 79 | if (!explode || cm.getOption("disableInput")) return CodeMirror.Pass; 80 | 81 | var ranges = cm.listSelections(); 82 | for (var i = 0; i < ranges.length; i++) { 83 | if (!ranges[i].empty()) return CodeMirror.Pass; 84 | var around = charsAround(cm, ranges[i].head); 85 | if (!around || explode.indexOf(around) % 2 != 0) return CodeMirror.Pass; 86 | } 87 | cm.operation(function() { 88 | var linesep = cm.lineSeparator() || "\n"; 89 | cm.replaceSelection(linesep + linesep, null); 90 | moveSel(cm, -1) 91 | ranges = cm.listSelections(); 92 | for (var i = 0; i < ranges.length; i++) { 93 | var line = ranges[i].head.line; 94 | cm.indentLine(line, null, true); 95 | cm.indentLine(line + 1, null, true); 96 | } 97 | }); 98 | } 99 | 100 | function moveSel(cm, dir) { 101 | var newRanges = [], ranges = cm.listSelections(), primary = 0 102 | for (var i = 0; i < ranges.length; i++) { 103 | var range = ranges[i] 104 | if (range.head == cm.getCursor()) primary = i 105 | var pos = range.head.ch || dir > 0 ? {line: range.head.line, ch: range.head.ch + dir} : {line: range.head.line - 1} 106 | newRanges.push({anchor: pos, head: pos}) 107 | } 108 | cm.setSelections(newRanges, primary) 109 | } 110 | 111 | function contractSelection(sel) { 112 | var inverted = CodeMirror.cmpPos(sel.anchor, sel.head) > 0; 113 | return {anchor: new Pos(sel.anchor.line, sel.anchor.ch + (inverted ? -1 : 1)), 114 | head: new Pos(sel.head.line, sel.head.ch + (inverted ? 1 : -1))}; 115 | } 116 | 117 | function handleChar(cm, ch) { 118 | var conf = getConfig(cm); 119 | if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass; 120 | 121 | var pairs = getOption(conf, "pairs"); 122 | var pos = pairs.indexOf(ch); 123 | if (pos == -1) return CodeMirror.Pass; 124 | 125 | var closeBefore = getOption(conf,"closeBefore"); 126 | 127 | var triples = getOption(conf, "triples"); 128 | 129 | var identical = pairs.charAt(pos + 1) == ch; 130 | var ranges = cm.listSelections(); 131 | var opening = pos % 2 == 0; 132 | 133 | var type; 134 | for (var i = 0; i < ranges.length; i++) { 135 | var range = ranges[i], cur = range.head, curType; 136 | var next = cm.getRange(cur, Pos(cur.line, cur.ch + 1)); 137 | if (opening && !range.empty()) { 138 | curType = "surround"; 139 | } else if ((identical || !opening) && next == ch) { 140 | if (identical && stringStartsAfter(cm, cur)) 141 | curType = "both"; 142 | else if (triples.indexOf(ch) >= 0 && cm.getRange(cur, Pos(cur.line, cur.ch + 3)) == ch + ch + ch) 143 | curType = "skipThree"; 144 | else 145 | curType = "skip"; 146 | } else if (identical && cur.ch > 1 && triples.indexOf(ch) >= 0 && 147 | cm.getRange(Pos(cur.line, cur.ch - 2), cur) == ch + ch) { 148 | if (cur.ch > 2 && /\bstring/.test(cm.getTokenTypeAt(Pos(cur.line, cur.ch - 2)))) return CodeMirror.Pass; 149 | curType = "addFour"; 150 | } else if (identical) { 151 | var prev = cur.ch == 0 ? " " : cm.getRange(Pos(cur.line, cur.ch - 1), cur) 152 | if (!CodeMirror.isWordChar(next) && prev != ch && !CodeMirror.isWordChar(prev)) curType = "both"; 153 | else return CodeMirror.Pass; 154 | } else if (opening && (next.length === 0 || /\s/.test(next) || closeBefore.indexOf(next) > -1)) { 155 | curType = "both"; 156 | } else { 157 | return CodeMirror.Pass; 158 | } 159 | if (!type) type = curType; 160 | else if (type != curType) return CodeMirror.Pass; 161 | } 162 | 163 | var left = pos % 2 ? pairs.charAt(pos - 1) : ch; 164 | var right = pos % 2 ? ch : pairs.charAt(pos + 1); 165 | cm.operation(function() { 166 | if (type == "skip") { 167 | moveSel(cm, 1) 168 | } else if (type == "skipThree") { 169 | moveSel(cm, 3) 170 | } else if (type == "surround") { 171 | var sels = cm.getSelections(); 172 | for (var i = 0; i < sels.length; i++) 173 | sels[i] = left + sels[i] + right; 174 | cm.replaceSelections(sels, "around"); 175 | sels = cm.listSelections().slice(); 176 | for (var i = 0; i < sels.length; i++) 177 | sels[i] = contractSelection(sels[i]); 178 | cm.setSelections(sels); 179 | } else if (type == "both") { 180 | cm.replaceSelection(left + right, null); 181 | cm.triggerElectric(left + right); 182 | moveSel(cm, -1) 183 | } else if (type == "addFour") { 184 | cm.replaceSelection(left + left + left + left, "before"); 185 | moveSel(cm, 1) 186 | } 187 | }); 188 | } 189 | 190 | function charsAround(cm, pos) { 191 | var str = cm.getRange(Pos(pos.line, pos.ch - 1), 192 | Pos(pos.line, pos.ch + 1)); 193 | return str.length == 2 ? str : null; 194 | } 195 | 196 | function stringStartsAfter(cm, pos) { 197 | var token = cm.getTokenAt(Pos(pos.line, pos.ch + 1)) 198 | return /\bstring/.test(token.type) && token.start == pos.ch && 199 | (pos.ch == 0 || !/\bstring/.test(cm.getTokenTypeAt(pos))) 200 | } 201 | }); 202 | -------------------------------------------------------------------------------- /resources/public/assets/js/vendor/code-mirror/matchbrackets.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function(mod) { 5 | if (typeof exports == "object" && typeof module == "object") // CommonJS 6 | mod(require("../../lib/codemirror")); 7 | else if (typeof define == "function" && define.amd) // AMD 8 | define(["../../lib/codemirror"], mod); 9 | else // Plain browser env 10 | mod(CodeMirror); 11 | })(function(CodeMirror) { 12 | var ie_lt8 = /MSIE \d/.test(navigator.userAgent) && 13 | (document.documentMode == null || document.documentMode < 8); 14 | 15 | var Pos = CodeMirror.Pos; 16 | 17 | var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<", "<": ">>", ">": "<<"}; 18 | 19 | function bracketRegex(config) { 20 | return config && config.bracketRegex || /[(){}[\]]/ 21 | } 22 | 23 | function findMatchingBracket(cm, where, config) { 24 | var line = cm.getLineHandle(where.line), pos = where.ch - 1; 25 | var afterCursor = config && config.afterCursor 26 | if (afterCursor == null) 27 | afterCursor = /(^| )cm-fat-cursor($| )/.test(cm.getWrapperElement().className) 28 | var re = bracketRegex(config) 29 | 30 | // A cursor is defined as between two characters, but in in vim command mode 31 | // (i.e. not insert mode), the cursor is visually represented as a 32 | // highlighted box on top of the 2nd character. Otherwise, we allow matches 33 | // from before or after the cursor. 34 | var match = (!afterCursor && pos >= 0 && re.test(line.text.charAt(pos)) && matching[line.text.charAt(pos)]) || 35 | re.test(line.text.charAt(pos + 1)) && matching[line.text.charAt(++pos)]; 36 | if (!match) return null; 37 | var dir = match.charAt(1) == ">" ? 1 : -1; 38 | if (config && config.strict && (dir > 0) != (pos == where.ch)) return null; 39 | var style = cm.getTokenTypeAt(Pos(where.line, pos + 1)); 40 | 41 | var found = scanForBracket(cm, Pos(where.line, pos + (dir > 0 ? 1 : 0)), dir, style, config); 42 | if (found == null) return null; 43 | return {from: Pos(where.line, pos), to: found && found.pos, 44 | match: found && found.ch == match.charAt(0), forward: dir > 0}; 45 | } 46 | 47 | // bracketRegex is used to specify which type of bracket to scan 48 | // should be a regexp, e.g. /[[\]]/ 49 | // 50 | // Note: If "where" is on an open bracket, then this bracket is ignored. 51 | // 52 | // Returns false when no bracket was found, null when it reached 53 | // maxScanLines and gave up 54 | function scanForBracket(cm, where, dir, style, config) { 55 | var maxScanLen = (config && config.maxScanLineLength) || 10000; 56 | var maxScanLines = (config && config.maxScanLines) || 1000; 57 | 58 | var stack = []; 59 | var re = bracketRegex(config) 60 | var lineEnd = dir > 0 ? Math.min(where.line + maxScanLines, cm.lastLine() + 1) 61 | : Math.max(cm.firstLine() - 1, where.line - maxScanLines); 62 | for (var lineNo = where.line; lineNo != lineEnd; lineNo += dir) { 63 | var line = cm.getLine(lineNo); 64 | if (!line) continue; 65 | var pos = dir > 0 ? 0 : line.length - 1, end = dir > 0 ? line.length : -1; 66 | if (line.length > maxScanLen) continue; 67 | if (lineNo == where.line) pos = where.ch - (dir < 0 ? 1 : 0); 68 | for (; pos != end; pos += dir) { 69 | var ch = line.charAt(pos); 70 | if (re.test(ch) && (style === undefined || 71 | (cm.getTokenTypeAt(Pos(lineNo, pos + 1)) || "") == (style || ""))) { 72 | var match = matching[ch]; 73 | if (match && (match.charAt(1) == ">") == (dir > 0)) stack.push(ch); 74 | else if (!stack.length) return {pos: Pos(lineNo, pos), ch: ch}; 75 | else stack.pop(); 76 | } 77 | } 78 | } 79 | return lineNo - dir == (dir > 0 ? cm.lastLine() : cm.firstLine()) ? false : null; 80 | } 81 | 82 | function matchBrackets(cm, autoclear, config) { 83 | // Disable brace matching in long lines, since it'll cause hugely slow updates 84 | var maxHighlightLen = cm.state.matchBrackets.maxHighlightLineLength || 1000, 85 | highlightNonMatching = config && config.highlightNonMatching; 86 | var marks = [], ranges = cm.listSelections(); 87 | for (var i = 0; i < ranges.length; i++) { 88 | var match = ranges[i].empty() && findMatchingBracket(cm, ranges[i].head, config); 89 | if (match && (match.match || highlightNonMatching !== false) && cm.getLine(match.from.line).length <= maxHighlightLen) { 90 | var style = match.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket"; 91 | marks.push(cm.markText(match.from, Pos(match.from.line, match.from.ch + 1), {className: style})); 92 | if (match.to && cm.getLine(match.to.line).length <= maxHighlightLen) 93 | marks.push(cm.markText(match.to, Pos(match.to.line, match.to.ch + 1), {className: style})); 94 | } 95 | } 96 | 97 | if (marks.length) { 98 | // Kludge to work around the IE bug from issue #1193, where text 99 | // input stops going to the textarea whenever this fires. 100 | if (ie_lt8 && cm.state.focused) cm.focus(); 101 | 102 | var clear = function() { 103 | cm.operation(function() { 104 | for (var i = 0; i < marks.length; i++) marks[i].clear(); 105 | }); 106 | }; 107 | if (autoclear) setTimeout(clear, 800); 108 | else return clear; 109 | } 110 | } 111 | 112 | function doMatchBrackets(cm) { 113 | cm.operation(function() { 114 | if (cm.state.matchBrackets.currentlyHighlighted) { 115 | cm.state.matchBrackets.currentlyHighlighted(); 116 | cm.state.matchBrackets.currentlyHighlighted = null; 117 | } 118 | cm.state.matchBrackets.currentlyHighlighted = matchBrackets(cm, false, cm.state.matchBrackets); 119 | }); 120 | } 121 | 122 | function clearHighlighted(cm) { 123 | if (cm.state.matchBrackets && cm.state.matchBrackets.currentlyHighlighted) { 124 | cm.state.matchBrackets.currentlyHighlighted(); 125 | cm.state.matchBrackets.currentlyHighlighted = null; 126 | } 127 | } 128 | 129 | CodeMirror.defineOption("matchBrackets", false, function(cm, val, old) { 130 | if (old && old != CodeMirror.Init) { 131 | cm.off("cursorActivity", doMatchBrackets); 132 | cm.off("focus", doMatchBrackets) 133 | cm.off("blur", clearHighlighted) 134 | clearHighlighted(cm); 135 | } 136 | if (val) { 137 | cm.state.matchBrackets = typeof val == "object" ? val : {}; 138 | cm.on("cursorActivity", doMatchBrackets); 139 | cm.on("focus", doMatchBrackets) 140 | cm.on("blur", clearHighlighted) 141 | } 142 | }); 143 | 144 | CodeMirror.defineExtension("matchBrackets", function() {matchBrackets(this, true);}); 145 | CodeMirror.defineExtension("findMatchingBracket", function(pos, config, oldConfig){ 146 | // Backwards-compatibility kludge 147 | if (oldConfig || typeof config == "boolean") { 148 | if (!oldConfig) { 149 | config = config ? {strict: true} : null 150 | } else { 151 | oldConfig.strict = config 152 | config = oldConfig 153 | } 154 | } 155 | return findMatchingBracket(this, pos, config) 156 | }); 157 | CodeMirror.defineExtension("scanForBracket", function(pos, dir, style, config){ 158 | return scanForBracket(this, pos, dir, style, config); 159 | }); 160 | }); 161 | -------------------------------------------------------------------------------- /resources/public/assets/js/vendor/firefox-svg-poly.min.js: -------------------------------------------------------------------------------- 1 | !function(){if("undefined"==typeof InstallTrigger)return;const e=SVGPathElement.prototype.setPathData;if(SVGPathElement.prototype.setPathData=function(t){if(e)try{return e.call(this,t)}catch(e){console.log("Using fallback polyfill setPathData implementation")}if(!Array.isArray(t))throw new Error("SVGPathElement.setPathData: Argument must be an array");let n="";return t.forEach((e=>{if(e)try{const t=e.type||e.pathSegTypeAsLetter||"";"Z"===t?n+="Z":"M"===t&&e.values?n+="M"+e.values.join(","):"L"===t&&e.values?n+="L"+e.values.join(","):"C"===t&&e.values?n+="C"+e.values.join(","):"A"===t&&e.values?n+="A"+e.values.join(","):"M"===t&&void 0!==e.x?n+=`M${e.x},${e.y}`:"L"===t&&void 0!==e.x?n+=`L${e.x},${e.y}`:"C"===t&&void 0!==e.x?n+=`C${e.x1},${e.y1},${e.x2},${e.y2},${e.x},${e.y}`:"A"===t&&void 0!==e.x&&(n+=`A${e.r1},${e.r2},${e.angle},${e.largeArcFlag},${e.sweepFlag},${e.x},${e.y}`)}catch(e){console.warn("Error processing path segment:",e)}})),this.setAttribute("d",n),this},"undefined"!=typeof SVGRect){const e={};["x","y","width","height"].forEach((t=>{try{const n=Object.getOwnPropertyDescriptor(SVGRect.prototype,t);n&&n.set&&(e[t]=n)}catch(e){console.warn(`Error getting descriptor for SVGRect.${t}:`,e)}})),["x","y","width","height"].forEach((t=>{try{const n=e[t];n&&n.set&&Object.defineProperty(SVGRect.prototype,t,{get:n.get,set:function(e){return null!=e&&isFinite(Number(e))||(console.warn(`SVGRect.${t} setter: Invalid value, using 0 instead:`,e),e=0),n.set.call(this,Number(e))},enumerable:n.enumerable,configurable:n.configurable})}catch(e){console.warn(`Error patching SVGRect.${t}:`,e)}}))}if("undefined"!=typeof SVGElement&&SVGElement.prototype.getBBox){const e=SVGElement.prototype.getBBox;SVGElement.prototype.getBBox=function(){try{const t=e.call(this);if(t){if(["x","y","width","height"].some((e=>null===t[e]||void 0===t[e]||!isFinite(t[e])))){const e={};for(let n in t)"number"!=typeof t[n]||isFinite(t[n])?e[n]=t[n]:e[n]=0;return isFinite(e.x)||(e.x=0),isFinite(e.y)||(e.y=0),isFinite(e.width)||(e.width=0),isFinite(e.height)||(e.height=0),e}}return t}catch(e){return console.warn("Error in getBBox:",e),{x:0,y:0,width:0,height:0}}}}if("undefined"!=typeof DOMRect&&["x","y","width","height"].forEach((e=>{try{const t=Object.getOwnPropertyDescriptor(DOMRect.prototype,e);if(t&&t.set){const n=t.set;Object.defineProperty(DOMRect.prototype,e,{get:t.get,set:function(e){return null!=e&&isFinite(Number(e))||(e=0),n.call(this,Number(e))},enumerable:t.enumerable,configurable:t.configurable})}}catch(e){}})),"undefined"!=typeof SVGAnimatedLength){["baseVal","animVal"].forEach((e=>{try{const t=Object.getOwnPropertyDescriptor(SVGAnimatedLength.prototype,e);if(t&&t.get){const n=t.get;Object.defineProperty(SVGAnimatedLength.prototype,e,{get:function(){try{return n.call(this)}catch(t){return console.warn(`Error in SVGAnimatedLength.${e} getter:`,t),{value:0,unitType:1}}},set:t.set,enumerable:t.enumerable,configurable:t.configurable})}}catch(t){console.warn(`Error patching SVGAnimatedLength.${e}:`,t)}}))}const t=setInterval((function(){if("undefined"!=typeof LeaderLine){clearInterval(t);try{if(LeaderLine.prototype._getPathData){const e=LeaderLine.prototype._getPathData;LeaderLine.prototype._getPathData=function(){try{return e.apply(this,arguments)}catch(e){return console.warn("Error in _getPathData:",e),[{type:"M",values:[0,0]}]}}}if(LeaderLine.prototype._setConnectorSVGPathData){const e=LeaderLine.prototype._setConnectorSVGPathData;LeaderLine.prototype._setConnectorSVGPathData=function(){try{return e.apply(this,arguments)}catch(e){console.warn("Error in _setConnectorSVGPathData:",e)}}}if(LeaderLine.prototype._getElementBBox){const e=LeaderLine.prototype._getElementBBox;LeaderLine.prototype._getElementBBox=function(){try{const t=e.apply(this,arguments);return t&&(isFinite(t.x)||(t.x=0),isFinite(t.y)||(t.y=0),isFinite(t.width)||(t.width=0),isFinite(t.height)||(t.height=0)),t}catch(e){return console.warn("Error in _getElementBBox:",e),{x:0,y:0,width:0,height:0}}}}}catch(e){console.error("Error patching LeaderLine:",e)}}}),50)}(); -------------------------------------------------------------------------------- /resources/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flow Monitor 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /shadow-cljs.edn: -------------------------------------------------------------------------------- 1 | ; 2 | ; 3 | {:deps true 4 | :source-paths ["src" "test"] 5 | :dev-http {8080 "target/"} 6 | :nrepl {:port 9001 7 | :middleware []} 8 | :builds {:app {:target :browser 9 | :js-options {:js-provider :shadow} 10 | :output-dir "resources/public/assets/js/compiled" 11 | :asset-path "/js/compiled" 12 | :modules {:main {:init-fn clojurescript.flow-monitor-ui.core/main}} 13 | :compiler-options {:infer-externs :auto} 14 | :dev {:closure-defines {goog.DEBUG true}} 15 | :release {:closure-defines {goog.DEBUG false}} 16 | :devtools {:http-root "resources/public" 17 | :preloads [] 18 | :after-load clojurescript.flow-monitor-ui.core/on-reload 19 | :http-port 9876}} 20 | :test {:target :browser-test 21 | :test-dir "resources/public/assets/js/test" 22 | :ns-regexp "-test$" 23 | :closure-defines {flow-monitor-ui/alert-timeout-ms 10} 24 | :devtools {:http-port 8021 25 | :http-root "resources/public/assets/js/test"}}}} 26 | ; 27 | ; 28 | -------------------------------------------------------------------------------- /src/clojure/core/async/flow_monitor.clj: -------------------------------------------------------------------------------- 1 | (ns clojure.core.async.flow-monitor 2 | (:require 3 | [clojure.core.async :as async] 4 | [clojure.core.async.flow :as async-flow] 5 | [ring.util.response :as response] 6 | [ring.middleware.content-type :refer [wrap-content-type]] 7 | [ring.middleware.not-modified :refer [wrap-not-modified]] 8 | [clojure.edn :as edn] 9 | [muuntaja.core :as m] 10 | [reitit.ring :as ring] 11 | [cognitect.transit :as transit] 12 | [clojure.data.json :as json] 13 | [org.httpkit.server :as httpkit] 14 | [clojure.datafy :as d]) 15 | (:import 16 | [java.io ByteArrayInputStream ByteArrayOutputStream])) 17 | 18 | (def default-state {:server nil 19 | :channels #{} 20 | :loop-ping? false 21 | :flow nil}) 22 | 23 | (def default-write-handler (transit/write-handler "default" (fn [obj] (str obj)))) 24 | 25 | (defn transit-str-writer [data user-handlers] 26 | (let [out (ByteArrayOutputStream. 4096) 27 | writer (transit/writer out :json {:handlers user-handlers 28 | :default-handler default-write-handler})] 29 | (transit/write writer data) 30 | (.toString out))) 31 | 32 | (defn transit-str-reader [arg] 33 | (let [arg-json (json/read-str arg) 34 | arg-bytes (.getBytes arg-json "UTF-8") 35 | in (ByteArrayInputStream. arg-bytes) 36 | reader (transit/reader in :json)] 37 | (transit/read reader))) 38 | 39 | (defn mainline-chan-meta [proc] 40 | (let [reducer-fn (fn [res k v] 41 | (assoc res k (assoc v :chan-obj (re-find #"\@[a-zA-Z0-9]+" (str (:clojure.datafy/obj (meta v)))))))] 42 | (assoc proc 43 | :clojure.core.async.flow/ins (reduce-kv reducer-fn {} (:clojure.core.async.flow/ins proc)) 44 | :clojure.core.async.flow/outs (reduce-kv reducer-fn {} (:clojure.core.async.flow/outs proc))))) 45 | 46 | (defn default-flow-state-filter [proc-state] 47 | (into {} (filter (fn [[k _]] (not= "clojure.core.async.flow" (namespace k))) proc-state))) 48 | 49 | (defn filter-state [proc filters] 50 | (let [pid (:clojure.core.async.flow/pid proc) 51 | state (:clojure.core.async.flow/state proc) 52 | user-filter (cond 53 | (contains? filters pid) (pid filters) 54 | (contains? filters :default) (:default filters) 55 | :else identity) 56 | filtered-state (cond 57 | (map? state) (->> state 58 | (default-flow-state-filter) 59 | (filter user-filter) 60 | (into {})) 61 | (string? state) state 62 | :else (filter user-filter state))] 63 | (assoc proc :clojure.core.async.flow/state filtered-state))) 64 | 65 | (defn send-message [state message] 66 | (doall (for [channel (:channels @state)] 67 | (httpkit/send! channel (transit-str-writer message (:handlers @state)))))) 68 | 69 | (defn loop-ping [state] 70 | (async/thread 71 | (loop [s state] 72 | (if (:loop-ping? @s) 73 | (do (send-message state {:action :ping :data (d/datafy (reduce-kv 74 | (fn [res k v] 75 | (assoc res k (filter-state (mainline-chan-meta v) (:filters @state)))) 76 | {} 77 | (async-flow/ping (:flow @state))))}) 78 | (Thread/sleep 1000) 79 | (recur s)) 80 | (println "Ping loop stopped"))))) 81 | 82 | (defn ws-response [state request] 83 | (httpkit/as-channel 84 | request 85 | {:on-open (fn [ch] 86 | (swap! state update-in [:channels] conj ch) 87 | (send-message state {:action :datafy 88 | :data (assoc (d/datafy (:flow @state)) :root (:root @state))}) 89 | (swap! state assoc-in [:loop-ping?] true) 90 | (loop-ping state)) 91 | :on-receive (fn [ch data] 92 | (let [clj-data (transit-str-reader data) 93 | action (:action clj-data)] 94 | (case action 95 | :inject (async-flow/inject (:flow @state) (:target clj-data) (edn/read-string (:data clj-data))) 96 | :resume-proc (async-flow/resume-proc (:flow @state) (:pid clj-data)) 97 | :pause-proc (async-flow/pause-proc (:flow @state) (:pid clj-data))))) 98 | :on-close (fn [ch status] 99 | (swap! state assoc-in [:loop-ping?] false) 100 | (swap! state update-in [:channels] disj ch)) 101 | :on-ping nil})) 102 | 103 | (defn frontend-handler [_] 104 | (-> (response/resource-response "index.html" {:root "public"}) 105 | (response/content-type "text/html"))) 106 | 107 | (defn app [state] 108 | (-> 109 | (ring/ring-handler 110 | (ring/router 111 | [["/flow-socket" {:get (fn [req] (ws-response state req))}] 112 | ["/app/*" {:get frontend-handler}]] 113 | {:data {:muuntaja m/instance}}) 114 | (ring/routes 115 | (ring/create-resource-handler {:path "/" :root "public"}) 116 | (ring/create-default-handler))) 117 | (wrap-content-type) 118 | (wrap-not-modified))) 119 | 120 | (defn report-monitoring [state report-chan error-chan] 121 | (async/thread 122 | (loop [] 123 | (let [[val port] (async/alts!! [report-chan error-chan])] 124 | (if (nil? val) 125 | (prn "========= monitoring shutdown") 126 | (do 127 | (if (= port error-chan) 128 | (send-message state {:action :error :data (with-out-str (clojure.pprint/pprint val))}) 129 | (send-message state {:action :message :data val})) 130 | (recur)))))) 131 | nil) 132 | 133 | (defn start-server 134 | "Starts a web server for monitoring and interacting with a core.async.flow 135 | 136 | Parameters: 137 | - opts: A map with the following keys: 138 | - :flow (required) - The return value from clojure.core.async.flow/create-flow 139 | - :port (optional) - The port to run the server on (default: 9998) 140 | - :handlers (optional) - A map of custom Transit write handlers to use when serializing state 141 | data to send to the frontend. These handlers should follow the format 142 | expected by cognitect.transit/writer :handlers 143 | - :filters (optional) - A map of {:pid state-filter-pred} which is applied to the state 144 | for the associated pid. :default is also accepted and will be applied 145 | to any proc that doesn't have a filter specified for the pid. 146 | - :root (optional) - A vector of :pid keywords to designate the root procs in the event of 147 | circular flows. 148 | 149 | Returns: 150 | An atom containing the server's state, and prints a local url where the frontend can be reached" 151 | [{:keys [flow port handlers state-filters root] :or {port 9998}}] 152 | (let [state (atom default-state) 153 | error-chan (:clojure.datafy/obj (meta (:error (:chans (d/datafy flow))))) 154 | report-chan (:clojure.datafy/obj (meta (:report (:chans (d/datafy flow)))))] 155 | (async-flow/ping flow) 156 | (swap! state assoc :flow flow :handlers handlers :filters state-filters :root root) 157 | (report-monitoring state report-chan error-chan) 158 | (let [server (httpkit/run-server (app state) {:port port 159 | :max-body 100000000 160 | :legacy-return-value? false})] 161 | (swap! state assoc :server server) 162 | (println "\n--------------------------------") 163 | (println (str "- Visit: http://localhost:" port "/index.html")) 164 | (println "--------------------------------\n") 165 | state))) 166 | 167 | (defn stop-server 168 | "Stops a running flow monitoring server and cleans up its resources. 169 | 170 | Parameters: 171 | - server-atom (required) - The value returned from start-server" 172 | [server-state] 173 | (httpkit/server-stop! (:server @server-state)) 174 | (reset! server-state default-state)) 175 | -------------------------------------------------------------------------------- /src/clojure/core/async/flow_static.clj: -------------------------------------------------------------------------------- 1 | (ns clojure.core.async.flow-static 2 | (:require 3 | [clojure.java.io :as io] 4 | [hiccup2.core :as h] 5 | [clojure.data.json :as json])) 6 | 7 | (defn titleize-keyword [kw] 8 | (as-> (name kw) $ 9 | (clojure.string/replace $ #"-" " ") 10 | (clojure.string/split $ #"\s+") 11 | (map clojure.string/capitalize $) 12 | (clojure.string/join " " $))) 13 | 14 | (defn flow-relationships [data] 15 | (reduce (fn [res [[from-proc out-port] [to-proc in-port]]] 16 | (-> res 17 | (update-in [from-proc :from] (fnil conj [])) 18 | (update-in [to-proc :to] (fnil conj [])) 19 | (update-in [from-proc :ins] (fnil conj [])) 20 | (update-in [to-proc :outs] (fnil conj [])) 21 | (update-in [to-proc :from] (fnil conj []) from-proc) 22 | (update-in [from-proc :to] (fnil conj []) to-proc) 23 | (update-in [to-proc :ins] (fnil conj []) in-port) 24 | (update-in [from-proc :outs] (fnil conj []) out-port))) 25 | {} data)) 26 | 27 | (defn flow-levels [relationships root] 28 | (let [orphans (filter (fn [[_ v]] (empty? (:from v))) relationships) 29 | user-roots (filter (fn [[k _]] (contains? (set root) k)) relationships)] 30 | (loop [result [] 31 | current-level (if (empty? orphans) user-roots orphans) 32 | remaining (apply dissoc relationships (map first current-level))] 33 | (if (empty? current-level) 34 | result 35 | (let [next-level (select-keys remaining (mapcat (fn [[_ v]] (:to v)) current-level))] 36 | (recur (conj result (map (fn [[k v]] {k v}) current-level)) 37 | next-level 38 | (apply dissoc remaining (keys next-level)))))))) 39 | 40 | (defn proc-card [proc] 41 | [:div.middle-section-one-container 42 | [:div.title-container [:h2.title (titleize-keyword proc)]]]) 43 | 44 | (defn proc-el [proc-map] 45 | (let [proc (-> proc-map keys first) 46 | ins (-> proc-map vals first :ins) 47 | outs (-> proc-map vals first :outs)] 48 | [:div.card-container {:id (name proc)} 49 | [:div.proc-card {:class "expanded"} 50 | [:div.expanded-view 51 | [:div.header-labels 52 | (for [io-id ins] 53 | [:div.header-label {:id (str proc "-" io-id)} io-id])] 54 | (proc-card proc) 55 | [:div.output-section 56 | [:div.output-container 57 | (for [io-id outs] 58 | [:div.output {:id (str proc "-" io-id)} io-id])]]]]])) 59 | 60 | (defn proc-row [idx row] 61 | [:div.row-3 62 | (for [proc row] 63 | (proc-el proc))]) 64 | 65 | (defn chart [conns root] 66 | (let [relationships (flow-relationships conns)] 67 | [:div#chart 68 | (for [[idx row] (map-indexed vector (flow-levels relationships root))] 69 | (proc-row idx row))])) 70 | 71 | (defn json-friendly [conn] 72 | (let [from-data (first conn) 73 | to-data (second conn) 74 | from-proc (name (first from-data)) 75 | from-port (name (second from-data)) 76 | to-proc (name (first to-data)) 77 | to-port (name (second to-data))] 78 | {"from" {"proc" from-proc "port" from-port} 79 | "to" {"proc" to-proc "port" to-port}})) 80 | 81 | (defn connections-to-json [connections] 82 | (json/write-str (mapv json-friendly connections))) 83 | 84 | (defn template [{:keys [conns]} root] 85 | (str 86 | (h/html 87 | [:html 88 | [:head 89 | [:title "Flow Chart"] 90 | [:script (h/raw (slurp (io/resource "public/assets/js/vendor/leader-line.min.js")))] 91 | [:div#flow-data {:style "display: none;" :data-connections (h/raw (connections-to-json conns))}] 92 | [:script (h/raw " 93 | window.addEventListener('load', function() { 94 | const dataEl = document.getElementById('flow-data'); 95 | const connectionsJSON = dataEl.getAttribute('data-connections'); 96 | const connections = JSON.parse(connectionsJSON); 97 | function drawConnections() { 98 | setTimeout(() => { 99 | connections.forEach(conn => { 100 | const outSocketId = `:${conn.from.proc}-:${conn.from.port}`; 101 | const inSocketId = `:${conn.to.proc}-:${conn.to.port}`; 102 | const outSocketEl = document.getElementById(outSocketId); 103 | const inSocketEl = document.getElementById(inSocketId); 104 | const line = new LeaderLine( 105 | outSocketEl, 106 | inSocketEl, 107 | {color: '#52606D', 108 | size: 3, 109 | startSocket: 'bottom', 110 | endSocket: 'top', 111 | path: 'grid', 112 | // hide: true, 113 | animOptions: {duration: 1000, timing: 'ease'}}); 114 | // line.show('draw'); 115 | }); 116 | }, 500); 117 | } 118 | drawConnections();});")] 119 | [:style "html,\nbody {\n margin: 0;\n padding: 0;\n}\n\nbody {\n height: 100vh;\n width: 100vw;\n margin-top: 50px;\n background-color: #CBD2D9;\n}\n\n.row-3 {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 10px;\n align-items: center;\n}\n\n.card-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 40px;\n min-width: 220px;\n}\n.card-container .proc-card {\n background: #F5F7FA;\n border-radius: 3px;\n width: 100%;\n display: inline-block;\n position: relative;\n transition: all 0.4s ease-in-out;\n will-change: height;\n margin-bottom: 55px;\n}\n.card-container .proc-card.expanded .expanded-view {\n max-height: 500px;\n opacity: 1;\n visibility: visible;\n}\n.card-container .proc-card .expanded-view {\n transition: all 0.4s ease-in-out;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n visibility: hidden;\n}\n.card-container .proc-card .expanded-view .header-labels {\n display: flex;\n justify-content: center;\n padding: 0 15px;\n}\n.card-container .proc-card .expanded-view .header-labels .header-label {\n font-size: 1.75em;\n font-weight: 500;\n color: #4a4a4a;\n text-align: center;\n width: 150px;\n}\n.card-container .proc-card .expanded-view .middle-section-one-container {\n box-sizing: border-box;\n background: #52606D;\n color: #E4E7EB;\n border-radius: 2px;\n position: relative;\n padding: 10px 0;\n width: calc(100% - 20px);\n margin: auto;\n}\n.card-container .proc-card .expanded-view .title-container {\n text-align: center;\n}\n.card-container .proc-card .expanded-view .title-container .title {\n font-size: 2.3em;\n font-weight: 600;\n margin: 0;\n color: white;\n}\n.card-container .proc-card .output-section {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n box-sizing: border-box;\n}\n.card-container .proc-card .output-section .output-container {\n display: flex;\n flex-direction: row;\n gap: 15px;\n justify-content: center;\n align-items: center;\n width: calc(100% - 14px);\n margin: 0 7px;\n padding: 0 0;\n box-sizing: border-box;\n}\n.card-container .proc-card .output-section .output-container .output {\n flex: 1;\n min-width: 110px;\n padding: 0 8px;\n font-size: 1.75em;\n color: #4a4a4a;\n text-align: center;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n}\n"]] 120 | [:body 121 | (chart conns root)]]))) 122 | 123 | (defn graph [flow-config & root] 124 | (tagged-literal 'flare/html {:html (template flow-config (first root)) 125 | :title "Flow Chart"})) -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/components/alerts.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.components.alerts 2 | (:require 3 | [clojurescript.flow-monitor-ui.utils.helpers :refer [dis db :routes :components :log-modal-visible?))) 18 | 19 | (rf/reg-event-fx 20 | ::set-log-modal-visibility 21 | (fn [{:keys [db]} [_ state]] 22 | {:db (assoc-in db [:routes :components :log-modal-visible?] state)})) 23 | 24 | (defn message-table [filtered-messages] 25 | (let [messages (if (string? (first filtered-messages)) 26 | (map reader/read-string filtered-messages) 27 | filtered-messages) 28 | columns (keys (first messages))] 29 | [:div.table-container 30 | [:table.data-table 31 | [:thead 32 | [:tr 33 | (for [column columns] 34 | ^{:key (name column)} 35 | [:th (name column)])]] 36 | [:tbody 37 | (for [[idx row] (map-indexed vector messages)] 38 | ^{:key idx} 39 | [:tr 40 | (for [column columns] 41 | ^{:key (str idx "-" (name column))} 42 | [:td (get row column)])])]]])) 43 | 44 | (defn message-data [messages] 45 | [:div#log-display 46 | (for [[idx log] (map-indexed vector messages)] 47 | ^{:key idx} 48 | [:pre (str log)])]) 49 | 50 | (defn display-select 51 | [{:keys [options id class-name]}] 52 | [:select.dropdown-select 53 | {:id id 54 | :class class-name 55 | :value (:display-type @modal-state) 56 | :on-change (fn [evt] (let [new-val (keyword (.. evt -target -value))] 57 | (swap! modal-state assoc-in [:display-type] new-val)))} 58 | (for [{:keys [value label]} options] 59 | ^{:key value} 60 | [:option {:value value} label])]) 61 | 62 | (defn filter-input [full?] 63 | [:div.filter-container {:class (when full? "filter-container-full")} 64 | [:input {:type "text" 65 | :placeholder "Regex Filter..." 66 | :value (:filter-text @modal-state) 67 | :on-change (fn [e] 68 | (let [filter-str (.. e -target -value)] 69 | (swap! modal-state assoc-in [:filter-text] filter-str)))}]]) 70 | 71 | (defn log-modal [] 72 | (let [modal-visible? (dis [::set-log-modal-visibility false]))} "X"]] 85 | [:div.modal-body.modal-body-pad 86 | [:div.controls-row 87 | [filter-input (not homogeneous?)] 88 | (when homogeneous? [display-select {:options [{:value "data" :label "data"} {:value "table" :label "table"}]}])] 89 | [:div.panel-contents 90 | (if homogeneous? 91 | (case (:display-type @modal-state) 92 | :data [message-data display-messages] 93 | :table [message-table display-messages]) 94 | [message-data display-messages])]]]])) 95 | 96 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/components/modal.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.components.modal 2 | (:require 3 | [clojurescript.flow-monitor-ui.utils.helpers :refer [>dis db :routes :components :modal-visible?))) 14 | 15 | (rf/reg-event-fx 16 | ::set-modal-visibility 17 | (fn [{:keys [db]} [_ state]] 18 | {:db (assoc-in db [:routes :components :modal-visible?] state)})) 19 | 20 | (rf/reg-event-fx 21 | ::set-code-mirror 22 | (fn [{:keys [db]} [_ code-mirror]] 23 | {:db (assoc-in db [:routes :components :code-mirror] code-mirror)})) 24 | 25 | (rf/reg-event-fx 26 | ::save-editor-content 27 | (fn [{:keys [db]} [_ content]] 28 | {:db (assoc-in db [:editor-contents :inject] content)})) 29 | 30 | (rf/reg-sub ::get-editor-content 31 | (fn [db _] 32 | (get-in db [:editor-contents :inject] "[]"))) ;; default to empty string 33 | 34 | (defn codemirror [] 35 | (let [node-ref (atom nil) 36 | cm-ref (atom nil) 37 | saved-content (js {:value (or saved-content "[]") 46 | :mode "text/x-clojure" 47 | :lineNumbers false 48 | :autoCloseBrackets true 49 | :matchBrackets true}) 50 | code-mirror (js/CodeMirror. @node-ref opts)] 51 | (reset! cm-ref code-mirror) 52 | (.focus code-mirror) 53 | (.setCursor code-mirror 0 1) 54 | (.on code-mirror "change" 55 | #(rf/dispatch [::save-editor-content (.getValue %1)])) 56 | (>dis [::set-code-mirror code-mirror]))))}))) 57 | 58 | (defn find-targets [connections proc] 59 | (reduce (fn [res [from to]] 60 | (cond 61 | (= proc (first from)) (conj res from) 62 | (= proc (first to)) (conj res to) 63 | :else res)) 64 | #{} 65 | connections)) 66 | 67 | (defn inject [] 68 | (let [pid (:active-proc-pid @global-state) 69 | conns (-> @global-state :data :conns) 70 | targets (find-targets conns pid) 71 | content (dis [::events/inject-complete-alert (str "Data successfully injected to: " t)]))} 81 | (str (second t))])]]])) 82 | 83 | (defn error-display [] 84 | (let [pid (:active-proc-pid @global-state)] 85 | [:div#error-display 86 | (for [[idx error] (map-indexed vector (-> @global-state :errors pid))] 87 | ^{:key idx} 88 | [:pre error])])) 89 | 90 | (defn titleize-keyword [kw] 91 | (when kw (-> (name kw) 92 | (clojure.string/replace #"-" " ") 93 | (clojure.string/split #"\s+") 94 | (->> (map clojure.string/capitalize) 95 | (clojure.string/join " "))))) 96 | 97 | (defn handle-tab-click [tab-name] 98 | (when (= tab-name :inject) 99 | (when-let [cm (.querySelector js/document ".CodeMirror")] 100 | (-> cm .-CodeMirror .focus)))) 101 | 102 | (defn report-modal [] 103 | (let [modal-visible? (dis [::set-modal-visibility false]))} "X"]] 111 | [:div.modal-body 112 | [:div.tabs 113 | [:div.tab {:class (when (= (:active-tab @global-state) :inject) "active") 114 | :on-click (fn [e] 115 | (swap! global-state assoc :active-tab :inject) 116 | (handle-tab-click :inject))} 117 | "Inject"] 118 | [:div.tab {:class (when (= (:active-tab @global-state) :errors) "active") 119 | :on-click (fn [e] 120 | (swap! global-state assoc :active-tab :errors) 121 | (handle-tab-click :errors))} 122 | (let [pid (:active-proc-pid @global-state)] 123 | (str "Errors (" (-> @global-state :errors pid count) ")"))]] 124 | [:div.panel-contents 125 | (case (:active-tab @global-state) 126 | :inject [inject] 127 | :errors [error-display])]]]])) 128 | 129 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/components/nav.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.components.nav 2 | (:require 3 | [clojurescript.flow-monitor-ui.global :refer [proc-card-state remove-arrows draw chan-representation]] 4 | [clojurescript.flow-monitor-ui.components.log-modal :as log-modal] 5 | [clojurescript.flow-monitor-ui.utils.helpers :refer [>dis dis [::log-modal/set-log-modal-visibility true])} 67 | [:img {:src "assets/img/message_icon.svg"}]]] 68 | [:div.settings-container 69 | [:div.settings-icon-wrapper 70 | [:button.settings-icon {:class (when @menu-open? "opened") 71 | :on-click #(swap! menu-open? not)} 72 | [:img {:src "assets/img/settings.svg"}]]]] 73 | [:div.settings-dropdown {:class (when @menu-open? "active")} 74 | [:div.settings-header 75 | [:h3 "Settings"] 76 | [:button.close-settings {:on-click #(reset! menu-open? false)} ""]] 77 | [:div.settings-content 78 | [:h4 "Display"] 79 | [:div.setting-option 80 | [:label "Proc Cards"] 81 | [:div.pill-toggle 82 | [:button.pill-btn.pill-left 83 | {:class (when-not all-expanded? "active") 84 | :on-click (fn [e] (set-proc-card-expansion-state false))} 85 | "Collapse All"] 86 | [:button.pill-btn.pill-right 87 | {:class (when all-expanded? "active") 88 | :on-click (fn [e] (set-proc-card-expansion-state true))} 89 | "Expand All"]]] 90 | [:div.setting-option 91 | [:label "Chan Representation"] 92 | [:div.pill-toggle 93 | [:button.pill-btn.pill-left 94 | {:class (when (= :line @chan-representation) "active") 95 | :on-click (fn [e] (set-chan-representation :line))} 96 | "Line"] 97 | [:button.pill-btn.pill-right 98 | {:class (when (= :meter @chan-representation) "active") 99 | :on-click (fn [e] (set-chan-representation :meter))} 100 | "Meter"]]]]]])))) 101 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/config.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.config) 2 | 3 | ;; DEBUG is special. It is always defined but we override it 4 | (def debug? ^boolean goog.DEBUG) 5 | 6 | ;; All other `goog-define` use the following syntax: 7 | (goog-define alert-timeout-ms 3000) -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/core.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.core 2 | (:import goog.History) 3 | (:require 4 | [clojure.string :as string] 5 | [day8.re-frame.http-fx] 6 | [goog.events :as gevents] 7 | [goog.history.EventType :as EventType] 8 | [re-frame.core :as rf] 9 | [reagent.dom :as reagent] 10 | [reitit.frontend :as rfront] 11 | [lambdaisland.glogi :as log] 12 | [lambdaisland.glogi.console :as glogi-console] 13 | [clojurescript.flow-monitor-ui.components.alerts :refer [alert-display]] 14 | [clojurescript.flow-monitor-ui.components.nav :refer [settings-bar]] 15 | [clojurescript.flow-monitor-ui.config :as config] 16 | [clojurescript.flow-monitor-ui.events :as shared-events] 17 | [clojurescript.flow-monitor-ui.router :as router] 18 | [clojurescript.flow-monitor-ui.subs :as shared-subs] 19 | [clojurescript.flow-monitor-ui.utils.helpers :refer [dis]])) 20 | 21 | (glogi-console/install!) 22 | 23 | (log/set-levels 24 | {:glogi/root :info ;; Set a root logger level, this will be inherited by all loggers 25 | 'my.app.thing :trace ;; Some namespaces you might want detailed logging 26 | 'action-tests.routes.index.events :error ;; or for others you only want to see errors. 27 | }) 28 | 29 | (defn dev-setup [] 30 | (when config/debug? 31 | (enable-console-print!) 32 | (log/info :message "Dev mode"))) 33 | 34 | (rf/reg-fx 35 | ::hook-browser-navigation 36 | (fn [] 37 | (doto (History.) 38 | (gevents/listen 39 | EventType/NAVIGATE 40 | (fn [^js event] 41 | (let [uri (or (not-empty (string/replace (.-token event) #"^.*#" "")) "/")] 42 | (>dis [::shared-events/set-active-route (rfront/match-by-path router/routes uri)])))) 43 | (.setEnabled true)))) 44 | 45 | (rf/reg-event-fx 46 | ::initialize-browser-navigation 47 | (fn [_ _] 48 | {::hook-browser-navigation nil})) 49 | 50 | (defn active-route [] 51 | (let [active-route (dis [::shared-events/dispatch-route-events active-route]) 53 | (-> active-route :data :view))) 54 | 55 | (defn app [] 56 | (let [ready? (dis [::shared-events/set-active-route (rfront/match-by-path router/routes uri)]) 80 | (mount-app))) 81 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/db.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.db 2 | (:require 3 | [clojure.spec.alpha :as s] 4 | [clojurescript.flow-monitor-ui.routes.index.db :as index])) 5 | 6 | 7 | ;; = Specs ===================================================================== {{{ 8 | (s/def ::active-route keyword?) 9 | (s/def ::map-of-keywords-and-strs (s/every-kv keyword string?)) 10 | (s/def ::uuid uuid?) 11 | ;; - Active Route -------------------------------------------------------------- {{{2 12 | (s/def ::name keyword?) 13 | (s/def ::view vector?) 14 | (s/def ::dispatch-on-entry vector?) 15 | (s/def ::path-params ::map-of-keywords-and-strs) 16 | (s/def ::query-params ::map-of-keywords-and-strs) 17 | (s/def ::data (s/keys :req-un [::name ::view] 18 | :opt-un [::dispatch-on-entry])) 19 | (s/def ::active-route (s/keys :req-un [::data ::path-params ::query-params])) 20 | ;; }}}2 21 | 22 | ;; -- Route DBs ---------------------------------------------------------------- {{{2 23 | (s/def ::index ::index/index-db) 24 | (s/def ::routes (s/keys :req-un [::index])) 25 | ;; }}}2 26 | 27 | ;; -- Alerts ------------------------------------------------------------------- {{{2 28 | (s/def ::message string?) 29 | (s/def ::type string?) 30 | (s/def ::alert (s/keys :req-un [::uuid ::message ::type])) 31 | (s/def ::alerts (s/* ::alert)) 32 | ;; }}}2 33 | ;; }}} 34 | 35 | ;; = DB Spec =================================================================== {{{ 36 | (s/def ::db (s/keys :req-un [::active-route 37 | ::alerts 38 | ::routes])) 39 | 40 | (defonce default-db {;; = Top Level ============================================ 41 | :active-route {:path-params {} 42 | :query-params {} 43 | :data {:name :loading 44 | :view [:div "Loading..."]}} 45 | :alerts '() 46 | ;; = index Route ========================================== 47 | :routes {:index index/index-db}}) 48 | ;; }}} 49 | 50 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/events.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.events 2 | (:require 3 | [clojure.string :as string] 4 | [re-frame.core :as rf] 5 | [lambdaisland.glogi :as log] 6 | [clojurescript.flow-monitor-ui.config :as config] 7 | [clojurescript.flow-monitor-ui.interceptors :refer [standard-interceptors]] 8 | [clojurescript.flow-monitor-ui.utils.helpers :as helpers] 9 | [clojurescript.flow-monitor-ui.db :as db])) 10 | 11 | 12 | ; region = Register CoFx ============================================================== 13 | 14 | ; Usage: When registering a event (rf/inject-cofx ::uuid) as an interceptor 15 | ; Description: A cofx to inject a uuid into the event. 16 | (rf/reg-cofx 17 | ::uuid 18 | (fn [coeffects _] 19 | (assoc coeffects :uuid (random-uuid)))) 20 | ;; endregion 21 | 22 | ; region = Register Effect Handlers =================================================== 23 | 24 | ; Usage: In the returned map of a reg-event-fx {:save-in-local-storage {:key1 value1 :key2 value2}} 25 | ; Description: Saves values form a map into localStorage 26 | (rf/reg-fx 27 | ::save-in-local-storage 28 | (fn [map-to-store] 29 | (doseq [[k v] map-to-store] 30 | (.setItem js/localStorage (name k) v)))) 31 | 32 | ; Usage: In the returned map of a reg-event-fx {::remove-from-local-storage [:user :username]} 33 | ; Description: Removes desired values from localStorage 34 | (rf/reg-fx 35 | ::remove-from-local-storage 36 | (fn [keys] 37 | (doseq [k keys] 38 | (.removeItem js/localStorage (name k))))) 39 | ; endregion 40 | 41 | ; region = Register Events ============================================================ 42 | 43 | ; region -- App Start Up -------------------------------------------------------------- 44 | (defn get-from-ls 45 | "Attempt to retrieve ls-key from localStorage. If value is equal to 'null' 46 | return nil" 47 | [ls-key] 48 | (let [value (.getItem js/localStorage ls-key)] 49 | (if (= "null" value) nil value))) 50 | 51 | (rf/reg-event-fx 52 | ::initialize-db 53 | [standard-interceptors] 54 | (fn [{:keys []} _] 55 | {:db db/default-db})) 56 | ;; endregion 57 | 58 | ; region -- Routing ------------------------------------------------------------------- 59 | (defn update-events-with-actual-params 60 | "Events defined in the router to be dispatched when a route is navigated to 61 | use `:query-params` and `:path-params` as place holders for the actual values 62 | defined later." 63 | [events path query] 64 | (reduce (fn [res event] 65 | (conj res (mapv (fn [el] 66 | (case el 67 | :query-params query 68 | :path-params path 69 | el)) 70 | event))) 71 | [] 72 | events)) 73 | 74 | (rf/reg-event-fx 75 | ::dispatch-route-events 76 | [standard-interceptors] 77 | (fn [_ [_ {:keys [path-params query-params] :as active-route}]] 78 | (let [route-initialization-events (get-in active-route [:data :dispatch-on-entry] [])] 79 | {:dispatch-n (update-events-with-actual-params route-initialization-events path-params query-params)}))) 80 | 81 | ; Usage: (dispatch [::shared-events/set-active-route (rfront/match-by-path router/routes uri)]) 82 | ; Description: Change the active reitit route for the app 83 | (rf/reg-event-fx 84 | ::set-active-route 85 | [standard-interceptors] 86 | (fn [{:keys [db]} [_ {:keys [path-params query-params] :as route}]] 87 | {:db (-> db 88 | (assoc :active-route route) 89 | (assoc :path-params path-params) 90 | (assoc :query-params query-params))})) 91 | ;; endregion 92 | 93 | ; region -- Alerts -------------------------------------------------------------------- 94 | 95 | ; Usage: ::add-alert and ::remove-alert are typically used at the same time. 96 | ; In a reg-event-fx like so: 97 | ; {:dispatch [::add-alert (:uuid cofx) "Alert body here" "Alert Type ie: danger, info, etc"] 98 | ; :dispatch-later [{:ms config/alert-timeout-ms 99 | ; :dispatch [::remove-alert (:uuid cofx)]}]} 100 | ; Description: Extends the top level `:alerts` vector with a alert map {:uuid #uuid :type "..." :message "..."} 101 | (rf/reg-event-db 102 | ::add-alert 103 | [standard-interceptors] 104 | (fn [db [_ uuid message alert-type]] 105 | (update db :alerts merge {:uuid uuid :message message :type alert-type}))) 106 | 107 | ; Description: Removes the alert with the matching uuid from the top-level 108 | ; `:alerts` vector. See above for additional detail 109 | (rf/reg-event-db 110 | ::remove-alert 111 | [standard-interceptors] 112 | (fn [db [_ uuid]] 113 | (update db :alerts helpers/remove-matching-uuid uuid))) 114 | 115 | (rf/reg-event-fx 116 | ::inject-complete-alert 117 | [standard-interceptors 118 | (rf/inject-cofx ::uuid)] 119 | (fn [{:keys [uuid]} [_ message]] 120 | {:dispatch [::add-alert uuid message "success"] 121 | :dispatch-later [{:ms config/alert-timeout-ms 122 | :dispatch [::remove-alert uuid]}]})) 123 | 124 | 125 | (rf/reg-event-fx 126 | ::websocket-server-closed-alert 127 | [standard-interceptors 128 | (rf/inject-cofx ::uuid)] 129 | (fn [{:keys [uuid]} [_ message]] 130 | {:dispatch [::add-alert uuid message "error"] 131 | :dispatch-later [{:ms 5000 132 | :dispatch [::remove-alert uuid]}]})) 133 | ;; endregion 134 | 135 | ;; endregion 136 | 137 | ;; endregion 138 | 139 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/global.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.global 2 | (:require 3 | [goog.userAgent.product :as product] 4 | [reagent.core :as r] 5 | [re-frame.core :as rf] 6 | [cognitect.transit :as t] 7 | [clojurescript.flow-monitor-ui.events :as events] 8 | [clojurescript.flow-monitor-ui.utils.helpers :refer [>dis = i 0) 40 | (let [child (aget children i)] 41 | (if (.. child -classList (contains "leader-line")) 42 | child 43 | (recur (dec i))))))] 44 | 45 | (when last-leader-line 46 | (set! (.-id last-leader-line) id) 47 | last-leader-line))) 48 | 49 | (defn draw [] 50 | (doall (for [root (:roots @global-state)] 51 | (do 52 | (let [chan-type @chan-representation 53 | proc (first root) 54 | in-expanded? (get @proc-card-state proc)] 55 | (doall (for [in (-> root second :ins) 56 | :when (and (-> in second :buffer) (-> in second :chan-obj))] 57 | (let [in-socket (str proc "-" (first in)) 58 | in-socket-target (if in-expanded? 59 | in-socket 60 | (str in-socket "-collapsed")) 61 | in-chan (str in-socket "-in-chan") 62 | in-chan-el (when (= :meter chan-type) (.getElementById js/document in-chan)) 63 | in-socket-el (.getElementById js/document in-socket-target)] 64 | (when (= :meter chan-type) 65 | (let [l1 (js/LeaderLine. in-chan-el in-socket-el (clj->js {:color "#52606D" 66 | :size 3 67 | :startSocket "bottom" 68 | :hide true 69 | :endSocket "top" 70 | :path "straight" #_"grid" #_"straight"}))] 71 | (.show l1 "draw") 72 | (swap! lines assoc (random-uuid) l1)))))))))) 73 | (doall (for [proc (-> @global-state :data :conns)] 74 | (do 75 | (let [chan-type @chan-representation 76 | in-expanded? (get @proc-card-state (-> proc second first)) 77 | out-expanded? (get @proc-card-state (ffirst proc)) 78 | in-socket (str (-> proc second first) "-" (-> proc second second)) 79 | in-chan (str in-socket "-in-chan") 80 | in-chan-el (when (= :meter chan-type) (.getElementById js/document in-chan)) 81 | in-socket-target (if in-expanded? 82 | in-socket 83 | (str in-socket "-collapsed")) 84 | out-socket (str (-> proc first first) "-" (-> proc first second)) 85 | out-chan (str out-socket "-out-chan") 86 | out-chan-el (when (= :meter chan-type) (.getElementById js/document out-chan)) 87 | out-socket-target (if out-expanded? 88 | out-socket 89 | (str out-socket "-collapsed")) 90 | out-socket-el (.getElementById js/document out-socket-target) 91 | in-socket-el (.getElementById js/document in-socket-target)] 92 | (if (= :meter chan-type) 93 | (let [l1 (js/LeaderLine. out-socket-el in-chan-el (clj->js {:color "#52606D" 94 | :size 3 95 | :startSocket "bottom" 96 | :hide true 97 | :endSocket "top" 98 | :path "grid" #_ "grid" #_ "straight"})) 99 | l2 (js/LeaderLine. in-chan-el in-socket-el (clj->js {:color "#52606D" 100 | :size 3 101 | :startSocket "bottom" 102 | :hide true 103 | :endSocket "top" 104 | :path "straight" #_ "grid" #_ "straight"}))] 105 | (.show l1 "draw") 106 | (swap! lines assoc (random-uuid) l1) 107 | (.show l2 "draw") 108 | (swap! lines assoc (random-uuid) l2)) 109 | (let [line (js/LeaderLine. out-socket-el in-socket-el (clj->js {:color "#52606D" 110 | :size 3 111 | :startSocket "bottom" 112 | :endSocket "top" 113 | :path "grid" #_"grid" #_"straight" 114 | :hide true 115 | :endPlug (if product/FIREFOX "behind" "arrow1") 116 | :animOptions (clj->js {:duration 1000 :timing "ease"}) 117 | ; :startLabel (js/LeaderLine.captionLabel "0/10" (clj->js {:color "#52606D" :outlineColor "#CBD2D9"})) 118 | ; TODO Conditional upon unique chan id 119 | :startLabel (js/LeaderLine.captionLabel "0/10" 120 | {:color "#52606D" 121 | :outlineColor "#CBD2D9" 122 | #_#_:offset [-20 0]})}))] 123 | (.show line "draw") 124 | ;(set! (.-id line) (str in-socket "-" out-socket)) 125 | (set-id-on-last-leader-line! (str out-socket "-svg")) 126 | (swap! lines assoc in-socket line) 127 | (swap! lines assoc out-socket line)))))))) 128 | 129 | (defn remove-arrows [] 130 | (let [arrows @lines 131 | arrow-set (reduce (fn [res [_ l]] (conj res l)) #{} arrows)] 132 | (doseq [l arrow-set] 133 | (.remove l)) 134 | (reset! lines {}))) 135 | ; endregion 136 | 137 | ; region == WebSocket 138 | (defn send-socket-data [data] 139 | (.send (:ws-chan @global-state) (.stringify js/JSON (t/write writer data)))) 140 | 141 | (defn tagged-value? [^js v] 142 | (try 143 | (and (.-tag v) (.-rep v)) 144 | (catch :default _ false))) 145 | 146 | (defn transform-tagged-values [data] 147 | (cond 148 | (tagged-value? data) [(.-tag ^js data) (transform-tagged-values (.-rep ^js data))] 149 | (map? data) (reduce-kv (fn [m k v] (assoc m k (transform-tagged-values v))) {} data) 150 | (vector? data) (mapv transform-tagged-values data) 151 | (set? data) (into #{} (map transform-tagged-values data)) 152 | :else data)) 153 | 154 | (defn process-ws-message [msg] 155 | (let [data (->> msg .-data (t/read reader) transform-tagged-values) 156 | action (:action data)] 157 | (case action 158 | :datafy (do 159 | (swap! global-state assoc :data (:data data)) 160 | (let [procs (reduce (fn [res [[from _] [to _]]] 161 | (conj res from to)) 162 | #{} 163 | (-> data :data :conns)) 164 | ; set the initial state of the box expansion 165 | proc-state (reduce (fn [res proc] 166 | (assoc res proc true)) {} procs)] 167 | (reset! proc-card-state proc-state))) 168 | :ping (let [current-time (js/Date.)] 169 | (swap! global-pings update-in [:flow-ping] 170 | (fn [ping-map] 171 | (merge-with #(assoc (merge %1 %2) :last-updated current-time) 172 | ping-map 173 | (:data data))))) 174 | :error (let [pid (keyword (second (re-find #":pid :(.*)," (:data data))))] 175 | (swap! global-state update-in [:errors pid] 176 | (fnil (comp #(take-last 100 %) conj) []) (:data data))) 177 | :message (swap! global-state update-in [:messages] 178 | (fnil (comp #(take-last 1000 %) conj) []) (:data data)) 179 | "Default"))) 180 | 181 | (rf/reg-sub 182 | ::get-params 183 | (fn [db _] 184 | (get-in db [:query-params]))) 185 | 186 | (defn make-websocket! [] 187 | (let [params (dis [::events/websocket-server-closed-alert "Websocket server was closed!"]) 202 | (remove-arrows) 203 | #_(make-websocket!))) 204 | (swap! global-state assoc :ws-chan chan) 205 | (.log js/console (str "Websocket connection established with: " socket-url))) 206 | (throw (js/Error. "Websocket connection failed!")))))) 207 | ; endregion 208 | 209 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/interceptors.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.interceptors 2 | (:require 3 | [re-frame.core :as rf] 4 | [re-frame.core :as rf])) 5 | 6 | (def debugger 7 | (rf/->interceptor 8 | :id :debugger 9 | :after (fn [{:keys [effects] {:keys [event db]} :coeffects :as context}] 10 | context))) 11 | 12 | ;; = Additional Interceptors Can Be Added To The Vector As Needed 13 | (def standard-interceptors [debugger 14 | ;; Turn on for shitty debugging situations 15 | ; (when ^boolean goog.DEBUG rf/debug) 16 | ;; Spec check the db this can be agressive, but useful 17 | ; (when ^boolean goog.DEBUG (rf/after check-and-throw)) 18 | ]) 19 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/router.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.router 2 | (:require 3 | [reitit.frontend :as rfront] 4 | [clojurescript.flow-monitor-ui.routes.index.view :as index])) 5 | 6 | ;; == ROUTE DEFINITIONS == 7 | ;; Every route will consist of a vector with the first element being a string 8 | ;; representing the path, and an options map. The map at a minimum will contain 9 | ;; a `:name` and `:view`. Optionally `:dispatch-on-entry` key can be 10 | ;; provided which contains a vector of event vectors to dispatch when the route 11 | ;; is entered. These event vectors can include the keys `:query-params` and/or 12 | ;; `:path-params` as needed which will be replaced with the actual query and 13 | ;; path parameter maps when the event is dispatched. 14 | (def routes 15 | (rfront/router 16 | ["/" 17 | ["" {:name :index 18 | :view [index/template]}]])) 19 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/routes/index/db.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.routes.index.db 2 | (:require 3 | [clojure.spec.alpha :as s])) 4 | 5 | ;; = Functions ================================================================= 6 | 7 | ;; = Specs ===================================================================== 8 | (s/def ::index-db (s/keys :req-un [])) 9 | 10 | ;; = Default Index Route DB Map ================================================ 11 | (defonce index-db {:editor-contents {}}) 12 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/routes/index/view.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.routes.index.view 2 | (:require [goog.string :as gstring] 3 | [cljs.pprint :as pprint] 4 | [clojure.string :as str] 5 | [reagent.core :as r] 6 | [clojurescript.flow-monitor-ui.components.modal :as component] 7 | [clojurescript.flow-monitor-ui.components.log-modal :refer [log-modal]] 8 | [clojurescript.flow-monitor-ui.global :refer [lines remove-arrows 9 | draw make-websocket! 10 | global-state global-pings 11 | send-socket-data proc-card-state 12 | chan-representation]] 13 | [clojurescript.flow-monitor-ui.components.nav :refer [settings-bar collapse-elements-with-delay]] 14 | [clojurescript.flow-monitor-ui.utils.helpers :refer [dis]])) 15 | 16 | 17 | ; = Data Shaping Functions ===================================================== 18 | (defn titleize-keyword [kw] 19 | (as-> (name kw) $ 20 | (clojure.string/replace $ #"-" " ") 21 | (clojure.string/split $ #"\s+") 22 | (map clojure.string/capitalize $) 23 | (clojure.string/join " " $))) 24 | 25 | (defn format-number [n] 26 | (if n 27 | (.format (js/Intl.NumberFormat. "en-US") n) 28 | "--")) 29 | 30 | (defn flow-relationships [data] 31 | (reduce (fn [res [[from-proc _] [to-proc _]]] 32 | (-> res 33 | (update-in [from-proc :from] (fnil conj #{})) 34 | (update-in [from-proc :to] (fnil conj #{}) to-proc) 35 | (update-in [to-proc :from] (fnil conj #{}) from-proc) 36 | (update-in [to-proc :to] (fnil conj #{})))) 37 | {} data)) 38 | 39 | (defn assoc-ping-data [relationships ping] 40 | (let [r+p (reduce-kv (fn [res proc data] 41 | (-> res 42 | (assoc-in [proc :status] (:clojure.core.async.flow/status data)) 43 | (assoc-in [proc :count] (:clojure.core.async.flow/count data)) 44 | (assoc-in [proc :ins] (:clojure.core.async.flow/ins data)) 45 | (assoc-in [proc :outs] (:clojure.core.async.flow/outs data)) 46 | (assoc-in [proc :state] (:clojure.core.async.flow/state data)) 47 | (assoc-in [proc :ins :in :put-count] (-> data :clojure.core.async.flow/ins :in :put-count)) 48 | (assoc-in [proc :ins :in :take-count] (-> data :clojure.core.async.flow/ins :in :take-count)) 49 | (assoc-in [proc :ins :in :buffer :type] (-> data :clojure.core.async.flow/ins :in :buffer :type)) 50 | (assoc-in [proc :ins :in :buffer :count] (-> data :clojure.core.async.flow/ins :in :buffer :count)) 51 | (assoc-in [proc :ins :in :buffer :capacity] (-> data :clojure.core.async.flow/ins :in :buffer :capacity)) 52 | (assoc-in [proc :outs :out :put-count] (-> data :clojure.core.async.flow/outs :in :put-count)) 53 | (assoc-in [proc :outs :out :take-count] (-> data :clojure.core.async.flow/outs :in :take-count)) 54 | (assoc-in [proc :outs :out :buffer :type] (-> data :clojure.core.async.flow/outs :out :buffer :type)) 55 | (assoc-in [proc :outs :out :buffer :count] (-> data :clojure.core.async.flow/outs :out :buffer :count)) 56 | (assoc-in [proc :outs :out :buffer :capacity] (-> data :clojure.core.async.flow/outs :out :buffer :capacity)) 57 | )) relationships ping) 58 | roots (filter (fn [[_ v]] (empty? (:from v))) r+p)] 59 | (swap! global-state assoc :roots roots) 60 | r+p)) 61 | 62 | (defn flow-levels [relationships root] 63 | (let [orphans (filter (fn [[_ v]] (empty? (:from v))) relationships) 64 | user-roots (filter (fn [[k _]] (contains? (set root) k)) relationships)] 65 | (loop [result [] 66 | current-level (if (empty? orphans) user-roots orphans) 67 | remaining (apply dissoc relationships (map first current-level))] 68 | (if (empty? current-level) 69 | result 70 | (let [next-level (select-keys remaining (mapcat (fn [[_ v]] (:to v)) current-level))] 71 | (recur (conj result (map (fn [[k v]] {k v}) current-level)) 72 | next-level 73 | (apply dissoc remaining (keys next-level)))))))) 74 | 75 | ; = Components ================================================================= 76 | 77 | (defn animate-leader-line 78 | [id {:keys [target-color target-width duration easing] 79 | :or {duration 300 80 | easing "ease-in-out"}}] 81 | (let [svg-el (js/document.getElementById id) 82 | line-shape (when svg-el 83 | (.querySelector svg-el "use[id$='-line-shape']")) 84 | line-face (when svg-el 85 | (.querySelector svg-el ".leader-line-plugs-face")) 86 | stroke-el (when svg-el 87 | (.querySelector svg-el "g > use[style*='stroke:']"))] 88 | 89 | (when (and svg-el line-shape) 90 | (when target-width 91 | (set! (.. line-shape -style -transition) 92 | (str "stroke-width " duration "ms " easing)) 93 | (set! (.. line-shape -style -strokeWidth) (str target-width "px")) 94 | (when line-face 95 | (set! (.. line-face -style -transition) 96 | (str "stroke-width " duration "ms " easing)) 97 | (set! (.. line-face -style -strokeWidth) (str target-width "px")))) 98 | (when (and target-color stroke-el) 99 | (set! (.. stroke-el -style -transition) 100 | (str "stroke " duration "ms " easing)) 101 | (set! (.. stroke-el -style -stroke) target-color) 102 | (let [markers (.querySelectorAll svg-el "marker g use[style*='fill:']")] 103 | (doseq [marker (array-seq markers)] 104 | (set! (.. marker -style -transition) 105 | (str "fill " duration "ms " easing)) 106 | (set! (.. marker -style -fill) target-color))))))) 107 | 108 | (defn ws-connect-btn [] 109 | [:div.centered-button-container 110 | [:button.button 111 | {:on-click (fn [e] 112 | (make-websocket!) 113 | (js/setTimeout (fn [] 114 | (draw)) 1800))} 115 | "Flow Connect"]]) 116 | 117 | (defn log-scale [x] 118 | (if (zero? x) 119 | 0 120 | (/ (js/Math.log2 (inc x)) 10))) 121 | 122 | (defn channel-meter-value [put-count take-count] 123 | (cond 124 | (pos? take-count) (- (log-scale take-count)) 125 | (pos? put-count) (log-scale put-count) 126 | :else 0)) 127 | 128 | (defn set-meter-value [id value] 129 | (let [left-cover (.getElementById js/document (str "left-cover-" id)) 130 | right-cover (.getElementById js/document (str "right-cover-" id))] 131 | (when left-cover 132 | (if (neg? value) 133 | (do 134 | (set! (.. left-cover -style -width) (str (+ 50 (* 50 value)) "%")) 135 | (set! (.. right-cover -style -width) "50%")) 136 | (do 137 | (set! (.. right-cover -style -width) (str (- 50 (* 50 value)) "%")) 138 | (set! (.. left-cover -style -width) "50%")))))) 139 | 140 | 141 | (defn diverging-meter [id put-count take-count] 142 | (let [meter-value (channel-meter-value put-count take-count)] 143 | (r/create-class 144 | {:component-did-mount (fn [_] (set-meter-value id meter-value)) 145 | :component-did-update (fn [this old-argv] 146 | (let [[_ _ old-put old-take] old-argv 147 | [_ _ new-put new-take] (r/argv this)] 148 | (when (or (not= new-put old-put) (not= new-take old-take)) 149 | (set-meter-value id (channel-meter-value new-put new-take))))) 150 | :reagent-render (fn [id put-count take-count] 151 | [:div.meter-wrapper 152 | [:div.label-container 153 | [:div "Take: " take-count] 154 | [:div "Put: " put-count]] 155 | [:div.diverging-meter-container 156 | [:div.meter-left] 157 | [:div.meter-right] 158 | [:div.meter-cover-left {:id (str "left-cover-" id)}] 159 | [:div.meter-cover-right {:id (str "right-cover-" id)}] 160 | [:div.meter-center]]])}))) 161 | 162 | (defn meter-card [proc in] 163 | (let [in-name (first in) 164 | in-stats (second in) 165 | in-put-count (-> in-stats :put-count) 166 | in-take-count (-> in-stats :take-count) 167 | in-buffer-count (format-number (-> in-stats :buffer :count)) 168 | in-buffer-cap (format-number (-> in-stats :buffer :capacity)) 169 | uid (str proc "-" in-name)] 170 | [:div.meter-card {:id (str proc "-" in-name "-in-chan")} 171 | [:div.buffer-info (or (-> in-stats :buffer :type) "Connecting") (str ": " in-buffer-count " / " in-buffer-cap)] 172 | [:div.meter-container 173 | [:div.meter {:style {:width (str (- 100 (* 100 (/ (js/parseInt in-buffer-count) (js/parseInt in-buffer-cap)))) "%")}}]] 174 | #_ [diverging-meter uid (or in-put-count 0) (or in-take-count 0)]])) 175 | 176 | (defn escape-html [text] 177 | (-> text 178 | (str/replace #"&" "&") 179 | (str/replace #"<" "<") 180 | (str/replace #">" ">"))) 181 | 182 | (defn fmt-state 183 | [data] 184 | (letfn [(format-map [m indent-level] 185 | (if (empty? m) 186 | "{}" 187 | (let [indent (str/join (repeat indent-level " ")) 188 | inner-indent (str indent " ") 189 | pairs (for [[k v] m] 190 | (str inner-indent (pr-str k) " " 191 | (if (map? v) 192 | (format-map v (+ indent-level 1)) 193 | (pr-str v)))) 194 | formatted (str "{\n" (str/join ",\n" pairs) "\n" indent "}")] 195 | formatted)))] 196 | (if (map? data) 197 | (format-map data 0) 198 | (pr-str data)))) 199 | 200 | (defn seconds-since [^js/Date t] 201 | (let [now (js/Date.) 202 | diff (- (.getTime now) (.getTime t))] 203 | (Math/floor (/ diff 1000)))) 204 | 205 | (defn proc-card [proc proc-stats] 206 | (let [errors (-> @global-state :errors proc) 207 | last-updated (:last-updated (proc (:flow-ping @global-pings))) 208 | since-last-updated (if last-updated (seconds-since last-updated) 0) 209 | paused? (= :paused (:status proc-stats))] 210 | [:div.middle-section-one-container 211 | [:div.title-container [:h2.title (titleize-keyword proc)]] 212 | (when (not-empty (:state proc-stats)) 213 | [:div.state [:pre.code-block [:code (fmt-state (:state proc-stats))]]]) 214 | [:div.call-count (format-number (:count proc-stats))] 215 | [:div.action-buttons 216 | [:div.action-button 217 | {:on-click (fn [evt] 218 | (swap! global-state assoc :active-tab :inject) 219 | (swap! global-state assoc :active-proc-pid proc) 220 | (.add (.-classList (.-body js/document)) "modal-open") 221 | (>dis [::component/set-modal-visibility true]))} 222 | [:img {:src "assets/img/inject_icon.svg"}]] 223 | [:div.action-button 224 | {:class (when (-> errors count zero? not) "error") 225 | :on-click (fn [evt] 226 | (swap! global-state assoc :active-tab :errors) 227 | (swap! global-state assoc :active-proc-pid proc) 228 | (.add (.-classList (.-body js/document)) "modal-open") 229 | (>dis [::component/set-modal-visibility true]))} 230 | [:img {:src (if (-> errors count zero? not) "assets/img/error_icon_red.svg" "assets/img/error_icon.svg")}] 231 | (when (-> errors count zero? not) [:div {:style {:margin-left "5px" :color "#E12D39" :padding-right "5px"}} (count errors)])] 232 | [:div.action-button 233 | {:on-click (fn [e] 234 | (if (= :running (:status proc-stats)) 235 | (send-socket-data {:action :pause-proc :pid proc}) 236 | (send-socket-data {:action :resume-proc :pid proc})))} 237 | [:img {:src (if paused? "assets/img/pause_icon_orange.svg" "assets/img/pause_icon_white.svg")}]]] 238 | (when (> since-last-updated 10) [:div.stale "Last Updated: " since-last-updated " seconds ago."])])) 239 | 240 | (defn buffer-usage-percentage [buffer-count buffer-capacity] 241 | (* 100 (/ (js/parseInt buffer-count) (js/parseInt buffer-capacity)))) 242 | 243 | (defn out-chan-card [proc io-id buffer-stats] 244 | (let [out-put-count (:put-count buffer-stats) 245 | out-take-count (:take-count buffer-stats) 246 | buffer-type (-> buffer-stats :buffer :type) 247 | buffer-count (-> buffer-stats :buffer :count) 248 | buffer-capacity (-> buffer-stats :buffer :capacity) 249 | uid (str proc "-" io-id)] 250 | [:div.output-card {:id (str proc "-" io-id "-out-chan")} 251 | [:div.buffer-info (or buffer-type "Connecting") (str ": " buffer-count " / " buffer-capacity)] 252 | [:div.meter-container 253 | [:div.meter {:style {:width (str (- 100 (buffer-usage-percentage buffer-count buffer-capacity)) "%")}}]] 254 | #_[diverging-meter uid (or out-put-count 0) (or out-take-count 0)]])) 255 | 256 | (defn update-arrows [proc ins outs] 257 | (doall (for [^js/LeaderLine line @lines] 258 | (.position (second line)))) 259 | (doall (for [in ins] 260 | (let [in-name (first in) 261 | in-stats (second in) 262 | in-buffer-count (format-number (-> in-stats :buffer :count)) 263 | in-buffer-cap (format-number (-> in-stats :buffer :capacity)) 264 | ^js/LeaderLine line (get @lines (str proc "-" in-name))] 265 | ;(when line 266 | ; (set! (.-endLabel line) 267 | ; (js/LeaderLine.captionLabel 268 | ; (str in-buffer-count "/" in-buffer-cap) 269 | ; (clj->js {:color "#52606D" 270 | ; :outlineColor "#CBD2D9"})))) 271 | ))) 272 | (doall (for [[io-id buffer-stats] outs] 273 | (let [out-buffer-count (format-number (-> buffer-stats :buffer :count)) 274 | out-buffer-cap (format-number (-> buffer-stats :buffer :capacity)) 275 | percentage-used (buffer-usage-percentage out-buffer-count out-buffer-cap) 276 | ^js/LeaderLine line (get @lines (str proc "-" io-id))] 277 | (when line 278 | (set! (.-startLabel line) 279 | (js/LeaderLine.captionLabel 280 | (str out-buffer-count "/" out-buffer-cap) 281 | (clj->js {:color "#52606D" 282 | :outlineColor "#CBD2D9"}))) 283 | (let [[size color] [(max 3 (/ percentage-used 10)) 284 | (case percentage-used 285 | 0 "#014D40" 286 | 10 "#014D40" 287 | 20 "#014D40" 288 | 30 "#014D40" 289 | 40 "#F0B429" 290 | 50 "#F0B429" 291 | 60 "#F0B429" 292 | 70 "#F0B429" 293 | 80 "#E12D39" 294 | 90 "#E12D39" 295 | 100 "#E12D39")]] 296 | (animate-leader-line (str proc "-" io-id "-svg") {:target-color color 297 | :target-width size 298 | :duration 500}))))))) 299 | 300 | 301 | (defn proc-el [proc-map] 302 | (fn [proc-map] 303 | (let [proc (-> proc-map keys first) 304 | expanded? (get @proc-card-state proc) 305 | proc-stats (-> proc-map vals first) 306 | ins (:ins proc-stats) 307 | outs (:outs proc-stats) 308 | paused? (= :paused (:status proc-stats))] 309 | (update-arrows proc ins outs) 310 | [:div.card-container {:id (name proc) 311 | :class (when (= :line @chan-representation) "line-chan-style")} 312 | [:div.meter-cards.animate__animated.collapsible-meter 313 | {:class (if (= :meter @chan-representation) "animate__fadeInDown" "animate__fadeOutUp")} 314 | (doall (for [in ins 315 | :when (-> in second :buffer :type)] 316 | (let [in-name (first in)] 317 | ^{:key in-name} [meter-card proc in])))] 318 | [:div.proc-card {:class (str (if expanded? "expanded" "collapsed"))} 319 | (if paused? 320 | [:div.dot-pattern.animate__animated.animate__fadeIn] 321 | [:div.dot-pattern.animate__animated.animate__fadeOut]) 322 | [:div.chevron-icon 323 | {:on-click (fn [e] 324 | (swap! proc-card-state update proc not) 325 | (remove-arrows) 326 | (js/setTimeout (fn [] 327 | (draw)) 400))} 328 | (if expanded? 329 | [:img {:src "assets/img/chevron_down.svg"}] 330 | [:img.up {:src "assets/img/chevron_up.svg"}])] 331 | 332 | [:div.expanded-view 333 | [:div.header-labels 334 | (doall (for [[io-id buffer-stats] ins 335 | :when (:put-count buffer-stats)] 336 | ^{:key io-id} [:div.header-label {:id (str proc "-" io-id)} io-id]))] 337 | [proc-card proc proc-stats] 338 | [:div.output-section 339 | [:div.output-container 340 | (doall (for [[io-id buffer-stats] outs 341 | :when (-> buffer-stats :buffer :type)] 342 | ^{:key (str proc "-" io-id)} [:div.output {:id (str proc "-" io-id)} io-id]))]]] 343 | [:div.collapsed-view-container 344 | [:div.header-els 345 | (doall (for [[io-id buffer-stats] ins 346 | :when (:put-count buffer-stats)] 347 | ^{:key io-id} [:div.header-label {:id (str proc "-" io-id "-collapsed")}]))] 348 | [:div.collapsed-view {:id (str proc "-collapsed")} 349 | [:div.title-container [:h2.title proc]] 350 | #_ [:div.action-buttons 351 | [:div.action-button [:img {:src "assets/img/inject_icon.svg"}]] 352 | [:div.action-button [:img {:src "assets/img/message_icon.svg"}]] 353 | [:div.action-button [:img {:src "assets/img/error_icon.svg"}]]]] 354 | [:div.output-section-collapsed 355 | [:div.output-container 356 | (doall (for [[io-id buffer-stats] outs 357 | :when (-> buffer-stats :buffer :type)] 358 | ^{:key (str proc "-" io-id)} [:div.output {:id (str proc "-" io-id "-collapsed")}]))]]]] 359 | #_ [:div.output-cards.animate__animated.collapsible-meter 360 | {:class (if (= :meter @chan-representation) 361 | "animate__fadeInDown" 362 | "animate__fadeOutUp")} 363 | (doall (for [[io-id buffer-stats] outs 364 | :when (-> buffer-stats :buffer :type)] 365 | ^{:key (str proc "-" io-id)} [out-chan-card proc io-id buffer-stats]))]]))) 366 | 367 | (defn proc-row [idx row] 368 | [:div.row-3 369 | (for [proc row] 370 | ^{:key (-> proc keys first)} [proc-el proc])]) 371 | 372 | (defn chart [] 373 | (let [data (:data @global-state) 374 | relationships (flow-relationships (:conns data)) 375 | relationships* (assoc-ping-data relationships (-> @global-pings :flow-ping))] 376 | [:div#chart 377 | (when data (for [[idx row] (map-indexed vector (flow-levels relationships* (:root data)))] 378 | ^{:key (str "chart-" idx)} [proc-row idx row]))])) 379 | 380 | ; = Template =================================================================== 381 | (defn template [] 382 | [:<> 383 | (when (:ws-connected @global-state) 384 | [settings-bar]) 385 | [:div 386 | [component/report-modal] 387 | [log-modal] 388 | (if (:ws-connected @global-state) 389 | [chart] 390 | [ws-connect-btn])]]) 391 | -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/subs.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.subs 2 | (:require 3 | [re-frame.core :as rf])) 4 | 5 | 6 | ; = Register Subscriptions ===================================================== {{{ 7 | ;; https://github.com/Day8/re-frame/blob/master/docs/Loading-Initial-Data.md#the-pattern 8 | (rf/reg-sub 9 | ::initialized? 10 | (fn [db _] 11 | (and (not (empty? db)) 12 | true))) 13 | 14 | (rf/reg-sub 15 | ::active-route 16 | (fn [db _] 17 | (:active-route db))) 18 | 19 | (rf/reg-sub 20 | ::alerts 21 | (fn [db _] 22 | (:alerts db))) 23 | ;; }}} -------------------------------------------------------------------------------- /src/clojurescript/flow_monitor_ui/utils/helpers.cljs: -------------------------------------------------------------------------------- 1 | (ns clojurescript.flow-monitor-ui.utils.helpers 2 | (:require [re-frame.core :as rf])) 3 | 4 | (defn remove-matching-uuid [elements uuid] 5 | (remove #(= uuid (:uuid %)) elements)) 6 | 7 | (def dis rf/dispatch) 9 | -------------------------------------------------------------------------------- /src/clojurescript/sass/_code_mirror.scss: -------------------------------------------------------------------------------- 1 | /* BASICS */ 2 | 3 | .CodeMirror { 4 | /* Set height, width, borders, and global font properties here */ 5 | font-family: monospace; 6 | height: 300px; 7 | color: black; 8 | direction: ltr; 9 | } 10 | 11 | /* PADDING */ 12 | 13 | .CodeMirror-lines { 14 | padding: 4px 0; /* Vertical padding around content */ 15 | } 16 | .CodeMirror pre.CodeMirror-line, 17 | .CodeMirror pre.CodeMirror-line-like { 18 | padding: 0 4px; /* Horizontal padding of content */ 19 | } 20 | 21 | .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { 22 | background-color: white; /* The little square between H and V scrollbars */ 23 | } 24 | 25 | /* GUTTER */ 26 | 27 | .CodeMirror-gutters { 28 | border-right: 1px solid #ddd; 29 | background-color: #f7f7f7; 30 | white-space: nowrap; 31 | } 32 | .CodeMirror-linenumbers {} 33 | .CodeMirror-linenumber { 34 | padding: 0 3px 0 5px; 35 | min-width: 20px; 36 | text-align: right; 37 | color: #999; 38 | white-space: nowrap; 39 | } 40 | 41 | .CodeMirror-guttermarker { color: black; } 42 | .CodeMirror-guttermarker-subtle { color: #999; } 43 | 44 | /* CURSOR */ 45 | 46 | .CodeMirror-cursor { 47 | border-left: 1px solid black; 48 | border-right: none; 49 | width: 0; 50 | } 51 | /* Shown when moving in bi-directional text */ 52 | .CodeMirror div.CodeMirror-secondarycursor { 53 | border-left: 1px solid silver; 54 | } 55 | .cm-fat-cursor .CodeMirror-cursor { 56 | width: auto; 57 | border: 0 !important; 58 | background: #7e7; 59 | } 60 | .cm-fat-cursor div.CodeMirror-cursors { 61 | z-index: 1; 62 | } 63 | .cm-fat-cursor-mark { 64 | background-color: rgba(20, 255, 20, 0.5); 65 | -webkit-animation: blink 1.06s steps(1) infinite; 66 | -moz-animation: blink 1.06s steps(1) infinite; 67 | animation: blink 1.06s steps(1) infinite; 68 | } 69 | .cm-animate-fat-cursor { 70 | width: auto; 71 | border: 0; 72 | -webkit-animation: blink 1.06s steps(1) infinite; 73 | -moz-animation: blink 1.06s steps(1) infinite; 74 | animation: blink 1.06s steps(1) infinite; 75 | background-color: #7e7; 76 | } 77 | @-moz-keyframes blink { 78 | 0% {} 79 | 50% { background-color: transparent; } 80 | 100% {} 81 | } 82 | @-webkit-keyframes blink { 83 | 0% {} 84 | 50% { background-color: transparent; } 85 | 100% {} 86 | } 87 | @keyframes blink { 88 | 0% {} 89 | 50% { background-color: transparent; } 90 | 100% {} 91 | } 92 | 93 | /* Can style cursor different in overwrite (non-insert) mode */ 94 | .CodeMirror-overwrite .CodeMirror-cursor {} 95 | 96 | .cm-tab { display: inline-block; text-decoration: inherit; } 97 | 98 | .CodeMirror-rulers { 99 | position: absolute; 100 | left: 0; right: 0; top: -50px; bottom: 0; 101 | overflow: hidden; 102 | } 103 | .CodeMirror-ruler { 104 | border-left: 1px solid #ccc; 105 | top: 0; bottom: 0; 106 | position: absolute; 107 | } 108 | 109 | /* DEFAULT THEME */ 110 | 111 | .cm-s-default .cm-header {color: blue;} 112 | .cm-s-default .cm-quote {color: #090;} 113 | .cm-negative {color: #d44;} 114 | .cm-positive {color: #292;} 115 | .cm-header, .cm-strong {font-weight: bold;} 116 | .cm-em {font-style: italic;} 117 | .cm-link {text-decoration: underline;} 118 | .cm-strikethrough {text-decoration: line-through;} 119 | 120 | .cm-s-default .cm-keyword {color: #708;} 121 | .cm-s-default .cm-atom {color: #219;} 122 | .cm-s-default .cm-number {color: #164;} 123 | .cm-s-default .cm-def {color: #00f;} 124 | .cm-s-default .cm-variable, 125 | .cm-s-default .cm-punctuation, 126 | .cm-s-default .cm-property, 127 | .cm-s-default .cm-operator {} 128 | .cm-s-default .cm-variable-2 {color: #05a;} 129 | .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;} 130 | .cm-s-default .cm-comment {color: #a50;} 131 | .cm-s-default .cm-string {color: #a11;} 132 | .cm-s-default .cm-string-2 {color: #f50;} 133 | .cm-s-default .cm-meta {color: #555;} 134 | .cm-s-default .cm-qualifier {color: #555;} 135 | .cm-s-default .cm-builtin {color: #30a;} 136 | .cm-s-default .cm-bracket {color: #997;} 137 | .cm-s-default .cm-tag {color: #170;} 138 | .cm-s-default .cm-attribute {color: #00c;} 139 | .cm-s-default .cm-hr {color: #999;} 140 | .cm-s-default .cm-link {color: #00c;} 141 | 142 | .cm-s-default .cm-error {color: #f00;} 143 | .cm-invalidchar {color: #f00;} 144 | 145 | .CodeMirror-composing { border-bottom: 2px solid; } 146 | 147 | /* Default styles for common addons */ 148 | 149 | div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;} 150 | div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;} 151 | .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } 152 | .CodeMirror-activeline-background {background: #e8f2ff;} 153 | 154 | /* STOP */ 155 | 156 | /* The rest of this file contains styles related to the mechanics of 157 | the editor. You probably shouldn't touch them. */ 158 | 159 | .CodeMirror { 160 | position: relative; 161 | overflow: hidden; 162 | background: white; 163 | } 164 | 165 | .CodeMirror-scroll { 166 | overflow: scroll !important; /* Things will break if this is overridden */ 167 | /* 50px is the magic margin used to hide the element's real scrollbars */ 168 | /* See overflow: hidden in .CodeMirror */ 169 | margin-bottom: -50px; margin-right: -50px; 170 | padding-bottom: 50px; 171 | height: 100%; 172 | outline: none; /* Prevent dragging from highlighting the element */ 173 | position: relative; 174 | } 175 | .CodeMirror-sizer { 176 | position: relative; 177 | border-right: 50px solid transparent; 178 | } 179 | 180 | /* The fake, visible scrollbars. Used to force redraw during scrolling 181 | before actual scrolling happens, thus preventing shaking and 182 | flickering artifacts. */ 183 | .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { 184 | position: absolute; 185 | z-index: 6; 186 | display: none; 187 | outline: none; 188 | } 189 | .CodeMirror-vscrollbar { 190 | right: 0; top: 0; 191 | overflow-x: hidden; 192 | overflow-y: scroll; 193 | } 194 | .CodeMirror-hscrollbar { 195 | bottom: 0; left: 0; 196 | overflow-y: hidden; 197 | overflow-x: scroll; 198 | } 199 | .CodeMirror-scrollbar-filler { 200 | right: 0; bottom: 0; 201 | } 202 | .CodeMirror-gutter-filler { 203 | left: 0; bottom: 0; 204 | } 205 | 206 | .CodeMirror-gutters { 207 | position: absolute; left: 0; top: 0; 208 | min-height: 100%; 209 | z-index: 3; 210 | } 211 | .CodeMirror-gutter { 212 | white-space: normal; 213 | height: 100%; 214 | display: inline-block; 215 | vertical-align: top; 216 | margin-bottom: -50px; 217 | } 218 | .CodeMirror-gutter-wrapper { 219 | position: absolute; 220 | z-index: 4; 221 | background: none !important; 222 | border: none !important; 223 | } 224 | .CodeMirror-gutter-background { 225 | position: absolute; 226 | top: 0; bottom: 0; 227 | z-index: 4; 228 | } 229 | .CodeMirror-gutter-elt { 230 | position: absolute; 231 | cursor: default; 232 | z-index: 4; 233 | } 234 | .CodeMirror-gutter-wrapper ::selection { background-color: transparent } 235 | .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent } 236 | 237 | .CodeMirror-lines { 238 | cursor: text; 239 | min-height: 1px; /* prevents collapsing before first draw */ 240 | } 241 | .CodeMirror pre.CodeMirror-line, 242 | .CodeMirror pre.CodeMirror-line-like { 243 | /* Reset some styles that the rest of the page might have set */ 244 | -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; 245 | border-width: 0; 246 | background: transparent; 247 | font-family: inherit; 248 | font-size: inherit; 249 | margin: 0; 250 | white-space: pre; 251 | word-wrap: normal; 252 | line-height: inherit; 253 | color: inherit; 254 | z-index: 2; 255 | position: relative; 256 | overflow: visible; 257 | -webkit-tap-highlight-color: transparent; 258 | -webkit-font-variant-ligatures: contextual; 259 | font-variant-ligatures: contextual; 260 | } 261 | .CodeMirror-wrap pre.CodeMirror-line, 262 | .CodeMirror-wrap pre.CodeMirror-line-like { 263 | word-wrap: break-word; 264 | white-space: pre-wrap; 265 | word-break: normal; 266 | } 267 | 268 | .CodeMirror-linebackground { 269 | position: absolute; 270 | left: 0; right: 0; top: 0; bottom: 0; 271 | z-index: 0; 272 | } 273 | 274 | .CodeMirror-linewidget { 275 | position: relative; 276 | z-index: 2; 277 | padding: 0.1px; /* Force widget margins to stay inside of the container */ 278 | } 279 | 280 | .CodeMirror-widget {} 281 | 282 | .CodeMirror-rtl pre { direction: rtl; } 283 | 284 | .CodeMirror-code { 285 | outline: none; 286 | } 287 | 288 | /* Force content-box sizing for the elements where we expect it */ 289 | .CodeMirror-scroll, 290 | .CodeMirror-sizer, 291 | .CodeMirror-gutter, 292 | .CodeMirror-gutters, 293 | .CodeMirror-linenumber { 294 | -moz-box-sizing: content-box; 295 | box-sizing: content-box; 296 | } 297 | 298 | .CodeMirror-measure { 299 | position: absolute; 300 | width: 100%; 301 | height: 0; 302 | overflow: hidden; 303 | visibility: hidden; 304 | } 305 | 306 | .CodeMirror-cursor { 307 | position: absolute; 308 | pointer-events: none; 309 | } 310 | .CodeMirror-measure pre { position: static; } 311 | 312 | div.CodeMirror-cursors { 313 | visibility: hidden; 314 | position: relative; 315 | z-index: 3; 316 | } 317 | div.CodeMirror-dragcursors { 318 | visibility: visible; 319 | } 320 | 321 | .CodeMirror-focused div.CodeMirror-cursors { 322 | visibility: visible; 323 | } 324 | 325 | .CodeMirror-selected { background: #d9d9d9; } 326 | .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } 327 | .CodeMirror-crosshair { cursor: crosshair; } 328 | .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } 329 | .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } 330 | 331 | .cm-searching { 332 | background-color: #ffa; 333 | background-color: rgba(255, 255, 0, .4); 334 | } 335 | 336 | /* Used to force a border model for a node */ 337 | .cm-force-border { padding-right: .1px; } 338 | 339 | @media print { 340 | /* Hide the cursor when printing */ 341 | .CodeMirror div.CodeMirror-cursors { 342 | visibility: hidden; 343 | } 344 | } 345 | 346 | /* See issue #2901 */ 347 | .cm-tab-wrap-hack:after { content: ''; } 348 | 349 | /* Help users use markselection to safely style text background */ 350 | span.CodeMirror-selectedtext { background: none; } 351 | -------------------------------------------------------------------------------- /src/clojurescript/sass/_colors.scss: -------------------------------------------------------------------------------- 1 | $color-1: #f6f5f5; 2 | $color-2: #3e3e3e; 3 | 4 | $light-1: #CBD2D9; 5 | $light-2: #464B52; 6 | $light-3: #F5F7FA; // #FEFEFE; 7 | $light-4: #C8CFD8; 8 | $light-5: #4a4a4a; // unused 9 | $light-6: #09469C; 10 | $light-7: #8F99A7; 11 | $light-8: #EDF2F7; 12 | $light-9: rgba(0, 0, 0, 0.28); 13 | $light-10: #DFE3E8; // unused 14 | $light-11: #E0E0E0; // unused 15 | $light-12: #CCCCCC; // unused 16 | $light-13: #64826A; // unused 17 | $light-14: #721414; 18 | $light-15: #64826A; 19 | $light-16: #7DA196; 20 | $light-17: #181818; 21 | $light-18: #7da19687; 22 | $light-19: #F7DEC4; 23 | $light-20: #52606D; 24 | $light-21: #E4E7EB; 25 | -------------------------------------------------------------------------------- /src/clojurescript/sass/_modal.scss: -------------------------------------------------------------------------------- 1 | @use 'colors' as *; 2 | 3 | .modal-overlay { 4 | background-color: $light-1; 5 | bottom: 0; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | left: 0; 10 | position: fixed; 11 | right: 0; 12 | top: 0; 13 | opacity: 0; 14 | transform: scale(0.5); 15 | transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55); 16 | z-index: -100; 17 | &.centered { 18 | text-align: center; 19 | } 20 | .modal { 21 | background: $light-8; 22 | color: $color-2; 23 | box-shadow: 0 4px 12px $light-9; 24 | border-radius: 5px; 25 | max-width: 1200px; 26 | width: 90%; 27 | display: flex; 28 | flex-direction: column; 29 | height: 80%; 30 | .modal-header { 31 | text-align: right; 32 | #close-button { 33 | font-size: 28px; 34 | margin-right: 10px; 35 | } 36 | } 37 | .modal-header { 38 | border-bottom: 1px solid $color-1; 39 | margin-top: 0.5em; 40 | flex: 0 0 auto; 41 | margin-bottom: -45px; 42 | #modal-title { 43 | font-size: 2em; 44 | text-align: left; 45 | margin-left: 15px; 46 | } 47 | #close-button { 48 | float: right; 49 | top: -1.2em; 50 | position: relative; 51 | &:hover { 52 | cursor: pointer; 53 | } 54 | } 55 | } 56 | .modal-body { 57 | text-align: left; 58 | font-size: 20px; 59 | margin: 1em 15px 20px; 60 | flex: 1; 61 | display: flex; 62 | flex-direction: column; 63 | overflow: hidden; 64 | a { 65 | color: $color-2; 66 | text-decoration: none; 67 | transition: 0.5s; 68 | &:hover { 69 | color: lighten($color-2, 20%); 70 | text-decoration: underline; 71 | } 72 | } 73 | } 74 | } 75 | &.is-visible { 76 | opacity: 0.99; 77 | transform: scale(1); 78 | z-index: 800; 79 | } 80 | } 81 | 82 | .inject-btn-container { 83 | width: 100%; 84 | padding: 20px; 85 | box-sizing: border-box; 86 | } 87 | 88 | .inject-buttons { 89 | display: grid; 90 | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 91 | gap: 12px; 92 | width: 100%; 93 | } 94 | 95 | .inject-button { 96 | padding: 12px 16px; 97 | background-color: #f5f5f5; 98 | border: 1px solid #ddd; 99 | border-radius: 4px; 100 | font-size: 0.9rem; 101 | text-align: center; 102 | cursor: pointer; 103 | transition: all 0.2s ease; 104 | } 105 | 106 | #input-body-wrapper { 107 | height: 80%; 108 | .CodeMirror { 109 | height: 100%; 110 | } 111 | } -------------------------------------------------------------------------------- /src/clojurescript/sass/_nav.scss: -------------------------------------------------------------------------------- 1 | @use 'colors' as *; 2 | 3 | $icon-size: 36px; 4 | $dropdown-height: 400px; 5 | $primary-color: #0066cc; 6 | $text-color: #333333; 7 | $bg-color: #ffffff; 8 | $border-color: #e0e0e0; 9 | $shadow: 0 2px 10px rgba(0, 0, 0, 0.15); 10 | $transition-speed: 0.3s; 11 | 12 | .settings-icons-container { 13 | position: fixed; 14 | top: 16px; 15 | right: 16px; 16 | z-index: 1001; 17 | display: flex; 18 | flex-direction: row; 19 | gap: 12px; 20 | align-items: center; 21 | } 22 | 23 | .log-icon-wrapper { 24 | .log-icon { 25 | border-radius: 50%; 26 | background-color: $light-1; 27 | box-shadow: $shadow; 28 | width: $icon-size; 29 | height: $icon-size; 30 | border: none; 31 | display: flex; 32 | align-items: center; 33 | justify-content: center; 34 | cursor: pointer; 35 | transition: transform $transition-speed ease; 36 | padding: 0; 37 | 38 | &.opened { 39 | background-color: $light-3; 40 | } 41 | 42 | &:hover { 43 | transform: scale(1.1); 44 | } 45 | 46 | img { 47 | width: 20px; 48 | height: 20px; 49 | } 50 | } 51 | } 52 | 53 | .settings-container { 54 | position: relative; 55 | z-index: 1000; 56 | } 57 | 58 | .settings-icon-wrapper { 59 | z-index: 1001; 60 | .settings-icon { 61 | border-radius: 50%; 62 | background-color: $light-1; 63 | box-shadow: $shadow; 64 | width: $icon-size; 65 | height: $icon-size; 66 | border: none; 67 | display: flex; 68 | align-items: center; 69 | justify-content: center; 70 | cursor: pointer; 71 | transition: transform $transition-speed ease; 72 | padding: 0; 73 | 74 | &.opened { 75 | background-color: $light-3; 76 | } 77 | 78 | &:hover { 79 | transform: rotate(30deg); 80 | } 81 | 82 | img { 83 | width: 20px; 84 | height: 20px; 85 | } 86 | } 87 | } 88 | 89 | .settings-dropdown { 90 | position: fixed; 91 | top: 0; 92 | left: 0; 93 | width: 100%; 94 | height: $dropdown-height; 95 | background-color: $light-3; 96 | box-shadow: $shadow; 97 | transform: translateY(-100%); 98 | transition: transform $transition-speed ease; 99 | overflow-y: auto; 100 | color: $light-2; 101 | z-index: 99; 102 | 103 | &.active { 104 | transform: translateY(0); 105 | } 106 | } 107 | 108 | .settings-header { 109 | display: flex; 110 | justify-content: space-between; 111 | align-items: center; 112 | padding: 16px 24px; 113 | border-bottom: 1px solid $border-color; 114 | 115 | h3 { 116 | margin: 0; 117 | font-size: 1.6em; 118 | font-weight: 600; 119 | } 120 | 121 | .close-settings { 122 | background: none; 123 | border: none; 124 | font-size: 1.5rem; 125 | cursor: pointer; 126 | color: $text-color; 127 | padding: 0; 128 | width: 30px; 129 | height: 30px; 130 | display: flex; 131 | align-items: center; 132 | justify-content: center; 133 | border-radius: 50%; 134 | 135 | &:hover { 136 | background-color: rgba(0, 0, 0, 0.05); 137 | } 138 | } 139 | } 140 | 141 | .settings-content { 142 | padding: 16px 24px; 143 | h4 { 144 | margin: 0 0 12px 0; 145 | font-size: 1.2em; 146 | font-weight: 600; 147 | color: $light-2; 148 | } 149 | } 150 | 151 | .settings-section { 152 | margin-bottom: 24px; 153 | 154 | } 155 | 156 | .setting-option { 157 | margin-bottom: 12px; 158 | 159 | .pill-toggle { 160 | display: flex; 161 | width: 100%; 162 | max-width: 240px; 163 | height: 36px; 164 | border-radius: 4px; 165 | overflow: hidden; 166 | border: 1px solid $border-color; 167 | background-color: #f5f5f5; 168 | position: relative; 169 | } 170 | 171 | .pill-btn { 172 | flex: 1; 173 | border: none; 174 | background: transparent; 175 | font-size: 0.85rem; 176 | cursor: pointer; 177 | position: relative; 178 | z-index: 1; 179 | transition: color $transition-speed ease; 180 | font-weight: 500; 181 | 182 | &.active { 183 | color: white; 184 | } 185 | 186 | &:focus { 187 | outline: none; 188 | } 189 | } 190 | 191 | .pill-toggle::after { 192 | content: ''; 193 | position: absolute; 194 | top: 0; 195 | left: 0; 196 | width: 50%; 197 | height: 100%; 198 | background-color: $light-20; 199 | border-radius: 4px; 200 | transition: transform $transition-speed ease; 201 | z-index: 0; 202 | } 203 | 204 | .pill-btn.pill-right.active ~ .pill-toggle::after, 205 | .pill-toggle:has(.pill-right.active)::after { 206 | transform: translateX(100%); 207 | } 208 | 209 | label { 210 | display: flex; 211 | align-items: center; 212 | cursor: pointer; 213 | font-size: 0.95em; 214 | margin-bottom: 10px; 215 | margin-top: 20px; 216 | 217 | input { 218 | margin-right: 8px; 219 | } 220 | 221 | input[type="checkbox"], input[type="radio"] { 222 | accent-color: $primary-color; 223 | } 224 | } 225 | } 226 | 227 | .settings-footer { 228 | display: flex; 229 | justify-content: flex-end; 230 | padding: 16px 0; 231 | border-top: 1px solid $border-color; 232 | margin-top: 16px; 233 | } 234 | 235 | .settings-btn { 236 | padding: 8px 16px; 237 | border-radius: 4px; 238 | font-size: 0.9rem; 239 | cursor: pointer; 240 | transition: background-color $transition-speed ease; 241 | margin-left: 12px; 242 | } 243 | 244 | .settings-btn-save { 245 | background-color: $primary-color; 246 | border: 1px solid $primary-color; 247 | color: white; 248 | 249 | &:hover { 250 | background-color: darken($primary-color, 10%); 251 | } 252 | } 253 | 254 | .settings-btn-reset { 255 | background-color: transparent; 256 | border: 1px solid $border-color; 257 | color: $text-color; 258 | 259 | &:hover { 260 | background-color: rgba(0, 0, 0, 0.05); 261 | } 262 | } 263 | 264 | @media (min-width: 768px) { 265 | .settings-dropdown { 266 | width: 290px; 267 | right: 0; 268 | left: auto; 269 | border-bottom-left-radius: 4px; 270 | height: auto; 271 | max-height: 80vh; 272 | } 273 | } 274 | 275 | @keyframes slideDown { 276 | from { 277 | transform: translateY(-100%); 278 | } 279 | to { 280 | transform: translateY(0); 281 | } 282 | } 283 | 284 | @keyframes slideUp { 285 | from { 286 | transform: translateY(0); 287 | } 288 | to { 289 | transform: translateY(-100%); 290 | } 291 | } 292 | -------------------------------------------------------------------------------- /src/clojurescript/sass/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /src/clojurescript/sass/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | // Modern standard scrollbar styling 2 | * { 3 | // For Firefox 4 | scrollbar-width: thin; 5 | scrollbar-color: rgba(0, 0, 0, 0.3) transparent; 6 | 7 | // For Chrome, Edge, and Safari 8 | &::-webkit-scrollbar { 9 | width: 8px; 10 | height: 8px; 11 | background-color: transparent; 12 | } 13 | 14 | &::-webkit-scrollbar-track { 15 | background-color: transparent; 16 | border-radius: 10px; 17 | } 18 | 19 | &::-webkit-scrollbar-thumb { 20 | background-color: rgba(0, 0, 0, 0.3); 21 | border-radius: 10px; 22 | 23 | &:hover { 24 | background-color: rgba(0, 0, 0, 0.5); 25 | } 26 | } 27 | 28 | // Hide scrollbars when not hovering (auto-hide behavior) 29 | &:not(:hover)::-webkit-scrollbar-thumb { 30 | background-color: rgba(0, 0, 0, 0.15); 31 | } 32 | } 33 | 34 | // For Internet Explorer (if needed) 35 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 36 | * { 37 | -ms-overflow-style: -ms-autohiding-scrollbar; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/clojurescript/sass/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flow-monitor-ui", 3 | "version": "0.1.0", 4 | "main": "resources/public/assets/js/compiled/app.js", 5 | "license": "EPL1", 6 | "private": true, 7 | "devDependencies": { 8 | "sass": "^1.71.1" 9 | }, 10 | "scripts": { 11 | "css": "sass site.scss ../../../resources/public/assets/css/site.css", 12 | "watch:css": "yarn css -w" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/clojurescript/sass/site.scss: -------------------------------------------------------------------------------- 1 | @use 'normalize'; 2 | @use 'scrollbar'; 3 | @use 'colors' as *; 4 | @use "sass:color"; 5 | @use 'modal'; 6 | @use 'nav'; 7 | @use 'code_mirror'; 8 | 9 | @font-face { 10 | font-family: 'ProximaNova-Regular'; 11 | src: url('/assets/font/ProximaNova-Regular.otf') format('opentype'); 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | 16 | html, 17 | body { 18 | margin: 0; 19 | padding: 0; 20 | font-family: "ProximaNova-Regular", sans-serif; 21 | } 22 | 23 | body { 24 | height: 100vh; 25 | width: 100vw; 26 | margin-top: 100px; 27 | background-color: $light-1; 28 | } 29 | 30 | .animate__animated.animate__fadeInDown, .animate__animated.animate__fadeOutUp { 31 | --animate-duration: 500ms; 32 | } 33 | 34 | body.modal-open { 35 | overflow: hidden; 36 | } 37 | 38 | .stale { 39 | color: #E12D39; 40 | margin-top: 8px; 41 | text-align: center; 42 | width: 100%; 43 | } 44 | 45 | .row { 46 | display: flex; 47 | flex-direction: row; 48 | justify-content: center; 49 | gap: 10px; 50 | align-items: center; 51 | } 52 | 53 | .row-3 { 54 | display: flex; 55 | flex-direction: row; 56 | justify-content: center; 57 | gap: 10px; 58 | align-items: center; 59 | } 60 | 61 | .text-on-line { 62 | position: relative; 63 | width: 100%; 64 | text-align: center; 65 | margin: 20px 0 5px; 66 | 67 | &::before { 68 | content: ''; 69 | position: absolute; 70 | top: 50%; 71 | left: 0; 72 | right: 0; 73 | height: 1px; 74 | background: $light-4; 75 | z-index: 1; 76 | } 77 | 78 | > span { 79 | background: $light-3; 80 | color: $light-5; 81 | padding: 0 10px; 82 | position: relative; 83 | z-index: 2; 84 | font-size: 1.75em; 85 | } 86 | } 87 | 88 | .card-container { 89 | display: flex; 90 | flex-direction: column; 91 | align-items: center; 92 | margin-bottom: 40px; 93 | min-width: 220px; 94 | 95 | &.line-chan-style { 96 | margin-bottom: 20px; 97 | } 98 | 99 | .meter-cards, .output-cards { 100 | display: flex; 101 | flex-direction: row; 102 | gap: 15px; 103 | margin-bottom: 30px; 104 | width: 100%; 105 | 106 | .meter-card, .output-card { 107 | background: $light-3; 108 | border-radius: 3px; 109 | padding: 10px; 110 | box-shadow: 0 4px 12px $light-9; 111 | width: 100%; 112 | min-width: 150px; 113 | 114 | .buffer-info { 115 | font-size: 1em; 116 | color: $light-2; 117 | margin-bottom: -1px; 118 | } 119 | .meter-container { 120 | width: 100%; 121 | } 122 | 123 | } 124 | } 125 | 126 | .proc-card { 127 | background: $light-3; 128 | border-radius: 3px; 129 | width: 100%; 130 | display: inline-block; 131 | position: relative; 132 | transition: all 0.4s ease-in-out; 133 | //overflow: hidden; 134 | will-change: height; 135 | margin-bottom: 55px; 136 | 137 | &.expanded { 138 | .expanded-view { 139 | max-height: 500px; 140 | opacity: 1; 141 | visibility: visible; 142 | } 143 | 144 | .collapsed-view-container { 145 | max-height: 0; 146 | opacity: 0; 147 | visibility: hidden; 148 | } 149 | 150 | } 151 | 152 | &.collapsed { 153 | .expanded-view { 154 | max-height: 0; 155 | opacity: 0; 156 | visibility: hidden; 157 | } 158 | 159 | .collapsed-view-container { 160 | max-height: 100px; 161 | opacity: 1; 162 | visibility: visible; 163 | } 164 | } 165 | 166 | .chevron-icon { 167 | position: absolute; 168 | top: 8px; 169 | right: 10px; 170 | cursor: pointer; 171 | z-index: 10; 172 | 173 | img { 174 | height: 15px; 175 | transition: transform 0.3s ease-in-out; 176 | &.up { 177 | filter: brightness(0) saturate(100%) invert(100%); 178 | } 179 | } 180 | } 181 | 182 | .expanded-view { 183 | transition: all 0.4s ease-in-out; 184 | max-height: 0; // start collapsed 185 | opacity: 0; 186 | overflow: hidden; 187 | visibility: hidden; 188 | 189 | .chevron-icon { 190 | position: absolute; 191 | top: 8px; 192 | right: 10px; 193 | cursor: pointer; 194 | 195 | img { 196 | height: 15px; 197 | } 198 | } 199 | 200 | .header-labels { 201 | display: flex; 202 | justify-content: center; 203 | padding: 0 15px; 204 | 205 | .header-label { 206 | font-size: 1.75em; 207 | font-weight: 500; 208 | color: $light-5; 209 | text-align: center; 210 | width: 150px; 211 | } 212 | } 213 | 214 | .middle-section-one-container { 215 | box-sizing: border-box; 216 | background: $light-20; 217 | color: $light-21; 218 | border-radius: 2px; 219 | position: relative; 220 | padding: 10px 0; 221 | width: calc(100% - 20px); 222 | margin: auto; 223 | 224 | .status-icon { 225 | position: absolute; 226 | top: 5px; 227 | left: 3px; 228 | cursor: pointer; 229 | 230 | img { 231 | height: 30px; 232 | } 233 | } 234 | } 235 | 236 | 237 | .title-container { 238 | text-align: center; 239 | 240 | .title { 241 | font-size: 2.3em; 242 | font-weight: 600; 243 | margin: 0; 244 | color: white; 245 | } 246 | } 247 | 248 | .call-count { 249 | text-align: center; 250 | margin-top: 5px; 251 | } 252 | 253 | .action-buttons { 254 | display: flex; 255 | justify-content: center; 256 | gap: 15px; 257 | margin-top: 10px; 258 | 259 | .action-button { 260 | background: color.adjust($light-20, $lightness: 10%); 261 | border-radius: 4px; 262 | min-width: 40px; 263 | height: 30px; 264 | display: flex; 265 | align-items: center; 266 | justify-content: center; 267 | cursor: pointer; 268 | transition: background 0.2s; 269 | z-index: 10; 270 | 271 | &.error { 272 | background: $light-14; 273 | &:hover { 274 | background: color.adjust($light-14, $lightness: 5%); 275 | } 276 | } 277 | 278 | &:hover { 279 | background: color.adjust($light-20, $lightness: 15%); 280 | } 281 | 282 | img { 283 | width: 20px; 284 | height: 20px; 285 | } 286 | } 287 | } 288 | } 289 | 290 | .collapsed-view-container { 291 | transition: all 0.4s ease-in-out; 292 | max-height: 0; 293 | opacity: 0; 294 | overflow: hidden; 295 | visibility: hidden; 296 | 297 | .header-els { 298 | display: flex; 299 | justify-content: center; 300 | background: $light-20; 301 | 302 | .header-label { 303 | color: $light-20; 304 | text-align: center; 305 | width: 150px; 306 | } 307 | } 308 | .collapsed-view { 309 | background: $light-20; 310 | color: $light-21; 311 | border-radius: 3px; 312 | display: flex; 313 | justify-content: space-between; 314 | align-items: center; 315 | padding: 0 20px; 316 | height: 60px; 317 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 318 | 319 | .title-container { 320 | .title { 321 | font-size: 2em; 322 | font-weight: 600; 323 | color: $light-21; 324 | margin: 0; 325 | letter-spacing: 1px; 326 | } 327 | } 328 | 329 | .action-buttons { 330 | display: flex; 331 | justify-content: flex-start; 332 | align-items: center; 333 | gap: 2px; 334 | flex-grow: 1; 335 | padding-left: 10px; 336 | 337 | .action-button { 338 | background: transparent; 339 | min-width: 40px; 340 | height: 40px; 341 | display: flex; 342 | align-items: center; 343 | justify-content: center; 344 | cursor: pointer; 345 | 346 | img { 347 | width: 20px; 348 | height: 20px; 349 | filter: brightness(0) saturate(100%) invert(100%); // White icons 350 | } 351 | 352 | &:hover { 353 | transform: scale(1.1); 354 | } 355 | } 356 | } 357 | 358 | } 359 | 360 | .output-section-collapsed { 361 | width: 100%; 362 | display: flex; 363 | flex-direction: column; 364 | align-items: center; 365 | box-sizing: border-box; 366 | 367 | .output-container { 368 | display: flex; 369 | flex-direction: row; 370 | gap: 15px; 371 | justify-content: center; 372 | align-items: center; 373 | width: calc(100% - 14px); 374 | margin: 0 7px; 375 | padding: 0 0; 376 | box-sizing: border-box; 377 | 378 | .output { 379 | flex: 1; 380 | min-width: 110px; 381 | color: $light-5; 382 | text-align: center; 383 | display: flex; 384 | justify-content: center; 385 | align-items: center; 386 | white-space: nowrap; 387 | } 388 | } 389 | } 390 | } 391 | 392 | .output-section { 393 | width: 100%; 394 | display: flex; 395 | flex-direction: column; 396 | align-items: center; 397 | box-sizing: border-box; 398 | 399 | .output-container { 400 | display: flex; 401 | flex-direction: row; 402 | gap: 15px; 403 | justify-content: center; 404 | align-items: center; 405 | width: calc(100% - 14px); 406 | margin: 0 7px; 407 | padding: 0 0; 408 | box-sizing: border-box; 409 | 410 | .output { 411 | flex: 1; 412 | min-width: 110px; 413 | padding: 0 8px; 414 | font-size: 1.75em; 415 | color: $light-5; 416 | text-align: center; 417 | height: 40px; 418 | display: flex; 419 | justify-content: center; 420 | align-items: center; 421 | white-space: nowrap; 422 | } 423 | } 424 | } 425 | } 426 | } 427 | 428 | .output-cards { 429 | display: flex; 430 | flex-direction: row; 431 | gap: 15px; 432 | margin-top: 15px; 433 | 434 | .collapsible-element { 435 | overflow: hidden; 436 | } 437 | 438 | .collapsible-meter { 439 | overflow: hidden; 440 | } 441 | 442 | .collapsing { 443 | transition: height 0.3s ease; 444 | } 445 | 446 | .output-card { 447 | background: $light-3; 448 | border-radius: 5px; 449 | padding: 10px; 450 | box-shadow: 0 4px 12px $light-9; 451 | width: 100%; 452 | min-width: 150px; 453 | 454 | .output { 455 | font-size: 1.75em; 456 | color: $light-5; 457 | white-space: nowrap; 458 | } 459 | } 460 | } 461 | 462 | .meter-wrapper { 463 | width: 100%; 464 | 465 | .label-container { 466 | display: flex; 467 | justify-content: space-between; 468 | width: 100%; 469 | margin-top: 5px; 470 | margin-bottom: -1px; 471 | color: $light-2; 472 | } 473 | 474 | .diverging-meter-container { 475 | width: 100%; 476 | height: 1.2em; 477 | border: 1px solid $light-17; 478 | border-radius: 2px; 479 | position: relative; 480 | display: inline-block; 481 | overflow: hidden; 482 | 483 | .meter-left { 484 | position: absolute; 485 | left: 0; 486 | top: 0; 487 | width: 50%; 488 | height: 100%; 489 | background: linear-gradient(to right, 490 | #E12D39 0%, 491 | #F0B429 50%, 492 | #014D40 100%); 493 | } 494 | .meter-right { 495 | position: absolute; 496 | right: 0; 497 | top: 0; 498 | width: 50%; 499 | height: 100%; 500 | background: linear-gradient(to right, 501 | #014D40 0%, 502 | #F0B429 50%, 503 | #E12D39 100%); 504 | } 505 | .meter-cover-left { 506 | position: absolute; 507 | left: 0; 508 | top: 0; 509 | width: 50%; 510 | height: 100%; 511 | background: white; 512 | transition: width 0.3s linear; 513 | } 514 | .meter-cover-right { 515 | position: absolute; 516 | right: 0; 517 | top: 0; 518 | width: 50%; 519 | height: 100%; 520 | background: white; 521 | transition: width 0.3s linear; 522 | } 523 | .meter-center { 524 | position: absolute; 525 | left: 49.5%; 526 | top: 0; 527 | width: 2px; 528 | height: 100%; 529 | background: #333; 530 | z-index: 1; 531 | } 532 | } 533 | } 534 | 535 | .meter-container { 536 | text-align: center; 537 | background: rgb(230,244,234); 538 | background: linear-gradient(90deg, #014D40 0%, #F0B429 50%, #E12D39 100%); 539 | width: 90%; 540 | height: 1.2em; 541 | border: 1px solid black; 542 | border-radius: 2px; 543 | overflow: hidden; 544 | position: relative; 545 | .meter { 546 | position: absolute; 547 | right: 0; 548 | top: 0; 549 | width: 90%; 550 | height: 100%; 551 | background: white; 552 | transition: width 0.3s linear; 553 | } 554 | } 555 | 556 | .tabs { 557 | display: flex; 558 | align-items: center; 559 | flex-direction: row; 560 | flex: 0 0 auto; 561 | font-family: "ProximaNova-Regular", sans-serif; 562 | .tab { 563 | flex-grow: 1; 564 | font-size: 1em; 565 | height: 50px; 566 | background: $light-4; 567 | border-bottom: 1px solid $light-7; 568 | border-left: 1px solid $light-7; 569 | border-right: 1px solid $light-7; 570 | border-top: 2px solid $light-4; 571 | display: flex; 572 | align-items: center; 573 | padding-left: 12px; 574 | span { 575 | left: 15px; 576 | position: relative; 577 | cursor: pointer; 578 | } 579 | &.active { 580 | background: $light-3; 581 | font-weight: bold; 582 | border: none; 583 | border-top: 3px solid $light-2; 584 | } 585 | } 586 | } 587 | 588 | .panel-contents { 589 | flex: 1; 590 | min-height: 0; 591 | overflow: hidden; 592 | 593 | #error-display { 594 | height: 99.9%; 595 | overflow-y: auto; 596 | background: $light-3; 597 | padding: 10px; 598 | 599 | &::after { 600 | content: ''; 601 | display: block; 602 | height: 20px; 603 | } 604 | 605 | pre { 606 | font-family: 'Source Code Pro', monospace; 607 | margin: 0; 608 | padding: 0 10px; 609 | overflow: visible; 610 | height: auto; 611 | &:not(:last-child) { 612 | border-bottom: 1px solid $light-7; 613 | margin-bottom: 15px; 614 | padding-bottom: 15px; 615 | } 616 | } 617 | } 618 | 619 | #log-display { 620 | height: 99.9%; 621 | overflow-y: auto; 622 | background: $light-3; 623 | padding: 10px; 624 | margin: 20px 0; 625 | 626 | &::after { 627 | content: ''; 628 | display: block; 629 | height: 20px; 630 | } 631 | 632 | pre { 633 | font-family: 'Source Code Pro', monospace; 634 | margin: 0; 635 | padding: 0 10px; 636 | overflow: visible; 637 | height: auto; 638 | &:not(:last-child) { 639 | border-bottom: 1px solid $light-7; 640 | margin-bottom: 15px; 641 | padding-bottom: 15px; 642 | } 643 | } 644 | } 645 | } 646 | 647 | .code-block { 648 | background-color: lighten($light-20, 8%); 649 | border-radius: 2px; 650 | padding: 5px; 651 | margin: 10px; 652 | overflow-x: auto; 653 | overflow-y: auto; 654 | max-height: 145px; 655 | code { 656 | display: block; 657 | //font-family: monospace; 658 | white-space: pre; 659 | line-height: 1.3; 660 | overflow-x: auto; 661 | overflow-y: auto; 662 | scrollbar-width: auto; 663 | } 664 | } 665 | 666 | .centered-button-container { 667 | position: fixed; 668 | top: 0; 669 | left: 0; 670 | width: 100%; 671 | height: 100vh; 672 | display: flex; 673 | justify-content: center; 674 | align-items: center; 675 | z-index: 1000; 676 | } 677 | 678 | .button { 679 | padding: 12px 24px; 680 | font-weight: 600; 681 | background-color: $light-15; 682 | color: $light-17; 683 | border: none; 684 | border-radius: 2px; 685 | cursor: pointer; 686 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 687 | text-align: center; 688 | transition: all 0.3s ease; 689 | font-size: 1.2em; 690 | 691 | &:hover { 692 | background-color: lighten($light-15, 5%); 693 | transform: translateY(-2px); 694 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 695 | } 696 | 697 | &:active { 698 | transform: translateY(0); 699 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 700 | } 701 | } 702 | 703 | #alerts { 704 | display: flex; 705 | position: absolute; 706 | flex-direction: column; 707 | font-weight: bold; 708 | font-size: 1.2em; 709 | right: 32px; 710 | z-index: 999; 711 | top: 40px; 712 | &:hover { 713 | cursor: pointer; 714 | } 715 | .notification { 716 | margin-top: 15px; 717 | padding: 20px; 718 | text-align: center; 719 | border: 1px solid #3e3e3e; 720 | box-shadow: 1px 6px 9px 0 rgba(0, 0, 0, 0.18), 0 6px 15px 0 rgba(0, 0, 0, 0.15); 721 | position: relative; 722 | &.is-success { 723 | background: $light-6; 724 | color: $light-3; 725 | } 726 | &.is-error { 727 | background-color: #A88B47; 728 | color: #000000; 729 | } 730 | &.is-danger { 731 | background-color: #771C14; 732 | color: #D9CAC1; 733 | } 734 | span { 735 | position: absolute; 736 | right: 5px; 737 | top: 2px; 738 | } 739 | } 740 | } 741 | 742 | .dot-pattern { 743 | position: absolute; 744 | top: 0; 745 | left: 0; 746 | width: 100%; 747 | height: 100%; 748 | background: rgba(127, 127, 127, 0.5) radial-gradient(black 33%, transparent 33%); 749 | background-size: 3px 3px; 750 | pointer-events: none; 751 | z-index: 5; 752 | } 753 | 754 | .table-container { 755 | width: 100%; 756 | overflow-x: auto; 757 | overflow-y: auto; 758 | margin: 20px 0; 759 | font-size: 1em; 760 | border: 1px solid $light-11; 761 | position: relative; 762 | } 763 | 764 | .data-table { 765 | width: 100%; 766 | border-collapse: collapse; 767 | 768 | th, td { 769 | padding: 10px 15px; 770 | border-bottom: 1px solid $light-11; 771 | text-align: left; 772 | white-space: nowrap; 773 | } 774 | 775 | th { 776 | background-color: $light-7; 777 | color: $light-3; 778 | font-weight: 600; 779 | position: sticky; 780 | top: 0; 781 | z-index: 10; 782 | } 783 | 784 | tr { 785 | background-color: $light-3; 786 | } 787 | 788 | tr:hover { 789 | background-color: color.adjust($light-3, $lightness: 10%);; 790 | } 791 | } 792 | 793 | .controls-row { 794 | display: flex; 795 | align-items: stretch; 796 | margin-bottom: 15px; 797 | width: 100%; 798 | gap: 12px; 799 | padding: 0 2px; 800 | } 801 | 802 | .filter-container { 803 | flex: 1 1 70%; 804 | 805 | input { 806 | width: 100%; 807 | height: 36px; 808 | padding: 8px 12px; 809 | border: 1px solid $light-12; 810 | border-radius: 2px; 811 | box-sizing: border-box; 812 | font-size: 14px; 813 | } 814 | } 815 | 816 | .filter-container-full { 817 | flex: 1 1 100%; 818 | } 819 | 820 | .dropdown-select { 821 | flex: 0 0 28%; 822 | min-width: 80px; 823 | max-width: 180px; 824 | height: 36px; 825 | padding: 8px 24px 8px 12px; 826 | border: 1px solid $light-12; 827 | border-radius: 2px; 828 | background-color: white; 829 | font-size: 14px; 830 | box-sizing: border-box; 831 | appearance: none; 832 | background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); 833 | background-repeat: no-repeat; 834 | background-position: right 8px center; 835 | background-size: 12px; 836 | } 837 | 838 | .modal-body-pad { 839 | padding: 16px; 840 | box-sizing: border-box; 841 | display: flex; 842 | flex-direction: column; 843 | height: 70vh; 844 | 845 | .panel-contents { 846 | flex: 1; 847 | min-height: 0; 848 | display: flex; 849 | flex-direction: column; 850 | position: relative; 851 | } 852 | } 853 | --------------------------------------------------------------------------------